Bug 1378108 - Part 1 - Remove non-variable css selector overrides for Firebug theme;r=gl
authorBrian Grinstead <bgrinstead@mozilla.com>
Wed, 04 Apr 2018 12:32:39 -0700
changeset 777796 058d1b5232728f83a102d48957b2c0f4c156ef2c
parent 777795 b8847ae94ccf9e30af925ac10054c3416a1db9ed
child 777797 77eaf99d13636a58e62f524fa894c5dd70a6f3b0
push id105296
push userpaolo.mozmail@amadzone.org
push dateThu, 05 Apr 2018 10:49:16 +0000
reviewersgl
bugs1378108
milestone61.0a1
Bug 1378108 - Part 1 - Remove non-variable css selector overrides for Firebug theme;r=gl MozReview-Commit-ID: 6WfdDVs1EKg
devtools/client/debugger/new/debugger.css
devtools/client/jsonview/css/headers-panel.css
devtools/client/jsonview/css/main.css
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
devtools/client/shared/components/tabs/TabBar.css
devtools/client/shared/components/tabs/Tabs.css
devtools/client/shared/components/tree/TreeView.css
devtools/client/themes/animationinspector.css
devtools/client/themes/boxmodel.css
devtools/client/themes/breadcrumbs.css
devtools/client/themes/common.css
devtools/client/themes/computed.css
devtools/client/themes/debugger.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/markup.css
devtools/client/themes/rules.css
devtools/client/themes/toolbox.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
devtools/client/webconsole/net/components/net-info-body.css
devtools/client/webconsole/net/components/net-info-group.css
devtools/client/webconsole/net/net-request.css
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -2841,18 +2841,17 @@ html .breakpoints-list .breakpoint.pause
   vertical-align: bottom;
 }
 
 .breakpoints-list .pause-indicator {
   flex: 0 1 content;
   order: 3;
 }
 
-:root.theme-light .breakpoint-snippet,
-:root.theme-firebug .breakpoint-snippet {
+:root.theme-light .breakpoint-snippet {
   color: var(--theme-comment);
 }
 
 :root.theme-dark .breakpoint-snippet {
   color: var(--theme-body-color);
   opacity: 0.6;
 }
 
@@ -2953,20 +2952,16 @@ html .breakpoints-list .breakpoint.pause
 :root.theme-light .expression-container:hover {
   background-color: var(--theme-selection-background-hover);
 }
 
 :root.theme-dark .expression-container:hover {
   background-color: var(--theme-selection-background-hover);
 }
 
-:root.theme-firebug .expression-container:hover {
-  background-color: var(--theme-selection-background-hover);
-}
-
 .tree  .tree-node:not(.focused):hover {
   background-color: transparent;
 }
 
 .expression-container__close-btn {
   position: absolute;
   offset-inline-end: 0px;
   top: 0px;
@@ -3102,18 +3097,17 @@ html .breakpoints-list .breakpoint.pause
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
   margin: 0;
   flex-shrink: 0;
 }
 
-.theme-light .frames .location,
-.theme-firebug .frames .location {
+.theme-light .frames .location {
   color: var(--theme-comment);
 }
 
 :root.theme-dark .frames .location {
   color: var(--theme-body-color);
   opacity: 0.6;
 }
 
@@ -3138,17 +3132,16 @@ html .breakpoints-list .breakpoint.pause
   color: white;
 }
 
 .frames ul li.selected i.annotation-logo svg path {
   fill: white;
 }
 
 :root.theme-light .frames ul li.selected .location,
-:root.theme-firebug .frames ul li.selected .location,
 :root.theme-dark .frames ul li.selected .location {
   color: white;
 }
 
 .show-more-container {
   display: flex;
 }
 
--- a/devtools/client/jsonview/css/headers-panel.css
+++ b/devtools/client/jsonview/css/headers-panel.css
@@ -60,19 +60,8 @@
 /* Dark Theme */
 .theme-dark .netInfoParamName {
   color: var(--theme-highlight-purple);
 }
 
 .theme-dark .netInfoParamValue {
   color: var(--theme-highlight-gray);
 }
-
-/* Firebug Theme */
-.theme-firebug .netInfoHeadersTable {
-  font-family: Lucida Grande, Tahoma, sans-serif;
-  font-size: 11px;
-  line-height: 12px;
-}
-
-.theme-firebug .netInfoParamValue {
-  font-family: var(--monospace-font-family);
-}
--- a/devtools/client/jsonview/css/main.css
+++ b/devtools/client/jsonview/css/main.css
@@ -42,17 +42,8 @@
 :root[platform="linux"] .treeTable {
   font-size: 80%; /* To handle big monospace font */
 }
 
 /* Make sure there is a little space between label and value columns. */
 .panelContent .treeTable .treeLabelCell {
   padding-right: 17px;
 }
-
-/******************************************************************************/
-/* Theme Firebug */
-
-/* JSON View is using bigger font-size for the main tabs so,
-  let's overwrite the default value. */
-.theme-firebug .tabs .tabs-navigation {
-  font-size: 14px;
-}
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -320,20 +320,16 @@
 }
 
 .network-monitor .requests-list-timings-box {
   border: none;
   min-width: 1px;
   transition: width 0.2s ease-out;
 }
 
-.theme-firebug .network-monitor .requests-list-timings-total {
-  color: var(--theme-body-color);
-}
-
 /* Stack trace panel */
 
 .network-monitor .stack-trace {
   font-family: var(--monospace-font-family);
   /* The markup contains extra whitespace to improve formatting of clipboard text.
      Make sure this whitespace doesn't affect the HTML rendering */
   white-space: normal;
   padding: 5px;
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -81,34 +81,26 @@
   max-width: 50px;
   min-width: 50px;
 }
 
 .requests-list-column > * {
   display: inline-block;
 }
 
-.theme-firebug .requests-list-column {
-  padding: 1px;
-}
-
 /* Requests list headers */
 
 .requests-list-headers-wrapper {
   position: sticky;
   top: 0;
   z-index: 1;
   width: 100%;
   padding: 0;
 }
 
-.theme-firebug .requests-list-headers-wrapper {
-  padding: 0 !important;
-}
-
 .requests-list-headers {
   display: table-header-group;
   height: 24px;
   padding: 0;
   width: 100%;
 }
 
 .requests-list-headers .requests-list-column:first-child .requests-list-header-button {
@@ -172,60 +164,26 @@
   color: var(--theme-selection-color);
 }
 
 .requests-list-header-button[data-sorted],
 .requests-list-column[data-active] + .requests-list-column .requests-list-header-button {
   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 }
 
-.theme-firebug .requests-list-headers {
-  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-list-header-button {
-  min-height: 17px;
-}
-
-.theme-firebug .requests-list-header-button > .button-icon {
-  height: 7px;
-}
-
-.theme-firebug .requests-list-header-button[data-sorted] {
-  background-color: #AAC3DC;
-}
-
-:root[platform="linux"].theme-firebug .requests-list-header-button[data-sorted] {
-  background-color: #FAC8AF !important;
-  color: inherit !important;
-}
-
-.theme-firebug .requests-list-header-button:hover:active {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.1),
-                                    transparent);
-}
-
 /* Requests list column */
 
 /* Status column */
 
 .requests-list-status {
   min-width: 70px;
    /* Don't ellipsize status codes */
   text-overflow: initial;
 }
 
-.theme-firebug .requests-list-status {
-  font-weight: bold;
-}
-
 .requests-list-status-code {
   margin-inline-start: 3px;
   padding: 0 2px;
   border-radius: 3px;
   font-family: var(--monospace-font-family);
   /* prevent status code from having full line height width from .request-list-item */
   line-height: normal;
 }
@@ -309,20 +267,16 @@
 }
 
 /* Method column */
 
 .requests-list-method {
   min-width: 85px;
 }
 
-.theme-firebug .requests-list-method {
-  color: rgb(128, 128, 128);
-}
-
 /* File column */
 
 .requests-list-file {
   width: 40%;
 }
 
 .requests-list-file.requests-list-column {
   text-align: start;
@@ -468,21 +422,16 @@
 }
 
 /* Size column */
 
 .requests-list-size {
   min-width: 80px;
 }
 
-.theme-firebug .requests-list-size {
-  justify-content: end;
-  padding-inline-end: 4px;
-}
-
 /* Waterfall column */
 
 .requests-list-waterfall {
   width: 25vw;
   max-width: 25vw;
   min-width: 25vw;
   background-repeat: repeat-y;
   background-position: left center;
@@ -557,21 +506,16 @@
   transform-origin: right center;
 }
 
 .requests-list-timings-box {
   display: inline-block;
   height: 9px;
 }
 
-.theme-firebug .requests-list-timings-box {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
-  height: 16px;
-}
-
 .requests-list-timings-box.blocked {
   background-color: var(--timing-blocked-color);
 }
 
 .requests-list-timings-box.dns {
   background-color: var(--timing-dns-color);
 }
 
@@ -640,20 +584,16 @@
 .request-list-item:not(.selected):hover {
   background-color: var(--theme-selection-background-hover);
 }
 
 .request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) {
   opacity: 0.6;
 }
 
-.theme-firebug .request-list-item:not(.selected):hover {
-  background: #EFEFEF;
-}
-
 /* Responsive web design support */
 
 @media (max-width: 700px) {
   .requests-list-header-button {
     padding-inline-start: 8px;
   }
 
   .requests-list-status-code {
--- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -135,58 +135,16 @@
   text-align: start;
 }
 
 .table-chart-totals {
   display: flex;
   flex-direction: column;
 }
 
-/* Firebug theme support for statistics panel 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 web design support */
 
 @media (max-width: 700px) {
   .statistics-panel .charts-container {
     flex-direction: column;
     /* Minus 4em for statistics back button width */
     width: calc(100% - 4em);
   }
--- a/devtools/client/shared/components/tabs/TabBar.css
+++ b/devtools/client/shared/components/tabs/TabBar.css
@@ -22,21 +22,16 @@ div[hidetabs=true] .tabs .tabs-navigatio
   outline: var(--theme-focus-outline);
   outline-offset: -2px;
 }
 
 .tabs .tabs-menu-item.is-active {
   height: 23px;
 }
 
-/* Firebug theme is using slightly different height. */
-.theme-firebug .tabs .tabs-navigation {
-  height: 28px;
-}
-
 /* The tab takes entire horizontal space and individual tabs
   should stretch accordingly. Use flexbox for the behavior.
   Use also `overflow: hidden` so, 'overflow' and 'underflow'
   events are fired (it's utilized by the all-tabs-menu). */
 .tabs .tabs-navigation .tabs-menu {
   overflow: hidden;
   display: flex;
 }
@@ -44,13 +39,8 @@ div[hidetabs=true] .tabs .tabs-navigatio
 .tabs .tabs-navigation .tabs-menu-item {
   flex-grow: 1;
 }
 
 .tabs .tabs-navigation .tabs-menu-item a {
   text-align: center;
 }
 
-/* Firebug theme doesn't stretch the tabs. */
-.theme-firebug .tabs .tabs-navigation .tabs-menu-item {
-  flex-grow: 0;
-}
-
--- a/devtools/client/shared/components/tabs/Tabs.css
+++ b/devtools/client/shared/components/tabs/Tabs.css
@@ -86,17 +86,17 @@
 }
 
 .theme-dark .tabs .tabs-menu-item.is-active,
 .theme-light .tabs .tabs-menu-item.is-active {
   color: var(--theme-toolbar-selected-color);
 }
 
 .theme-dark .tabs .tabs-menu-item:last-child,
-.theme-light:not(.theme-firebug) .tabs .tabs-menu-item:last-child {
+.theme-light .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 {
   padding: 3px 10px;
 }
 
@@ -104,63 +104,8 @@
 .theme-light .tabs .tabs-menu-item:hover {
   background-color: var(--theme-toolbar-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(--theme-toolbar-hover-active);
 }
-
-/* Firebug Theme */
-
-.theme-firebug .tabs .tabs-navigation {
-  padding-top: 3px;
-  padding-left: 3px;
-}
-
-.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 {
-  background-color: transparent;
-}
-
-.theme-firebug .tabs .tabs-menu-item {
-  position: relative;
-  border-inline-start-width: 0;
-}
-
-.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-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);
-  border-bottom-color: transparent;
-  color: var(--theme-body-color);
-}
-
-.theme-firebug .tabs .tabs-menu-item:hover:active a {
-  background-color: var(--theme-toolbar-hover-active);
-}
-
-.theme-firebug .tabs .tabs-menu-item.is-active:hover:active a {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
-.theme-firebug .tabs .tabs-menu-item a {
-  border: 1px solid transparent;
-  padding: 4px 8px;
-}
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.css
@@ -181,24 +181,12 @@
 
 /* :not(.selected) is used because row selection styles should have
    more precedence than row hovering. */
 .theme-light .treeTable .treeRow:not(.selected):hover,
 .theme-dark .treeTable .treeRow:not(.selected):hover {
   background-color: var(--theme-selection-background-hover) !important;
 }
 
-.theme-firebug .treeTable .treeRow:not(.selected):hover {
-  background-color: var(--theme-body-background);
-}
-
 .theme-light .treeTable,
 .theme-dark .treeTable {
   color: var(--theme-highlight-blue);
 }
-
-.theme-firebug .treeTable {
-  color: var(--theme-body-color);
-}
-
-.theme-firebug .treeTable .treeRow.hasChildren:not(.selected) > .treeLabelCell > .treeLabel:hover {
-  color: var(--tree-link-color);
-}
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -37,17 +37,17 @@
   --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);
   --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
   --play-image: url(chrome://devtools/skin/images/firebug/play.svg);
   --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
 }
 
-.theme-light, .theme-firebug {
+.theme-light {
   /* The color for animation type 'opacity' */
   --opacity-border-color: var(--theme-highlight-pink);
   --opacity-background-color: #b82ee580;
   /* The color for animation type 'transform' */
   --transform-border-color: var(--theme-graphs-orange);
   --transform-background-color: #efc05280;
   /* The color for other animation type */
   --other-border-color: var(--theme-graphs-bluegrey);
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -100,30 +100,16 @@
 .boxmodel-paddings {
   border-color: var(--paddingbox-color);
 }
 
 .boxmodel-contents {
   background-color: var(--contentbox-color);
 }
 
-.theme-firebug .boxmodel-main,
-.theme-firebug .boxmodel-header {
-  font-family: var(--proportional-font-family);
-}
-
-.theme-firebug .boxmodel-main {
-  color: var(--theme-body-color);
-  font-size: var(--theme-toolbar-font-size);
-}
-
-.theme-firebug .boxmodel-header {
-  font-size: var(--theme-toolbar-font-size);
-}
-
 /* Editable region sizes are contained in absolutely positioned <p> */
 
 .boxmodel-main > p,
 .boxmodel-size {
   position: absolute;
   pointer-events: none;
   margin: 0;
   text-align: center;
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -161,79 +161,8 @@
 .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item-classes {
   color: var(--breadcrumb-id-class-color);
 }
 
 .breadcrumbs-widget-item-pseudo-classes {
   color: var(--theme-highlight-lightorange);
 }
-
-/* Firebug theme support for breadcrumbs widget. */
-
-.theme-firebug .breadcrumbs-widget-item {
-  border: 1px solid transparent;
-  border-radius: 2px;
-  padding: 0;
-}
-
-.theme-firebug .breadcrumbs-widget-item:hover {
-  border-color: rgba(0, 0, 0, 0.2);
-  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 {
-  margin: 0 0 0 -5px;
-  top: 0;
-}
-
-/* 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;
-  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;
-}
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -124,23 +124,16 @@ html|button, html|select {
 
 .theme-dark .devtools-autocomplete-popup,
 .theme-dark .CodeMirror-hints,
 .theme-dark .CodeMirror-Tern-tooltip {
   border: 1px solid hsl(210,11%,10%);
   background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
 }
 
-.theme-firebug .devtools-autocomplete-popup {
-  border-color: var(--theme-splitter-color);
-  border-radius: 5px;
-  font-size: var(--theme-autompletion-font-size);
-  background: var(--theme-body-background);
-}
-
 .devtools-autocomplete-listbox .autocomplete-selected,
 .devtools-autocomplete-listbox .autocomplete-item:hover {
   background-color: rgba(128,128,128,0.3);
 }
 
 .theme-dark .devtools-autocomplete-listbox .autocomplete-selected,
 .theme-dark .devtools-autocomplete-listbox .autocomplete-item:hover {
   background-color: rgba(0,0,0,0.5);
@@ -346,20 +339,17 @@ checkbox:-moz-focusring {
 
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
   background-color: var(--theme-selection-background-hover);
 }
 
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
-.devtools-button:not(:empty).checked,
-.theme-firebug .devtools-toolbarbutton[checked],
-.theme-firebug .devtools-toolbarbutton[open],
-.theme-firebug .devtools-button.checked:empty {
+.devtools-button:not(:empty).checked {
   background: var(--toolbarbutton-checked-background);
   border-color: var(--toolbarbutton-checked-border-color);
   color: var(--toolbarbutton-checked-color);
 }
 
 /* Icons */
 :root {
   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
@@ -718,21 +708,16 @@ checkbox:-moz-focusring {
   background: var(--tab-line-hover-color);
 }
 
 .devtools-tab.selected .devtools-tab-line,
 .tabs-menu-item.is-active .devtools-tab-line {
   background: var(--tab-line-selected-color);
 }
 
-/* Hide the tab line in the firebug theme */
-.theme-firebug .devtools-tab-line {
-  background: transparent !important;
-}
-
 /* No result message styles */
 
 .devtools-sidepanel-no-result {
   font-style: italic;
   text-align: center;
   padding: 0.5em;
   -moz-user-select: none;
   font-size: 12px;
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -117,25 +117,16 @@
   padding-inline-start: 14px;
   outline: 0 !important;
 }
 
 .computed-property-content {
   padding-inline-start: 17px;
 }
 
-.theme-firebug .computed-property-view,
-.theme-firebug .computed-property-content {
-  font-family: var(--proportional-font-family);
-}
-
-.theme-firebug .computed-property-view {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
 /* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements.
    We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737).
    Therefore we use <div> elements around matched selectors and need this class
    to keep them inline. We do that to avoid doing any formatting logic in JS.
    Once Bug 1360238 will be fixed, we'll probably have to change the behavior
    and remove this class. */
 .fix-get-selection {
   display: inline;
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -54,34 +54,16 @@
 }
 
 .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;
   padding-inline-start: 0;
@@ -93,38 +75,25 @@
 #sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
 #black-box {
   list-style-image: url(images/item-toggle.svg);
 }
 
-.theme-firebug #black-box {
-  list-style-image: url(images/firebug/debugger-blackbox.svg);
-}
-
 #pretty-print {
   list-style-image: url(images/tool-styleeditor.svg);
 }
 
-.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);
 }
 
-.theme-firebug #toggle-breakpoints {
-  list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg);
-  -moz-image-region: unset;
-}
-
 #toggle-breakpoints[checked] {
   -moz-image-region: rect(0,16px,16px,0);
 }
 
 #toggle-breakpoints[checked] > image {
   /* This button has a special checked image, don't make it blue */
   filter: none;
 }
@@ -540,52 +509,32 @@
 #resume {
   list-style-image: url(images/pause.svg);
 }
 
 #resume[checked] {
   list-style-image: url(images/play.svg);
 }
 
-.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.svg);
 }
 
 #step-in {
   list-style-image: url(images/debugger-step-in.svg);
 }
 
 #step-out {
   list-style-image: url(images/debugger-step-out.svg);
 }
 
-.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: var(--theme-pane-collapse-image);
 }
 
 #instruments-pane-toggle.pane-collapsed {
   list-style-image: var(--theme-pane-expand-image);
 }
 
@@ -613,58 +562,8 @@
 #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 {
   margin-inline-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/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -50,171 +50,8 @@
 
 /* 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-sidebar-tabs tabs {
-  background: var(--theme-tab-toolbar-background) !important;
-  border-bottom: 1px solid var(--theme-splitter-color) !important;
-}
-
-/* Add a negative bottom margin to overlap bottom border
-  of the parent element (see also the next comment for 'tabs') */
-.theme-firebug .devtools-tab,
-.theme-firebug .devtools-sidebar-tabs tab {
-  margin: 3px 0 -1px 0;
-  padding: 1px 4px !important;
-  border: 1px solid transparent !important;
-  border-bottom: none !important;
-  border-radius: 4px 4px 0 0;
-  font-weight: bold;
-  color: var(--theme-body-color);
-  -moz-box-flex: initial;
-  min-width: 0;
-}
-
-/* For toolbox tabs, the negative margin is applied on the container
-   instead of the tab to avoid triggering y-overflow on the container
-   that causes the overflow menu to display */
-
-.theme-firebug .devtools-tab {
-  margin-bottom: 0;
-}
-
-.theme-firebug .toolbox-tabs,
-.theme-firebug #toolbox-option-container {
-  margin-bottom: -1px;
-}
-
-.theme-firebug .devtools-tab-label {
-  padding-inline-end: 0;
-  mask-image: none;
-}
-
-/* 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-color: #C8C8C8 !important;
-}
-
-.theme-firebug .devtools-tab.selected,
-.theme-firebug .devtools-sidebar-tabs tab[selected] {
-  background-color: var(--theme-toolbar-tab-selected-background);
-  border-color: var(--theme-splitter-color) !important;
-  border-bottom-color: transparent !important;
-  padding-bottom: 2px;
-  color: inherit;
-}
-
-.theme-firebug .devtools-tabbar .devtools-separator,
-.theme-firebug .devtools-tab img {
-  display: none;
-}
-
-.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;
-}
-
-.theme-firebug #toolbox-tab-options::before {
-  content: url(chrome://devtools/skin/images/firebug/tool-options.svg);
-  display: block;
-  margin: 4px 4px 0;
-}
-
-.theme-firebug #toolbox-tab-options:not([selected]):hover::before {
-  filter: brightness(80%);
-}
-
-/* Element picker */
-.theme-firebug #toolbox-buttons-start {
-  border: none;
-}
-
-/* Toolbar */
-
-.theme-firebug .theme-toolbar,
-.theme-firebug toolbar,
-.theme-firebug .devtools-toolbar {
-  background: var(--theme-toolbar-background) !important;
-  padding-inline-end: 4px;
-}
-
-/* The vbox for panel content also uses theme-toolbar class from some reason
- but it shouldn't have the padding as defined above, so fix it here */
-.theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar {
-  padding-inline-end: 0;
-}
-
-/* Space around toolbar buttons */
-.theme-firebug .devtools-toolbar {
-  padding: 2px 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);
-}
-
-/* Make sure the toolbar buttons shrink nicely. */
-
-#toolbox-buttons-end {
-  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
-}
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -360,75 +360,37 @@ ul.children + .tag-line::before {
 .not-displayed .attr-value {
   color: var(--markup-hidden-attr-value-color);
 }
 
 .not-displayed .tag {
   color: var(--markup-hidden-tag-color);
 }
 
-/* Firebug Theme */
-
-.theme-firebug .theme-fg-color3 {
-  color: var(--theme-graphs-full-blue);
-  font-weight: normal;
-}
-
-.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-display,
-.theme-firebug .markupview-events {
-  font-size: var(--theme-toolbar-font-size);
-}
-
-/* In case a node isn't displayed in the page, we fade the syntax highlighting */
-.theme-firebug .not-displayed .open,
-.theme-firebug .not-displayed .close {
-  opacity: .5;
-}
-
 /* Selected nodes in the tree should have light selected text.
    theme-selected doesn't work in this case since the text is a
    sibling of the class, not a child. */
 .theme-selected ~ .editor,
 .theme-selected ~ .editor.comment,
 .theme-selected ~ .editor .theme-fg-color1,
 .theme-selected ~ .editor .theme-fg-color2,
 .theme-selected ~ .editor .theme-fg-color3,
 .theme-selected ~ .editor .theme-fg-color4,
 .theme-selected ~ .editor .theme-fg-color5,
 .theme-selected ~ .editor .theme-fg-color6,
 .theme-selected ~ .editor .theme-fg-color7,
 .theme-selected ~ .editor .close::before {
   color: var(--theme-selection-color);
 }
 
-/* Make sure even text nodes are white when selected in the Inspector panel. */
-.theme-firebug .theme-selected ~ .editor .open,
-.theme-firebug .theme-selected ~ .editor .close {
-  color: var(--theme-selection-color);
-}
-
 /* Applicable to the DOCTYPE */
 .doctype {
   font-style: italic;
 }
 
-.theme-firebug .doctype {
-  color: #787878;
-}
-
 /* Display and Events Bubble */
 .markupview-display,
 .markupview-events {
   display: none;
   font-size: 8px;
   font-weight: bold;
   line-height: 10px;
   border-radius: 3px;
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -212,22 +212,16 @@
   unicode-bidi: embed
 }
 
 .ruleview-rule-source[unselectable],
 .ruleview-rule-source[unselectable] > .ruleview-rule-source-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 {
   background: var(--rule-header-background-color);
   border-bottom: 1px solid var(--theme-splitter-color);
   color: var(--theme-toolbar-color);
@@ -235,27 +229,16 @@
   padding: 4px;
   width: 100%;
   align-items: center;
   display: flex;
 
   -moz-user-select: none;
 }
 
-.theme-firebug .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;
-}
-
 .ruleview-expandable-header {
   cursor: pointer;
 }
 
 .ruleview-expandable-header:hover {
   background-color: var(--theme-toolbar-background-hover);
 }
 
@@ -303,56 +286,16 @@
 }
 
 .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-propertyvaluecontainer > .ruleview-propertyvalue {
-  border-bottom: none;
-}
-
-.theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
-  color: var(--rule-property-name);
-}
-
-.theme-firebug .ruleview-propertyvaluecontainer > .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-propertyvaluecontainer,
-.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *,
-.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden),
-.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * {
-  color: #CCCCCC;
-}
-
-.theme-firebug .ruleview-rule + .ruleview-rule {
-  border-bottom: none;
-}
-
-.ruleview-warning {
-  background-image: url(images/alerticon-warning.png);
-  background-size: 13px 12px;
-  margin-inline-start: 5px;
-  display: inline-block;
-  width: 13px;
-  height: 12px;
-}
-
 @media (min-resolution: 1.1dppx) {
   .ruleview-warning {
     background-image: url(images/alerticon-warning@2x.png);
   }
 }
 
 .ruleview-overridden-rule-filter {
   background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
@@ -581,21 +524,16 @@
 }
 
 .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: both;
   padding-left: 28px;
 }
 
 .ruleview-propertycontainer  > * {
   vertical-align: middle;
@@ -639,22 +577,16 @@
   /* 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 {
@@ -682,34 +614,8 @@
 }
 
 .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/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -131,47 +131,32 @@
     display: none;
   }
 }
 
 .devtools-tab-icon-only {
   min-width: 24px;
 }
 
-/* Save space on the tab-strip in Firebug theme */
-.theme-firebug .devtools-tab {
-  -moz-box-flex: initial;
-}
-
 .devtools-tab {
   color: var(--theme-toolbar-color);
 }
 
 .devtools-tab:hover {
   background-color: var(--theme-toolbar-hover);
 }
 
 .devtools-tab:hover:active {
   background-color: var(--theme-toolbar-hover-active);
 }
 
 .devtools-tab.selected {
   color: var(--theme-toolbar-selected-color);
 }
 
-/* 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 > img {
   border: none;
   margin: 0;
   margin-inline-start: 10px;
   margin-inline-end: 5px;
   max-height: 16px;
   width: 16px; /* Prevents collapse during theme switching */
   vertical-align: text-top;
@@ -204,22 +189,16 @@
   padding-inline-start: 1px;
 }
 #toolbox-option-container img {
   margin: 0 3px;
 }
 
 /* Toolbox controls */
 
-/* Save space in Firebug theme */
-.theme-firebug #toolbox-controls button {
-  margin-inline-start: 0 !important;
-  min-width: 12px;
-  margin: 0 1px;
-}
 
 #toolbox-close::before {
   background-image: var(--close-button-image);
 }
 
 #toolbox-dock-bottom::before {
   background-image: var(--dock-bottom-image);
 }
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1,15 +1,14 @@
 /* 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-light,
-.theme-firebug {
+.theme-light {
   --error-color: #FF0000;
   --error-background-color: #FFEBEB;
   --warning-background-color: #FFFFC8;
 }
 
 /* General output styles */
 
 a {
@@ -47,31 +46,22 @@ 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"],
-.theme-light .message.error,
-.theme-firebug .message.error {
+.theme-light .message.error {
   color: var(--error-color);
   background-color: var(--error-background-color);
 }
 
-.theme-firebug .message[severity="warn"],
-.theme-light .message.warn,
-.theme-firebug .message.warn {
+.theme-light .message.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;
@@ -394,20 +384,16 @@ html #webconsole-notificationbox {
 
 .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;
-}
-
 /*  styles for the new HTML frontend */
 
 html .jsterm-stack-node {
   position: relative;
 }
 
 textarea.jsterm-input-node,
 textarea.jsterm-complete-node {
@@ -490,21 +476,16 @@ textbox.jsterm-input-node[focused="true"
   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,
 .message.security > .indent {
@@ -668,26 +649,16 @@ a.learn-more-link.webconsole-learn-more-
  * This hardcoded width likely due to a toolkit Windows specific bug.
  * See https://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;
-}
-
 
 /* NEW CONSOLE STYLES */
 
 #output-container {
   height: 100%;
 }
 
 .webconsole-output-wrapper {
@@ -700,18 +671,17 @@ a.learn-more-link.webconsole-learn-more-
   --icon-top-margin: 3px;
   --object-inspector-hover-background: transparent;
   --attachment-margin-block-end: 3px;
   --primary-toolbar-height: 29px;
   --close-button-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Webconsole specific theme variables */
-.theme-light .webconsole-output-wrapper,
-.theme-firebug .webconsole-output-wrapper {
+.theme-light .webconsole-output-wrapper {
   --error-color: var(--red-70);
   --error-background-color: #FDF2F5;
   --warning-color: var(--yellow-80);
   --warning-background-color: #FFFBD5;
   --console-output-color: var(--grey-90);
   --repeat-bubble-background-color: var(--theme-highlight-blue);
 }
 
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -306,20 +306,16 @@
 }
 
 /* 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;
@@ -865,61 +861,16 @@
 .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;
-
-  /* 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;
-}
-
-.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;
-}
-
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   min-width: 100px;
   -moz-user-focus: normal;
   color: var(--theme-body-color);
--- a/devtools/client/webconsole/net/components/net-info-body.css
+++ b/devtools/client/webconsole/net/components/net-info-body.css
@@ -86,27 +86,8 @@
   color: var(--theme-highlight-bluegrey);
 }
 
 .netInfoBody > .tabs .tabs-menu-item:hover a {
   border: 1px solid transparent;
   border-bottom: 1px solid var(--net-border);
   background-color: var(--theme-body-background);
 }
-
-
-/******************************************************************************/
-/* Themes */
-
-.theme-firebug .netInfoBody > .tabs .tab-panel {
-  border-color: var(--net-border);
-}
-
-.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active a,
-.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active:hover a,
-.theme-firebug .netInfoBody > .tabs .tabs-menu-item.is-active a:focus {
-  border: 1px solid var(--net-border);
-  border-bottom-color: transparent;
-}
-
-.theme-firebug .netInfoBody > .tabs .tabs-menu-item:hover a {
-  border-bottom-color: transparent;
-}
--- a/devtools/client/webconsole/net/components/net-info-group.css
+++ b/devtools/client/webconsole/net/components/net-info-group.css
@@ -61,20 +61,8 @@
 
 .theme-dark .netInfoBody .netInfoGroup {
   color: var(--theme-body-color);
 }
 
 .theme-dark .netInfoBody .netInfoGroup .netInfoGroupTwisty {
   filter: invert(1);
 }
-
-/* Twisties */
-.theme-firebug .netInfoBody .netInfoGroup .netInfoGroupTwisty {
-  background-image: url("chrome://devtools/skin/images/firebug/twisty-closed-firebug.svg");
-  background-position: 0 2px;
-  background-size: 11px 11px;
-  width: 15px;
-}
-
-.theme-firebug .netInfoBody .netInfoGroup.opened .netInfoGroupTwisty {
-  background-image: url("chrome://devtools/skin/images/firebug/twisty-open-firebug.svg");
-}
--- a/devtools/client/webconsole/net/net-request.css
+++ b/devtools/client/webconsole/net/net-request.css
@@ -24,12 +24,8 @@
 
 /******************************************************************************/
 /* Themes */
 
 .theme-dark .netRequest.opened:hover,
 .theme-dark .netRequest.opened {
   background: transparent;
 }
-
-.theme-firebug .netRequest.message.opened:hover {
-  background-image: linear-gradient(rgba(214, 233, 246, 0.8), rgba(255, 255, 255, 1.6)) !important;
-}