Bug 1244054 - Firebug Theme, tools; r=bgrins,ntim
authorJan Odvarko <odvarko@gmail.com>
Wed, 06 Apr 2016 17:32:18 +0200
changeset 331677 f06ae0dbd3a5500cfd06c6c5ef7f2c9f1d71067c
parent 331676 0b7fdc7a9088dc833c66d55ed4e7d985fe15627b
child 331678 d42b25947fc26a0f9eab98d631465b72769553bd
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, tools; r=bgrins,ntim MozReview-Commit-ID: 2hsODdK4bdL
devtools/client/themes/animationinspector.css
devtools/client/themes/computed.css
devtools/client/themes/debugger.css
devtools/client/themes/inspector.css
devtools/client/themes/layout.css
devtools/client/themes/light-theme.css
devtools/client/themes/markup.css
devtools/client/themes/netmonitor.css
devtools/client/themes/performance.css
devtools/client/themes/rules.css
devtools/client/themes/variables.css
devtools/client/themes/webaudioeditor.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -1,20 +1,45 @@
 /* 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/. */
 
 /* Animation-inspector specific theme variables */
 
 .theme-dark {
   --even-animation-timeline-background-color: rgba(255,255,255,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
+  --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.png);
+  --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
+  --play-image: url(chrome://devtools/skin/images/debugger-play.png);
+  --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
 }
 
 .theme-light {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
+  --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.png);
+  --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
+  --play-image: url(chrome://devtools/skin/images/debugger-play.png);
+  --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+}
+
+.theme-firebug {
+  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg);
+  --pause-image-2x: url(chrome://devtools/skin/images/firebug/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
+  --rewind-image-2x: url(chrome://devtools/skin/images/firebug/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/firebug/play.svg);
+  --play-image-2x: url(chrome://devtools/skin/images/firebug/play.svg);
 }
 
 :root {
   /* How high should toolbars be */
   --toolbar-height: 20px;
   /* How wide should the sidebar be (should be wide enough to contain long
      property names like 'border-bottom-right-radius' without ellipsis) */
   --timeline-sidebar-width: 200px;
@@ -140,42 +165,42 @@ body {
 }
 
 #timeline-toolbar .devtools-button,
 #timeline-toolbar .label {
   border-width: 0 1px 0 0;
 }
 
 #element-picker::before {
-  background-image: url("chrome://devtools/skin/images/command-pick.svg");
+  background-image: var(--command-pick-image);
 }
 
 .pause-button::before {
-  background-image: url("images/debugger-pause.png");
+  background-image: var(--pause-image);
 }
 
 #rewind-timeline::before {
-  background-image: url("images/rewind.png");
+  background-image: var(--rewind-image);
 }
 
 .pause-button.paused::before {
-  background-image: url("images/debugger-play.png");
+  background-image: var(--play-image);
 }
 
 @media (min-resolution: 1.1dppx) {
   .pause-button::before {
-    background-image: url("images/debugger-pause@2x.png");
+    background-image: var(--pause-image-2x);
   }
 
   .pause-button.paused::before {
-    background-image: url("images/debugger-play@2x.png");
+    background-image: var(--play-image-2x);
   }
 
   #rewind-timeline::before {
-    background-image: url("images/rewind@2x.png");
+    background-image: var(--rewind-image-2x);
   }
 }
 
 #timeline-rate select.devtools-button {
   -moz-appearance: none;
   text-align: center;
   font-family: inherit;
   color: var(--theme-body-color);
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -91,16 +91,25 @@
   background-position: left center;
   padding-left: 8px;
 }
 
 .property-content {
   padding-left: 17px;
 }
 
+.theme-firebug .property-view,
+.theme-firebug .property-content {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug .property-view {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 /* From skin */
 .expander {
   visibility: hidden;
   margin-left: -12px !important;
 }
 
 .expandable {
   visibility: visible;
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -54,16 +54,34 @@
 }
 
 .dbg-breakpoint-checkbox {
   width: 16px;
   height: 16px;
   margin: 2px;
 }
 
+/* Firebug theme uses breakpoint icon istead of a checkbox */
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
+  -moz-appearance: none;
+  border: none;
+  background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check,
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * {
+  opacity: 0.5;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox {
+  padding-inline-end: 0;
+  margin-inline-end: 0;
+}
+
 .dbg-breakpoint-condition-thrown-message {
   display: none;
   color: var(--theme-highlight-red);
 }
 
 .dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
   display: block;
   -moz-padding-start: 0;
@@ -71,51 +89,64 @@
 
 /* Sources toolbar */
 
 #sources-toolbar > .devtools-toolbarbutton,
 #sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
+:root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
   -moz-image-region: rect(0,16px,16px,0);
 }
 
 @media (min-resolution: 1.1dppx) {
-  #sources-toolbar .devtools-toolbarbutton:not([label]) {
+  :root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
     -moz-image-region: rect(0,32px,32px,0);
   }
 }
 
 #black-box {
   list-style-image: url(images/debugger-blackbox.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #black-box {
     list-style-image: url(images/debugger-blackbox@2x.png);
   }
 }
 
+.theme-firebug #black-box {
+  list-style-image: url(images/firebug/debugger-blackbox.svg);
+}
+
 #pretty-print {
   list-style-image: url(images/debugger-prettyprint.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #pretty-print {
     list-style-image: url(images/debugger-prettyprint@2x.png);
   }
 }
 
+.theme-firebug #pretty-print {
+  list-style-image: url(images/firebug/debugger-prettyprint.svg);
+}
+
 #toggle-breakpoints {
   list-style-image: url(images/debugger-toggleBreakpoints.svg);
   -moz-image-region: rect(0,32px,16px,16px) !important;
 }
 
+.theme-firebug #toggle-breakpoints {
+  list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg);
+  -moz-image-region: unset !important;
+}
+
 #toggle-breakpoints[checked] {
   -moz-image-region: rect(0,16px,16px,0) !important;
 }
 
 #toggle-breakpoints[checked] > image {
   /* This button has a special checked image, don't make it blue */
   filter: none;
 }
@@ -562,16 +593,24 @@
     list-style-image: url(images/debugger-pause@2x.png);
   }
 
   #resume[checked] {
     list-style-image: url(images/debugger-play@2x.png);
   }
 }
 
+.theme-firebug #resume {
+  list-style-image: url(images/firebug/pause.svg);
+}
+
+.theme-firebug #resume[checked] {
+  list-style-image: url(images/firebug/play.svg);
+}
+
 #resume[break-on-next] {
   background: var(--theme-highlight-lightorange);
 }
 
 #step-over {
   list-style-image: url(images/debugger-step-over.png);
 }
 
@@ -592,22 +631,34 @@
     list-style-image: url(images/debugger-step-in@2x.png);
   }
 
   #step-out {
     list-style-image: url(images/debugger-step-out@2x.png);
   }
 }
 
+.theme-firebug #step-over {
+  list-style-image: url(images/firebug/debugger-step-over.svg);
+}
+
+.theme-firebug #step-in {
+  list-style-image: url(images/firebug/debugger-step-in.svg);
+}
+
+.theme-firebug #step-out {
+  list-style-image: url(images/firebug/debugger-step-out.svg);
+}
+
 #instruments-pane-toggle {
-  list-style-image: url(images/pane-collapse.svg);
+  list-style-image: var(--theme-pane-collapse-image);
 }
 
 #instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url(images/pane-expand.svg);
+  list-style-image: var(--theme-pane-expand-image);
 }
 
 /* Horizontal vs. vertical layout */
 
 #vertical-layout-panes-container {
   min-height: 35vh;
   max-height: 80vh;
 }
@@ -629,8 +680,58 @@
 #body[layout=vertical] .side-menu-widget-item-arrow {
   background-image: none !important;
 }
 
 #body[layout=vertical] .side-menu-widget-group,
 #body[layout=vertical] .side-menu-widget-item {
   -moz-margin-end: 0;
 }
+
+/* Firebug theme customization of source group title */
+.theme-firebug #sources-pane .side-menu-widget-group-title {
+  border-bottom: none;
+  padding: 2px 4px;
+  background: var(--theme-header-background);
+  font-weight: bold;
+}
+
+/* Sections titles (toolbars) in Variables panel they have different height */
+.theme-firebug #variables-tabpanel .title.devtools-toolbar {
+  display: -moz-box;
+  height: 20px !important;
+}
+
+/* Firebug theme support for the Callstack Panel */
+
+.theme-firebug #callstack-list {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-title {
+  color: var(--theme-content-color2);
+  font-weight: normal;
+  font-family: monospace;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-url,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-sep,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-line {
+  color: blue;
+  font-weight: bold;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  margin: 0 4px;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item.selected {
+  color: var(--theme-selection-color);
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item:first-child {
+  border-top: none;
+}
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -11,21 +11,21 @@
   padding: 0px;
   border-bottom-width: 0px;
   border-top-width: 1px;
 }
 
 /* Expand/collapse panel toolbar button */
 
 #inspector-pane-toggle {
-  list-style-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  list-style-image: var(--theme-pane-collapse-image);
 }
 
 #inspector-pane-toggle[pane-collapsed] {
-  list-style-image: url(chrome://devtools/skin/images/pane-expand.svg);
+  list-style-image: var(--theme-pane-expand-image);
 }
 
 @media (max-width: 700px) {
   #inspector-pane-toggle > .toolbarbutton-icon {
     transform: rotate(90deg);
   }
 }
 
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -117,16 +117,36 @@
 #layout-padding {
   border-color: #6a5acd;
 }
 
 #layout-content {
   background-color: #87ceeb;
 }
 
+.theme-firebug #layout-main,
+.theme-firebug #layout-borders,
+.theme-firebug #layout-content {
+  border-style: solid;
+}
+
+.theme-firebug #layout-main,
+.theme-firebug #layout-header {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #layout-main {
+  color: var(--theme-body-color);
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug #layout-header {
+  font-size: var(--theme-toolbar-font-size);
+}
+
 /* Editable region sizes are contained in absolutely positioned <p> */
 
 #layout-main > p {
   position: absolute;
   pointer-events: none;
   margin: 0;
   text-align: center;
 }
--- 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: var(--theme-toolbar-background);
+  background-color: 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/markup.css
+++ b/devtools/client/themes/markup.css
@@ -289,8 +289,28 @@ ul.children + .tag-line::before {
   -moz-margin-start: 5px;
   -moz-user-select: none;
 }
 
 .markupview-events {
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
 }
+
+/* Firebug Theme */
+
+.theme-firebug .theme-fg-color3 {
+  color: var(--theme-graphs-full-blue);
+}
+
+.theme-firebug .open,
+.theme-firebug .close,
+.theme-firebug .attr-name.theme-fg-color2 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-firebug .attr-value.theme-fg-color6 {
+  color: var(--theme-highlight-red);
+}
+
+.theme-firebug .markupview-events {
+  font-size: var(--theme-toolbar-font-size);
+}
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -1,20 +1,56 @@
 /* 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/. */
 
 :root.theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
+
+  --timing-blocked-color: rgba(235, 83, 104, 0.8);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+  --timig-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
 }
+
 :root.theme-light {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
+
+  --timing-blocked-color: rgba(235, 83, 104, 0.8);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
+  --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
+}
+
+:root.theme-firebug {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+
+  --timing-blocked-color:  rgba(235, 83, 104, 0.8); /* red */
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+  --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+  --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
 }
 
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
 }
 
@@ -40,24 +76,31 @@
 }
 
 /* Network requests table */
 
 #requests-menu-toolbar {
   padding: 0;
 }
 
+.theme-firebug #requests-menu-toolbar {
+  height: 16px !important;
+}
+
 .requests-menu-subitem {
   padding: 3px;
 }
 
 .requests-menu-header-button {
   -moz-appearance: none;
   background-color: transparent;
-  border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+  border-image: linear-gradient(transparent 15%,
+                                var(--theme-splitter-color) 15%,
+                                var(--theme-splitter-color) 85%,
+                                transparent 85%) 1 1;
   border-style: solid;
   border-width: 0;
   border-inline-start-width: 1px;
   min-width: 1px;
   min-height: 24px;
   margin: 0;
   padding-bottom: 2px;
   padding-inline-start: 13px;
@@ -81,22 +124,22 @@
   height: 4px;
   margin-inline-end: 6px;
   -moz-box-ordinal-group: 2;
   width: 7px;
 }
 
 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
-  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
+  list-style-image: var(--sort-ascending-image);
 }
 
 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
-  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
+  list-style-image: var(--sort-descending-image);
 }
 
 .requests-menu-header-button > .button-box > .button-text,
 #requests-menu-waterfall-label-wrapper {
   -moz-box-flex: 1;
 }
 
 .requests-menu-header-button[sorted],
@@ -105,16 +148,40 @@
   color: var(--theme-selection-color);
 }
 
 .requests-menu-header-button[sorted],
 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 }
 
+/* Firebug theme support for Network panel header */
+
+.theme-firebug .requests-menu-header {
+  padding: 0 !important;
+  font-weight: bold;
+  background: linear-gradient(rgba(255, 255, 255, 0.05),
+                              rgba(0, 0, 0, 0.05)),
+                              #C8D2DC;
+}
+
+.theme-firebug .requests-menu-header-button {
+  min-height: 17px;
+}
+
+.theme-firebug .requests-header-menu-button[sorted] {
+  background-color: #AAC3DC;
+}
+
+.theme-firebug .requests-header-menu:hover:active {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1),
+                                    transparent);
+}
+
+
 /* Network requests table: specific column dimensions */
 
 .requests-menu-status {
   max-width: 6em;
   text-align: center;
   width: 10vw;
 }
 
@@ -330,51 +397,43 @@
   font-size: 85%;
   font-weight: 600;
 }
 
 .requests-menu-timings-box {
   height: 9px;
 }
 
+.theme-firebug .requests-menu-timings-box {
+  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
+  height: 16px;
+}
+
 .requests-menu-timings-box.blocked {
-  background-color: rgba(235, 83, 104, 0.8); /* red */
+  background-color: var(--timing-blocked-color);
 }
 
 .requests-menu-timings-box.dns {
-  background-color: rgba(223, 128, 255, 0.8); /* pink */
+  background-color: var(--timing-dns-color);
 }
 
 .requests-menu-timings-box.connect {
-  background-color: rgba(217, 102, 41, 0.8); /* orange */
+  background-color: var(--timing-connect-color);
 }
 
-/* Use custom colors for dark and light theme on remaining timing types. */
-.theme-dark .requests-menu-timings-box.send {
-  background-color: rgba(70, 175, 227, 0.8); /* light blue */
-}
-
-.theme-light .requests-menu-timings-box.send {
-  background-color: rgba(0, 136, 204, 0.8); /* blue */
+.requests-menu-timings-box.send {
+  background-color: var(--timing-send-color);
 }
 
-.theme-dark .requests-menu-timings-box.wait {
-  background-color: rgba(94, 136, 176, 0.8); /* blue grey */
+.requests-menu-timings-box.wait {
+  background-color: var(--timing-wait-color);
 }
 
-.theme-light .requests-menu-timings-box.wait {
-  background-color: rgba(95, 136, 176, 0.8); /* blue grey */
-}
-
-.theme-dark .requests-menu-timings-box.receive {
-  background-color: rgba(112, 191, 83, 0.8); /* green */
-}
-
-.theme-light .requests-menu-timings-box.receive {
-  background-color: rgba(44, 187, 15, 0.8); /* green */
+.requests-menu-timings-box.receive {
+  background-color: var(--timing-receive-color);
 }
 
 /* SideMenuWidget */
 #network-table .side-menu-widget-empty-text,
 #network-table .side-menu-widget-container {
   background-color: var(--theme-body-background);
 }
 
@@ -390,40 +449,70 @@
 .side-menu-widget-item:not(.selected)[odd] {
   background-color: var(--table-zebra-background);
 }
 
 .side-menu-widget-item:not(.selected):hover {
   background-color: var(--theme-selection-background-semitransparent);
 }
 
+.theme-firebug .side-menu-widget-item:not(.selected):hover {
+  background: #EFEFEF;
+}
+
+.theme-firebug .requests-menu-subitem {
+  padding: 1px;
+}
+
+/* HTTP Status Column */
+.theme-firebug .requests-menu-subitem.requests-menu-status {
+  font-weight: bold;
+}
+
+/* Method Column */
+.theme-firebug .requests-menu-subitem.requests-menu-method-box {
+  color: rgb(128, 128, 128);
+}
+
+/* Size Column */
+.theme-firebug .requests-menu-subitem.requests-menu-size {
+  text-align: end;
+  padding-inline-end: 4px;
+}
+
 /* Network request details */
 
 #details-pane-toggle {
-  list-style-image: url("chrome://devtools/skin/images/pane-collapse.svg");
+  list-style-image: var(--theme-pane-collapse-image);
 }
 
 #details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://devtools/skin/images/pane-expand.svg");
+  list-style-image: var(--theme-pane-expand-image);
 }
 
 /* Network request details tabpanels */
 
 .tabpanel-content {
   background-color: var(--theme-sidebar-background);
 }
 
 .theme-dark .tabpanel-content {
   color: var(--theme-selection-color);
 }
 
 #headers-tabpanel {
   background-color: var(--theme-toolbar-background);
 }
 
+/* Headers separators are toolbars, but they have different height
+  in Firebug theme */
+.theme-firebug .tabpanel-content .variables-view-container .title.devtools-toolbar {
+  height: 20px !important;
+}
+
 /* Summary tabpanel */
 
 .tabpanel-summary-container {
   padding: 1px;
 }
 
 .tabpanel-summary-label {
   -moz-padding-start: 4px;
@@ -507,16 +596,20 @@
   border: none;
   min-width: 1px;
 }
 
 #timings-tabpanel .requests-menu-timings-total {
   transition: transform 0.2s ease-out;
 }
 
+.theme-firebug #timings-tabpanel .requests-menu-timings-total {
+  color: var(--theme-body-color);
+}
+
 /* Security tabpanel */
 .security-info-section {
   -moz-padding-start: 1em;
 }
 
 .theme-dark #security-error-message {
   color: var(--theme-selection-color);
 }
@@ -695,16 +788,58 @@
 .table-chart-row-label[name=size] {
   width: 7em;
 }
 
 .table-chart-row-label[name=time] {
   width: 7em;
 }
 
+/* Firebug theme support for network charts */
+
+.theme-firebug .chart-colored-blob[name=html] {
+  fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */
+  background: rgba(94, 136, 176, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=css] {
+  fill: rgba(70, 175, 227, 0.8); /* light blue */
+  background: rgba(70, 175, 227, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=js] {
+  fill: rgba(235, 83, 104, 0.8); /* red */
+  background: rgba(235, 83, 104, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=xhr] {
+  fill: rgba(217, 102, 41, 0.8); /* orange  */
+  background: rgba(217, 102, 41, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=fonts] {
+  fill: rgba(223, 128, 255, 0.8); /* pink */
+  background: rgba(223, 128, 255, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=images] {
+  fill: rgba(112, 191, 83, 0.8); /* pink */
+  background: rgba(112, 191, 83, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=media] {
+  fill: rgba(235, 235, 84, 0.8); /* yellow */
+  background: rgba(235, 235, 84, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=flash] {
+  fill: rgba(84, 235, 159, 0.8); /* cyan */
+  background: rgba(84, 235, 159, 0.8);
+}
+
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #requests-menu-toolbar {
     height: 22px;
   }
 
   .requests-menu-header-button {
     min-height: 22px;
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -5,24 +5,35 @@
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-dark {
   --cell-border-color: rgba(255,255,255,0.15);
   --cell-border-color-light: rgba(255,255,255,0.1);
   --focus-cell-border-color: rgba(255,255,255,0.5);
   --row-alt-background-color: rgba(29,79,115,0.15);
   --row-hover-background-color: rgba(29,79,115,0.25);
+  --filter-image: url(chrome://devtools/skin/images/timeline-filter.svg);
 }
 
 .theme-light {
   --cell-border-color: rgba(0,0,0,0.15);
   --cell-border-color-light: rgba(0,0,0,0.1);
   --focus-cell-border-color: rgba(0,0,0,0.3);
   --row-alt-background-color: rgba(76,158,217,0.1);
   --row-hover-background-color: rgba(76,158,217,0.2);
+  --filter-image: url(chrome://devtools/skin/images/timeline-filter.svg);
+}
+
+.theme-firebug {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+  --filter-image: url(chrome://devtools/skin/images/firebug/timeline-filter.svg);
 }
 
 /**
  * A generic class to hide elements, replacing the `element.hidden` attribute
  * that we use to hide elements that can later be active
  */
 .hidden {
   display: none;
@@ -37,17 +48,17 @@
 }
 
 #performance-toolbar-controls-detail-views .toolbarbutton-text {
   -moz-padding-start: 4px;
   -moz-padding-end: 8px;
 }
 
 #filter-button {
-  list-style-image: url(images/timeline-filter.svg);
+  list-style-image: var(--filter-image);
 }
 
 #performance-filter-menupopup > menuitem:before {
   content: "";
   display: block;
   width: 8px;
   height: 8px;
   margin: 0 8px;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -8,18 +8,30 @@
   --rule-filter-icon: url(images/magnifying-glass-light.png);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
   --rule-filter-icon: url(images/magnifying-glass.png);
 }
 
+.theme-firebug {
+  --rule-highlight-background-color: #ffee99;
+  --rule-filter-icon: url(images/magnifying-glass-light.png);
+  --rule-property-name: darkgreen;
+  --rule-property-value: darkblue;
+}
+
 /* Rule View Tabpanel */
 
+.theme-firebug .ruleview {
+  font-family: monospace;
+  font-size: 11px;
+}
+
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   /* Bug 1243598 - Reduce the container height by the tab height to make room
      for the tabs above. */
   height: calc(100% - 24px);
@@ -131,16 +143,22 @@
   margin: 0;
 }
 
 .ruleview-rule-source[unselectable],
 .ruleview-rule-source[unselectable] > label {
   cursor: default;
 }
 
+.theme-firebug .ruleview-rule-source label {
+  font-family: var(--proportional-font-family);
+  font-weight: bold;
+  color: #0000FF;
+}
+
 .ruleview-rule-source:not([unselectable]):hover {
   text-decoration: underline;
 }
 
 .ruleview-header {
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: solid;
@@ -149,16 +167,28 @@
   -moz-user-select: none;
   word-wrap: break-word;
   vertical-align: middle;
   min-height: 1.5em;
   line-height: 1.5em;
   margin-top: -1px;
 }
 
+.theme-firebug .theme-gutter.ruleview-header {
+  font-family: var(--proportional-font-family);
+  font-weight: bold;
+  color: inherit;
+  border: none;
+  margin: 4px 0;
+  padding: 3px 4px 2px 4px;
+  line-height: inherit;
+  min-height: 0;
+  background: var(--theme-header-background);
+}
+
 :root[platform="win"] .ruleview-header,
 :root[platform="linux"] .ruleview-header {
   margin-top: 4px;
 }
 
 .ruleview-header.ruleview-expandable-header {
   cursor: pointer;
 }
@@ -199,26 +229,59 @@
 }
 
 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
 .ruleview-propertyvalue {
   border-bottom-color: transparent;
 }
 
+.theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
+.theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
+  border-bottom: none;
+}
+
+.theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
+  color: var(--rule-property-name);
+}
+
+.theme-firebug .ruleview-propertycontainer > .ruleview-propertyvalue {
+  color: var(--rule-property-value);
+}
+
+.theme-firebug .ruleview-overridden .ruleview-propertyname,
+.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
+  text-decoration: line-through;
+}
+
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertycontainer * {
+  color: #CCCCCC;
+}
+
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
+  color: #CCCCCC;
+}
+
 #noResults {
   font: message-box;
   color: GrayText;
 }
 
 .ruleview-rule + .ruleview-rule {
   border-top-width: 1px;
   border-top-style: dotted;
 }
 
+.theme-firebug .ruleview-rule + .ruleview-rule {
+  border-top: none;
+}
+
 .ruleview-warning {
   background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   display: inline-block;
   width: 13px;
   height: 12px;
 }
@@ -343,16 +406,21 @@
 }
 
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
   padding: 0;
   margin: -1px -3px -1px -1px;
 }
 
+.theme-firebug .styleinspector-propertyeditor {
+  border: 1px solid var(--theme-splitter-color);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+}
+
 .ruleview-property {
   border-left: 3px solid transparent;
   clear: right;
 }
 
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
 }
@@ -392,16 +460,22 @@
   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 }
 
 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
   font-weight: bold;
   color: var(--theme-highlight-orange);
 }
 
+.theme-firebug .ruleview-selector > .ruleview-selector-matched,
+.theme-firebug .ruleview-selector > .ruleview-selector-separator,
+.theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
+  color: inherit;
+}
+
 .ruleview-selectorhighlighter {
   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .ruleview-selectorhighlighter:hover {
@@ -424,8 +498,34 @@
 }
 
 .ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
+
+.theme-firebug .ruleview-overridden {
+  text-decoration: none;
+}
+
+/* Firebug theme disable/enable CSS rule. Firebug theme uses its own
+  icons to indicate when CSS rules can be disabled or enabled. */
+
+.theme-firebug .ruleview-rule .theme-checkbox {
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
+  background-position: 0 0;
+}
+
+.theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
+  filter: grayscale(1);
+}
+
+.theme-firebug .ruleview-rule .theme-checkbox[checked] {
+  background-position: 0 0;
+}
+
+.theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
+  visibility: hidden;
+}
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -112,17 +112,17 @@
   --theme-contrast-background: #e6b064;
 
   --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-comment: green;
 
   --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;
@@ -147,9 +147,14 @@
   --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;
+
+  /* Header */
+  --theme-header-background: #F0F0F0 linear-gradient(to top,
+                                                     rgba(0, 0, 0, 0.1),
+                                                     transparent) repeat-x;
 }
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -136,26 +136,26 @@ text {
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }
 
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
   border: none;
-  list-style-image: url(images/pane-collapse.svg);
+  list-style-image: var(--theme-pane-collapse-image);
 }
 
 #inspector-pane-toggle > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 #inspector-pane-toggle[pane-collapsed] {
-  list-style-image: url(images/pane-expand.svg);
+  list-style-image: var(--theme-pane-expand-image);
 }
 
 /**
  * Automation Styles
  */
 
 #automation-param-toolbar .automation-param-button[selected] {
   color: var(--theme-selection-color);
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1,12 +1,33 @@
 /* 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/. */
 
+/* Webconsole specific theme variables */
+
+.theme-dark {
+  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
+  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
+}
+
+.theme-light {
+  --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
+  --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
+}
+
+.theme-firebug {
+  --command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+  --command-line-image-2x: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+
+  --error-color: #FF0000;
+  --error-background-color: #FFEBEB;
+  --warning-background-color: #FFFFC8;
+}
+
 /* General output styles */
 
 a {
   -moz-user-focus: normal;
   -moz-user-input: enabled;
   cursor: pointer;
   text-decoration: underline;
 }
@@ -37,16 +58,30 @@ a {
 .message > .icon {
   flex: none;
   margin: 3px 6px 0 0;
   padding: 0 4px;
   height: 1em;
   align-self: flex-start;
 }
 
+.theme-firebug .message > .icon {
+  margin: 0;
+  margin-inline-end: 6px;
+}
+
+.theme-firebug .message[severity="error"] {
+  color: var(--error-color);
+  background-color: var(--error-background-color);
+}
+
+.theme-firebug .message[severity="warn"] {
+  background-color: var(--warning-background-color);
+}
+
 .message > .icon::before {
   content: "";
   background-image: url(chrome://devtools/skin/images/webconsole.svg);
   background-position: 12px 12px;
   background-repeat: no-repeat;
   background-size: 72px 60px;
   width: 12px;
   height: 12px;
@@ -92,16 +127,21 @@ a {
   justify-content: flex-end;
   width: 10em;
   margin-top: 3px;
   color: -moz-nativehyperlinktext;
   text-decoration: none;
   white-space: nowrap;
 }
 
+/* More space for the location data for location URL */
+.theme-firebug .message-location {
+  width: 13em;
+}
+
 .message-location:hover,
 .message-location:focus {
   text-decoration: underline;
 }
 
 .message-location > .frame-link .frame-link-source {
   width: 10em;
 }
@@ -354,41 +394,45 @@ a {
 
 .theme-light .jsterm-input-container {
   /* For light theme use a white background for the input - it looks better
      than off-white */
   background-color: #fff;
   border-top-color: #e0e0e0;
 }
 
+.theme-firebug .jsterm-input-container {
+  border-top: 1px solid #ccc;
+}
+
 .jsterm-input-node,
 .jsterm-complete-node {
   border: none;
   padding: 0 0 0 16px;
   -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
 .jsterm-input-node {
   /* Always allow scrolling on input - it auto expands in js by setting height,
      but don't want it to get bigger than the window. 24px = toolbar height. */
   max-height: calc(90vh - 24px);
-  background-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16);
+  background-image: var(--command-line-image);
   background-repeat: no-repeat;
   background-size: 16px 16px;
   color: var(--theme-content-color1);
 }
 
 @media (min-resolution: 1.1dppx) {
   .jsterm-input-node {
-    background-image: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32);
+    background-image: var(--command-line-image-2x);
   }
 }
 
 :-moz-any(.jsterm-input-node,
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
 }
 
@@ -409,16 +453,21 @@ a {
   border-radius: 3px;
 }
 
 #webconsole-sidebar > tabs {
   height: 0;
   border: none;
 }
 
+/* Firebug theme has the tabs visible. */
+.theme-firebug #webconsole-sidebar > tabs {
+  height: 28px;
+}
+
 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
   display: none;
 }
 
 /* Security styles */
 
 .message[category=security] > .indent {
   -moz-border-end: solid red 6px;
@@ -574,8 +623,18 @@ a.learn-more-link.webconsole-learn-more-
 /*
  * This hardcoded width likely due to a toolkit Windows specific bug.
  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  */
 
 :root[platform="win"] .hud-filter-box {
   width: 200px;
 }
+
+/* Firebug theme support for console.table() */
+
+.theme-firebug .consoletable .theme-body {
+  width: 100%;
+  border-top: 1px solid #D7D7D7;
+  border-bottom: 2px solid #D7D7D7;
+  border-left: 1px solid #D7D7D7;
+  border-right: 1px solid #D7D7D7;
+}
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -348,19 +348,19 @@
   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;
+  background: 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;
@@ -1315,16 +1315,70 @@ widgets.css is overwritten. */
 .theme-dark .table-widget-column[readonly] {
   background-color: rgba(255,255,255,0.1);
 }
 
 .theme-light .table-widget-column[readonly] {
   background-color: rgba(0,0,0,0.1);
 }
 
+.table-widget-body .devtools-side-splitter:last-of-type {
+  display: none;
+}
+
+/* Firebug theme support for table widget */
+
+.theme-firebug .devtools-toolbar.table-widget-column-header {
+  font-family: var(--proportional-font-family);
+  color: var(--theme-body-color);
+
+  /* Make sure to override the default Firebug devtools-toolbar height */
+  height: 19px !important;
+
+  /* Make sure to override the dafault .table-widget-column-header font-weight and background */
+  font-weight: bold !important;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
+  background-color: #C8D2DC !important;
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted] {
+  background-color: #AAC3DC !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);
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+}
+
+.theme-firebug .table-widget-body .devtools-side-splitter {
+  background: linear-gradient(#CBD4DE,#656A6E,#CBD4DE 18px, transparent 18px),
+              linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 18px),
+              linear-gradient(transparent, rgba(0, 0, 0, 0.5) 10px, transparent 18px)
+              repeat-x transparent !important;
+  min-width: 1px;
+  width: 1px;
+  position: absolute;
+}
+
+.theme-firebug .table-widget-column .table-widget-cell:not(.even) {
+  background: #EFEFEF;
+}
+
+.theme-firebug .table-widget-column .table-widget-cell.even {
+  background: #FFFFFF;
+}
+
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   min-width: 100px;
   -moz-user-focus: normal;
   color: var(--theme-body-color);