Bug 1314919 - Firebug layout problems. r=ntim.
authorRuturaj K. Vartak <ruturaj@gmail.com>
Wed, 18 Jan 2017 06:35:00 +0100
changeset 377363 40f64896c09526da00730fca1fa2dee3da5ec778
parent 377362 eff25b386cb710885d6c8ef121bcc314bb4d880a
child 377364 7a0ca4bad5c3449b4f0ee22d66bc051f40f044fb
push id1419
push userjlund@mozilla.com
push dateMon, 10 Apr 2017 20:44:07 +0000
treeherdermozilla-release@5e6801b73ef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1314919
milestone53.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 1314919 - Firebug layout problems. r=ntim. - CSS Rules - Background colors of tabs - Background color of tab buttons - borders of tabs / buttons - Variable-izing backgrounds and colors - netmonitor: cell header color, sorted cell header color - widgets: cell header color, sorted cell header color - Toolbar Buttons - Fixing breadcrumbs in HTML inspector - JSON View tabs MozReview-Commit-ID: JqUG5zwvQ0a
devtools/client/dom/content/dom-view.css
devtools/client/jsonview/components/search-box.js
devtools/client/jsonview/css/search-box.css
devtools/client/jsonview/css/toolbar.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/common.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/netmonitor.css
devtools/client/themes/tooltips.css
devtools/client/themes/variables.css
devtools/client/themes/widgets.css
--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -94,21 +94,18 @@ body {
 .treeTable .ordinalLabel {
   color: SlateBlue;
   font-weight: bold;
 }
 
 /******************************************************************************/
 /* Search box */
 .devtools-searchbox {
-  float: right;
-}
-
-.devtools-searchbox:dir(rtl) {
-  float: left;
+  margin-inline-start: auto; /* Align to the right */
+  flex: none; /* Don't flex */
 }
 
 /******************************************************************************/
 /* Theme Dark */
 
 .theme-dark .treeTable > tbody > tr > td {
   border-bottom: none;
 }
--- a/devtools/client/jsonview/components/search-box.js
+++ b/devtools/client/jsonview/components/search-box.js
@@ -38,17 +38,17 @@ define(function (require, exports, modul
     },
 
     doSearch: function (searchBox) {
       this.props.actions.onSearch(searchBox.value);
     },
 
     render: function () {
       return (
-        input({className: "searchBox",
+        input({className: "searchBox devtools-filterinput",
                placeholder: Locale.$STR("jsonViewer.filterJSON"),
                onChange: this.onSearch})
       );
     },
   });
 
   // Exports from this module
   exports.SearchBox = SearchBox;
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@@ -1,29 +1,17 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
 /******************************************************************************/
 /* Search Box */
 
-.searchBox {
-  height: 18px;
-  font: message-box;
-  background-color: var(--theme-body-background);
-  background-image: url("chrome://devtools/skin/images/filter.svg#filterinput");
-  background-repeat: no-repeat;
-  background-position: 2px center;
-  border: 1px solid var(--theme-splitter-color);
-  border-radius: 2px;
-  color: var(--theme-content-color1);
-  width: 200px;
-  margin-top: 0;
-  margin-inline-end: 1px;
-  float: right;
-  padding-inline-start: 20px;
+.devtools-filterinput {
+  margin-inline-start: auto; /* Align to the right */
 }
 
-.searchBox:dir(rtl) {
-  float: left;
-  background-position: calc(100% - 2px) center;
-}
+/* JSONView doesn't load dark-theme.css */
+.theme-dark .devtools-filterinput {
+  background-color: rgba(24, 29, 32, 1);
+  color: rgba(184, 200, 217, 1);
+}
\ No newline at end of file
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -2,91 +2,42 @@
 /* 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/. */
 
 /******************************************************************************/
 /* Toolbar */
 
 .toolbar {
-  line-height: 20px;
+  display: flex;
   height: 22px;
   font: message-box;
-  padding: 4px 0 3px 0;
+  padding: 1px;
+  padding-inline-start: 2px;
+  background: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .toolbar .btn {
-  margin-left: 5px;
-  background-color: #E6E6E6;
-  border: 1px solid rgb(204, 204, 204);
+  margin-inline-start: 5px;
+  color: var(--theme-body-color);
+  background: var(--toolbarbutton-background);
+  border: var(--toolbarbutton-border);
   text-decoration: none;
   display: inline-block;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -moz-user-select: none;
   padding: 0 2px;
   border-radius: 2px;
 }
 
-.toolbar .btn::-moz-focus-inner {
-  border: 1px solid transparent;
-}
-
-/******************************************************************************/
-/* Firebug Theme */
-
-.theme-firebug .toolbar {
-  border-bottom: 1px solid rgb(170, 188, 207);
-  background-color: var(--theme-tab-toolbar-background) !important;
-  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
-}
-
-.theme-firebug .toolbar .btn {
-  border-radius: 2px;
-  color: #141414;
-  background-color: white;
-}
-
-.theme-firebug .toolbar .btn:hover {
-  color: #333;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.theme-firebug .toolbar .btn:active {
-  background-image: none;
-  outline: 0;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+.toolbar .btn:hover {
+  background: var(--toolbarbutton-hover-background);
+  border: var(--toolbarbutton-hover-border);
 }
 
-/******************************************************************************/
-/* Light Theme & Dark Theme*/
-
-.theme-dark .toolbar,
-.theme-light .toolbar {
-  background-color: var(--theme-toolbar-background);
-  border-bottom: 1px solid var(--theme-splitter-color);
-  padding: 1px;
-  padding-left: 2px;
+.toolbar .btn:not([disabled]):hover:active {
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
-.theme-dark .toolbar .btn,
-.theme-light .toolbar .btn {
-  min-height: 18px;
-  color: var(--theme-content-color1);
-  text-shadow: none;
-  margin: 1px 2px 1px 2px;
-  border: none;
-  background-color: rgba(170, 170, 170, .2); /* --toolbar-tab-hover */
-  transition: background 0.05s ease-in-out;
-}
-
-.theme-dark .toolbar .btn:hover,
-.theme-light .toolbar .btn:hover {
-  background: rgba(170, 170, 170, .3); /* Splitters */
-}
-
-.theme-dark .toolbar .btn:not([disabled]):hover:active,
-.theme-light .toolbar .btn:not([disabled]):hover:active {
-  background: rgba(170, 170, 170, .4); /* --toolbar-tab-hover-active */
-}
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -2,16 +2,17 @@
 /* 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/. */
 
 /* Tabs General Styles */
 
 .tabs {
   height: 100%;
+  background: var(--theme-body-background);
 }
 
 .tabs .tabs-menu {
   display: table;
   list-style: none;
   padding: 0;
   margin: 0;
 }
@@ -41,98 +42,86 @@
 
 .tabs .all-tabs-menu  {
   position: absolute;
   top: 0;
   offset-inline-end: 0;
   width: 15px;
   height: 100%;
   border-inline-start: 1px solid var(--theme-splitter-color);
-  background: url("chrome://devtools/skin/images/dropmarker.svg");
+  background: var(--theme-tab-toolbar-background);
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: center;
-  background-color: var(--theme-tab-toolbar-background);
 }
 
-/* Light Theme */
-
-.theme-dark .tabs,
-.theme-light .tabs {
-  background: var(--theme-body-background);
-}
-
-.theme-dark .tabs .tabs-navigation,
-.theme-light .tabs .tabs-navigation {
+.tabs .tabs-navigation,
+.tabs .tabs-navigation {
   position: relative;
   border-bottom: 1px solid var(--theme-splitter-color);
   background: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .tabs .tabs-menu-item,
 .theme-light .tabs .tabs-menu-item {
   margin: 0;
   padding: 0;
   border-style: solid;
   border-width: 0;
   border-inline-start-width: 1px;
   border-color: var(--theme-splitter-color);
+  color: var(--theme-content-color1);
 }
 
 .theme-dark .tabs .tabs-menu-item:last-child,
 .theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
   border-inline-end-width: 1px;
 }
 
 .theme-dark .tabs .tabs-menu-item a,
 .theme-light .tabs .tabs-menu-item a {
-  color: var(--theme-content-color1);
+  color: inherit;
   padding: 3px 15px;
 }
 
 .theme-dark .tabs .tabs-menu-item:hover:not(.is-active),
 .theme-light .tabs .tabs-menu-item:hover:not(.is-active) {
   background-color: var(--toolbar-tab-hover);
 }
 
 .theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active),
 .theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) {
   background-color: var(--toolbar-tab-hover-active);
 }
 
 .theme-dark .tabs .tabs-menu-item.is-active,
 .theme-light .tabs .tabs-menu-item.is-active {
   background-color: var(--theme-selection-background);
-}
-
-.theme-dark .tabs .tabs-menu-item.is-active a,
-.theme-light .tabs .tabs-menu-item.is-active a {
   color: var(--theme-selection-color);
 }
 
 /* Dark Theme */
 
-.theme-dark .tabs .tabs-menu-item a {
+.theme-dark .tabs .tabs-menu-item {
   color: var(--theme-body-color-alt);
 }
 
-.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) a {
+.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) {
   color: #CED3D9;
 }
 
-.theme-dark .tabs .tabs-menu-item:hover:active a {
+.theme-dark .tabs .tabs-menu-item:hover:active {
   color: var(--theme-selection-color);
 }
 
 /* Firebug Theme */
 
 .theme-firebug .tabs .tabs-navigation {
-  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
   padding-top: 3px;
   padding-left: 3px;
-  border-bottom: 1px solid rgb(170, 188, 207);
 }
 
 .theme-firebug .tabs .tabs-menu {
   margin-bottom: -1px;
 }
 
 .theme-firebug .tabs .tabs-menu-item.is-active,
 .theme-firebug .tabs .tabs-menu-item.is-active:hover {
@@ -147,24 +136,24 @@
 .theme-firebug .tabs .tabs-menu-item a {
   font-family: var(--proportional-font-family);
   font-weight: bold;
   color: var(--theme-body-color);
   border-radius: 4px 4px 0 0;
 }
 
 .theme-firebug .tabs .tabs-menu-item:hover:not(.is-active) a {
-  border: 1px solid #C8C8C8;
+  border: 1px solid var(--theme-splitter-color);
   border-bottom: 1px solid transparent;
   background-color: transparent;
 }
 
 .theme-firebug .tabs .tabs-menu-item.is-active a {
-  background-color: rgb(247, 251, 254);
-  border: 1px solid rgb(170, 188, 207);
+  background-color: var(--theme-toolbar-tab-selected-background);
+  border: 1px solid var(--theme-splitter-color);
   border-bottom-color: transparent;
   color: var(--theme-body-color);
 }
 
 .theme-firebug .tabs .tabs-menu-item:hover:active a {
   background-color: var(--toolbar-tab-hover-active);
 }
 
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -398,17 +398,17 @@ checkbox:-moz-focusring {
 }
 
 /* Checked/opened icon button background */
 .theme-firebug .devtools-button[checked]:empty,
 .theme-firebug .devtools-button[open]:empty,
 .theme-firebug .devtools-button.checked,
 .theme-firebug .devtools-toolbarbutton:not([label])[checked=true],
 .theme-firebug .devtools-toolbarbutton:not([label])[open=true] {
-  background-color: #C8D8E7;
+  background: var(--toolbarbutton-checked-background);
 }
 
 /* Icon-and-text buttons */
 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
   margin-inline-start: .5em !important;
   font-weight: 600;
 }
 
@@ -488,36 +488,38 @@ checkbox:-moz-focusring {
 }
 
 /*
  * Filter buttons
  * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands
  */
 .menu-filter-button {
   -moz-appearance: none;
-  background: rgba(128,128,128,0.1);
-  border: none;
+  background: var(--toolbarbutton-background);
+  border: var(--toolbarbutton-border);
   border-radius: 2px;
   min-width: 0;
   padding: 0 5px;
   margin: 2px;
   color: var(--theme-body-color);
 }
 
 .menu-filter-button:hover {
-  background: rgba(128,128,128,0.2);
+  background: var(--toolbarbutton-hover-background);
+  border: var(--toolbarbutton-hover-border);
 }
 
 .menu-filter-button:hover:active {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
 .menu-filter-button:not(:active).checked {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
+  background: var(--toolbarbutton-checked-background);
+  border: var(--toolbarbutton-checked-border);
+  color: var(--toolbarbutton-checked-color);
 }
 
 /* Text input */
 
 .devtools-textinput,
 .devtools-searchinput,
 .devtools-filterinput {
   -moz-appearance: none;
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -34,20 +34,19 @@
 .theme-firebug .cm-tag {color: blue;}
 .theme-firebug .cm-attribute {color: rgb(0, 0, 136);}
 .theme-firebug .cm-header {color: blue;}
 .theme-firebug .cm-quote {color: #090;}
 .theme-firebug .cm-hr {color: #999;}
 .theme-firebug .cm-link {color: #00c;}
 
 .theme-firebug .theme-fg-color3,
-.theme-firebug .cm-s-mozilla .kind-Object .cm-variable{ /* dark blue */
-  color: #006400;
+.theme-firebug .cm-s-mozilla .kind-Object .cm-variable{
+  color: var(--theme-content-color1);
   font-style: normal;
-  font-weight: bold;
 }
 
 .theme-firebug .console-string {
   color: #FF183C;
 }
 
 /* Variables View */
 
@@ -60,59 +59,49 @@
   (both, main and side panels )*/
 
 /* Only apply bottom-border for:
   1) The main tab list.
   2) The side tab list if there is no scroll-box that has its own border.
 
   Use !important to override even the rule in webconsole.css that uses
   ID in the selector. */
-.theme-firebug .devtools-tabbar,
-.theme-firebug .devtools-sidebar-tabs tabs {
-  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
-  border-bottom: 1px solid rgb(170, 188, 207) !important;
-}
 
 .theme-firebug .devtools-sidebar-tabs tabs {
-  background-color: var(--theme-tab-toolbar-background) !important;
-  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+  background: var(--theme-tab-toolbar-background) !important;
+  border-bottom: 1px solid var(--theme-splitter-color) !important;
 }
 
 /* Add a negative bottom margin to overlap bottom border
   of the parent element (see also the next comment for 'tabs') */
 .theme-firebug .devtools-tab,
 .theme-firebug .devtools-sidebar-tabs tab {
   margin: 3px 0 -1px 0;
   padding: 2px 4px 0 4px;
   border: 1px solid transparent !important;
   border-radius: 4px 4px 0 0;
   font-weight: bold;
   color: var(--theme-body-color);
   -moz-box-flex: initial;
   min-width: 0;
 }
 
-/* Also add negative bottom margin for side panel tabs*/
-.theme-firebug .devtools-sidebar-tabs tab {
-}
-
 .theme-firebug .devtools-tab span {
   padding-inline-end: 0;
 }
 
 /* Tweak the margin and padding values differently for sidebar and the main tab bar */
 .theme-firebug .devtools-tab,
 .theme-firebug .devtools-tab.selected {
   padding: 2px 4px 0 4px;
   margin: 3px 1px -1px;
 }
 
 .theme-firebug .devtools-sidebar-tabs tab {
   margin: 3px 0 -1px 0;
-  padding: 2px 0 0 0;
 }
 
 /* In order to hide bottom-border of side panel tabs we need
  to make the parent element overflow visible, so child element
  can move one pixel down to hide the bottom border of the parent. */
 .theme-firebug .devtools-sidebar-tabs tabs {
   overflow: visible;
 }
@@ -120,18 +109,18 @@
 .theme-firebug .devtools-tab:hover,
 .theme-firebug .devtools-sidebar-tabs tab:hover {
   border: 1px solid #C8C8C8 !important;
   border-bottom: 1px solid transparent;
 }
 
 .theme-firebug .devtools-tab.selected,
 .theme-firebug .devtools-sidebar-tabs tab[selected] {
-  background-color: rgb(247, 251, 254);
-  border: 1px solid rgb(170, 188, 207) !important;
+  background-color: var(--theme-toolbar-tab-selected-background);
+  border: 1px solid var(--theme-splitter-color) !important;
   border-bottom-width: 0 !important;
   padding-bottom: 2px;
   color: inherit;
 }
 
 .theme-firebug .devtools-tabbar .devtools-separator,
 .theme-firebug .devtools-tab img {
   display: none;
@@ -186,19 +175,17 @@
 .theme-firebug #command-button-pick {
     top: 6px;
 }
 /* Toolbar */
 
 .theme-firebug .theme-toolbar,
 .theme-firebug toolbar,
 .theme-firebug .devtools-toolbar {
-  border-bottom: 1px solid rgb(170, 188, 207) !important;
-  background-color: var(--theme-tab-toolbar-background) !important;
-  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+  background: var(--theme-toolbar-background) !important;
   padding-inline-end: 4px;
 }
 
 /* The vbox for panel content also uses theme-toolbar class from some reason
  but it shouldn't have the padding as defined above, so fix it here */
 .theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar {
   padding-inline-end: 0;
 }
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -278,16 +278,21 @@
 .theme-firebug .requests-menu-header-button > .button-icon {
   height: 7px;
 }
 
 .theme-firebug .requests-menu-header-button[data-sorted] {
   background-color: #AAC3DC;
 }
 
+:root[platform="linux"].theme-firebug .requests-menu-header-button[data-sorted] {
+  background-color: #FAC8AF !important;
+  color: inherit !important;
+}
+
 .theme-firebug .requests-menu-header:hover:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1),
                                     transparent);
 }
 
 
 /* Network requests table: specific column dimensions */
 
@@ -684,17 +689,17 @@
 
 .theme-dark .tabpanel-summary-value {
   color: var(--theme-selection-color);
 }
 
 /* Headers tabpanel */
 
 #headers-tabpanel .summary {
-  background-color: var(--theme-toolbar-background);
+  background: var(--theme-toolbar-background);
 }
 
 /* Response tabpanel */
 
 .response-error-header {
   margin: 0;
   padding: 3px 8px;
   background-color: var(--theme-highlight-red);
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -345,17 +345,17 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
   height: 14px;
   border-radius: 3px;
   padding: 2px;
   margin-inline-start: 5px;
   background-color: var(--theme-body-color-alt);
-  color: var(--theme-toolbar-background);
+  color: var(--theme-body-background);
 }
 
 .event-tooltip-attributes {
   margin: 0;
   font-size: 9px;
   padding-top: 2px;
 }
 
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -134,25 +134,26 @@
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
   --theme-body-background: #fff;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
-  --theme-tab-toolbar-background: #d8eaf9;
-  --theme-toolbar-background: #f0f1f2;
+  --theme-tab-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
+  --theme-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
+  --theme-toolbar-tab-selected-background: rgb(253, 253, 253);
   --theme-selection-background: #3399ff;
   --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
   --theme-selection-color: white;
-  --theme-splitter-color: #aabccf;
+  --theme-splitter-color: #bfbfbf;
   --theme-comment: darkgreen;
 
-  --theme-body-color: #000000;
+  --theme-body-color: #252525;
   --theme-body-color-alt: #585959;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #3455db;
   --theme-highlight-bluegrey: #0072ab;
@@ -185,19 +186,43 @@
   /* Header */
   --theme-header-background: #F0F0F0 linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.1),
                                                      transparent) repeat-x;
 
   /* Command line */
   --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
+
+  /* Toolbar buttons */
+  --toolbarbutton-background: transparent linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) no-repeat;
+  --toolbarbutton-hover-background: transparent;
+  --toolbarbutton-checked-background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
+  --toolbarbutton-checked-color: var(--theme-body-color);
+  --toolbarbutton-hover-border: 1px solid var(--theme-splitter-color);
+  --toolbarbutton-checked-border: var(--toolbarbutton-hover-border);
+}
+
+:root.theme-firebug[platform="win"] {
+  --theme-tab-toolbar-background: #d8eaf9 linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
+  --theme-toolbar-background: #d8eaf9 linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+  --theme-toolbar-tab-selected-background: rgb(247, 251, 254);
+  --theme-splitter-color: #aabccf;
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* 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: rgba(128,128,128,0.1);
+  --toolbarbutton-hover-background: rgba(128,128,128,0.2);
+  --toolbarbutton-checked-background: var(--theme-selection-background);
+  --toolbarbutton-checked-color: var(--theme-selection-color);
+
+  --toolbarbutton-border: 1px solid transparent;
+  --toolbarbutton-hover-border: var(--toolbarbutton-border);
+  --toolbarbutton-checked-border: var(--toolbarbutton-border);
 }
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -423,37 +423,30 @@ widgets.css is overwritten. */
 }
 
 /* Breadcrumbs Scrolling Buttons */
 
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down {
   padding: 0;
   box-shadow: none;
+  outline: 1px solid var(--theme-splitter-color);
 }
 
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up:hover,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:hover {
   border: 1px transparent solid !important;
   box-shadow: none !important;
 }
 
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
   background: none !important;
 }
 
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up > .toolbarbutton-icon {
-  background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
-}
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down > .toolbarbutton-icon {
-  background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
-}
-
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
   background-position: 0 center;
 }
 
 /* SimpleListWidget */
 
 .simple-list-widget-container {
@@ -1359,27 +1352,37 @@ widgets.css is overwritten. */
   /* Vertically center header label */
   padding-top: 2px !important;
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted] {
   background-color: #AAC3DC !important;
 }
 
+:root[platform="linux"].theme-firebug .devtools-toolbar.table-widget-column-header[sorted] {
+  background-color: #FAC8AF !important;
+  color: inherit !important;
+}
+
 .theme-firebug .devtools-toolbar.table-widget-column-header:hover:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1),
                                     transparent);
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted=descending]:not(:active) {
-  background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg) !important;
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
-  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg) !important;
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted]:not(:active) {
+  background-position: right !important;
+  background-repeat: no-repeat !important;
 }
 
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   min-width: 100px;