Bug 1223037 - Move the network monitor toolbar to the top. r=vporof

MozReview-Commit-ID: IAhJ39XK6m5

devtools/client/netmonitor/netmonitor-view.js

@@ -126,7 +126,6 @@ var NetMonitorView = {
       $("#request-menu-context-perf").hidden = true;
       $("#notice-perf-message").hidden = true;
       $("#requests-menu-network-summary-button").hidden = true;
-      $("#requests-menu-network-summary-label").hidden = true;
     }
   },
 
@@ -367,8 +366,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
 
     this.widget = new SideMenuWidget($("#requests-menu-contents"));
     this._splitter = $("#network-inspector-view-splitter");
-    this._summary = $("#requests-menu-network-summary-label");
-    this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));
+    this._summary = $("#requests-menu-network-summary-button");
+    this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
     this.userInputTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
 
     Prefs.filters.forEach(type => this.filterOn(type));
@@ -409,7 +408,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     this.freetextFilterBox.addEventListener("command", this.requestsFreetextFilterEvent, false);
 
     $("#toolbar-labels").addEventListener("click", this.requestsMenuSortEvent, false);
-    $("#requests-menu-footer").addEventListener("click", this.requestsMenuFilterEvent, false);
+    $("#requests-menu-filter-buttons").addEventListener("click", this.requestsMenuFilterEvent, false);
     $("#requests-menu-clear-button").addEventListener("click", this.reqeustsMenuClearEvent, false);
     $("#network-request-popup").addEventListener("popupshowing", this._onContextShowing, false);
     $("#request-menu-context-newtab").addEventListener("command", this._onContextNewTabCommand, false);
@@ -438,13 +437,11 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
       $("#request-menu-context-perf").addEventListener("command", this._onContextPerfCommand, false);
       $("#requests-menu-perf-notice-button").addEventListener("command", this._onContextPerfCommand, false);
       $("#requests-menu-network-summary-button").addEventListener("command", this._onContextPerfCommand, false);
-      $("#requests-menu-network-summary-label").addEventListener("click", this._onContextPerfCommand, false);
       $("#network-statistics-back-button").addEventListener("command", this._onContextPerfCommand, false);
     } else {
       $("#notice-perf-message").hidden = true;
       $("#request-menu-context-perf").hidden = true;
       $("#requests-menu-network-summary-button").hidden = true;
-      $("#requests-menu-network-summary-label").hidden = true;
     }
 
     if (!NetMonitorController.supportsTransferredResponseSize) {
@@ -467,7 +464,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     window.removeEventListener("resize", this._onResize, false);
 
     $("#toolbar-labels").removeEventListener("click", this.requestsMenuSortEvent, false);
-    $("#requests-menu-footer").removeEventListener("click", this.requestsMenuFilterEvent, false);
+    $("#requests-menu-filter-buttons").removeEventListener("click", this.requestsMenuFilterEvent, false);
     $("#requests-menu-clear-button").removeEventListener("click", this.reqeustsMenuClearEvent, false);
     this.freetextFilterBox.removeEventListener("input", this.requestsFreetextFilterEvent, false);
     this.freetextFilterBox.removeEventListener("command", this.requestsFreetextFilterEvent, false);
@@ -486,7 +483,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     $("#requests-menu-reload-notice-button").removeEventListener("command", this._onReloadCommand, false);
     $("#requests-menu-perf-notice-button").removeEventListener("command", this._onContextPerfCommand, false);
     $("#requests-menu-network-summary-button").removeEventListener("command", this._onContextPerfCommand, false);
-    $("#requests-menu-network-summary-label").removeEventListener("click", this._onContextPerfCommand, false);
     $("#network-statistics-back-button").removeEventListener("command", this._onContextPerfCommand, false);
 
     $("#custom-request-send-button").removeEventListener("click", this.sendCustomRequestEvent, false);
@@ -1255,7 +1251,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     let visibleItems = this.visibleItems;
     let visibleRequestsCount = visibleItems.length;
     if (!visibleRequestsCount) {
-      this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));
+      this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
       return;
     }
 
@@ -1266,7 +1262,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
 
     // https://developer.mozilla.org/en-US/docs/Localization_and_Plurals
     let str = PluralForm.get(visibleRequestsCount, L10N.getStr("networkMenu.summary"));
-    this._summary.setAttribute("value", str
+    this._summary.setAttribute("label", str
       .replace("#1", visibleRequestsCount)
       .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, CONTENT_SIZE_DECIMALS))
       .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, REQUEST_TIME_DECIMALS))

devtools/client/netmonitor/netmonitor.css

@@ -8,8 +8,7 @@
 }
 
 #details-pane-toggle[disabled] {
-  /* Don't use display: none; to avoid collapsing #requests-menu-toolbar */
-  visibility: hidden;
+  display: none;
 }
 
 #custom-pane {
@@ -39,7 +38,7 @@
   #details-pane-toggle,
   #details-pane[pane-collapsed],
   .requests-menu-waterfall,
-  .requests-menu-footer-label {
+  #requests-menu-network-summary-button > .toolbarbutton-text {
     display: none;
   }
 }

devtools/client/netmonitor/netmonitor.xul

@@ -92,6 +92,79 @@
   <deck id="body" class="theme-sidebar" flex="1">
 
     <vbox id="network-inspector-view" flex="1">
+      <hbox id="netmonitor-toolbar" class="devtools-toolbar">
+        <toolbarbutton id="requests-menu-clear-button"
+                       class="devtools-toolbarbutton devtools-clear-icon"
+                       tooltip="&netmonitorUI.footer.clear;"/>
+        <hbox id="requests-menu-filter-buttons">
+          <button id="requests-menu-filter-all-button"
+                  class="requests-menu-filter-button"
+                  checked="true"
+                  data-key="all"
+                  label="&netmonitorUI.footer.filterAll;">
+          </button>
+          <button id="requests-menu-filter-html-button"
+                  class="requests-menu-filter-button"
+                  data-key="html"
+                  label="&netmonitorUI.footer.filterHTML;">
+          </button>
+          <button id="requests-menu-filter-css-button"
+                  class="requests-menu-filter-button"
+                  data-key="css"
+                  label="&netmonitorUI.footer.filterCSS;">
+          </button>
+          <button id="requests-menu-filter-js-button"
+                  class="requests-menu-filter-button"
+                  data-key="js"
+                  label="&netmonitorUI.footer.filterJS;">
+          </button>
+          <button id="requests-menu-filter-xhr-button"
+                  class="requests-menu-filter-button"
+                  data-key="xhr"
+                  label="&netmonitorUI.footer.filterXHR;">
+          </button>
+          <button id="requests-menu-filter-fonts-button"
+                  class="requests-menu-filter-button"
+                  data-key="fonts"
+                  label="&netmonitorUI.footer.filterFonts;">
+          </button>
+          <button id="requests-menu-filter-images-button"
+                  class="requests-menu-filter-button"
+                  data-key="images"
+                  label="&netmonitorUI.footer.filterImages;">
+          </button>
+          <button id="requests-menu-filter-media-button"
+                  class="requests-menu-filter-button"
+                  data-key="media"
+                  label="&netmonitorUI.footer.filterMedia;">
+          </button>
+          <button id="requests-menu-filter-flash-button"
+                  class="requests-menu-filter-button"
+                  data-key="flash"
+                  label="&netmonitorUI.footer.filterFlash;">
+          </button>
+          <button id="requests-menu-filter-other-button"
+                  class="requests-menu-filter-button"
+                  data-key="other"
+                  label="&netmonitorUI.footer.filterOther;">
+          </button>
+        </hbox>
+        <spacer id="requests-menu-spacer"
+                flex="1"/>
+        <toolbarbutton id="requests-menu-network-summary-button"
+                       class="devtools-toolbarbutton icon-and-text"
+                       tooltiptext="&netmonitorUI.footer.perf;"/>
+        <textbox id="requests-menu-filter-freetext-text"
+                 class="devtools-searchinput"
+                 type="search"
+                 required="true"
+                 placeholder="&netmonitorUI.footer.filterFreetext.label;"/>
+        <toolbarbutton id="details-pane-toggle"
+                       class="devtools-toolbarbutton"
+                       tooltiptext="&netmonitorUI.panesButton.tooltip;"
+                       disabled="true"
+                       tabindex="0"/>
+      </hbox>
       <hbox id="network-table-and-sidebar"
             class="devtools-responsive-container"
             flex="1">
@@ -194,11 +267,6 @@
                 </button>
               </hbox>
             </hbox>
-            <toolbarbutton id="details-pane-toggle"
-                           class="devtools-toolbarbutton"
-                           tooltiptext="&netmonitorUI.panesButton.tooltip;"
-                           disabled="true"
-                           tabindex="0"/>
           </toolbar>
 
           <vbox id="requests-menu-empty-notice"
@@ -758,81 +826,6 @@
         </deck>
       </hbox>
 
-      <hbox id="requests-menu-footer">
-        <button id="requests-menu-filter-all-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                checked="true"
-                data-key="all"
-                label="&netmonitorUI.footer.filterAll;">
-        </button>
-        <button id="requests-menu-filter-html-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="html"
-                label="&netmonitorUI.footer.filterHTML;">
-        </button>
-        <button id="requests-menu-filter-css-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="css"
-                label="&netmonitorUI.footer.filterCSS;">
-        </button>
-        <button id="requests-menu-filter-js-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="js"
-                label="&netmonitorUI.footer.filterJS;">
-        </button>
-        <button id="requests-menu-filter-xhr-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="xhr"
-                label="&netmonitorUI.footer.filterXHR;">
-        </button>
-        <button id="requests-menu-filter-fonts-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="fonts"
-                label="&netmonitorUI.footer.filterFonts;">
-        </button>
-        <button id="requests-menu-filter-images-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="images"
-                label="&netmonitorUI.footer.filterImages;">
-        </button>
-        <button id="requests-menu-filter-media-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="media"
-                label="&netmonitorUI.footer.filterMedia;">
-        </button>
-        <button id="requests-menu-filter-flash-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="flash"
-                label="&netmonitorUI.footer.filterFlash;">
-        </button>
-        <button id="requests-menu-filter-other-button"
-                class="requests-menu-filter-button requests-menu-footer-button"
-                data-key="other"
-                label="&netmonitorUI.footer.filterOther;">
-        </button>
-        <spacer id="requests-menu-spacer-textbox"
-                class="requests-menu-footer-spacer"
-                flex="0"/>
-        <textbox id="requests-menu-filter-freetext-text"
-                 class="requests-menu-footer-textbox devtools-searchinput"
-                 type="search"
-                 required="true"
-                 placeholder="&netmonitorUI.footer.filterFreetext.label;"/>
-        <spacer id="requests-menu-spacer"
-                class="requests-menu-footer-spacer"
-                flex="100"/>
-        <button id="requests-menu-network-summary-button"
-                class="requests-menu-footer-button"
-                tooltiptext="&netmonitorUI.footer.perf;"/>
-        <label id="requests-menu-network-summary-label"
-               class="plain requests-menu-footer-label"
-               crop="end"
-               tooltiptext="&netmonitorUI.footer.perf;"/>
-        <button id="requests-menu-clear-button"
-                class="requests-menu-footer-button"
-                label="&netmonitorUI.footer.clear;"/>
-      </hbox>
-
     </vbox>
 
     <box id="network-statistics-view">

devtools/client/netmonitor/test/browser_net_footer-summary.js

@@ -81,8 +81,8 @@ function test() {
     })
 
     function testStatus() {
-      let summary = $("#requests-menu-network-summary-label");
-      let value = summary.getAttribute("value");
+      let summary = $("#requests-menu-network-summary-button");
+      let value = summary.getAttribute("label");
       info("Current summary: " + value);
 
       let visibleItems = RequestsMenu.visibleItems;

devtools/client/netmonitor/test/head.js

@@ -425,7 +425,7 @@ function testFilterButtons(aMonitor, aFilterType) {
  */
 function testFilterButtonsCustom(aMonitor, aIsChecked) {
   let doc = aMonitor.panelWin.document;
-  let buttons = doc.querySelectorAll(".requests-menu-footer-button");
+  let buttons = doc.querySelectorAll(".requests-menu-filter-button");
   for (let i = 0; i < aIsChecked.length; i++) {
     let button = buttons[i];
     if (aIsChecked[i]) {

devtools/client/themes/netmonitor.css

@@ -568,90 +568,31 @@
   width: 4.5em;
 }
 
-/* Footer */
-
-#requests-menu-footer {
-  background-color: var(--theme-toolbar-background);
-  border-top: 1px solid var(--table-splitter-color);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
+/* Main toolbar */
+.requests-menu-filter-button {
+  -moz-appearance: none;
+  background: rgba(128,128,128,0.1);
   border: none;
-  padding: 2px 1vw;
-}
-
-.theme-dark .requests-menu-footer-button,
-.theme-dark .requests-menu-footer-label {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .requests-menu-footer-button,
-.theme-light .requests-menu-footer-label {
+  border-radius: 2px;
+  min-width: 0;
+  padding: 0 5px;
+  margin: 2px;
   color: var(--theme-body-color);
 }
 
-.requests-menu-footer-spacer {
-  min-width: 2px;
+.requests-menu-filter-button:hover {
+  background: rgba(128,128,128,0.2);
 }
 
-.theme-dark .requests-menu-footer-spacer:not(:first-child),
-.theme-dark .requests-menu-footer-button:not(:first-child) {
-  -moz-border-start: 1px solid var(--table-splitter-color);
-}
-
-.theme-light .requests-menu-footer-spacer:not(:first-child),
-.theme-light .requests-menu-footer-button:not(:first-child) {
-  -moz-border-start: 1px solid var(--table-splitter-color);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-footer-button:hover:active {
+.requests-menu-filter-button:hover:active {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
-.requests-menu-footer-button:not(:active)[checked] {
+.requests-menu-filter-button:not(:active)[checked] {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.requests-menu-footer-label {
-  padding-top: 3px;
-  font-weight: 600;
-}
-
-#requests-menu-filter-freetext-text {
-  transition-property: max-width, -moz-padding-end, -moz-padding-start;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-}
-
-#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box {
-  overflow: hidden;
-}
-
-#requests-menu-filter-freetext-text:not([focused]):not([filled]) {
-  max-width: 20px !important;
-  -moz-padding-end: 5px;
-  -moz-padding-start: 22px;
-  background-position: 8px center, top left, top left;
-}
-
-#requests-menu-filter-freetext-text[focused],
-#requests-menu-filter-freetext-text[filled] {
-  max-width: 200px !important;
-}
-
 /* Performance analysis buttons */
 
 #requests-menu-network-summary-button {
@@ -661,15 +602,8 @@
   list-style-image: url(images/profiler-stopwatch.svg);
   -moz-padding-end: 0;
   cursor: pointer;
-}
-
-#requests-menu-network-summary-label {
-  -moz-padding-start: 0;
-  cursor: pointer;
-}
-
-#requests-menu-network-summary-label:hover {
-  text-decoration: underline;
+  margin-inline-end: 1em;
+  min-width: 0;
 }
 
 /* Performance analysis view */
@@ -835,20 +769,6 @@
   font-size: 90%;
 }
 
-:root[platform="win"] .requests-menu-footer-button,
-:root[platform="win"] .requests-menu-footer-label {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-/* Responsive sidebar */
-@media (max-width: 700px) {
-  :root[platform="win"] .requests-menu-footer-button,
-  :root[platform="win"] .requests-menu-footer-label {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-}
 :root[platform="linux"] #headers-summary-resend {
   padding: 4px;
 }

devtools/client/themes/toolbars.css

@@ -227,6 +227,12 @@
   filter: url(images/filters.svg#checked-icon-state);
 }
 
+/* Icon-and-text buttons */
+.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
+  margin-inline-start: .5em !important;
+  font-weight: 600;
+}
+
 /* Text-only buttons */
 .theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 .theme-light .devtools-toolbarbutton[data-text-only],
@@ -276,6 +282,18 @@
   background: rgba(76, 158, 217, .3); /* Select highlight blue */
 }
 
+:root {
+  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: var(--clear-icon-url);
+}
+
+.devtools-toolbarbutton.devtools-clear-icon {
+  list-style-image: var(--clear-icon-url);
+}
+
 .devtools-option-toolbarbutton {
   list-style-image: url("chrome://devtools/skin/images/tool-options.svg");
 }