Bug 868045 - At some threshold, we should convert MS to Seconds in the Waterfall, r=rcampbell

browser/devtools/netmonitor/netmonitor-view.js

@@ -371,9 +371,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
    */
   openRequestInTab: function() {
     let win = Services.wm.getMostRecentWindow("navigator:browser");
-
     let selected = this.selectedItem.attachment;
-
     win.openUILinkIn(selected.url, "tab", { relatedToCurrent: true });
   },
 
@@ -382,7 +380,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
    */
   copyUrl: function() {
     let selected = this.selectedItem.attachment;
-
     clipboardHelper.copyString(selected.url, document);
   },
 
@@ -1078,12 +1075,34 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
       let direction = window.isRTL ? -1 : 1;
 
       for (let x = 0; x < availableWidth; x += scaledStep) {
-        let divisionMS = (x / aScale).toFixed(0);
         let translateX = "translateX(" + ((direction * x) | 0) + "px)";
+        let millisecondTime = x / aScale;
+
+        let normalizedTime = millisecondTime;
+        let divisionScale = "millisecond";
+
+        // If the division is greater than 1 minute.
+        if (normalizedTime > 60000) {
+          normalizedTime /= 60000;
+          divisionScale = "minute";
+        }
+        // If the division is greater than 1 second.
+        else if (normalizedTime > 1000) {
+          normalizedTime /= 1000;
+          divisionScale = "second";
+        }
+
+        // Showing too many decimals is bad UX.
+        if (divisionScale == "millisecond") {
+          normalizedTime |= 0;
+        } else {
+          normalizedTime = L10N.numberWithDecimals(normalizedTime, 2);
+        }
 
         let node = document.createElement("label");
-        let text = L10N.getFormatStr("networkMenu.divisionMS", divisionMS);
+        let text = L10N.getFormatStr("networkMenu." + divisionScale, normalizedTime);
         node.className = "plain requests-menu-timings-division";
+        node.setAttribute("division-scale", divisionScale);
         node.style.transform = translateX;
 
         node.setAttribute("value", text);

browser/devtools/netmonitor/test/browser.ini

@@ -59,3 +59,4 @@ support-files =
 [browser_net_sort-03.js]
 [browser_net_status-codes.js]
 [browser_net_timeline_ticks.js]
+[browser_net_timing-division.js]

browser/devtools/netmonitor/test/browser_net_timeline_ticks.js

@@ -31,13 +31,13 @@ function test() {
         "There should be at least 3 tick labels in the network requests header.");
 
       is(document.querySelectorAll(".requests-menu-timings-division")[0]
-        .getAttribute("value"), L10N.getFormatStr("networkMenu.divisionMS", 0),
+        .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 0),
         "The first tick label has an incorrect value");
       is(document.querySelectorAll(".requests-menu-timings-division")[1]
-        .getAttribute("value"), L10N.getFormatStr("networkMenu.divisionMS", 80),
+        .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 80),
         "The second tick label has an incorrect value");
       is(document.querySelectorAll(".requests-menu-timings-division")[2]
-        .getAttribute("value"), L10N.getFormatStr("networkMenu.divisionMS", 160),
+        .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 160),
         "The third tick label has an incorrect value");
 
       is(document.querySelectorAll(".requests-menu-timings-division")[0]

browser/devtools/netmonitor/test/browser_net_timing-division.js

@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if timing intervals are divided againts seconds when appropriate.
+ */
+
+function test() {
+  initNetMonitor(CUSTOM_GET_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { $all, NetMonitorView } = aMonitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+
+    RequestsMenu.lazyUpdate = false;
+
+    waitForNetworkEvents(aMonitor, 2).then(() => {
+      let divisions = $all(".requests-menu-timings-division[division-scale=second]");
+
+      ok(divisions.length,
+        "There should be at least one division on the seconds time scale.");
+      ok(divisions[0].getAttribute("value").match(/\d+\.\d{2}\s\w+/),
+        "The division on the seconds time scale looks legit.");
+
+      teardown(aMonitor).then(finish);
+    });
+
+    aDebuggee.performRequests(1);
+    window.setTimeout(() => aDebuggee.performRequests(1), 2000);
+  });
+}

browser/locales/en-US/chrome/browser/devtools/netmonitor.properties

@@ -124,6 +124,14 @@ networkMenu.sizeKB=%S KB
 # in the network menu specifying the time for a request to finish (in milliseconds).
 networkMenu.totalMS=→ %S ms
 
-# LOCALIZATION NOTE (networkMenu.divisionMS): This is the label displayed
+# LOCALIZATION NOTE (networkMenu.millisecond): This is the label displayed
 # in the network menu specifying timing interval divisions (in milliseconds).
-networkMenu.divisionMS=%S ms
+networkMenu.millisecond=%S ms
+
+# LOCALIZATION NOTE (networkMenu.second): This is the label displayed
+# in the network menu specifying timing interval divisions (in seconds).
+networkMenu.second=%S s
+
+# LOCALIZATION NOTE (networkMenu.minute): This is the label displayed
+# in the network menu specifying timing interval divisions (in minutes).
+networkMenu.minute=%S min

browser/themes/shared/devtools/netmonitor.inc.css

@@ -200,6 +200,20 @@ box.requests-menu-status[code^="5"] {
   transform-origin: right center;
 }
 
+.requests-menu-timings-division[division-scale=millisecond] {
+  -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
+}
+
+.requests-menu-timings-division[division-scale=second] {
+  -moz-border-start-color: #d99b28 !important; /* Light orange highlight color */
+  font-weight: 600;
+}
+
+.requests-menu-timings-division[division-scale=minute] {
+  -moz-border-start-color: #eb5368 !important; /* Red highlight color */
+  font-weight: 600;
+}
+
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {