Bug 1223037 - Move the network monitor toolbar to the top. r=vporof
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 29 Feb 2016 18:08:53 +0100
changeset 286021 c2977d29a60bfb9eaf02227840f91db3032ce032
parent 286020 5496f32b7b5a78ee24039fa4cae5e6f34f14dd2d
child 286022 396a68628a6bfc7bd0b96a9f64c94b4975f4cf93
push id30038
push usercbook@mozilla.com
push dateTue, 01 Mar 2016 10:59:06 +0000
treeherdermozilla-central@8ef94be995a4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1223037
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1223037 - Move the network monitor toolbar to the top. r=vporof MozReview-Commit-ID: IAhJ39XK6m5
devtools/client/netmonitor/netmonitor-view.js
devtools/client/netmonitor/netmonitor.css
devtools/client/netmonitor/netmonitor.xul
devtools/client/netmonitor/test/browser_net_footer-summary.js
devtools/client/netmonitor/test/head.js
devtools/client/themes/netmonitor.css
devtools/client/themes/toolbars.css
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -121,17 +121,16 @@ var NetMonitorView = {
     this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
     this.toggleDetailsPane({ visible: false });
 
     // Disable the performance statistics mode.
     if (!Prefs.statistics) {
       $("#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;
     }
   },
 
   /**
    * Destroys the UI for all the displayed panes.
    */
   _destroyPanes: Task.async(function*() {
     dumpn("Destroying the NetMonitorView panes");
@@ -362,18 +361,18 @@ RequestsMenuView.prototype = Heritage.ex
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function() {
     dumpn("Initializing the RequestsMenuView");
 
     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));
     this.sortContents(this._byTiming);
 
     this.allowFocusOnRightClick = true;
     this.maintainSelectionVisible = true;
 
@@ -404,17 +403,17 @@ RequestsMenuView.prototype = Heritage.ex
     this.requestsFreetextFilterEvent = this.requestsFreetextFilterEvent.bind(this);
     this.reFilterRequests = this.reFilterRequests.bind(this);
 
     this.freetextFilterBox = $("#requests-menu-filter-freetext-text");
     this.freetextFilterBox.addEventListener("input", this.requestsFreetextFilterEvent, false);
     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);
     $("#request-menu-context-copy-url").addEventListener("command", this._onContextCopyUrlCommand, false);
     $("#request-menu-context-copy-response").addEventListener("command", this._onContextCopyResponseCommand, false);
     $("#request-menu-context-copy-image-as-data-uri").addEventListener("command", this._onContextCopyImageAsDataUriCommand, false);
     $("#toggle-raw-headers").addEventListener("click", this.toggleRawHeadersEvent, false);
 
@@ -433,23 +432,21 @@ RequestsMenuView.prototype = Heritage.ex
       $("#request-menu-context-resend").hidden = true;
       $("#headers-summary-resend").hidden = true;
     }
 
     if (NetMonitorController.supportsPerfStats) {
       $("#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) {
       $("#requests-menu-transferred-header-box").hidden = true;
       $("#requests-menu-item-template .requests-menu-transferred").hidden = true;
     }
   },
 
@@ -462,17 +459,17 @@ RequestsMenuView.prototype = Heritage.ex
     Prefs.filters = this._activeFilters;
 
     this.widget.removeEventListener("select", this._onSelect, false);
     this.widget.removeEventListener("swap", this._onSwap, false);
     this._splitter.removeEventListener("mousemove", this._onResize, false);
     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);
 
     this.userInputTimer.cancel();
     this._flushRequestsTask.disarm();
 
     $("#network-request-popup").removeEventListener("popupshowing", this._onContextShowing, false);
@@ -481,17 +478,16 @@ RequestsMenuView.prototype = Heritage.ex
     $("#request-menu-context-copy-response").removeEventListener("command", this._onContextCopyResponseCommand, false);
     $("#request-menu-context-copy-image-as-data-uri").removeEventListener("command", this._onContextCopyImageAsDataUriCommand, false);
     $("#request-menu-context-resend").removeEventListener("command", this._onContextResendCommand, false);
     $("#request-menu-context-perf").removeEventListener("command", this._onContextPerfCommand, false);
 
     $("#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);
     $("#custom-request-close-button").removeEventListener("click", this.closeCustomRequestEvent, false);
     $("#headers-summary-resend").removeEventListener("click", this.cloneSelectedRequestEvent, false);
     $("#toggle-raw-headers").removeEventListener("click", this.toggleRawHeadersEvent, false);
   },
 
@@ -1250,28 +1246,28 @@ RequestsMenuView.prototype = Heritage.ex
   /**
    * Refreshes the status displayed in this container's footer, providing
    * concise information about all requests.
    */
   refreshSummary: function() {
     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;
     }
 
     let totalBytes = this._getTotalBytesOfRequests(visibleItems);
     let totalMillis =
       this._getNewestRequest(visibleItems).attachment.endedMillis -
       this._getOldestRequest(visibleItems).attachment.startedMillis;
 
     // 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))
     );
   },
 
   /**
    * Adds odd/even attributes to all the visible items in this container.
--- a/devtools/client/netmonitor/netmonitor.css
+++ b/devtools/client/netmonitor/netmonitor.css
@@ -3,18 +3,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #toolbar-labels {
   overflow: hidden;
 }
 
 #details-pane-toggle[disabled] {
-  /* Don't use display: none; to avoid collapsing #requests-menu-toolbar */
-  visibility: hidden;
+  display: none;
 }
 
 #custom-pane {
   overflow: auto;
 }
 
 #response-content-image-box {
   overflow: auto;
@@ -34,12 +33,12 @@
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #toolbar-spacer,
   #details-pane-toggle,
   #details-pane[pane-collapsed],
   .requests-menu-waterfall,
-  .requests-menu-footer-label {
+  #requests-menu-network-summary-button > .toolbarbutton-text {
     display: none;
   }
 }
--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -87,16 +87,89 @@
          key="&netmonitorUI.footer.filterFreetext.key;"
          modifiers="accel"
          command="freeTextFilterCommand"/>
   </keyset>
 
   <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">
         <vbox id="network-table" flex="1" class="devtools-main-content">
           <toolbar id="requests-menu-toolbar"
                    class="devtools-toolbar"
                    align="center">
             <hbox id="toolbar-labels" flex="1">
@@ -189,21 +262,16 @@
                   <box id="requests-menu-waterfall-label-wrapper">
                     <label id="requests-menu-waterfall-label"
                            class="plain requests-menu-waterfall"
                            value="&netmonitorUI.toolbar.waterfall;"/>
                   </box>
                 </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"
                 class="side-menu-widget-empty-text">
             <hbox id="notice-reload-message" align="center">
               <label value="&netmonitorUI.reloadNotice1;"/>
               <button id="requests-menu-reload-notice-button"
                       class="devtools-toolbarbutton"
@@ -753,91 +821,16 @@
                              frameborder="0"
                              sandbox=""/>
               </tabpanel>
             </tabpanels>
           </tabbox>
         </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">
       <toolbar id="network-statistics-toolbar"
                class="devtools-toolbar">
         <button id="network-statistics-back-button"
                 class="devtools-toolbarbutton"
                 label="&netmonitorUI.backButton;"/>
--- a/devtools/client/netmonitor/test/browser_net_footer-summary.js
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -76,18 +76,18 @@ function test() {
 
       EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
       testStatus();
 
       teardown(aMonitor).then(finish);
     })
 
     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;
       let visibleRequestsCount = visibleItems.length;
       let totalRequestsCount = RequestsMenu.itemCount;
       info("Current requests: " + visibleRequestsCount + " of " + totalRequestsCount + ".");
 
       if (!totalRequestsCount || !visibleRequestsCount) {
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -420,17 +420,17 @@ function testFilterButtons(aMonitor, aFi
  *
  * @param array aIsChecked
  *        An array specifying if a button at given index should have a
  *        'checked' attribute. For example, if the third item of the array
  *        evaluates to true, the third button should be checked.
  */
 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]) {
       is(button.hasAttribute("checked"), true,
         "The " + button.id + " button should have a 'checked' attribute.");
     } else {
       is(button.hasAttribute("checked"), false,
         "The " + button.id + " button should not have a 'checked' attribute.");
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -563,118 +563,52 @@
 .custom-section {
   margin-top: 0.5em;
 }
 
 #custom-method-value {
   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;
-}
-
-.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);
+.requests-menu-filter-button:hover {
+  background: rgba(128,128,128,0.2);
 }
 
-.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 {
   background: none;
   box-shadow: none;
   border-color: transparent;
   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 */
 
 #network-statistics-toolbar {
   border: none;
   margin: 0;
   padding: 0;
@@ -830,30 +764,16 @@
   padding: 0;
 }
 
 :root[platform="win"] .requests-menu-timings-division {
   padding-top: 1px;
   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;
 }
 
 :root[platform="linux"] #toggle-raw-headers {
   padding: 4px;
 }
 
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -222,16 +222,22 @@
 
 .devtools-button[checked]:empty::before,
 .devtools-button[open]:empty::before,
 .devtools-toolbarbutton:not([label])[checked=true] > image,
 .devtools-toolbarbutton:not([label])[open=true] > image {
   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],
 .theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
   background-color: rgba(170, 170, 170, .2); /* Splitter */
 }
 .theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 .theme-dark .devtools-toolbarbutton[data-text-only],
@@ -271,16 +277,28 @@
 }
 .theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .theme-light .devtools-toolbarbutton:not([disabled])[label][open],
 .theme-light .devtools-button:not(:empty)[checked=true],
 .theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
   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");
 }
 
 /* Toolbar button groups */
 .devtools-toolbarbutton-group > .devtools-toolbarbutton {
   margin-left: 1px;
   margin-right: 1px;