Bug 1467572 - Part 10: Reuse the network throttling menu in the network monitor in RDM. r=Honza
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:43 -0400
changeset 431857 b55503cf4ad4328e5bf5e1f9b590b97332789a66
parent 431856 81d81c2f9098f782581869d6bafc09800e7601b9
child 431858 aed506e2100a0dd8e5325912edca9f74be9f3edf
push id34451
push userebalazs@mozilla.com
push dateThu, 16 Aug 2018 09:25:15 +0000
treeherdermozilla-central@161817e6d127 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1467572
milestone63.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 1467572 - Part 10: Reuse the network throttling menu in the network monitor in RDM. r=Honza - Removes the duplicate dropdown arrow icon that is used in both RDM and Network monitor - Converts the network throttling menu in the network monitor to be a shared component that can be used in both RDM and network monitor - Move the common styles for the dropdown menu button into toolbars.css
devtools/client/locales/en-US/network-throttling.properties
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/components/Toolbar.js
devtools/client/netmonitor/test/browser_net_telemetry_throttle_changed.js
devtools/client/responsive.html/components/Toolbar.js
devtools/client/responsive.html/index.css
devtools/client/shared/components/throttling/NetworkThrottlingMenu.js
devtools/client/shared/components/throttling/NetworkThrottlingSelector.js
devtools/client/shared/components/throttling/moz.build
devtools/client/themes/common.css
devtools/client/themes/toolbars.css
devtools/client/themes/variables.css
--- a/devtools/client/locales/en-US/network-throttling.properties
+++ b/devtools/client/locales/en-US/network-throttling.properties
@@ -1,13 +1,13 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # 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/.
 
-# LOCALIZATION NOTE These strings are used inside the NetworkThrottlingSelector
+# LOCALIZATION NOTE These strings are used inside the NetworkThrottlingMenu
 # component used to throttle network bandwidth.
 #
 # The correct localization of this file might be to keep it in
 # English, or another language commonly spoken among web developers.
 # You want to make that choice consistent across the developer tools.
 # A good criteria is the language in which you'd find the best
 # documentation on web development on the web.
 
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -68,53 +68,35 @@
 .devtools-button.devtools-pause-icon::before {
   background-image: var(--pause-icon-url);
 }
 
 .devtools-button.devtools-play-icon::before {
   background-image: var(--play-icon-url);
 }
 
-.devtools-button.devtools-har-button {
-  margin: 0 0 0 2px;
-  padding: 0;
-}
-
-/* style for dropdown button */
-.devtools-drop-down-button {
-  background-image: var(--select-arrow-image)  !important;
-  background-repeat: no-repeat !important;
-  margin-inline-start: 6px;
-  fill: var(--theme-toolbar-photon-icon-color);
-  -moz-context-properties: fill;
-}
-
-/* style for title holder inside a dropdown button */
-.devtools-drop-down-button .title {
-  padding-top: 0.15em;
-  text-align: center;
-  overflow: hidden;
-  display: inline-block;
-}
-
 /* HAR button */
 
 #devtools-har-button {
   width: 35px;
-  padding-right: 12px;
+  margin-inline-start: 2px;
+  padding-inline-start: 0;
+  padding-inline-end: 12px;
   background-position: right center;
 }
 
 /* Make sure spacing between text and icon is uniform */
 #devtools-har-button .title {
   width: 24px;
 }
 
-#devtools-har-button:not(:hover) {
-  background-color: transparent;
+/* Throttling Button */
+
+#network-throttling-menu {
+  margin-inline-start: 6px;
 }
 
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;
   bottom: 1px;
 }
 
@@ -127,34 +109,16 @@
 .devtools-checkbox-label.devtools-persistlog-checkbox {
   margin-inline-start: 4px;
 }
 
 .devtools-checkbox-label.devtools-cache-checkbox {
   margin-inline-end: 7px;
 }
 
-/* Throttling Button */
-
-#global-network-throttling-selector:not(:hover) {
-  background-color: transparent;
-}
-
-#global-network-throttling-selector {
-  width: 92px;
-  background-position: right 4px center;
-  padding-left: 0;
-  overflow: hidden;
-}
-
-/* Make sure spacing between text and icon is uniform*/
-#global-network-throttling-selector .title{
-  width: 85%;
-}
-
 /* Filter input within the Toolbar */
 
 .devtools-toolbar-group .devtools-filterinput {
   border: none;
   box-shadow: none;
   background-color: var(--theme-body-background);
 }
 
--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -12,27 +12,27 @@ const { connect } = require("devtools/cl
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
   getDisplayedRequests,
   getRecordingState,
   getTypeFilteredRequests,
 } = require("../selectors/index");
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
-const { LocalizationHelper } = require("devtools/shared/l10n");
 const { L10N } = require("../utils/l10n");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 // MDN
 const {
   getFilterBoxURL,
 } = require("../utils/mdn-utils");
 const LEARN_MORE_URL = getFilterBoxURL();
 
 // Components
+const NetworkThrottlingMenu = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingMenu"));
 const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));
 
 const { button, div, input, label, span } = dom;
 
 // Localization
 const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key");
 const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
 const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
@@ -46,27 +46,23 @@ const DEVTOOLS_ENABLE_PERSISTENT_LOG_PRE
 const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce((o, tag) =>
   Object.assign(o, { [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`) }), {});
 const ENABLE_PERSISTENT_LOGS_TOOLTIP =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip");
 const ENABLE_PERSISTENT_LOGS_LABEL =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label");
 const DISABLE_CACHE_TOOLTIP = L10N.getStr("netmonitor.toolbar.disableCache.tooltip");
 const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label");
-const NO_THROTTLING_LABEL = new LocalizationHelper(
-  "devtools/client/locales/network-throttling.properties"
-  ).getStr("responsive.noThrottling");
 
 // Menu
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/har/har-menu-utils", true);
 
 // Throttling
 const Types = require("devtools/client/shared/components/throttling/types");
-const throttlingProfiles = require("devtools/client/shared/components/throttling/profiles");
 const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 
 /**
  * Network monitor toolbar component.
  *
  * Toolbar contains a set of useful tools to control network requests
  * as well as set of filters for filtering the content.
  */
@@ -277,74 +273,38 @@ class Toolbar extends Component {
           onChange: toggleBrowserCache,
         }),
         DISABLE_CACHE_LABEL,
       )
     );
   }
 
   /**
-   * Render network throttling selector button.
+   * Render network throttling menu button.
    */
-  renderThrottlingSelector() {
-    const {
-      networkThrottling,
-    } = this.props;
-
-    const selectedProfile = networkThrottling.enabled ?
-      networkThrottling.profile : NO_THROTTLING_LABEL;
-    return button({
-      id: "global-network-throttling-selector",
-      title: selectedProfile,
-      className: "devtools-button devtools-drop-down-button",
-      onClick: evt => {
-        this.showThrottlingSelector(evt.target);
-      },
-    },
-    dom.span({className: "title"},
-      selectedProfile)
-    );
-  }
-
-  showThrottlingSelector(menuButton) {
+  renderThrottlingMenu() {
     const {
       networkThrottling,
       onChangeNetworkThrottling,
     } = this.props;
 
-    const menuItems = throttlingProfiles.map(profile => {
-      return {
-        label: profile.id,
-        type: "checkbox",
-        checked: networkThrottling.enabled &&
-          (profile.id == networkThrottling.profile),
-        click: () => onChangeNetworkThrottling(true, profile.id),
-      };
+    return NetworkThrottlingMenu({
+      networkThrottling,
+      onChangeNetworkThrottling,
     });
-
-    menuItems.unshift("-");
-
-    menuItems.unshift({
-      label: NO_THROTTLING_LABEL,
-      type: "checkbox",
-      checked: !networkThrottling.enabled,
-      click: () => onChangeNetworkThrottling(false, ""),
-    });
-
-    showMenu(menuItems, { button: menuButton });
   }
 
   /**
    * Render drop down button with HAR related actions.
    */
   renderHarButton() {
     return button({
       id: "devtools-har-button",
       title: TOOLBAR_HAR_BUTTON,
-      className: "devtools-button devtools-har-button devtools-drop-down-button",
+      className: "devtools-button devtools-dropdown-button",
       onClick: evt => {
         this.showHarMenu(evt.target);
       },
     },
     dom.span({className: "title"},
       "HAR")
     );
   }
@@ -433,33 +393,33 @@ class Toolbar extends Component {
           this.renderSeparator(),
           this.renderToggleRecordingButton(recording, toggleRecording),
           this.renderSeparator(),
           this.renderFilterButtons(requestFilterTypes),
           this.renderSeparator(),
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
           this.renderSeparator(),
-          this.renderThrottlingSelector(),
+          this.renderThrottlingMenu(),
           this.renderHarButton(),
         )
       )
     ) : (
       span({ className: "devtools-toolbar devtools-toolbar-container" },
         span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-1" },
           this.renderClearButton(clearRequests),
           this.renderSeparator(),
           this.renderFilterBox(setRequestFilterText),
           this.renderSeparator(),
           this.renderToggleRecordingButton(recording, toggleRecording),
           this.renderSeparator(),
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
           this.renderSeparator(),
-          this.renderThrottlingSelector(),
+          this.renderThrottlingMenu(),
           this.renderHarButton(),
         ),
         span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-2" },
           this.renderFilterButtons(requestFilterTypes)
         )
       )
     );
   }
--- a/devtools/client/netmonitor/test/browser_net_telemetry_throttle_changed.js
+++ b/devtools/client/netmonitor/test/browser_net_telemetry_throttle_changed.js
@@ -20,17 +20,17 @@ add_task(async function() {
 
   // Remove all telemetry events.
   Services.telemetry.clearEvents();
 
   // Ensure no events have been logged
   const snapshot = Services.telemetry.snapshotEvents(OPTOUT, true);
   ok(!snapshot.parent, "No events have been logged for the main process");
 
-  document.querySelector("#global-network-throttling-selector").click();
+  document.getElementById("network-throttling-menu").click();
   monitor.panelWin.parent.document.querySelector("menuitem[label='GPRS']").click();
   await waitFor(monitor.panelWin.api, EVENTS.THROTTLING_CHANGED);
 
   // Verify existence of the telemetry event.
   checkTelemetryEvent({
     mode: "GPRS",
   }, {
     method: "throttle_changed",
--- a/devtools/client/responsive.html/components/Toolbar.js
+++ b/devtools/client/responsive.html/components/Toolbar.js
@@ -5,17 +5,17 @@
 "use strict";
 
 const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const DevicePixelRatioSelector = createFactory(require("./DevicePixelRatioSelector"));
 const DeviceSelector = createFactory(require("./DeviceSelector"));
-const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
+const NetworkThrottlingMenu = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingMenu"));
 const SettingsMenu = createFactory(require("./SettingsMenu"));
 const ViewportDimension = createFactory(require("./ViewportDimension"));
 
 const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 class Toolbar extends PureComponent {
   static get propTypes() {
@@ -99,19 +99,20 @@ class Toolbar extends PureComponent {
         DevicePixelRatioSelector({
           devices,
           displayPixelRatio,
           selectedDevice,
           selectedPixelRatio,
           onChangePixelRatio,
         }),
         dom.div({ className: "devtools-separator" }),
-        NetworkThrottlingSelector({
+        NetworkThrottlingMenu({
           networkThrottling,
           onChangeNetworkThrottling,
+          useTopLevelWindow: true,
         }),
         dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "touch-simulation-button",
           className: touchButtonClass,
           title: (touchSimulation.enabled ?
             getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
           onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -1,25 +1,25 @@
 /* TODO: May break up into component local CSS.  Pending future discussions by
  * React component group on how to best handle CSS. */
 
 /**
  * CSS Variables specific to the responsive design mode
  */
 
-.theme-light {
+:root {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
   --viewport-color: #999797;
   --viewport-hover-color: var(--theme-body-color);
   --viewport-active-color: #3b3b3b;
 }
 
-.theme-dark {
+:root.theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
   --viewport-color: #c6ccd0;
   --viewport-hover-color: #dde1e4;
   --viewport-active-color: #fcfcfc;
 }
 
@@ -207,22 +207,16 @@ select > option.divider {
   background-image: url("chrome://devtools/skin/images/close.svg");
 }
 
 #screenshot-button:disabled {
   filter: var(--theme-icon-checked-filter);
   opacity: 1 !important;
 }
 
-#network-throttling-selector {
-  height: 15px;
-  padding-left: 0;
-  width: 103px;
-}
-
 #device-pixel-ratio-selector {
   -moz-user-select: none;
   color: var(--viewport-color);
   height: 15px;
   /* `max-width` is here to keep the UI compact if the device pixel ratio changes to a
      repeating decimal value.  This can happen if you zoom the UI (Cmd + Plus / Minus on
      macOS for example). */
   max-width: 8em;
rename from devtools/client/shared/components/throttling/NetworkThrottlingSelector.js
rename to devtools/client/shared/components/throttling/NetworkThrottlingMenu.js
--- a/devtools/client/shared/components/throttling/NetworkThrottlingSelector.js
+++ b/devtools/client/shared/components/throttling/NetworkThrottlingMenu.js
@@ -1,112 +1,93 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 "use strict";
 
 const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
+const throttlingProfiles = require("./profiles");
 const Types = require("./types");
-const throttlingProfiles = require("./profiles");
 
 // Localization
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper(
   "devtools/client/locales/network-throttling.properties");
+const NO_THROTTLING_LABEL = L10N.getStr("responsive.noThrottling");
+
+loader.lazyRequireGetter(this, "showMenu", "devtools/client/shared/components/menu/utils", true);
 
 /**
  * This component represents selector button that can be used
  * to throttle network bandwidth.
  */
-class NetworkThrottlingSelector extends PureComponent {
+class NetworkThrottlingMenu extends PureComponent {
   static get propTypes() {
     return {
-      className: PropTypes.string,
       networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
       onChangeNetworkThrottling: PropTypes.func.isRequired,
+      useTopLevelWindow: PropTypes.bool,
     };
   }
 
   static get defaultProps() {
     return {
-      className: "",
+      useTopLevelWindow: false,
     };
   }
 
   constructor(props) {
     super(props);
-    this.onSelectChange = this.onSelectChange.bind(this);
+    this.onShowThrottlingMenu = this.onShowThrottlingMenu.bind(this);
   }
 
-  onSelectChange({ target }) {
+  onShowThrottlingMenu(event) {
     const {
+      networkThrottling,
       onChangeNetworkThrottling,
+      useTopLevelWindow,
     } = this.props;
 
-    if (target.value == L10N.getStr("responsive.noThrottling")) {
-      onChangeNetworkThrottling(false, "");
-      return;
-    }
+    const menuItems = throttlingProfiles.map(profile => {
+      return {
+        label: profile.id,
+        type: "checkbox",
+        checked: networkThrottling.enabled && profile.id == networkThrottling.profile,
+        click: () => onChangeNetworkThrottling(true, profile.id),
+      };
+    });
 
-    for (const profile of throttlingProfiles) {
-      if (profile.id === target.value) {
-        onChangeNetworkThrottling(true, profile.id);
-        return;
-      }
-    }
+    menuItems.unshift("-");
+
+    menuItems.unshift({
+      label: NO_THROTTLING_LABEL,
+      type: "checkbox",
+      checked: !networkThrottling.enabled,
+      click: () => onChangeNetworkThrottling(false, ""),
+    });
+
+    showMenu(menuItems, { button: event.target, useTopLevelWindow });
   }
 
   render() {
-    const {
-      className,
-      networkThrottling,
-    } = this.props;
+    const { networkThrottling } = this.props;
+    const selectedProfile = networkThrottling.enabled ?
+      networkThrottling.profile : NO_THROTTLING_LABEL;
 
-    let selectClass = className + " toolbar-dropdown";
-    let selectedProfile;
-    if (networkThrottling.enabled) {
-      selectClass += " selected";
-      selectedProfile = networkThrottling.profile;
-    } else {
-      selectedProfile = L10N.getStr("responsive.noThrottling");
-    }
-
-    const listContent = [
-      dom.option(
-        {
-          key: "disabled",
-        },
-        L10N.getStr("responsive.noThrottling")
-      ),
-      dom.option(
+    return (
+      dom.button(
         {
-          key: "divider",
-          className: "divider",
-          disabled: true,
-        }
-      ),
-      throttlingProfiles.map(profile => {
-        return dom.option(
-          {
-            key: profile.id,
-          },
-          profile.id
-        );
-      }),
-    ];
-
-    return dom.select(
-      {
-        id: "network-throttling-selector",
-        className: selectClass,
-        value: selectedProfile,
-        onChange: this.onSelectChange,
-      },
-      ...listContent
+          id: "network-throttling-menu",
+          className: "devtools-button devtools-dropdown-button",
+          title: selectedProfile,
+          onClick: this.onShowThrottlingMenu,
+        },
+        dom.span({ className: "title" }, selectedProfile)
+      )
     );
   }
 }
 
-module.exports = NetworkThrottlingSelector;
+module.exports = NetworkThrottlingMenu;
--- a/devtools/client/shared/components/throttling/moz.build
+++ b/devtools/client/shared/components/throttling/moz.build
@@ -1,13 +1,13 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # 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/.
 
 DevToolsModules(
     'actions.js',
-    'NetworkThrottlingSelector.js',
+    'NetworkThrottlingMenu.js',
     'profiles.js',
     'reducer.js',
     'types.js',
 )
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -347,17 +347,17 @@ checkbox:-moz-focusring {
 
 /* Selectable button which is unchecked. */
 
 .devtools-button:not(:empty):not(:disabled):not(.checked):hover,
 .devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover,
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
 .devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active),
 .devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
-  background: var(--toolbarbutton-hover-background);
+  background-color: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-border-color);
 }
 
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
   background-color: var(--theme-selection-background-hover);
 }
 
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -197,8 +197,42 @@
   border-color: transparent;
   background-color: transparent;
 }
 
 splitter.devtools-horizontal-splitter,
 .devtools-side-splitter {
   background-color: var(--theme-splitter-color);
 }
+
+/* Dropdown Menu Button */
+.devtools-dropdown-button {
+  background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
+  background-repeat: no-repeat !important;
+  overflow: hidden;
+  fill: var(--theme-toolbar-photon-icon-color);
+  -moz-context-properties: fill;
+}
+
+.devtools-dropdown-button:not(:hover) {
+  background-color: transparent;
+}
+
+/* Style for title holder inside the dropdown menu button */
+.devtools-dropdown-button .title {
+  display: inline-block;
+  overflow: hidden;
+  padding-top: 0.15em;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#network-throttling-menu {
+  background-position: right 4px center;
+  padding-left: 0;
+  width: 92px;
+}
+
+/* Make sure spacing between text and icon is uniform */
+#network-throttling-menu .title {
+  width: 85%;
+}
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -219,17 +219,17 @@
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
   --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
 
   --toolbarbutton-background: var(--theme-toolbar-hover);
   --toolbarbutton-border-color: transparent;
-  --toolbarbutton-hover-background: rgba(110,120,130,0.2);
+  --toolbarbutton-hover-background: var(--theme-toolbar-hover);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-focus-background: var(--theme-selection-focus-background);
   --toolbarbutton-focus-color: var(--theme-selection-focus-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-checked-focus-background: var(--blue-60);