Bug 874363 - The timeline header in the Netmonitor should be clickable; r=vporof
authorGeoff Lankow <geoff@darktrojan.net>
Tue, 04 Jun 2013 19:55:48 +1200
changeset 134068 8f9ba85eb61c673f18dfca106240c9e72c751ccc
parent 134067 345e4c957e8294935c4299df7b8ebde41d8198c4
child 134069 b925d7cdd09acc8a8b1ad1f8e4ab997857a60d0a
child 134139 0f23a2e50620f0932469697df5f8fbe1596b34fa
push id29035
push useremorley@mozilla.com
push dateWed, 05 Jun 2013 11:20:37 +0000
treeherdermozilla-inbound@627af04199a5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs874363
milestone24.0a1
first release with
nightly linux32
8f9ba85eb61c / 24.0a1 / 20130605031156 / files
nightly linux64
8f9ba85eb61c / 24.0a1 / 20130605031156 / files
nightly mac
8f9ba85eb61c / 24.0a1 / 20130605031156 / files
nightly win32
8f9ba85eb61c / 24.0a1 / 20130605031156 / files
nightly win64
8f9ba85eb61c / 24.0a1 / 20130605031156 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 874363 - The timeline header in the Netmonitor should be clickable; r=vporof
browser/devtools/netmonitor/netmonitor-view.js
browser/devtools/netmonitor/netmonitor.xul
browser/devtools/netmonitor/test/browser_net_filter-03.js
browser/devtools/netmonitor/test/browser_net_sort-01.js
browser/devtools/netmonitor/test/browser_net_sort-02.js
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -410,49 +410,42 @@ create({ constructor: RequestsMenuView, 
 
     this.refreshSummary();
   },
 
   /**
    * Sorts all network requests in this container by a specified detail.
    *
    * @param string aType
-   *        Either null, "status", "method", "file", "domain", "type" or "size".
+   *        Either "status", "method", "file", "domain", "type", "size" or "waterfall".
    */
-  sortBy: function(aType) {
+  sortBy: function(aType = "waterfall") {
     let target = $("#requests-menu-" + aType + "-button");
     let headers = document.querySelectorAll(".requests-menu-header-button");
 
     for (let header of headers) {
       if (header != target) {
         header.removeAttribute("sorted");
         header.removeAttribute("tooltiptext");
       }
     }
 
     let direction = "";
     if (target) {
-      if (!target.hasAttribute("sorted")) {
-        target.setAttribute("sorted", direction = "ascending");
-        target.setAttribute("tooltiptext", L10N.getStr("networkMenu.sortedAsc"));
-      } else if (target.getAttribute("sorted") == "ascending") {
+      if (target.getAttribute("sorted") == "ascending") {
         target.setAttribute("sorted", direction = "descending");
         target.setAttribute("tooltiptext", L10N.getStr("networkMenu.sortedDesc"));
       } else {
-        target.removeAttribute("sorted");
-        target.removeAttribute("tooltiptext");
+        target.setAttribute("sorted", direction = "ascending");
+        target.setAttribute("tooltiptext", L10N.getStr("networkMenu.sortedAsc"));
       }
     }
 
-    // Sort by timing.
-    if (!target || !direction) {
-      this.sortContents(this._byTiming);
-    }
     // Sort by whatever was requested.
-    else switch (aType) {
+    switch (aType) {
       case "status":
         if (direction == "ascending") {
           this.sortContents(this._byStatus);
         } else {
           this.sortContents((a, b) => !this._byStatus(a, b));
         }
         break;
       case "method":
@@ -485,16 +478,23 @@ create({ constructor: RequestsMenuView, 
         break;
       case "size":
         if (direction == "ascending") {
           this.sortContents(this._bySize);
         } else {
           this.sortContents((a, b) => !this._bySize(a, b));
         }
         break;
+      case "waterfall":
+        if (direction == "ascending") {
+          this.sortContents(this._byTiming);
+        } else {
+          this.sortContents((a, b) => !this._byTiming(a, b));
+        }
+        break;
     }
   },
 
   /**
    * Predicates used when filtering items.
    *
    * @param MenuItem aItem
    *        The filtered menu item.
@@ -919,17 +919,17 @@ create({ constructor: RequestsMenuView, 
 
   /**
    * Creates the labels displayed on the waterfall header in this container.
    *
    * @param number aScale
    *        The current waterfall scale.
    */
   _showWaterfallDivisionLabels: function(aScale) {
-    let container = $("#requests-menu-waterfall-header-box");
+    let container = $("#requests-menu-waterfall-button");
     let availableWidth = this._waterfallWidth - REQUESTS_WATERFALL_SAFE_BOUNDS;
 
     // Nuke all existing labels.
     while (container.hasChildNodes()) {
       container.firstChild.remove();
     }
 
     // Build new millisecond tick labels...
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -77,23 +77,29 @@
                     class="requests-menu-header-button requests-menu-size"
                     onclick="NetMonitorView.RequestsMenu.sortBy('size')"
                     label="&netmonitorUI.toolbar.size;"
                     flex="1">
             </button>
           </hbox>
           <hbox id="requests-menu-waterfall-header-box"
                 class="requests-menu-header requests-menu-waterfall"
-                align="center">
-            <label id="requests-menu-waterfall-label"
-                   class="plain requests-menu-waterfall"
-                   value="&netmonitorUI.toolbar.waterfall;"/>
+                align="center"
+                flex="1">
+            <button id="requests-menu-waterfall-button"
+                    class="requests-menu-header-button requests-menu-waterfall"
+                    onclick="NetMonitorView.RequestsMenu.sortBy('waterfall')"
+                    pack="start"
+                    flex="1">
+              <label id="requests-menu-waterfall-label"
+                     class="plain requests-menu-waterfall"
+                     value="&netmonitorUI.toolbar.waterfall;"/>
+            </button>
           </hbox>
         </hbox>
-        <spacer id="toolbar-spacer" flex="1"/>
         <toolbarbutton id="details-pane-toggle"
                        class="devtools-toolbarbutton"
                        tooltiptext="&netmonitorUI.panesButton.tooltip;"
                        disabled="true"
                        tabindex="0"/>
       </toolbar>
       <label id="requests-menu-empty-notice"
              value="&netmonitorUI.emptyNotice;"/>
--- a/browser/devtools/netmonitor/test/browser_net_filter-03.js
+++ b/browser/devtools/netmonitor/test/browser_net_filter-03.js
@@ -63,19 +63,18 @@ function test() {
         })
         .then(() => {
           return teardown(aMonitor);
         })
         .then(finish);
     });
 
     function resetSorting() {
-      for (let i = 0; i < 3; i++) {
-        EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
-      }
+      EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+      EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
     }
 
     function testButtons(aFilterType) {
       let doc = aMonitor.panelWin.document;
       let target = doc.querySelector("#requests-menu-filter-" + aFilterType + "-button");
       let buttons = doc.querySelectorAll(".requests-menu-footer-button");
 
       for (let button of buttons) {
--- a/browser/devtools/netmonitor/test/browser_net_sort-01.js
+++ b/browser/devtools/netmonitor/test/browser_net_sort-01.js
@@ -138,17 +138,17 @@ function test() {
         })
         .then(() => {
           info("Testing swap(4, 4)");
           RequestsMenu.swapItemsAtIndices(4, 4);
           return testContents([3, 4, 0, 1, 2]);
         })
         .then(() => {
           info("Clearing sort.");
-          RequestsMenu.sortBy(null);
+          RequestsMenu.sortBy();
           return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           return teardown(aMonitor);
         })
         .then(finish);
     });
 
--- a/browser/devtools/netmonitor/test/browser_net_sort-02.js
+++ b/browser/devtools/netmonitor/test/browser_net_sort-02.js
@@ -38,91 +38,109 @@ function test() {
         })
         .then(() => {
           info("Testing status sort, descending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
           testHeaders("status", "descending");
           return testContents([4, 3, 2, 1, 0]);
         })
         .then(() => {
-          info("Clearing status sort.");
+          info("Testing status sort, ascending. Checking sort loops correctly.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
-          testHeaders();
-          return testContents([0, 2, 4, 3, 1]);
+          testHeaders("status", "ascending");
+          return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing method sort, ascending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
           testHeaders("method", "ascending");
           return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing method sort, descending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
           testHeaders("method", "descending");
           return testContents([4, 3, 2, 1, 0]);
         })
         .then(() => {
-          info("Clearing method sort.");
+          info("Testing method sort, ascending. Checking sort loops correctly.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
-          testHeaders();
-          return testContents([0, 2, 4, 3, 1]);
+          testHeaders("method", "ascending");
+          return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing file sort, ascending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
           testHeaders("file", "ascending");
           return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing file sort, descending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
           testHeaders("file", "descending");
           return testContents([4, 3, 2, 1, 0]);
         })
         .then(() => {
-          info("Clearing file sort.");
+          info("Testing file sort, ascending. Checking sort loops correctly.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
-          testHeaders();
-          return testContents([0, 2, 4, 3, 1]);
+          testHeaders("file", "ascending");
+          return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing type sort, ascending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
           testHeaders("type", "ascending");
           return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing type sort, descending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
           testHeaders("type", "descending");
           return testContents([4, 3, 2, 1, 0]);
         })
         .then(() => {
-          info("Clearing type sort.");
+          info("Testing type sort, ascending. Checking sort loops correctly.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
-          testHeaders();
-          return testContents([0, 2, 4, 3, 1]);
+          testHeaders("type", "ascending");
+          return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing size sort, ascending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
           testHeaders("size", "ascending");
           return testContents([0, 1, 2, 3, 4]);
         })
         .then(() => {
           info("Testing size sort, descending.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
           testHeaders("size", "descending");
           return testContents([4, 3, 2, 1, 0]);
         })
         .then(() => {
-          info("Clearing size sort.");
+          info("Testing size sort, ascending. Checking sort loops correctly.");
           EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
-          testHeaders();
+          testHeaders("size", "ascending");
+          return testContents([0, 1, 2, 3, 4]);
+        })
+        .then(() => {
+          info("Testing waterfall sort, ascending.");
+          EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+          testHeaders("waterfall", "ascending");
+          return testContents([0, 2, 4, 3, 1]);
+        })
+        .then(() => {
+          info("Testing waterfall sort, descending.");
+          EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+          testHeaders("waterfall", "descending");
+          return testContents([4, 2, 0, 1, 3]);
+        })
+        .then(() => {
+          info("Testing waterfall sort, ascending. Checking sort loops correctly.");
+          EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+          testHeaders("waterfall", "ascending");
           return testContents([0, 2, 4, 3, 1]);
         })
         .then(() => {
           return teardown(aMonitor);
         })
         .then(finish);
     });