Adding auto-highlite code. This might be a bit contentious, but it seemed to get good response on the DEVEL list, so trying it out. Things to note: the clicked color isn't the best, but we can also remove that and ONLY have mouseover coloring if we can't find a better color. The JavaScript was mostly swiped from phpMyAdmin, and it is fairly well written and fairly mature; I don't think there will be widespread problems with it. That said, this is a pretty big leap for SquirrelMail. We might want to have this be a user-configurable option instead of making it default when javascript_on is active. Unfortunately, doing it as a plugin is pretty much out of the question. Let's see how it goes. If things go really well, I'd like to port this to STABLE, since this stuff probably won't even see the light of day if we get templating in to 1.5.

functions/mailbox_display.php

@@ -98,7 +98,8 @@ function printMessageInfo($aMsg) {
         $email_address,
         $show_recipient_instead,    /* show recipient name instead of default identity */
         $use_icons,                 /* indicates to use icons or text markers */
-        $icon_theme;                /* icons theming */
+        $icon_theme,                /* icons theming */
+        $javascript_on;
 
     $color_string = $color[4];
 
@@ -302,7 +303,28 @@ function printMessageInfo($aMsg) {
     $sSubject = str_replace(' ', ' ', decodeHeader($sSubject));
     $subject = processSubject($sSubject, $iIndent);
 
-    echo html_tag( 'tr','','','','valign="top"') . "\n";
+
+    $row_extra = 'valign="top"';
+
+
+    // this stuff does the auto row highlighting on mouseover
+    //
+    if ($javascript_on) {
+        $mouseoverColor = $color[5];
+        $clickedColor = $color[2];
+        $row_extra .= ' onmouseover="setPointer(this, ' . $t . ', \'over\', \'' . $hlt_color . '\', \'' . $mouseoverColor . '\', \'' . $clickedColor . '\');" onmouseout="setPointer(this, ' . $t . ', \'out\', \'' . $hlt_color . '\', \'' . $mouseoverColor . '\', \'' . $clickedColor . '\');" onmousedown="setPointer(this, ' . $t . ', \'click\', \'' . $hlt_color . '\', \'' . $mouseoverColor . '\', \'' . $clickedColor . '\');"';
+    }
+
+
+    echo html_tag( 'tr','','','',$row_extra) . "\n";
+
+
+    // this does the auto-checking of the checkbox no matter 
+    // where on the row you click
+    //
+    if ($javascript_on)
+        $javascript_auto_click = ' onMouseDown="if (document.getElementById(msg[' . $t . '])) { document.getElementById(msg[' . $t . ']).checked = (document.getElementById(msg[' . $t . ']).checked ? false : true); }"';
+
 
     if (sizeof($index_order)) {
 
@@ -311,24 +333,30 @@ function printMessageInfo($aMsg) {
         // except the subject column, since it is the link that opens
         // the message view
         //
-        $get_next_two = 0;
-        $last_order_part = 0;
-        $last_last_order_part = 0;
+        // if $javascript_on is set, then the highlighting code takes 
+        // care of this; just skip it
+        //
         $show_label_columns = array();
-        foreach ($index_order as $index_order_part) {
-            if ($index_order_part == 1) {
-                $get_next_two = 1;
-                if ($last_last_order_part != 4)
-                   $show_label_columns[] = $last_last_order_part;
-                if ($last_order_part != 4)
-                   $show_label_columns[] = $last_order_part;
-
-            } else if ($get_next_two > 0 && $get_next_two < 3 && $index_order_part != 4) {
-                $show_label_columns[] = $index_order_part;
-                $get_next_two++;
+        if (!$javascript_on) {
+            $get_next_two = 0;
+            $last_order_part = 0;
+            $last_last_order_part = 0;
+            foreach ($index_order as $index_order_part) {
+    
+                if ($index_order_part == 1) {
+                    $get_next_two = 1;
+                    if ($last_last_order_part != 4)
+                       $show_label_columns[] = $last_last_order_part;
+                    if ($last_order_part != 4)
+                       $show_label_columns[] = $last_order_part;
+    
+                } else if ($get_next_two > 0 && $get_next_two < 3 && $index_order_part != 4) {
+                    $show_label_columns[] = $index_order_part;
+                    $get_next_two++;
+                }
+                $last_last_order_part = $last_order_part;
+                $last_order_part = $index_order_part;
             }
-            $last_last_order_part = $last_order_part;
-            $last_order_part = $index_order_part;
         }
 
 
@@ -360,7 +388,7 @@ function printMessageInfo($aMsg) {
                             $label_start . $italic . $bold . $flag . $fontstr . $senderName .
                             $fontstr_end . $flag_end . $bold_end . $italic_end . $label_end,
                             'left',
-                            $hlt_color, $title );
+                            $hlt_color, $title . $javascript_auto_click);
                 break;
             case 3: /* date */
                 if ($sDate == '') {
@@ -371,7 +399,7 @@ function printMessageInfo($aMsg) {
                             $fontstr_end . $flag_end . $bold_end . $label_end,
                             'center',
                             $hlt_color,
-                            'style="white-space: nowrap;"' );
+                            'style="white-space: nowrap;"' . $javascript_auto_click );
                 break;
             case 4: /* subject */
                 $td_str = $bold;
@@ -390,7 +418,7 @@ function printMessageInfo($aMsg) {
                     $td_str .= " title=\"$title\"";
                 }
                 $td_str .= ">$flag$subject$flag_end</a>$bold_end";
-                echo html_tag( 'td', $td_str, 'left', $hlt_color );
+                echo html_tag( 'td', $td_str, 'left', $hlt_color, $javascript_auto_click );
                 break;
             case 5: /* flags */
 
@@ -442,7 +470,7 @@ function printMessageInfo($aMsg) {
                                 $label_start . $td_str . $label_end,
                                 'right',
                                 $hlt_color,
-                                'style="white-space: nowrap;"' );
+                                'style="white-space: nowrap;"' . $javascript_auto_click );
                 }
 
                 // plain text message markers
@@ -480,7 +508,7 @@ function printMessageInfo($aMsg) {
                                 $label_start . $td_str . $label_end,
                                 'center',
                                 $hlt_color,
-                                'style="white-space: nowrap;"' );
+                                'style="white-space: nowrap;"' . $javascript_auto_click );
                 }
                 break;
             case 6: /* size */
@@ -488,7 +516,7 @@ function printMessageInfo($aMsg) {
                             $label_start . $bold . $fontstr . show_readable_size($iSize) .
                             $fontstr_end . $bold_end . $label_end,
                             'right',
-                            $hlt_color );
+                            $hlt_color, $javascript_auto_click );
                 break;
             }
             ++$col;

functions/page_header.php

@@ -263,6 +263,152 @@ function displayPageHeader($color, $mailbox, $xtra='', $session=false) {
             displayHtmlHeader ('SquirrelMail', $js);
             break;
 
+        case 'src/right_main.php':
+// following code graciously stolen from phpMyAdmin project at:
+// http://www.phpmyadmin.net
+            $js = <<<EOS
+/**
+ * This array is used to remember mark status of rows in browse mode
+ */
+var marked_row = new Array;
+
+
+/**
+ * Sets/unsets the pointer and marker in browse mode
+ *
+ * @param   object    the table row
+ * @param   integer  the row number
+ * @param   string    the action calling this script (over, out or click)
+ * @param   string    the default background color
+ * @param   string    the color to use for mouseover
+ * @param   string    the color to use for marking a row
+ *
+ * @return  boolean  whether pointer is set or not
+ */
+function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
+{
+    var theCells = null;
+
+    // 1. Pointer and mark feature are disabled or the browser can't get the
+    //    row -> exits
+    if ((thePointerColor == '' && theMarkColor == '')
+        || typeof(theRow.style) == 'undefined') {
+        return false;
+    }
+
+    // 2. Gets the current row and exits if the browser can't get it
+    if (typeof(document.getElementsByTagName) != 'undefined') {
+        theCells = theRow.getElementsByTagName('td');
+    }
+    else if (typeof(theRow.cells) != 'undefined') {
+        theCells = theRow.cells;
+    }
+    else {
+        return false;
+    }
+
+    // 3. Gets the current color...
+    var rowCellsCnt  = theCells.length;
+    var domDetect    = null;
+    var currentColor = null;
+    var newColor     = null;
+    // 3.1 ... with DOM compatible browsers except Opera that does not return
+    //         valid values with "getAttribute"
+    if (typeof(window.opera) == 'undefined'
+        && typeof(theCells[0].getAttribute) != 'undefined') {
+        currentColor = theCells[0].getAttribute('bgcolor');
+        domDetect    = true;
+    }
+    // 3.2 ... with other browsers
+    else {
+        currentColor = theCells[0].style.backgroundColor;
+        domDetect    = false;
+    } // end 3
+
+    // 3.3 ... Opera changes colors set via HTML to rgb(r,g,b) format so fix it
+    if (currentColor.indexOf("rgb") >= 0)
+    {
+        var rgbStr = currentColor.slice(currentColor.indexOf('(') + 1,
+                                     currentColor.indexOf(')'));
+        var rgbValues = rgbStr.split(",");
+        currentColor = "#";
+        var hexChars = "0123456789ABCDEF";
+        for (var i = 0; i < 3; i++)
+        {
+            var v = rgbValues[i].valueOf();
+            currentColor += hexChars.charAt(v/16) + hexChars.charAt(v%16);
+        }
+    }
+
+    // 4. Defines the new color
+    // 4.1 Current color is the default one
+    if (currentColor == ''
+        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
+        if (theAction == 'over' && thePointerColor != '') {
+            newColor              = thePointerColor;
+        }
+        else if (theAction == 'click' && theMarkColor != '') {
+            newColor              = theMarkColor;
+            marked_row[theRowNum] = true;
+            // deactivated onclick marking of the checkbox because it's also executed
+            // when an action (clicking on the checkbox itself) on a single item is 
+            // performed. Then the checkbox would get deactived, even though we need 
+            // it activated. Maybe there is a way to detect if the row was clicked, 
+            // and not an item therein...
+            document.getElementById('msg[' + theRowNum + ']').checked = true;
+        }
+    }
+    // 4.1.2 Current color is the pointer one
+    else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
+             && (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
+        if (theAction == 'out') {
+            newColor              = theDefaultColor;
+        }
+        else if (theAction == 'click' && theMarkColor != '') {
+            newColor              = theMarkColor;
+            marked_row[theRowNum] = true;
+            document.getElementById('msg[' + theRowNum + ']').checked = true;
+        }
+    }
+    // 4.1.3 Current color is the marker one
+    else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
+        if (theAction == 'click') {
+            newColor              = (thePointerColor != '')
+                                  ? thePointerColor
+                                  : theDefaultColor;
+            marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
+                                  ? true
+                                  : null;
+            document.getElementById('msg[' + theRowNum + ']').checked = false;
+        }
+    } // end 4
+
+    // 5. Sets the new color...
+    if (newColor) {
+        var c = null;
+        // 5.1 ... with DOM compatible browsers except Opera
+        if (domDetect) {
+            for (c = 0; c < rowCellsCnt; c++) {
+                theCells[c].setAttribute('bgcolor', newColor, 0);
+            } // end for
+        }
+        // 5.2 ... with other browsers
+        else {
+            for (c = 0; c < rowCellsCnt; c++) {
+                theCells[c].style.backgroundColor = newColor;
+            }
+        }
+    } // end 5
+
+    return true;
+} // end of the 'setPointer()' function
+EOS;
+            $js = "\n".'<script language="JavaScript" type="text/javascript">' .
+                        "\n<!--\n" . $js . "// -->\n</script>\n";
+            $onload = '';
+            displayHtmlHeader ('SquirrelMail', $js);
+            break;
+
         default:
             $js = '<script language="JavaScript" type="text/javascript">' .
                  "\n<!--\n" .
@@ -451,4 +597,4 @@ function compose_Header($color, $mailbox) {
     echo "<body text=\"$color[8]\" bgcolor=\"$color[4]\" link=\"$color[7]\" vlink=\"$color[7]\" alink=\"$color[7]\" $onload>\n\n";
 }
 
-?>
+?>