Bug 1399948 - Part 1: Refactor breadcrumb css into separate file. r=gl
authorDarren Hobin <darrenhobin@live.com>
Fri, 22 Sep 2017 11:57:32 -0400
changeset 382610 64a52ab3bab3f3b224449221c3287253fc993eb2
parent 382609 a113dcbaf6c793f3a8afabebfecbfd06c127a8f3
child 382611 ff40c5dcaa41261b39a4e9795e02a9d51dd30ced
push id32566
push userphilringnalda@gmail.com
push dateSun, 24 Sep 2017 02:20:42 +0000
treeherdermozilla-central@ff40c5dcaa41 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1399948
milestone58.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 1399948 - Part 1: Refactor breadcrumb css into separate file. r=gl MozReview-Commit-ID: 9vo2LmHEt3Z
devtools/client/jar.mn
devtools/client/themes/breadcrumbs.css
devtools/client/themes/widgets.css
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -121,16 +121,17 @@ devtools.jar:
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
     skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
     skin/images/controls.png (themes/images/controls.png)
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-details-waterfall.svg (themes/images/performance-details-waterfall.svg)
     skin/images/performance-details-call-tree.svg (themes/images/performance-details-call-tree.svg)
     skin/images/performance-details-flamegraph.svg (themes/images/performance-details-flamegraph.svg)
+    skin/breadcrumbs.css (themes/breadcrumbs.css)
     skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
     skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
     skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
     skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
     skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
     skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
copy from devtools/client/themes/widgets.css
copy to devtools/client/themes/breadcrumbs.css
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -1,124 +1,14 @@
 /* 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/. */
 
-.theme-dark {
-  --table-splitter-color: rgba(255,255,255,0.15);
-  --table-zebra-background: rgba(255,255,255,0.05);
-  --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
-  --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
-  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
-}
-
-.theme-light {
-  --table-splitter-color: rgba(0,0,0,0.15);
-  --table-zebra-background: rgba(0,0,0,0.05);
-  --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
-  --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
-  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
-}
-
-.theme-firebug {
-  --table-splitter-color: rgba(0,0,0,0.15);
-  --table-zebra-background: rgba(0,0,0,0.05);
-  --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
-  --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
-  --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg);
-}
-
-
-/* Generic pane helpers */
-
-.generic-toggled-pane {
-  margin-inline-start: 0 !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* Responsive container */
-
-.devtools-responsive-container {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-main-content {
-  min-width: 50px;
-}
-
-.devtools-main-content,
-.devtools-sidebar-tabs {
-  /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
-  position: relative;
-}
-
-@media (min-width: 701px) {
-  .devtools-responsive-container .generic-toggled-pane {
-    /* To hide generic-toggled-pane, negative margins are applied dynamically.
-     * In the default horizontal layout, the pane is on the side and should be
-     * hidden using negative margin-inline-end only.
-     */
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-}
-
-@media (max-width: 700px) {
-  .devtools-responsive-container {
-    -moz-box-orient: vertical;
-  }
-
-  .devtools-responsive-container > .devtools-side-splitter {
-    /* This is a normally vertical splitter, but we have turned it horizontal
-       due to the smaller resolution */
-    min-height: calc(var(--devtools-splitter-top-width) +
-    var(--devtools-splitter-bottom-width) + 1px);
-    border-top-width: var(--devtools-splitter-top-width);
-    border-bottom-width: var(--devtools-splitter-bottom-width);
-    margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
-    margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
-
-    /* Reset the vertical splitter styles */
-    min-width: 0;
-    border-inline-end-width: 0;
-    border-inline-start-width: 0;
-    margin-inline-end: 0;
-    margin-inline-start: 0;
-
-    /* In some edge case the cursor is not changed to n-resize */
-    cursor: n-resize;
-  }
-
-  .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) {
-    /* When the panel is collapsed min/max height should not be applied because
-       collapsing relies on negative margins, which implies constant height. */
-    min-height: 35vh;
-    max-height: 75vh;
-  }
-
-  .devtools-responsive-container .generic-toggled-pane {
-    /* To hide generic-toggled-pane, negative margins are applied dynamically.
-     * If a vertical layout, the pane is on the bottom and should be hidden
-     * using negative bottom margin only.
-     */
-    margin-inline-end: 0 !important;
-  }
-}
-
-/* BreacrumbsWidget */
+/* Inspector HTMLBreadcrumbs */
 
 .breadcrumbs-widget-container {
   margin-inline-end: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
   height: 24px; /* Set height to prevent starting small waiting for content */
 }
 
 .scrollbutton-up,
@@ -447,1184 +337,8 @@ widgets.css is overwritten. */
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
   background: none !important;
 }
 
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
 .theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
   background-position: 0 center;
 }
-
-/* SimpleListWidget */
-
-.simple-list-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.simple-list-widget-item.selected {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
-.theme-dark .simple-list-widget-item:not(.selected):hover {
-  background-color: rgba(255,255,255,.05);
-}
-
-.theme-light .simple-list-widget-item:not(.selected):hover {
-  background-color: rgba(0,0,0,.05);
-}
-
-.simple-list-widget-empty-text,
-.simple-list-widget-perma-text {
-  padding: 4px 8px;
-}
-
-.simple-list-widget-empty-text,
-.simple-list-widget-perma-text {
-  color: var(--theme-body-color-alt);
-}
-
-/* FastListWidget */
-
-.fast-list-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.fast-list-widget-empty-text {
-  padding: 4px 8px;
-}
-
-.fast-list-widget-empty-text {
-  color: var(--theme-body-color-alt);
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-/* SideMenuWidget container */
-
-.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
-  /* To compensate for the arrow image's dark margin. */
-  margin-inline-end: -1px;
-}
-
-/* SideMenuWidget groups */
-
-.side-menu-widget-group-title {
-  padding: 4px;
-  font-weight: 600;
-  border-bottom: 1px solid rgba(128,128,128,0.15);
-}
-
-.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
-  padding-inline-start: 20px;
-}
-
-/* SideMenuWidget items */
-
-.side-menu-widget-item {
-  border-bottom: 1px solid rgba(128,128,128,0.15);
-  background-clip: padding-box;
-}
-
-.side-menu-widget-item.selected {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
-.side-menu-widget-item-arrow {
-  margin-inline-start: -7px;
-  width: 7px; /* The image's width is 7 pixels */
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-image: var(--sidemenu-selected-arrow);
-  background-size: auto;
-  background-repeat: no-repeat;
-  background-position: center right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: var(--sidemenu-selected-arrow-rtl);
-  background-position: center left;
-}
-
-/* SideMenuWidget items contents */
-
-.side-menu-widget-item-contents {
-  padding: 4px;
-  /* To avoid having content overlapping the arrow image. */
-  padding-inline-end: 8px;
-}
-
-.side-menu-widget-item-other {
-  /* To avoid having content overlapping the arrow image. */
-  padding-inline-end: 8px;
-  /* To compensate for the .side-menu-widget-item-contents padding. */
-  margin-inline-start: -4px;
-  margin-inline-end: -8px;
-}
-
-.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
-  /* To compensate for the .side-menu-widget-item-contents padding. */
-  margin-inline-start: -20px;
-}
-
-.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
-  background-color: var(--theme-sidebar-background);
-  box-shadow: inset 2px 0 0 var(--theme-selection-background);
-  color: var(--theme-body-color);
-}
-
-.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
-  background-color: var(--theme-selection-background);
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-/* SideMenuWidget checkboxes */
-
-.side-menu-widget-group-checkbox {
-  margin: 0;
-  margin-inline-end: 4px;
-}
-
-.side-menu-widget-item-checkbox {
-  margin: 0;
-  margin-inline-start: 4px;
-}
-
-/* SideMenuWidget misc */
-
-.side-menu-widget-empty-text {
-  padding: 4px 8px;
-  background-color: var(--theme-sidebar-background);
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.variables-view-empty-notice {
-  padding: 2px;
-}
-
-.variables-view-empty-notice {
-  color: var(--theme-body-color-alt);
-}
-
-.variables-view-scope:focus > .title,
-.variable-or-property:focus > .title {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
-.variables-view-scope > .title {
-  border-top-width: 1px;
-  border-top-style: solid;
-  margin-top: -1px;
-}
-
-/* Custom scope stylings */
-
-.variables-view-watch-expressions .title > .name  {
-  max-width: 14em;
-}
-
-/* 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;
-}
-
-.variables-view-container .theme-twisty {
-  margin: 2px;
-}
-
-.variable-or-property > .title > .theme-twisty {
-  margin-inline-start: 5px;
-}
-
-.variable-or-property:not([untitled]) > .variables-view-element-details {
-  margin-inline-start: 7px;
-}
-
-/* Traits applied when variables or properties are changed or overridden */
-
-.variable-or-property:not([overridden]) {
-  transition: background 1s ease-in-out;
-}
-
-.variable-or-property:not([overridden])[changed] {
-  transition-duration: .4s;
-}
-
-.variable-or-property[overridden] {
-  background: rgba(128,128,128,0.05);
-}
-
-.variable-or-property[overridden] .title > label {
-  /* Cross out the title for this variable and all child properties. */
-  font-style: italic;
-  text-decoration: line-through;
-  border-bottom: none !important;
-  color: rgba(128,128,128,0.9);
-  opacity: 0.7;
-}
-
-/* Traits applied when variables or properties are editable */
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property[overridden] .title > .value {
-  /* Disallow editing this variable and all child properties. */
-  pointer-events: none;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
-  opacity: 0.6;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
-  background-size: cover;
-  width: 16px;
-  height: 16px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  height: 16px;
-  padding-inline-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Aligned values */
-
-.variables-view-container[aligned-values] .title > .separator {
-  -moz-box-flex: 1;
-}
-
-.variables-view-container[aligned-values] .title > .value {
-  -moz-box-flex: 0;
-  width: 70vw;
-}
-
-.variables-view-container[aligned-values] .title > .element-value-input {
-  width: calc(70vw - 10px);
-}
-
-/* Actions first */
-
-.variables-view-open-inspector {
-  -moz-box-ordinal-group: 1;
-}
-
-.variables-view-edit,
-.variables-view-add-property {
-  -moz-box-ordinal-group: 2;
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label,
-.variable-or-property-non-writable-icon {
-  -moz-box-ordinal-group: 3;
-}
-
-.variables-view-delete {
-  -moz-box-ordinal-group: 4;
-}
-
-.variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-add-property,
-.variables-view-container[actions-first] .variables-view-open-inspector {
-  -moz-box-ordinal-group: 0;
-}
-
-.variables-view-container[actions-first] [invisible] {
-  visibility: hidden;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label.enumerable,
-.variable-or-property[non-configurable] > tooltip > label.configurable,
-.variable-or-property[non-writable] > tooltip > label.writable,
-.variable-or-property[non-extensible] > tooltip > label.extensible {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[overridden] > tooltip > label.overridden {
-  padding-inline-start: 4px;
-  border-inline-start: 1px dotted #000;
-}
-
-.variable-or-property[safe-getter] > tooltip > label.WebIDL {
-  padding-inline-start: 4px;
-  border-inline-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-.variables-view-delete,
-.variables-view-edit,
-.variables-view-open-inspector {
-  width: 16px;
-  height: 16px;
-  background-size: cover;
-  cursor: pointer;
-}
-
-.variables-view-delete:hover,
-.variables-view-edit:hover,
-.variables-view-open-inspector:hover {
-  filter: var(--theme-icon-checked-filter);
-}
-
-.variables-view-delete:active,
-.variables-view-edit:active,
-.variables-view-open-inspector:active {
-  filter: var(--theme-icon-checked-filter) brightness(0.9);
-}
-
-.variable-or-property:focus > .title > .variables-view-delete,
-.variable-or-property:focus > .title > .variables-view-edit,
-.variable-or-property:focus > .title > .variables-view-open-inspector {
-  filter: none;
-}
-
-.variables-view-delete {
-  background-image: var(--delete-icon);
-}
-
-@media (min-resolution: 1.1dppx) {
-  .variables-view-delete {
-    background-image: var(--delete-icon-2x);
-  }
-}
-
-.variables-view-edit {
-  background-image: url("chrome://devtools/skin/images/vview-edit.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .variables-view-edit {
-    background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
-  }
-}
-
-.variables-view-open-inspector {
-  background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .variables-view-open-inspector {
-    background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
-  }
-}
-
-/* Variables and properties input boxes */
-
-.variable-or-property > .title > .separator + .element-value-input {
-  margin-inline-start: -2px !important;
-  margin-inline-end: 2px !important;
-}
-
-.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
-  margin-inline-start: 4px !important;
-  margin-inline-end: 2px !important;
-}
-
-.element-name-input {
-  margin-inline-start: -2px !important;
-  margin-inline-end: 2px !important;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid rgba(128, 128, 128, .5) !important;
-  border-radius: 0;
-  color: inherit;
-}
-
-/* Variables and properties searching */
-
-.variable-or-property[unmatched] {
-  border: none;
-  margin: 0;
-}
-
-/* Canvas graphs */
-
-.graph-widget-container {
-  position: relative;
-}
-
-.graph-widget-canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.graph-widget-canvas[input=hovering-background] {
-  cursor: text;
-}
-
-.graph-widget-canvas[input=hovering-region] {
-  cursor: pointer;
-}
-
-.graph-widget-canvas[input=hovering-selection-start-boundary],
-.graph-widget-canvas[input=hovering-selection-end-boundary],
-.graph-widget-canvas[input=adjusting-selection-boundary] {
-  cursor: col-resize;
-}
-
-.graph-widget-canvas[input=adjusting-view-area] {
-  cursor: grabbing;
-}
-
-.graph-widget-canvas[input=hovering-selection-contents] {
-  cursor: grab;
-}
-
-.graph-widget-canvas[input=dragging-selection-contents] {
-  cursor: grabbing;
-}
-
-/* Line graph widget */
-
-.line-graph-widget-gutter {
-  position: absolute;
-  width: 10px;
-  height: 100%;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  border-inline-end: 1px solid;
-}
-
-.theme-light .line-graph-widget-gutter {
-  background: rgba(255,255,255,0.75);
-  border-inline-end-color: rgba(255,255,255,0.25);
-}
-
-.theme-dark .line-graph-widget-gutter {
-  background: rgba(0,0,0,0.5);
-  border-inline-end-color: rgba(0,0,0,0.25);
-}
-
-.line-graph-widget-gutter-line {
-  position: absolute;
-  width: 100%;
-  border-top: 1px solid;
-}
-
-.line-graph-widget-gutter-line[type=maximum] {
-  border-color: #2cbb0f;
-}
-
-.line-graph-widget-gutter-line[type=minimum] {
-  border-color: #ed2655;
-}
-
-.line-graph-widget-gutter-line[type=average] {
-  border-color: #d97e00;
-}
-
-.line-graph-widget-tooltip {
-  position: absolute;
-  border-radius: 2px;
-  line-height: 15px;
-  padding-inline-start: 6px;
-  padding-inline-end: 6px;
-  transform: translateY(-50%);
-  font-size: 0.8rem !important;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.theme-light .line-graph-widget-tooltip {
-  background: rgba(255,255,255,0.75);
-}
-
-.theme-dark .line-graph-widget-tooltip {
-  background: rgba(0,0,0,0.5);
-}
-
-.line-graph-widget-tooltip[with-arrows=true]::before {
-  content: "";
-  position: absolute;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  top: calc(50% - 3px);
-}
-
-.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
-  border-inline-end: 3px solid;
-  left: -3px;
-}
-
-.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
-  border-inline-start: 3px solid;
-  right: -3px;
-}
-
-.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
-  border-inline-end-color: rgba(255,255,255,0.75);
-}
-
-.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
-  border-inline-end-color: rgba(0,0,0,0.5);
-}
-
-.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
-  border-inline-start-color: rgba(255,255,255,0.75);
-}
-
-.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
-  border-inline-start-color: rgba(0,0,0,0.5);
-}
-
-.line-graph-widget-tooltip[type=maximum] {
-  left: 14px;
-}
-
-.line-graph-widget-tooltip[type=minimum] {
-  left: 14px;
-}
-
-.line-graph-widget-tooltip[type=average] {
-  right: 4px;
-}
-
-.line-graph-widget-tooltip > [text=info] {
-  color: var(--theme-content-color1);
-}
-
-.line-graph-widget-tooltip > [text=value] {
-  margin-inline-start: 3px;
-}
-
-.line-graph-widget-tooltip > [text=metric] {
-  margin-inline-start: 1px;
-  color: var(--theme-content-color3);
-}
-
-.theme-light .line-graph-widget-tooltip > [text=value],
-.theme-light .line-graph-widget-tooltip > [text=metric] {
-  text-shadow: 1px  0px rgba(255,255,255,0.5),
-              -1px  0px rgba(255,255,255,0.5),
-               0px -1px rgba(255,255,255,0.5),
-               0px  1px rgba(255,255,255,0.5);
-}
-
-.theme-dark .line-graph-widget-tooltip > [text=value],
-.theme-dark .line-graph-widget-tooltip > [text=metric] {
-  text-shadow: 1px  0px rgba(0,0,0,0.5),
-              -1px  0px rgba(0,0,0,0.5),
-               0px -1px rgba(0,0,0,0.5),
-               0px  1px rgba(0,0,0,0.5);
-}
-
-.line-graph-widget-tooltip[type=maximum] > [text=value] {
-  color: var(--theme-highlight-green);
-}
-
-.line-graph-widget-tooltip[type=minimum] > [text=value] {
-  color: var(--theme-highlight-red);
-}
-
-.line-graph-widget-tooltip[type=average] > [text=value] {
-  color: var(--theme-highlight-orange);
-}
-
-/* Bar graph widget */
-
-.bar-graph-widget-legend {
-  position: absolute;
-  top: 4px;
-  left: 8px;
-  color: #292e33;
-  font-size: 80%;
-  pointer-events: none;
-}
-
-.bar-graph-widget-legend-item {
-  float: left;
-  margin-inline-end: 8px;
-}
-
-.bar-graph-widget-legend-item > [view="color"],
-.bar-graph-widget-legend-item > [view="label"] {
-  vertical-align: middle;
-}
-
-.bar-graph-widget-legend-item > [view="color"] {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border: 1px solid #fff;
-  border-radius: 1px;
-  margin-inline-end: 4px;
-  pointer-events: all;
-  cursor: pointer;
-}
-
-.bar-graph-widget-legend-item > [view="label"] {
-  text-shadow: 1px  0px rgba(255,255,255,0.8),
-              -1px  0px rgba(255,255,255,0.8),
-               0px -1px rgba(255,255,255,0.8),
-               0px  1px rgba(255,255,255,0.8);
-}
-
-/* Charts */
-
-.generic-chart-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .generic-chart-container {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .generic-chart-container {
-  color: var(--theme-body-color-alt);
-}
-
-.chart-colored-blob {
-  fill: var(--theme-content-color2);
-  background: var(--theme-content-color2);
-}
-
-/* Charts: Pie */
-
-.pie-chart-slice {
-  stroke-width: 1px;
-  cursor: pointer;
-}
-
-.theme-dark .pie-chart-slice {
-  stroke: rgba(0,0,0,0.2);
-}
-
-.theme-light .pie-chart-slice {
-  stroke: rgba(255,255,255,0.8);
-}
-
-.theme-dark .pie-chart-slice[largest] {
-  stroke-width: 2px;
-  stroke: #fff;
-}
-
-.theme-light .pie-chart-slice[largest] {
-  stroke: #000;
-}
-
-.pie-chart-label {
-  text-anchor: middle;
-  dominant-baseline: middle;
-  pointer-events: none;
-}
-
-.theme-dark .pie-chart-label {
-  fill: #000;
-}
-
-.theme-light .pie-chart-label {
-  fill: #fff;
-}
-
-.pie-chart-container[slices="1"] > .pie-chart-slice {
-  stroke-width: 0px;
-}
-
-.pie-chart-slice,
-.pie-chart-label {
-  transition: all 0.1s ease-out;
-}
-
-.pie-chart-slice:not(:hover):not([focused]),
-.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
-  transform: none !important;
-}
-
-/* Charts: Table */
-
-.table-chart-title {
-  padding-bottom: 10px;
-  font-size: 120%;
-  font-weight: 600;
-}
-
-.table-chart-row {
-  margin-top: 1px;
-  cursor: pointer;
-}
-
-.table-chart-grid:hover > .table-chart-row {
-  transition: opacity 0.1s ease-in-out;
-}
-
-.table-chart-grid:not(:hover) > .table-chart-row {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
-.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
-  opacity: 0.4;
-}
-
-.table-chart-row-box {
-  width: 8px;
-  height: 1.5em;
-  margin-inline-end: 10px;
-}
-
-.table-chart-row-label {
-  width: 8em;
-  padding-inline-end: 6px;
-  cursor: inherit;
-}
-
-.table-chart-totals {
-  margin-top: 8px;
-  padding-top: 6px;
-}
-
-.table-chart-totals {
-  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
-}
-
-.table-chart-summary-label {
-  font-weight: 600;
-  padding: 1px 0px;
-}
-
-.theme-dark .table-chart-summary-label {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .table-chart-summary-label {
-  color: var(--theme-body-color);
-}
-
-/* Table Widget */
-
-/* Table body */
-
-.table-widget-body > .devtools-side-splitter {
-  background-color: transparent;
-}
-
-.table-widget-body {
-  overflow: auto;
-}
-
-.table-widget-body,
-.table-widget-empty-text {
-  background-color: var(--theme-body-background);
-}
-
-/* Column Headers */
-
-.table-widget-column-header,
-.table-widget-cell {
-  border-inline-end: 1px solid var(--table-splitter-color) !important;
-}
-
-/* Table widget column header colors are taken from netmonitor.inc.css to match
-   the look of both the tables. */
-
-.table-widget-column-header {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  margin: 0;
-  padding: 5px 0 0 !important;
-  color: inherit;
-  text-align: center;
-  font-weight: inherit !important;
-  border-image: linear-gradient(transparent 15%,
-                                var(--theme-splitter-color) 15%,
-                                var(--theme-splitter-color) 85%,
-                                transparent 85%,
-                                transparent calc(100% - 1px),
-                                var(--theme-splitter-color) calc(100% - 1px)) 1 1;
-  background-repeat: no-repeat;
-}
-
-.table-widget-column-header:not([sorted]):hover {
-  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
-}
-
-.table-widget-column-header[sorted] {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
-  box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color);
-  background-position: right 6px center;
-}
-
-.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
-  background-position: 6px center;
-}
-
-.table-widget-column-header[sorted=ascending] {
-  background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
-}
-
-.table-widget-column-header[sorted=descending] {
-  background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
-}
-
-.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;
-
-  /* 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);
-}
-
-.table-widget-cell[hidden] {
-  display: none;
-}
-
-.table-widget-cell.even:not(.theme-selected) {
-  background-color: var(--table-zebra-background);
-}
-
-:root:not(.no-animate) .table-widget-cell.flash-out {
-  animation: flash-out 0.5s ease-in;
-}
-
-@keyframes flash-out {
-  to {
-    background: var(--theme-contrast-background);
-  }
-}
-
-/* Empty text and initial text */
-
-.table-widget-empty-text {
-  display: none;
-  text-align: center;
-  font-size: large;
-  margin-top: -20px !important;
-}
-
-.table-widget-body:empty + .table-widget-empty-text:not([value=""]),
-.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
-  display: block;
-}
-
-/* Tree Widget */
-
-.tree-widget-container {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  list-style: none;
-  overflow: hidden;
-  margin-inline-end: 40px;
-}
-
-.tree-widget-container:-moz-focusring,
-.tree-widget-container *:-moz-focusring {
-  outline-style: none;
-}
-
-.tree-widget-empty-text {
-  padding: 10px 20px;
-  font-size: medium;
-  background: transparent;
-  pointer-events: none;
-}
-
-/* Tree Item */
-
-.tree-widget-container .tree-widget-item {
-  padding: 2px 0px 4px;
-  /* OSX has line-height 14px by default, which causes weird alignment issues
-   * because of 20px high icons. thus making line-height consistent with that of
-   * windows.
-   */
-  line-height: 17px !important;
-  display: inline-block;
-  width: 100%;
-  word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
-                           breaking in multiple lines */
-}
-
-.tree-widget-container .tree-widget-children {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tree-widget-item[level="1"] {
-  font-weight: 700;
-}
-
-/* Twisties */
-.tree-widget-item::before {
-  content: "";
-  width: 14px;
-  height: 14px;
-  float: left;
-  margin: 3px 2px -3px;
-  background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
-  background-size: 56px 28px;
-  cursor: pointer;
-  background-position: -28px -14px;
-}
-
-.tree-widget-item:-moz-locale-dir(rtl)::before {
-  float: right;
-  transform: scaleX(-1);
-}
-
-.theme-light .tree-widget-item:not(.theme-selected)::before {
-  background-position: 0 -14px;
-}
-
-.tree-widget-item[empty]::before {
-  background: transparent;
-}
-
-.tree-widget-item[expanded]::before {
-  background-position: -42px -14px;
-}
-
-.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before {
-  background-position: -14px -14px;
-}
-
-.tree-widget-item + ul {
-  overflow: hidden;
-  animation: collapse-tree-item 0.2s;
-  max-height: 0;
-}
-
-.tree-widget-item[expanded] + ul {
-  animation: expand-tree-item 0.3s;
-  max-height: unset;
-}
-
-@keyframes collapse-tree-item {
-  from {
-    max-height: 300px;
-  }
-  to {
-    max-height: 0;
-  }
-}
-
-@keyframes expand-tree-item {
-  from {
-    max-height: 0;
-  }
-  to {
-    max-height: 500px;
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  .tree-widget-item:before {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
-  }
-}
-
-/* Indentation of child items in the tree */
-
-/* For level > 6 */
-.tree-widget-item[level] + ul > li > .tree-widget-item {
-  padding-inline-start: 98px;
-}
-
-/* First level */
-.tree-widget-item[level="1"] + ul > li > .tree-widget-item {
-  padding-inline-start: 14px;
-}
-
-/* Second level */
-.tree-widget-item[level="2"] + ul > li > .tree-widget-item {
-  padding-inline-start: 28px;
-}
-
-/* Third level */
-.tree-widget-item[level="3"] + ul > li > .tree-widget-item {
-  padding-inline-start: 42px;
-}
-
-/* Fourth level */
-.tree-widget-item[level="4"] + ul > li > .tree-widget-item {
-  padding-inline-start: 56px;
-}
-
-/* Fifth level */
-.tree-widget-item[level="5"] + ul > li > .tree-widget-item {
-  padding-inline-start: 70px;
-}
-
-/* Sixth level */
-.tree-widget-item[level="6"] + ul > li > .tree-widget-item {
-  padding-inline-start: 84px;
-}
-
-/* Custom icons for certain tree items indicating the type of the item */
-
-.tree-widget-item[type]::after {
-  content: "";
-  float: left;
-  width: 16px;
-  height: 17px;
-  margin-inline-end: 4px;
-  background-repeat: no-repeat;
-  background-size: 20px auto;
-  background-position: 0 0;
-  background-size: auto 20px;
-  opacity: 0.75;
-}
-
-.tree-widget-item.theme-selected[type]::after {
-  opacity: 1;
-}
-
-.tree-widget-item:-moz-locale-dir(rtl)::after {
-  float: right;
-}
-
-.theme-light .tree-widget-item.theme-selected[type]::after,
-.theme-dark .tree-widget-item[type]::after {
-  filter: invert(1);
-}
-
-.tree-widget-item[type="dir"]::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/dir-close.svg);
-  background-position: 2px 0;
-  background-size: auto 16px;
-  width: 20px;
-}
-
-.tree-widget-item[type="dir"][expanded]:not([empty])::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/dir-open.svg);
-}
-
-.tree-widget-item[type="url"]::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/globe.svg);
-  background-size: auto 18px;
-  width: 18px;
-}
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -1,13 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+@import url(chrome://devtools/skin/breadcrumbs.css);
+
 .theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
   --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
   --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
   --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
 }
@@ -25,17 +27,16 @@
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
   --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
   --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg);
 }
 
-
 /* Generic pane helpers */
 
 .generic-toggled-pane {
   margin-inline-start: 0 !important;
   /* Unfortunately, transitions don't work properly with locale-aware properties,
      so both the left and right margins are set via js, while the start margin
      is always overridden here. */
 }
@@ -108,356 +109,16 @@
     /* To hide generic-toggled-pane, negative margins are applied dynamically.
      * If a vertical layout, the pane is on the bottom and should be hidden
      * using negative bottom margin only.
      */
     margin-inline-end: 0 !important;
   }
 }
 
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  margin-inline-end: 3px;
-  max-height: 24px; /* Set max-height for proper sizing on linux */
-  height: 24px; /* Set height to prevent starting small waiting for content */
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  background: transparent;
-  box-shadow: none;
-  border: none;
-  list-style-image: none;
-  margin: 0;
-  padding: 0;
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  width: 7px;
-  height: 16px;
-  background-size: 14px 16px;
-  background-position: 0 center;
-  background-repeat: no-repeat;
-  background-image: url("images/breadcrumbs-scrollbutton.png");
-  list-style-image: none;
-  margin: 0 8px;
-  padding: 0;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .scrollbutton-up > .toolbarbutton-icon,
-  .scrollbutton-down > .toolbarbutton-icon {
-    background-image: url("images/breadcrumbs-scrollbutton@2x.png");
-  }
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  background-position: -7px center;
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
-.scrollbutton-up:-moz-locale-dir(ltr):not(:dir(rtl)),
-.scrollbutton-up:dir(ltr),
-.scrollbutton-down:-moz-locale-dir(rtl),
-.scrollbutton-down:dir(rtl) {
-  border-right: solid 1px rgba(255, 255, 255, .1);
-  border-left: solid 1px transparent;
-  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
-}
-
-.scrollbutton-down:-moz-locale-dir(ltr):not(:dir(rtl)),
-.scrollbutton-down:dir(ltr),
-.scrollbutton-up:-moz-locale-dir(rtl),
-.scrollbutton-up:dir(rtl) {
-  border-right: solid 1px transparent;
-  border-left: solid 1px rgba(255, 255, 255, .1);
-  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
-}
-
-.scrollbutton-up[disabled],
-.scrollbutton-down[disabled] {
-  box-shadow: none;
-  border-color: transparent;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-up > .toolbarbutton-icon:dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr):not(:dir(rtl)),
-.scrollbutton-down > .toolbarbutton-icon:dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  min-height: 24px;
-  min-width: 65px;
-  margin: 0;
-  padding: 0 8px 0 20px;
-  border: none;
-  outline: none;
-  color: hsl(210,30%,85%);
-  position: relative;
-}
-
-.breadcrumbs-widget-item > .button-box {
-  border: none;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box {
-  border-width: 0;
-}
-
-.breadcrumbs-widget-item::before {
-  content: "";
-  position: absolute;
-  top: 1px;
-  offset-inline-start: 0;
-  width: 12px;
-  height: 22px;
-  background-repeat: no-repeat;
-  /* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of
-     the arrow shape, we need the arrow edges to be at this position from the start of
-     the gradient line. */
-  --position: 66.5%;
-  /* The color of the thin line in the arrow-shaped separator between 2 unselected
-     crumbs. There is no theme variable for this, this used to be an image. */
-  --line-color: #ACACAC;
-  --background-color: var(--theme-body-background);
-}
-
-#debugger-toolbar .breadcrumbs-widget-item::before {
-  --background-color: var(--theme-toolbar-background);
-}
-
-.theme-dark .breadcrumbs-widget-item::before {
-  --line-color: #6E6E6E;
-}
-
-.breadcrumbs-widget-item:first-child::before {
-  /* The first crumb does not need any separator before itself */
-  content: unset;
-}
-
-.breadcrumbs-widget-item:dir(rtl)::before {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item:not([checked])::before {
-  background-color: var(--background-color);
-  background-image:
-    linear-gradient(45deg,
-                    var(--background-color) 30%,
-                    transparent),
-    linear-gradient(-45deg,
-                    transparent,
-                    var(--background-color) 70%,
-                    var(--background-color)),
-    linear-gradient(45deg,
-                    transparent var(--position),
-                    var(--line-color) var(--position),
-                    var(--line-color) calc(var(--position) + 1px),
-                    transparent 0),
-    linear-gradient(-45deg,
-                    transparent calc(100% - var(--position)),
-                    var(--line-color) calc(100% - var(--position)),
-                    var(--line-color) calc(calc(100% - var(--position)) + 1px),
-                    transparent 0);
-  background-size:
-    100% 50%,
-    100% 50%,
-    100%,
-    100%;
-  background-position:
-    left bottom,
-    left top,
-    left top,
-    left top;
-}
-
-.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before {
-  background-color: var(--theme-selection-background);
-  background-image:
-    linear-gradient(45deg,
-                    transparent var(--position),
-                    var(--background-color) 0),
-    linear-gradient(-45deg,
-                    var(--background-color) calc(100% - var(--position)),
-                    transparent 0);
-  background-size: unset;
-}
-
-.breadcrumbs-widget-item[checked]::before {
-  background-image:
-    linear-gradient(45deg,
-                    transparent var(--position),
-                    var(--theme-selection-background) 0),
-    linear-gradient(-45deg,
-                    var(--theme-selection-background) calc(100% - var(--position)),
-                    var(--background-color) 0);
-}
-
-.breadcrumbs-widget-item[checked] {
-  background-color: var(--theme-selection-background);
-}
-
-.breadcrumbs-widget-item:first-child {
-  background-image: none;
-}
-
-/* RTL support: move the images that were on the left to the right,
- * and move images that were on the right to the left.
- */
-.breadcrumbs-widget-item:dir(rtl) {
-  padding: 0 20px 0 8px;
-}
-
-.breadcrumbs-widget-item:dir(rtl),
-.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) {
-  background-position: center right;
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
-  color: var(--theme-selection-color);
-}
-
-.theme-dark .breadcrumbs-widget-item {
-  color: var(--theme-selection-color);
-}
-
-.theme-light .breadcrumbs-widget-item {
-  color: var(--theme-body-color);
-}
-
-.breadcrumbs-widget-item-id {
-  color: var(--theme-body-color-alt);
-}
-
-.breadcrumbs-widget-item-classes {
-  color: var(--theme-content-color1);
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: var(--theme-highlight-lightorange);
-}
-
-.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
-  color: white;
-}
-
-.theme-light .breadcrumbs-widget-item:not([checked]):hover label {
-  color: black;
-}
-
-/* Firebug theme support for breadcrumbs widget. */
-
-.theme-firebug .breadcrumbs-widget-item {
-  margin-inline-start: 10px;
-  margin-inline-end: 1px;
-  background-image: none;
-  border: 1px solid transparent;
-  color: #141414;
-  border-radius: 2px;
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  font-size: var(--theme-toolbar-font-size);
-}
-
-.theme-firebug .breadcrumbs-widget-item:hover {
-  border-color: rgba(0, 0, 0, 0.2);
-  background: transparent linear-gradient(
-              rgba(255, 255, 255, 0.4),
-              rgba(255, 255, 255, 0.2)) no-repeat;
-  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset,
-              0 0 1px rgba(255, 255, 255, 0.6) inset,
-              0 0 2px rgba(0, 0, 0, 0.05);
-}
-
-.theme-firebug .breadcrumbs-widget-item > .button-box {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.theme-firebug .breadcrumbs-widget-item:first-child {
-  margin: 0;
-}
-
-.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
-  content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
-  background: none;
-  position: relative;
-  left: -3px;
-  margin: 0 0 0 -5px;
-  padding: 0;
-  width: 5px;
-}
-
-/* Breadcrumbs Separators (reset selection styles) */
-.theme-firebug .breadcrumbs-widget-item[checked],
-.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
-.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
-.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
-.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
-  background: none;
-  font-weight: bold;
-  color: inherit;
-}
-
-/* The first rule is there only to make sure the default rule from
-widgets.css is overwritten. */
-.theme-firebug .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
-  background: none;
-}
-
-.theme-firebug .breadcrumbs-widget-item .breadcrumbs-widget-item-tag {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-/* Breadcrumbs Scrolling Buttons */
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up,
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down {
-  padding: 0;
-  box-shadow: none;
-  outline: 1px solid var(--theme-splitter-color);
-}
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:hover,
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:hover {
-  border: 1px transparent solid !important;
-  box-shadow: none !important;
-}
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active,
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
-  background: none !important;
-}
-
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  background-position: 0 center;
-}
-
 /* SimpleListWidget */
 
 .simple-list-widget-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 .simple-list-widget-item.selected {