113230 - reversing js console sort order is slow (patch by neil@parkwaycc.co.uk), r=blake, sr=me

xpfe/components/console/resources/content/console.css

@@ -1,10 +1,10 @@
 
 .console-box {
   -moz-binding: url("chrome://global/content/consoleBindings.xml#console-box");
+  overflow: auto;
 }
 
 .console-rows {
-  overflow: auto;
   -moz-user-focus: normal;
 }
 
@@ -31,25 +31,25 @@
   
 /* :::::::::: hiding and showing of rows for each mode :::::::::: */
 
-.console-box[mode="Warnings"] > box > .console-rows 
+.console-box[mode="Warnings"] > .console-box-internal > .console-rows 
     > .console-row[type="error"],
-.console-box[mode="Messages"] > box > .console-rows 
+.console-box[mode="Messages"] > .console-box-internal > .console-rows 
     > .console-row[type="error"]
 {
   display: none;
 }  
   
-.console-box[mode="Errors"] > box > .console-rows 
+.console-box[mode="Errors"] > .console-box-internal > .console-rows 
     > .console-row[type="warning"],
-.console-box[mode="Messages"] > box > .console-rows 
+.console-box[mode="Messages"] > .console-box-internal > .console-rows 
     > .console-row[type="warning"]
 {
   display: none;
 }  
   
-.console-box[mode="Errors"] > box > .console-rows 
+.console-box[mode="Errors"] > .console-box-internal > .console-rows 
     > .console-row[type="message"],
-.console-box[mode="Warnings"] > box > .console-rows 
+.console-box[mode="Warnings"] > .console-box-internal > .console-rows 
     > .console-row[type="message"]
 {
   display: none;

xpfe/components/console/resources/content/console.js

@@ -75,21 +75,16 @@ function clearConsole()
 
 function changeSortOrder(aOrder)
 {
-  var order = aOrder == -1 ? -1 : 1; // default to 1
-  gConsole.sortOrder = order;
-  document.persist("ConsoleBox", "sortOrder");
-  updateSortCommand(order);
+  updateSortCommand(gConsole.sortOrder = aOrder);
 }
 
 function updateSortCommand(aOrder)
 {
-  var order = aOrder == -1 ? -1 : 1; // default to 1
-  var orderString = order == 1 ? "Ascend" : "Descend";
+  var orderString = aOrder == 'reverse' ? "Descend" : "Ascend";
   var bc = document.getElementById("Console:sort"+orderString);
   bc.setAttribute("checked", true);  
 
-  order *= -1;
-  orderString = order == 1 ? "Ascend" : "Descend";
+  orderString = aOrder == 'reverse' ? "Ascend" : "Descend";
   bc = document.getElementById("Console:sort"+orderString);
   bc.setAttribute("checked", false);
 }

xpfe/components/console/resources/content/console.xul

@@ -56,10 +56,10 @@ Contributor(s): Joe Hewitt <hewitt@netscape.com>
   
   <broadcaster id="Console:sortAscend" label="&sortFirst.label;" 
                accesskey="&sortFirst.accesskey;"
-               oncommand="changeSortOrder(1);"/>
+               oncommand="changeSortOrder('forward');"/>
   <broadcaster id="Console:sortDescend" label="&sortLast.label;"
                accesskey="&sortLast.accesskey;"
-               oncommand="changeSortOrder(-1);"/>
+               oncommand="changeSortOrder('reverse');"/>
 
   <broadcaster id="Console:toggleToolbarMode" label="&toolbarMode.label;" 
                oncommand="toggleToolbar(this);" checked="true" 
@@ -144,7 +144,7 @@ Contributor(s): Joe Hewitt <hewitt@netscape.com>
   </toolbar>
 </toolbox>
   
-<hbox id="ConsoleBox" class="console-box" flex="1" context="ConsoleContext"/>
+<vbox id="ConsoleBox" class="console-box" flex="1" context="ConsoleContext" persist="sortOrder"/>
 
 <iframe id="Evaluator" collapsed="true"/>
 

xpfe/components/console/resources/content/consoleBindings.xml

@@ -9,9 +9,9 @@
   <binding id="console-box" extends="xul:box">
     <content>  
       <xul:stringbundle src="chrome://global/locale/console.properties" role="string-bundle"/>
-      <xul:box class="console-box-internal" flex="1">
-        <xul:vbox class="console-rows" flex="1" role="console-rows"/>
-      </xul:box>
+      <xul:vbox class="console-box-internal">
+        <xul:vbox class="console-rows" role="console-rows" inherits="dir=sortOrder"/>
+      </xul:vbox>
     </content>
   
     <implementation>
@@ -28,14 +28,8 @@
       </property>
     
       <property name="sortOrder">
-        <getter>return this.mSort</getter>
-        <setter><![CDATA[
-          if (this.mSort != val) {
-            this.mSort = val == -1 ? -1 : 1;
-            this.setAttribute("sortOrder", this.mSort);
-            this.reverseRows();
-          }
-        ]]></setter>
+        <getter>return this.getAttribute("sortOrder");</getter>
+        <setter>this.setAttribute("sortOrder", val); return val;</setter>
       </property>
       <field name="mSelectedItem">null</field>
       <property name="selectedItem">
@@ -72,9 +66,6 @@
             return;
           }          
                     
-          // initialize properties from attributes
-          this.mSort = this.getAttribute("sortOrder") == -1 ? -1 : 1;
-          
           if (this.hasAttribute("mode"))
             this.mMode = this.getAttribute("mode");
           else
@@ -190,7 +181,7 @@
           this.mCService.logStringMessage("__CLEAR__");
           this.mCount = 0;
           
-          var newRows = this.createConsoleRowBox();
+          var newRows = this.mConsoleRowBox.cloneNode(false);
           this.mConsoleRowBox.parentNode.replaceChild(newRows, this.mConsoleRowBox);
           this.mConsoleRowBox = newRows;
         ]]></body>
@@ -202,16 +193,6 @@
             this.copyString(this.mSelectedItem.toString());
         ]]></body>
       </method>
-
-      <method name="createConsoleRowBox">
-        <body><![CDATA[
-          var box = document.createElement("box");
-          box.setAttribute("class", "console-rows");
-          box.setAttribute("orient", "vertical");
-          box.setAttribute("flex", "1");
-          return box;
-        ]]></body>
-      </method>
                   
       <method name="createConsoleRow">
         <body><![CDATA[
@@ -226,17 +207,8 @@
       <method name="appendConsoleRow">
         <parameter name="aRow"/>
         <body><![CDATA[
-          if (this.mSort == 1) {
-            this.mConsoleRowBox.appendChild(aRow);
-          } else if (this.mSort == -1) {
-            if (this.mConsoleRowBox.childNodes.length == 0)
-              this.mConsoleRowBox.appendChild(aRow);
-            else
-              this.mConsoleRowBox.insertBefore(aRow, this.mConsoleRowBox.firstChild);
-          }
-                    
-          ++this.mCount;
-          if (this.mCount > 250) this.deleteFirst();
+          this.mConsoleRowBox.appendChild(aRow);
+          if (++this.mCount > 250) this.deleteFirst();
         ]]></body>
       </method>
             
@@ -248,21 +220,6 @@
         ]]></body>
       </method>
             
-      <method name="reverseRows">
-        <body><![CDATA[
-          var box = this.mConsoleRowBox;
-          var row;
-          for (var i = 0; i < box.childNodes.length; ++i) {
-            row = box.firstChild;
-            box.removeChild(row);
-            if (i == 0)
-              box.appendChild(row);
-            else
-              box.insertBefore(row, box.childNodes[box.childNodes.length - i]);
-          }
-        ]]></body>
-      </method>
-      
       <!-- UTILITY FUNCTIONS -->
       
       <!-- We need this method only because document.getAnonymousElementByAttribute