Bug 1244054 - Firebug Theme, registration and general styles; r=bgrins,ntim
authorJan Odvarko <odvarko@gmail.com>
Wed, 06 Apr 2016 17:23:46 +0200
changeset 331676 0b7fdc7a9088dc833c66d55ed4e7d985fe15627b
parent 331675 1fb42ed8baa757551721dc212195c84d6f26a897
child 331677 f06ae0dbd3a5500cfd06c6c5ef7f2c9f1d71067c
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, ntim
bugs1244054
milestone48.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 1244054 - Firebug Theme, registration and general styles; r=bgrins,ntim MozReview-Commit-ID: DiLNMvP1scZ
devtools/client/definitions.js
devtools/client/framework/toolbox.js
devtools/client/locales/en-US/toolbox.properties
devtools/client/themes/common.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/splitters.css
devtools/client/themes/toolbars.css
devtools/client/themes/variables.css
devtools/client/themes/widgets.css
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -426,19 +426,28 @@ Tools.darkTheme = {
 Tools.lightTheme = {
   id: "light",
   label: l10n("options.lightTheme.label", toolboxStrings),
   ordinal: 2,
   stylesheets: ["chrome://devtools/skin/light-theme.css"],
   classList: ["theme-light"],
 };
 
+Tools.firebugTheme = {
+  id: "firebug",
+  label: l10n("options.firebugTheme.label", toolboxStrings),
+  ordinal: 3,
+  stylesheets: ["chrome://devtools/skin/firebug-theme.css"],
+  classList: ["theme-light", "theme-firebug"],
+};
+
 exports.defaultThemes = [
   Tools.darkTheme,
   Tools.lightTheme,
+  Tools.firebugTheme,
 ];
 
 /**
  * Lookup l10n string from a string bundle.
  *
  * @param {string} name
  *        The key to lookup.
  * @param {StringBundle} bundle
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1178,17 +1178,16 @@ Toolbox.prototype = {
     }
 
     if (toolDefinition.label && !toolDefinition.iconOnly) {
       let label = this.doc.createElement("label");
       label.setAttribute("value", toolDefinition.label);
       label.setAttribute("crop", "end");
       label.setAttribute("flex", "1");
       radio.appendChild(label);
-      radio.setAttribute("flex", "1");
     }
 
     if (!toolDefinition.bgTheme) {
       toolDefinition.bgTheme = "theme-toolbar";
     }
     let vbox = this.doc.createElement("vbox");
     vbox.className = "toolbox-panel " + toolDefinition.bgTheme;
 
--- a/devtools/client/locales/en-US/toolbox.properties
+++ b/devtools/client/locales/en-US/toolbox.properties
@@ -103,16 +103,20 @@ sidebar.showAllTabs.tooltip=All tabs
 # LOCALIZATION NOTE (options.darkTheme.label)
 # Used as a label for dark theme
 options.darkTheme.label=Dark theme
 
 # LOCALIZATION NOTE (options.lightTheme.label)
 # Used as a label for light theme
 options.lightTheme.label=Light theme
 
+# LOCALIZATION NOTE (options.firebugTheme.label)
+# Used as a label for Firebug theme
+options.firebugTheme.label=Firebug theme
+
 # LOCALIZATION NOTE (toolbox.noContentProcess.message)
 # Used as a message in the alert displayed when trying to open a browser
 # content toolbox and there is no content process running
 toolbox.noContentProcess.message=No content process running.
 
 # LOCALIZATION NOTE (toolbox.viewCssSourceInStyleEditor.label)
 # Used as a message in either tooltips or contextual menu items to open the
 # corresponding URL as a css file in the Style-Editor tool.
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -11,31 +11,35 @@
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
 }
 
 :root[platform="win"] {
   --monospace-font-family: Consolas, monospace;
 }
 
-:root[platform="linux"] {
+:root[platform="linux"],
+:root.theme-firebug {
   --monospace-font-family: monospace;
 }
 
+:root.theme-firebug {
+  --proportional-font-family: Lucida Grande, Tahoma, sans-serif;
+}
+
 .devtools-monospace {
   font-family: var(--monospace-font-family);
 }
 
 :root[platform="linux"] .devtools-monospace {
   font-size: 80%;
 }
 
 
 /* Autocomplete Popup */
-/* Dark and light theme */
 
 .devtools-autocomplete-popup {
   -moz-appearance: none !important;
   box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
   background-color: transparent;
   border-radius: 3px;
   overflow-x: hidden;
   max-height: 40rem;
@@ -101,26 +105,41 @@
   border: 1px solid hsl(210,24%,90%);
   background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
 }
 
 .devtools-autocomplete-popup.light-theme {
   box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
 }
 
+.theme-firebug .devtools-autocomplete-popup {
+  border-color: var(--theme-splitter-color);
+  border-radius: 5px;
+  font-size: var(--theme-autompletion-font-size);
+}
+
+.devtools-autocomplete-popup.firebug-theme {
+  background: var(--theme-body-background);
+}
+
+.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.firebug-theme > richlistitem:hover,
 .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
 .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
   background-color: rgba(128,128,128,0.3);
 }
 
+.devtools-autocomplete-listbox.firebug-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.firebug-theme > richlistitem[selected] > .initial-value,
 .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
 .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
   color: #222;
 }
 
+.devtools-autocomplete-listbox.firebug-theme > richlistitem > label,
 .devtools-autocomplete-listbox.light-theme > richlistitem > label {
   color: #666;
 }
 
 /* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
 
 .devtools-tooltip .panel-arrowcontent {
   padding: 4px;
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -1,14 +1,231 @@
 /* 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/. */
 
 @import url(variables.css);
 @import url(common.css);
-@import url(toolbars.css);
 @import url(light-theme.css);
 
-.theme-body {
+:root {
   font-size: 11px;
-  font-family: Lucida Grande, Tahoma, sans-serif;
+  font-family: var(--proportional-font-family);
+}
+
+/* CodeMirror Color Syntax */
+
+.theme-firebug .cm-keyword {color: BlueViolet; font-weight: bold;}
+.theme-firebug .cm-atom {color: #219;}
+.theme-firebug .cm-number {color: #164;}
+.theme-firebug .cm-def {color: #00f;}
+.theme-firebug .cm-variable {color: black;}
+.theme-firebug .cm-variable-2 {color: black;}
+.theme-firebug .cm-variable-3 {color: black;}
+.theme-firebug .cm-property {color: black;}
+.theme-firebug .cm-operator {color: black;}
+.theme-firebug .cm-comment {color: Silver;}
+.theme-firebug .cm-string {color: Red;}
+.theme-firebug .cm-string-2 {color: Red;}
+.theme-firebug .cm-meta {color: rgb(120, 120, 120); font-style: italic;}
+.theme-firebug .cm-error {color: #f00;}
+.theme-firebug .cm-qualifier {color: #555;}
+.theme-firebug .cm-builtin {color: #30a;}
+.theme-firebug .cm-bracket {color: #997;}
+.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;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.theme-firebug .console-string {
+  color: #FF183C;
+}
+
+/* Variables View */
+
+.theme-firebug .variables-view-variable > .title > .name,
+.theme-firebug .variables-view-variable > .title > .value {
+  color: var(--theme-body-color);
+}
+
+/* Firebug theme support for tabbar and panel tabs
+  (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: rgb(219, 234, 249) !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 0 0 0;
+  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 {
+}
+
+/* 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;
+}
+
+.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;
+  border-bottom-width: 0 !important;
+  padding-bottom: 2px;
+  color: inherit;
 }
+
+.theme-firebug .devtools-tab spacer,
+.theme-firebug .devtools-tab image {
+  display: none;
+}
+
+.theme-firebug .toolbox-tab label {
+  margin: 0;
+}
+
+.theme-firebug .devtools-sidebar-tabs tab label {
+  margin: 2px 0 0 0;
+}
+
+/* Use different padding for labels inside tabs on Win platform.
+  Make sure this overrides the default in global.css */
+:root[platform="win"].theme-firebug .devtools-sidebar-tabs tab label {
+  margin: 0 4px !important;
+}
+
+.theme-firebug #panelSideBox .devtools-tab[selected],
+.theme-firebug .devtools-sidebar-tabs tab[selected] {
+  background-color: white;
+}
+
+.theme-firebug #panelSideBox .devtools-tab:first-child,
+.theme-firebug .devtools-sidebar-tabs tab:first-child {
+  margin-inline-start: 5px;
+}
+
+/* Firebug theme support for the Option (panel) tab */
+
+.theme-firebug #toolbox-tab-options {
+  margin-inline-end: 4px;
+  background-color: white;
+}
+
+.theme-firebug #toolbox-tab-options::before {
+  content: url(chrome://devtools/skin/images/firebug/tool-options.svg);
+  display: block;
+  margin: 4px 7px 0;
+}
+
+.theme-firebug #toolbox-tab-options:not([selected]):hover::before {
+  filter: brightness(80%);
+}
+
+/* Toolbar */
+
+.theme-firebug .theme-toolbar,
+.theme-firebug toolbar,
+.theme-firebug .devtools-toolbar {
+  border-bottom: 1px solid rgb(170, 188, 207) !important;
+  background-color: rgb(219, 234, 249) !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;
+}
+
+/* Space around toolbar buttons */
+.theme-firebug .devtools-toolbar {
+  padding: 3px;
+}
+
+/* The height is the same for all toolbars and side panels tabs */
+.theme-firebug .theme-toolbar,
+.theme-firebug .devtools-sidebar-tabs tabs,
+.theme-firebug .devtools-toolbar {
+  height: 28px !important;
+}
+
+/* Do not set the fixed height for rule viewtoolbar. This toolbar
+  is changing its height to show pseudo classes. */
+.theme-firebug #ruleview-toolbar-container {
+  height: auto !important;
+}
+
+/* The Inspector panel side panels are using both
+  .devtools-toolbar and .theme-toolbar. We want the
+  proportional font for all labels in these toolbars */
+.theme-firebug .devtools-toolbar label,
+.theme-firebug .devtools-toolbar .label,
+.theme-firebug .theme-toolbar label,
+.theme-firebug .theme-toolbar .label {
+  font-family: var(--proportional-font-family);
+}
+
+/* Toolbar Buttons */
+
+.theme-firebug .theme-toolbar button,
+.theme-firebug .devtools-button,
+.theme-firebug toolbarbutton {
+  margin: 1px;
+  border-radius: 2px;
+  color: var(--theme-body-color);
+  line-height: var(--theme-toolbar-font-size);
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug .theme-toolbar button,
+.theme-firebug .devtools-button {
+  border-width: 1px !important;
+  min-height: 21px;
+  min-width: 24px;
+}
+
+.theme-firebug .devtools-toolbarbutton {
+  min-width: 24px;
+}
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -169,17 +169,17 @@ body {
 }
 
 .theme-toolbar,
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs,
 .devtools-sidebar-alltabs,
 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
   color: var(--theme-body-color);
-  background-color: var(--theme-toolbar-background);
+  background: var(--theme-toolbar-background);
   border-color: var(--theme-splitter-color);
 }
 
 .ruleview-swatch,
 .computedview-colorswatch {
   box-shadow: 0 0 0 1px #c4c4c4;
 }
 
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -20,17 +20,18 @@
   --devtools-splitter-inline-end-width: 4px;
 }
 
 :root[devtoolstheme="light"] {
   /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
   --devtools-splitter-color: #dde1e4;
 }
 
-:root[devtoolstheme="dark"] {
+:root[devtoolstheme="dark"],
+:root[devtoolstheme="firebug"] {
   --devtools-splitter-color: #42484f;
 }
 
 .devtools-horizontal-splitter,
 .devtools-side-splitter {
   -moz-appearance: none;
   background-image: none;
   border: 0;
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -4,25 +4,59 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 .theme-light {
   --searchbox-background-color: #ffee99;
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
+  --magnifying-glass-image: url(images/magnifying-glass-light.png);
+  --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png);
+  --command-pick-image: url(images/command-pick.svg);
+  --tool-options-image: url(images/tool-options.svg);
+  --close-button-image: url(chrome://devtools/skin/images/close.svg);
+  --icon-filter: invert(1);
+  --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
+  --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
+  --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
+  --toolbar-button-border-color: rgba(170, 170, 170, .5);
 }
 
 .theme-dark {
   --searchbox-background-color: #4d4222;
   --searchbox-border-color: #d99f2b;
   --searcbox-no-match-background-color: #402325;
   --searcbox-no-match-border-color: #cc3d3d;
+  --magnifying-glass-image: url(images/magnifying-glass.png);
+  --magnifying-glass-image-2x: url(images/magnifying-glass@2x.png);
+  --command-pick-image: url(images/command-pick.svg);
+  --tool-options-image: url(images/tool-options.svg);
+  --close-button-image: url(chrome://devtools/skin/images/close.svg);
+  --icon-filter: none;
+  --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
+  --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
+  --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
+  --toolbar-button-border-color: rgba(0, 0, 0, .4);
 }
 
+.theme-firebug {
+  --magnifying-glass-image: url(images/firebug/filter.svg);
+  --magnifying-glass-image-2x: url(images/firebug/filter.svg);
+  --command-pick-image: url(images/firebug/command-pick.svg);
+  --tool-options-image: url(images/firebug/tool-options.svg);
+  --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
+  --icon-filter: none;
+  --dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg);
+  --dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg);
+  --dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg);
+  --toolbar-button-border-color: rgba(170, 170, 170, .5);
+}
+
+
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
   -moz-appearance: none;
   padding: 0;
   border-width: 0;
   border-bottom-width: 1px;
   border-style: solid;
@@ -125,26 +159,20 @@
 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
   -moz-margin-end: 5px;
 }
 
 .devtools-toolbarbutton[label][standalone] {
   min-height: 2em;
 }
 
-.theme-dark .devtools-menulist,
-.theme-dark .devtools-toolbarbutton,
-.theme-dark .devtools-button {
-  border-color: rgba(0, 0, 0, .4); /* Splitters */
-}
-
-.theme-light .devtools-menulist,
-.theme-light .devtools-toolbarbutton,
-.theme-light .devtools-button {
-  border-color: rgba(170, 170, 170, .5); /* Splitters */
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+  border-color: var(--toolbar-button-border-color);
 }
 
 /* Icon button styles */
 .devtools-toolbarbutton:not([label]),
 .devtools-toolbarbutton[text-as-image] {
   min-width: 32px;
 }
 
@@ -153,16 +181,21 @@
   -moz-padding-end: 5px;
   min-width: inherit;
 }
 
 #toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
   padding: 0 2px;
 }
 
+/* Invert toolbox button icons in Firebug theme. */
+.theme-firebug #toolbox-buttons toolbarbutton image {
+  filter: invert(1);
+}
+
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
   display: none;
 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {
   margin: 0;
 }
 
@@ -291,17 +324,17 @@
   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");
+  list-style-image: var(--tool-options-image);
 }
 
 .devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
   -moz-margin-end: 0;
 }
 
 .devtools-toolbarbutton-group + .devtools-toolbarbutton {
   -moz-margin-start: 3px;
@@ -327,30 +360,23 @@
 :root[platform="mac"] .devtools-searchinput {
   border-radius: 20px;
 }
 
 .devtools-searchinput {
   padding: 0;
   -moz-padding-start: 22px;
   -moz-padding-end: 4px;
+  background-image: var(--magnifying-glass-image);
   background-position: 8px center;
   background-size: 11px 11px;
   background-repeat: no-repeat;
   font-size: inherit;
 }
 
-.theme-dark .devtools-searchinput {
-  background-image: url(images/magnifying-glass.png);
-}
-
-.theme-light .devtools-searchinput {
-  background-image: url(images/magnifying-glass-light.png);
-}
-
 .devtools-searchinput:-moz-locale-dir(rtl),
 .devtools-searchinput:-moz-dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
   visibility: hidden;
 }
@@ -456,22 +482,18 @@
   margin-bottom: 0;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 @media (min-resolution: 1.1dppx) {
-  .theme-dark .devtools-searchinput {
-    background-image: url(images/magnifying-glass@2x.png);
-  }
-
-  .theme-light .devtools-searchinput {
-    background-image: url(images/magnifying-glass-light@2x.png);
+  .devtools-searchinput {
+    background-image: var(--magnifying-glass-image-2x);
   }
 }
 
 /* Close button */
 
 .devtools-closebutton {
   -moz-appearance: none;
   border: none;
@@ -481,17 +503,17 @@
   opacity: 0.8;
 }
 
 .devtools-closebutton > image {
   width: 16px;
   height: 16px;
   -moz-appearance: none;
   background-size: cover;
-  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-image: var(--close-button-image);
   background-position: center center;
   background-repeat: no-repeat;
 }
 
 .devtools-closebutton > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
   margin: -4px;
@@ -613,35 +635,46 @@
 }
 
 #toolbox-controls > toolbarbutton > .toolbarbutton-text,
 #toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
 .command-button > .toolbarbutton-text {
   display: none;
 }
 
+/* Save space in Firebug theme */
+.theme-firebug #toolbox-controls toolbarbutton {
+  margin-inline-start: 0 !important;
+  width: 12px;
+  min-width: 12px;
+}
+
+.theme-firebug #toolbox-controls toolbarbutton:hover {
+  background: none;
+}
+
 #toolbox-dock-buttons > toolbarbutton > image {
   -moz-appearance: none;
   width: 16px;
   height: 16px;
   background-size: 16px 16px;
   background-position: 0 center;
   background-repeat: no-repeat;
 }
 
 #toolbox-dock-bottom > image {
-  background-image: url("chrome://devtools/skin/images/dock-bottom.svg");
+  background-image: var(--dock-bottom-image);
 }
 
 #toolbox-dock-side  > image {
-  background-image: url("chrome://devtools/skin/images/dock-side.svg");
+  background-image: var(--dock-side-image);
 }
 
 #toolbox-dock-window > image {
-  background-image: url("chrome://devtools/skin/images/dock-undock.svg");
+  background-image: var(--dock-undock-image);
 }
 
 #toolbox-dock-bottom-minimize {
   /* Bug 1177463 - The minimize button is currently hidden until we agree on
      the UI for it, and until bug 1173849 is fixed too. */
   display: none;
 }
 
@@ -739,17 +772,17 @@
   background-image: url("chrome://devtools/skin/images/command-tilt.svg");
 }
 
 #command-button-scratchpad > image {
   background-image: url("chrome://devtools/skin/images/command-scratchpad.svg");
 }
 
 #command-button-pick > image {
-  background-image: url("chrome://devtools/skin/images/command-pick.svg");
+  background-image: var(--command-pick-image);
 }
 
 #command-button-frames > image {
   background-image: url("chrome://devtools/skin/images/command-frames.svg");
 }
 
 #command-button-splitconsole > image {
   background-image: url("chrome://devtools/skin/images/command-console.svg");
@@ -810,16 +843,22 @@
   max-width: 100px;
   margin: 0;
   padding: 0;
   border-style: solid;
   border-width: 0;
   -moz-border-start-width: 1px;
   -moz-box-align: center;
   -moz-user-focus: normal;
+  -moz-box-flex: 1;
+}
+
+/* Save space on the tab-strip in Firebug theme */
+.theme-firebug .devtools-tab {
+  -moz-box-flex: initial;
 }
 
 .theme-dark .devtools-tab {
   color: var(--theme-body-color-alt);
   border-color: #42484f;
 }
 
 .theme-light .devtools-tab {
@@ -852,16 +891,26 @@
 .theme-dark .devtools-tab:not([selected])[highlighted] {
   background-color: hsla(99,100%,14%,.2);
 }
 
 .theme-light .devtools-tab:not([selected])[highlighted] {
   background-color: rgba(44, 187, 15, .2);
 }
 
+/* Display execution pointer in the Debugger tab to indicate
+   that the debugger is paused. */
+.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(89, 178, 234, .2);
+  background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg);
+  background-repeat: no-repeat;
+  padding-left: 13px !important;
+  background-position: 3px 6px;
+}
+
 .devtools-tab > image {
   border: none;
   margin: 0;
   margin-inline-start: 4px;
   opacity: 0.6;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
 }
@@ -949,17 +998,17 @@
 .theme-light #breadcrumb-separator-normal,
 .theme-light .scrollbutton-up > .toolbarbutton-icon,
 .theme-light .scrollbutton-down > .toolbarbutton-icon,
 .theme-light #black-boxed-message-button .button-icon,
 .theme-light #requests-menu-perf-notice-button .button-icon,
 .theme-light #requests-menu-network-summary-button .button-icon,
 .theme-light #toggle-breakpoints[checked] > image,
 .theme-light .event-tooltip-debugger-icon {
-  filter: invert(1);
+  filter: var(--icon-filter);
 }
 
 /* Since selected backgrounds are blue, we want to use the normal
  * (light) icons. */
 .theme-light .devtools-tab[icon-invertable][selected] > image,
 .theme-light .devtools-tab[icon-invertable][highlighted] > image {
   filter: none !important;
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -49,16 +49,20 @@
   --theme-graphs-bluegrey: #0072ab;
   --theme-graphs-purple: #b693eb;
   --theme-graphs-yellow: #efc052;
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 }
 
 :root.theme-dark {
   --theme-body-background: #14171a;
   --theme-sidebar-background: #181d20;
   --theme-contrast-background: #b28025;
 
   --theme-tab-toolbar-background: #252c33;
@@ -91,32 +95,36 @@
   --theme-graphs-bluegrey: #5e88b0;
   --theme-graphs-purple: #df80ff;
   --theme-graphs-yellow: #d99b28;
   --theme-graphs-orange: #d96629;
   --theme-graphs-red: #eb5368;
   --theme-graphs-grey: #757873;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
 }
 
 :root.theme-firebug {
-  --theme-body-background: white;
-  --theme-sidebar-background: white;
+  --theme-body-background: #fcfcfc;
+  --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
-  --theme-tab-toolbar-background: #fcfcfc;
-  --theme-toolbar-background: #fcfcfc;
-  --theme-selection-background: #4c9ed9;
-  --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
-  --theme-selection-color: #f5f7fa;
-  --theme-splitter-color: #dde1e4;
-  --theme-comment: #696969;
+  --theme-tab-toolbar-background: #ebeced;
+  --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: #aabccf;
+  --theme-comment: #757873;
 
-  --theme-body-color: #393f4c;
+  --theme-body-color: #18191a;
   --theme-body-color-alt: #585959;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #0088cc;
   --theme-highlight-bluegrey: #0072ab;
@@ -132,9 +140,16 @@
   --theme-graphs-bluegrey: #0072ab;
   --theme-graphs-purple: #b693eb;
   --theme-graphs-yellow: #efc052;
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
+
+  /* Font size */
+  --theme-toolbar-font-size: 12px;
 }
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -3,24 +3,39 @@
  * 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/. */
 
 .theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
   --sidemenu-selected-arrow: url(images/itemArrow-dark-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/itemArrow-dark-rtl.svg);
+  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
+  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
 }
+
 .theme-light {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
   --sidemenu-selected-arrow: url(images/itemArrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/itemArrow-rtl.svg);
+  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
+  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
 }
 
+.theme-firebug {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+  --sidemenu-selected-arrow: url(images/itemArrow-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/itemArrow-rtl.svg);
+  --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
+  --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg);
+}
+
+
 /* Generic pane helpers */
 
 .generic-toggled-pane {
   -moz-margin-start: 0 !important;
   /* Unfortunately, transitions don't work properly with locale-aware properties,
      so both the left and right margins are set via js, while the start margin
      is always overridden here. */
 }
@@ -317,16 +332,112 @@
 .theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
   color: white;
 }
 
 .theme-light .breadcrumbs-widget-item:not([checked]):hover label {
   color: black;
 }
 
+/* Firebug theme support for breadcrumbs widget. */
+
+.theme-firebug .breadcrumbs-widget-item {
+  margin-inline-start: 10px;
+  margin-inline-end: 1px;
+  border: 1px solid transparent;
+  color: #141414;
+  border-radius: 2px;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug .breadcrumbs-widget-item:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+  background-image: transparent linear-gradient(
+                    rgba(255, 255, 255, 0.4),
+                    rgba(255, 255, 255, 0.2)) no-repeat;
+  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset,
+              0 0 1px rgba(255, 255, 255, 0.6) inset,
+              0 0 2px rgba(0, 0, 0, 0.05);
+}
+
+.theme-firebug .breadcrumbs-widget-item > .button-box {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.theme-firebug .breadcrumbs-widget-item:first-child {
+  margin: 0;
+}
+
+.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
+  content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
+  position: relative;
+  left: -3px;
+  margin: 0 0 0 -5px;
+  padding: 0;
+  width: 5px;
+}
+
+/* Breadcrumbs Separators (reset selection styles) */
+.theme-firebug .breadcrumbs-widget-item[checked],
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
+  background: none;
+  font-weight: bold;
+  color: inherit;
+}
+
+/* The first rule is there only to make sure the default rule from
+widgets.css is overwritten. */
+.theme-firebug .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
+  background: none;
+}
+
+.theme-firebug .breadcrumbs-widget-item .breadcrumbs-widget-item-tag {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+/* Breadcrumbs Scrolling Buttons */
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up,
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down {
+  padding: 0;
+  box-shadow: none;
+}
+
+.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 {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 .simple-list-widget-item.selected {
@@ -502,22 +613,35 @@
 }
 
 .variables-view-scope > .title {
   border-top-width: 1px;
   border-top-style: solid;
   margin-top: -1px;
 }
 
+.theme-firebug .variables-view-scope > .title {
+  height: auto;
+  border: none;
+}
+
+.theme-firebug .variables-view-scope > .title > .theme-twisty {
+  display: none;
+}
+
 /* Generic variables traits */
 
 .variables-view-variable:not(:last-child) {
   border-bottom: 1px solid rgba(128, 128, 128, .15);
 }
 
+.theme-firebug .variables-view-variable {
+  border-bottom: 1px solid transparent;
+}
+
 .variables-view-variable > .title > .name {
   font-weight: 600;
 }
 
 /* Generic variables *and* properties traits */
 
 .variable-or-property:focus > .title > label {
   color: inherit !important;
@@ -698,22 +822,22 @@
 
 .variable-or-property:focus > .title > .variables-view-delete,
 .variable-or-property:focus > .title > .variables-view-edit,
 .variable-or-property:focus > .title > .variables-view-open-inspector {
   filter: none;
 }
 
 .variables-view-delete {
-  background-image: url("chrome://devtools/skin/images/vview-delete.png");
+  background-image: var(--delete-icon);
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-delete {
-    background-image: url("chrome://devtools/skin/images/vview-delete@2x.png");
+    background-image: var(--delete-icon-2x);
   }
 }
 
 .variables-view-edit {
   background-image: url("chrome://devtools/skin/images/vview-edit.png");
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -727,17 +851,16 @@
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-open-inspector {
     background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
   }
 }
 
-
 /* Variables and properties input boxes */
 
 .variable-or-property > .title > .separator + .element-value-input {
   -moz-margin-start: -2px !important;
   -moz-margin-end: 2px !important;
 }
 
 .variable-or-property > .title > .separator[hidden=true] + .element-value-input {