Backed out changeset 5fb91cd2e2fc (bug 1314919) on the assumption that it turned browser_jsonview_filter.js failtastic a=backout
authorWes Kocher <wkocher@mozilla.com>
Wed, 18 Jan 2017 13:32:17 -0800
changeset 375068 98ee7f4c3b1acb2ec084e5f4fb20a0a493783aae
parent 375067 d33a2f279d1354a7502b70e02788df61877fab14
child 375069 36e32e9299a36322783280f310cd366e3186b1af
push id6996
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 20:48:21 +0000
treeherdermozilla-beta@d89512dab048 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbackout
bugs1314919
milestone53.0a1
backs out5fb91cd2e2fcf0ef047763809d8345feef99b80d
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
Backed out changeset 5fb91cd2e2fc (bug 1314919) on the assumption that it turned browser_jsonview_filter.js failtastic a=backout MozReview-Commit-ID: EEwUWOFFKty
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,18 +94,21 @@ body {
 .treeTable .ordinalLabel {
   color: SlateBlue;
   font-weight: bold;
 }
 
 /******************************************************************************/
 /* Search box */
 .devtools-searchbox {
-  margin-inline-start: auto; /* Align to the right */
-  flex: none; /* Don't flex */
+  float: right;
+}
+
+.devtools-searchbox:dir(rtl) {
+  float: left;
 }
 
 /******************************************************************************/
 /* 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: "devtools-filterinput",
+        input({className: "searchBox",
                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,17 +1,29 @@
 /* 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 */
 
-.devtools-filterinput {
-  margin-inline-start: auto; /* Align to the right */
+.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;
 }
 
-/* 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
+.searchBox:dir(rtl) {
+  float: left;
+  background-position: calc(100% - 2px) center;
+}
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -2,42 +2,91 @@
 /* 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 {
-  display: flex;
+  line-height: 20px;
   height: 22px;
   font: message-box;
-  padding: 1px;
-  padding-inline-start: 2px;
-  background: var(--theme-toolbar-background);
-  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px 0 3px 0;
 }
 
 .toolbar .btn {
-  margin-inline-start: 5px;
-  color: var(--theme-body-color);
-  background: var(--toolbarbutton-background);
-  border: var(--toolbarbutton-border);
+  margin-left: 5px;
+  background-color: #E6E6E6;
+  border: 1px solid rgb(204, 204, 204);
   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:hover {
-  background: var(--toolbarbutton-hover-background);
-  border: var(--toolbarbutton-hover-border);
+.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:not([disabled]):hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+/******************************************************************************/
+/* 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;
 }
 
+.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,17 +2,16 @@
 /* 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;
 }
@@ -42,86 +41,98 @@
 
 .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: var(--theme-tab-toolbar-background);
-  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: center;
+  background-color: var(--theme-tab-toolbar-background);
 }
 
-.tabs .tabs-navigation,
-.tabs .tabs-navigation {
+/* Light Theme */
+
+.theme-dark .tabs,
+.theme-light .tabs {
+  background: var(--theme-body-background);
+}
+
+.theme-dark .tabs .tabs-navigation,
+.theme-light .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: inherit;
+  color: var(--theme-content-color1);
   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 {
+.theme-dark .tabs .tabs-menu-item a {
   color: var(--theme-body-color-alt);
 }
 
-.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) {
+.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) a {
   color: #CED3D9;
 }
 
-.theme-dark .tabs .tabs-menu-item:hover:active {
+.theme-dark .tabs .tabs-menu-item:hover:active a {
   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 {
@@ -136,24 +147,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 var(--theme-splitter-color);
+  border: 1px solid #C8C8C8;
   border-bottom: 1px solid transparent;
   background-color: transparent;
 }
 
 .theme-firebug .tabs .tabs-menu-item.is-active a {
-  background-color: var(--theme-toolbar-tab-selected-background);
-  border: 1px solid var(--theme-splitter-color);
+  background-color: rgb(247, 251, 254);
+  border: 1px solid rgb(170, 188, 207);
   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: var(--toolbarbutton-checked-background);
+  background-color: #C8D8E7;
 }
 
 /* Icon-and-text buttons */
 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
   margin-inline-start: .5em !important;
   font-weight: 600;
 }
 
@@ -488,38 +488,36 @@ 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: var(--toolbarbutton-background);
-  border: var(--toolbarbutton-border);
+  background: rgba(128,128,128,0.1);
+  border: none;
   border-radius: 2px;
   min-width: 0;
   padding: 0 5px;
   margin: 2px;
   color: var(--theme-body-color);
 }
 
 .menu-filter-button:hover {
-  background: var(--toolbarbutton-hover-background);
-  border: var(--toolbarbutton-hover-border);
+  background: rgba(128,128,128,0.2);
 }
 
 .menu-filter-button:hover:active {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
 .menu-filter-button:not(:active).checked {
-  background: var(--toolbarbutton-checked-background);
-  border: var(--toolbarbutton-checked-border);
-  color: var(--toolbarbutton-checked-color);
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-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,19 +34,20 @@
 .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{
-  color: var(--theme-content-color1);
+.theme-firebug .cm-s-mozilla .kind-Object .cm-variable{ /* dark blue */
+  color: #006400;
   font-style: normal;
+  font-weight: bold;
 }
 
 .theme-firebug .console-string {
   color: #FF183C;
 }
 
 /* Variables View */
 
@@ -59,49 +60,59 @@
   (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: var(--theme-tab-toolbar-background) !important;
-  border-bottom: 1px solid var(--theme-splitter-color) !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));
 }
 
 /* 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;
 }
@@ -109,18 +120,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: var(--theme-toolbar-tab-selected-background);
-  border: 1px solid var(--theme-splitter-color) !important;
+  background-color: rgb(247, 251, 254);
+  border: 1px solid rgb(170, 188, 207) !important;
   border-bottom-width: 0 !important;
   padding-bottom: 2px;
   color: inherit;
 }
 
 .theme-firebug .devtools-tabbar .devtools-separator,
 .theme-firebug .devtools-tab img {
   display: none;
@@ -175,17 +186,19 @@
 .theme-firebug #command-button-pick {
     top: 6px;
 }
 /* Toolbar */
 
 .theme-firebug .theme-toolbar,
 .theme-firebug toolbar,
 .theme-firebug .devtools-toolbar {
-  background: var(--theme-toolbar-background) !important;
+  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));
   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,21 +278,16 @@
 .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 */
 
@@ -689,17 +684,17 @@
 
 .theme-dark .tabpanel-summary-value {
   color: var(--theme-selection-color);
 }
 
 /* Headers tabpanel */
 
 #headers-tabpanel .summary {
-  background: var(--theme-toolbar-background);
+  background-color: 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-body-background);
+  color: var(--theme-toolbar-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,26 +134,25 @@
   --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: 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-tab-toolbar-background: #d8eaf9;
+  --theme-toolbar-background: #f0f1f2;
   --theme-selection-background: #3399ff;
   --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
   --theme-selection-color: white;
-  --theme-splitter-color: #bfbfbf;
+  --theme-splitter-color: #aabccf;
   --theme-comment: darkgreen;
 
-  --theme-body-color: #252525;
+  --theme-body-color: #000000;
   --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;
@@ -186,43 +185,19 @@
   /* 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,30 +423,37 @@ 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 {
@@ -1352,37 +1359,27 @@ 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) !important;
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
-  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;
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
 }
 
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   min-width: 100px;