Tycho devtools light theme for UXP devtools userstyle/css

General discussion and chat (archived)
win7-7
Fanatic
Fanatic
Posts: 183
Joined: 2013-09-16, 15:18
Location: --

Tycho devtools light theme for UXP devtools userstyle/css

Unread post by win7-7 » 2018-08-28, 09:26

Pale Moon 28.0.0 has been released this month and alpha/beta board archived so it's time to repost how to change devtools look like in Tycho.

Code: Select all

/* 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/. */

/* According to:
 * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
 */
:root.theme-light {
  --theme-body-background: #fcfcfc;
  --theme-sidebar-background: #f7f7f7;
  --theme-contrast-background: #e6b064;

  --theme-tab-toolbar-background: #ebeced;
  --theme-toolbar-background: #f0f1f2;
  --theme-selection-background: #4c9ed9;
  --theme-selection-color: #f5f7fa;
  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
  --theme-splitter-color: #aaaaaa;
  --theme-comment: hsl(90,2%,46%);

  --theme-body-color: #18191a;
  --theme-body-color-alt: #585959;
  --theme-content-color1: #292e33;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #667380;

  --theme-highlight-green: hsl(72,100%,27%);
  --theme-highlight-blue: hsl(208,56%,40%);
  --theme-highlight-bluegrey: hsl(208,81%,21%);
  --theme-highlight-purple: #5b5fff;
  --theme-highlight-lightorange: #a18650;
  --theme-highlight-orange: hsl(24,85%,39%);
  --theme-highlight-red: #bf5656;
  --theme-highlight-pink: #b82ee5;
}

.theme-body {
  background: var(--theme-body-background);
  color: var(--theme-body-color);
}

.theme-sidebar {
  background: var(--theme-sidebar-background);
  color: var(--theme-body-color);
}


.theme-bg-darker {
  background: var(--theme-selection-background-semitransparent);
}

.theme-selected,
.CodeMirror-hint-active {
  background-color: var(--theme-selection-background);
  color: var(--theme-selection-color);
}

.theme-bg-contrast,
.variable-or-property:not([overridden])[changed] {
  background: var(--theme-contrast-background);
}

.theme-link,
.cm-s-mozilla .cm-link,
.CodeMirror-Tern-type {
  color: var(--theme-highlight-blue);
}

/*
 * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
 * failures in debug builds.
 */
.theme-link:visited,
.cm-s-mozilla .cm-link:visited {
  color: var(--theme-highlight-blue);
}

.theme-comment,
.cm-s-mozilla .cm-meta,
.cm-s-mozilla .cm-hr,
.cm-s-mozilla .cm-comment,
.variable-or-property .token-undefined,
.variable-or-property .token-null,
.CodeMirror-Tern-completion-unknown:before {
  color: var(--theme-comment);
}

.theme-gutter {
  background-color: hsl(0,0%,90%);
  color: var(--theme-content-color3);
  border-color: hsl(0,0%,65%);
}

.theme-separator { /* grey */
  border-color: #cddae5;
}

.cm-s-mozilla .cm-unused-line {
  text-decoration: line-through;
  text-decoration-color: var(--theme-highlight-bluegrey);
}

.cm-s-mozilla .cm-executed-line {
  background-color: #fcfffc;
}

.theme-fg-color1,
.cm-s-mozilla .cm-number,
.variable-or-property .token-number,
.variable-or-property[return] > .title > .name,
.variable-or-property[scope] > .title > .name {
  color: var(--theme-highlight-green);
}

.CodeMirror-Tern-completion-number:before {
  background-color: hsl(72,100%,27%);
}

.theme-fg-color2,
.cm-s-mozilla .cm-attribute,
.cm-s-mozilla .cm-builtin,
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-property,
.cm-s-mozilla .cm-qualifier,
.variables-view-variable > .title > .name {
  color: var(--theme-highlight-blue);
}

.CodeMirror-Tern-completion-object:before {
  background-color: hsl(208,56%,40%);
}

.theme-fg-color3,
.cm-s-mozilla .cm-variable,
.cm-s-mozilla .cm-tag,
.cm-s-mozilla .cm-header,
.cm-s-mozilla .cm-bracket,
.variables-view-property > .title > .name {
  color: var(--theme-highlight-bluegrey);
}

.CodeMirror-Tern-completion-array:before {
  background-color: var(--theme-highlight-bluegrey);
}

.theme-fg-color4 {
  color: var(--theme-highlight-orange);
}

.theme-fg-color5,
.cm-s-mozilla .cm-keyword {
  color: var(--theme-highlight-lightorange);
}

.theme-fg-color6,
.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2,
.variable-or-property .token-string,
.CodeMirror-Tern-farg {
  color: var(--theme-highlight-orange);
}

.CodeMirror-Tern-completion-string:before,
.CodeMirror-Tern-completion-fn:before {
  background-color: hsl(24,85%,39%);
}

.theme-fg-color7,
.cm-s-mozilla .cm-atom,
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error,
.variable-or-property .token-boolean,
.variable-or-property .token-domnode,
.variable-or-property[exception] > .title > .name {
  color: var(--theme-highlight-red);
}

.CodeMirror-Tern-completion-bool:before {
  background-color: #bf5656;
}

.variable-or-property .token-domnode {
  font-weight: bold;
}

.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
  color: black;
}

.theme-toolbar,
.devtools-toolbar,
.devtools-sidebar-tabs tabs,
.devtools-sidebar-alltabs,
.CodeMirror-dialog { /* General toolbar styling */
  color: var(--theme-body-color-alt);
  background-color: var(--theme-toolbar-background);
  border-color: var(--theme-splitter-color);
}

.ruleview-colorswatch,
.computedview-colorswatch,
.ruleview-bezierswatch {
  box-shadow: 0 0 0 1px #c4c4c4;
}

/* CodeMirror specific styles.
 * Best effort to match the existing theme, some of the colors
 * are duplicated here to prevent weirdness in the main theme. */

.CodeMirror { /* Inherit platform specific font sizing and styles */
  font-family: inherit;
  font-size: inherit;
  background: transparent;
}

.CodeMirror pre,
.cm-s-mozilla .cm-variable-2,
.cm-s-mozilla .cm-variable-3,
.cm-s-mozilla .cm-operator,
.cm-s-mozilla .cm-special {
  color: var(--theme-body-color);
}

.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
  border-left: solid 1px black;
}

.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
  background: rgb(185, 215, 253);
}

.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
  background: rgb(176, 176, 176);
}

.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
  background: rgba(185, 215, 253, .35);
}

div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
  outline: solid 1px rgba(0, 0, 0, .25);
  color: black;
}

/* Highlight for a line that contains an error. */
div.CodeMirror div.error-line {
  background: rgba(255,0,0,0.2);
}

/* Highlight for a line that represents a stack frame's location. */
div.CodeMirror div.debug-line {
  background: rgba(0,128,255,0.1);
  box-shadow:
    0 1px 0 0 rgba(0,128,255,0.4),
    0 -1px 0 0 rgba(0,128,255,0.4);
}

/* Generic highlighted text */
div.CodeMirror span.marked-text {
  background: rgba(255,255,0,0.2);
  border: 1px dashed rgba(192,192,0,0.6);
  -moz-margin-start: -1px;
  -moz-margin-end: -1px;
}

/* Highlight for evaluating current statement. */
div.CodeMirror span.eval-text {
  background-color: #ccd;
}

.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
  color: var(--theme-content-color3);
}

.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
  border-right-color: var(--theme-splitter-color);
  background-color: var(--theme-sidebar-background);
}

.cm-s-markup-view pre {
  line-height: 1.4em;
  min-height: 1.4em;
}

#inspector-breadcrumbs-toolbar {
  padding: 0px;
  border-bottom-width: 0px;
  border-top-width: 1px;
  margin-right: 300px !important;
  margin-left: 28px !important;
  border-top-color: var(--breadcrumbs-border-color);
  /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
     get mistaken as a splitter */
  background-color: var(--theme-tab-toolbar-background);
  display: block;
  position: relative;
  bottom:220px;
}




/* Twisty and checkbox controls */

.theme-twisty, .theme-checkbox {
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-image: url("chrome://global/skin/devtools/controls.png");
  background-size: 56px 28px;
}

.theme-twisty {
  cursor: pointer;
  background-position: 0 -14px;
}

.theme-twisty:-moz-focusring {
  outline-style: none;
}

.theme-twisty[open] {
  background-position: -14px -14px;
}

.theme-twisty[invisible] {
  visibility: hidden;
}

/* Use white twisty when next to a selected item in markup view */
.theme-selected ~ .theme-twisty {
  background-position: -28px -14px;
}

.theme-selected ~ .theme-twisty[open] {
  background-position: -42px -14px;
}

.theme-checkbox {
  display: inline-block;
  border: 0;
  padding: 0;
  outline: none;
  background-position: 0 0;
}

.theme-checkbox[checked] {
  background-position: -14px 0;
}

@media (min-resolution: 2dppx) {
  .theme-twisty, .theme-checkbox {
    background-image: url("chrome://global/skin/devtools/controls@2x.png");
  }
}

/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */

.theme-tooltip-panel .panel-arrowcontent {
  padding: 4px;
  background: rgba(255, 255, 255, .9);
  border-radius: 5px;
  box-shadow: none;
  border: 3px solid #d9e1e8;
}

/* Overring panel arrow images to fit with our light and dark themes */

.theme-tooltip-panel .panel-arrow[side="top"] {
  list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light.png");
  margin-bottom: -4px;
}

.theme-tooltip-panel .panel-arrow[side="bottom"] {
  list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light.png");
  margin-top: -4px;
}

.theme-tooltip-panel .panel-arrow[side="left"] {
  list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light.png");
  margin-right: -4px;
}

.theme-tooltip-panel .panel-arrow[side="right"] {
  list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light.png");
  margin-left: -4px;
}

@media (min-resolution: 2dppx) {
  .theme-tooltip-panel .panel-arrow[side="top"],
  .theme-tooltip-panel .panel-arrow[side="bottom"] {
    list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light@2x.png");
  }

  .theme-tooltip-panel .panel-arrow[side="left"],
  .theme-tooltip-panel .panel-arrow[side="right"] {
    list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light@2x.png");
  }
}

.theme-tooltip-panel .devtools-tooltip-simple-text {
  color: black;
  border-bottom: 1px solid #d9e1e8;
}

.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
  border-bottom: 0;
}

.CodeMirror-hints,
.CodeMirror-Tern-tooltip {
  box-shadow: 0 0 4px rgba(128, 128, 128, .5);
  background-color: var(--theme-sidebar-background);
}



/* Toolbars */
.devtools-toolbar,
.devtools-sidebar-tabs tabs,
.devtools-sidebar-alltabs {
  -moz-appearance: none;
  padding: 0;
  border-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  height: 24px;
  line-height: 24px;
  box-sizing: border-box;
}

.devtools-toolbar {
  padding: 0 3px;
}

.devtools-toolbar checkbox {
  margin: 0 2px;
  padding: 0;
}
.devtools-toolbar checkbox .checkbox-check {
  margin: 0;
  padding: 0;
}
.devtools-toolbar checkbox .checkbox-label-box {
  border: none !important; /* overrides .checkbox-label-box from checkbox.css */
}
.devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
  margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */
  padding: 0;
}

/* Toolbar buttons */
.devtools-menulist,
.devtools-toolbarbutton {
  -moz-appearance: none;
  -moz-box-align: center;
  background: transparent;
  min-width: 78px;
  min-height: 18px;
  padding: 1px;
  text-shadow: none;
  border: none;
  border-radius: 0;
  margin: 2px 3px;
  color: inherit;
  transition: background 0.05s ease-in-out;
  color: var(--theme-content-color1);
  background-color: var(--theme-toolbar-background);
}

.devtools-menulist:-moz-focusring,
.devtools-toolbarbutton:-moz-focusring {
  outline: 1px dotted hsla(210,30%,85%,0.7);
  outline-offset: -4px;
}

.devtools-toolbarbutton[standalone] {
  -moz-margin-end: 5px;
  border-width: 1px;
  border-style: solid;
}
.devtools-toolbarbutton[label][standalone] {
  min-height: 2em;
}

.devtools-toolbarbutton:not([label]),
.devtools-toolbarbutton[text-as-image] {
  min-width: 32px;
}

#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
  -moz-padding-start: 5px;
  -moz-padding-end: 5px;
  min-width: inherit;
}


/* Button States */
.theme-dark .devtools-toolbarbutton:not([disabled]):hover,
.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
  background: rgba(0, 0, 0, .3); /* Splitters */
}
.theme-light .devtools-toolbarbutton:not([disabled]):hover,
.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
  background: rgba(170, 170, 170, .3); /* Splitters */
}

.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active,
.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
  background: rgba(0, 0, 0, .4); /* Splitters */
}
.theme-light .devtools-toolbarbutton:not([disabled]):hover:active,
.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
  background: rgba(170, 170, 170, .4); /* Splitters */
}

/* Menu type buttons and checked states */
.theme-dark .devtools-toolbarbutton[checked=true],
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
  background: rgba(29, 79, 115, .7); /* Select highlight blue */
  color: var(--theme-selection-color);
}

.theme-light .devtools-toolbarbutton[checked=true],
.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
  background: rgba(76, 158, 217, .2); /* Select highlight blue */
}

.theme-dark .devtools-menulist[open=true],
.theme-dark .devtools-toolbarbutton[open=true],
.theme-dark .devtools-toolbarbutton[open=true]:hover,
.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
.theme-dark .devtools-toolbarbutton[checked=true]:hover {
  background: rgba(29, 79, 115, .8); /* Select highlight blue */
  color: var(--theme-selection-color);
}

.theme-light .devtools-menulist[open=true],
.theme-light .devtools-toolbarbutton[open=true],
.theme-light .devtools-toolbarbutton[open=true]:hover,
.theme-light .devtools-toolbarbutton[open=true]:hover:active,
.theme-light .devtools-toolbarbutton[checked=true]:hover {
  background: rgba(76, 158, 217, .4); /* Select highlight blue */
}

.devtools-option-toolbarbutton {
  -moz-appearance: none;
  list-style-image: url("chrome://global/skin/devtools/tool-options.svg");
  background: none;
  opacity: .8;
  border: none;
}

.devtools-option-toolbarbutton[open=true] {
  opacity: 1;
}

/* Toolbar button groups */
.devtools-toolbarbutton-group > .devtools-toolbarbutton {
  margin-left: 1px;
  margin-right: 1px;
  outline-offset: -3px;
  box-shadow: none;
}

.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
  -moz-margin-end: 0;
}

.devtools-toolbarbutton-group + .devtools-toolbarbutton {
  -moz-margin-start: 3px;
}

.devtools-separator + .devtools-toolbarbutton {
  -moz-margin-start: 1px;
}

/* HTML buttons, similar to toolbar buttons, but work in HTML documents */

.devtools-button {
  border: 0 solid var(--theme-splitter-color);
  background: var(--theme-toolbar-background);
  margin: 0;
  padding: 0;
  min-width: 32px;
  min-height: 18px;
  /* The icon is absolutely positioned in the button using ::before */
  position: relative;
}

.devtools-button[standalone] {
  min-height: 32px;
  border-width: 1px;
}

/* Button States */
.theme-dark .devtools-button:not([disabled]):hover {
  background: rgba(0, 0, 0, .3); /* Splitters */
}
.theme-light .devtools-button:not([disabled]):hover {
  background: rgba(170, 170, 170, .3); /* Splitters */
}

.theme-dark .devtools-button:not([disabled]):hover:active {
  background: rgba(0, 0, 0, .4); /* Splitters */
}
.theme-light .devtools-button:not([disabled]):hover:active {
  background: rgba(170, 170, 170, .4); /* Splitters */
}

/* Menu type buttons and checked states */
.theme-dark .devtools-button[checked] {
  background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */
  color: var(--theme-selection-color);
}

.theme-light .devtools-button[checked] {
  background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */
}

.devtools-button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px 0 0 -8px;
  background-repeat: no-repeat;
}

@media (min-resolution: 2dppx) {
  .devtools-button::before {
    background-size: 32px;
  }
}

/* Text input */

.devtools-textinput,
.devtools-searchinput {
  -moz-appearance: none;
  margin: 0 3px;
  border: 1px solid;
  border-radius: 2px;
  padding: 4px 6px;
  border-color: var(--theme-splitter-color);
}

.devtools-searchinput {
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 0;
  -moz-padding-start: 22px;
  -moz-padding-end: 12px;
  background-position: 8px center;
  background-size: 11px 11px;
  background-repeat: no-repeat;
  font-size: inherit;
}

.theme-dark .devtools-searchinput {
  background-image: url(magnifying-glass.png);
}

.theme-light .devtools-searchinput {
  background-image: url(magnifying-glass-light.png);
}

@media (min-resolution: 2dppx) {
  .theme-dark .devtools-searchinput {
    background-image: url(magnifying-glass@2x.png);
  }

  .theme-light .devtools-searchinput {
    background-image: url(magnifying-glass-light@2x.png);
  }
}

.devtools-searchinput:-moz-locale-dir(rtl) {
  background-position: calc(100% - 8px) center;
}

.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
  display: none;
}

.devtools-no-search-result {
  border-color: var(--theme-highlight-red) !important;
}

/* Close button */

.devtools-closebutton {
  -moz-appearance: none;
  border: none;
  margin: 0 4px;
  min-width: 16px;
  width: 16px;
  opacity: 0.8;
}

.devtools-closebutton > image {
  width: 16px;
  height: 16px;
  -moz-appearance: none;
  background-size: 16px 16px;
  background-image: url("chrome://global/skin/devtools/close@2x.png");
  background-position: center center;
  background-repeat: no-repeat;
}

.devtools-closebutton > .toolbarbutton-icon {
  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
     use evil CSS to give the impression of smaller content */
  margin: -4px;
}

.devtools-closebutton > .toolbarbutton-text {
  display: none;
}

.devtools-closebutton:hover {
  opacity: 1;
}

/* In-tools sidebar */
.devtools-sidebar-tabs {
  -moz-appearance: none;
  margin: 0;
}

.devtools-sidebar-tabs > tabpanels {
  -moz-appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
}

.theme-light .devtools-sidebar-tabs > tabpanels {
  background: var(--theme-sidebar-background);
  color: var(--theme-body-color);
}

.devtools-sidebar-tabs tabs {
  position: static;
  font: inherit;
  margin-bottom: 0;
  overflow: hidden;
}

.devtools-sidebar-alltabs {
  margin: 0;
  border-width: 0 0 1px 0;
  -moz-border-start-width: 1px;
  border-style: solid;
}

.devtools-sidebar-alltabs dropmarker {
  display: none;
}

.devtools-sidebar-tabs tabs > .tabs-right,
.devtools-sidebar-tabs tabs > .tabs-left {
  display: none;
}

.devtools-sidebar-tabs tabs > tab {
  -moz-appearance: none;
  /* We want to match the height of a toolbar with a toolbarbutton
   * First, we need to replicated the padding of toolbar (4px),
   * then we need to take the border of the buttons into account (1px).
   */
  padding: 0 3px;
  margin: 0;
  min-width: 78px;
  text-align: center;
  background-color: transparent;
  color: inherit;
  -moz-box-flex: 1;
  border-width: 0;
  -moz-border-start-width: 1px;
  border-style: solid;
  border-radius: 0;
  position: static;
  text-shadow: none;
}

.devtools-sidebar-tabs tabs > tab:first-child {
  -moz-border-start-width: 0;
}

.theme-dark .devtools-sidebar-tabs tabs > tab {
  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
  background: hsla(206,37%,4%,.2);
  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
  background: hsla(206,37%,4%,.4);
  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab {
  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
  background: hsla(206,37%,4%,.2);
  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
  background: hsla(206,37%,4%,.4);
  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
}

.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
  color: var(--theme-selection-color);
  background: #1d4f73;
  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
}

.theme-light .devtools-sidebar-tabs tabs > tab {
  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
}

.theme-light .devtools-sidebar-tabs tabs > tab:hover {
  background: #ddd;
  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
}

.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
  background: #ddd;
  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
}

.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab {
  border-image: linear-gradient(#aaa, #aaa);
}

.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
  background: #ddd;
  border-image: linear-gradient(#aaa, #aaa);
}

.theme-light .devtools-sidebar-tabs tabs > tab[selected],
.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
  color: var(--theme-selection-color);
  background: #4c9ed9;
  border-image: linear-gradient(#aaa, #aaa);
}

/* Toolbox - moved from toolbox.css.
 * Rules that apply to the global toolbox like command buttons,
 * devtools tabs, docking buttons, etc. */

#toolbox-controls > toolbarbutton,
#toolbox-dock-buttons > toolbarbutton {
  -moz-appearance: none;
  border: none;
  margin: 0 4px;
  min-width: 16px;
  width: 16px;
}

#toolbox-controls > toolbarbutton > .toolbarbutton-text,
#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
.command-button > .toolbarbutton-text {
  display: none;
}

#toolbox-dock-buttons > toolbarbutton > image {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  background-position: 0 center;
  background-repeat: no-repeat;
}

#toolbox-dock-bottom > image {
  background-image: url("chrome://global/skin/devtools/dock-bottom@2x.png");
}

#toolbox-dock-side  > image {
  background-image: url("chrome://global/skin/devtools/dock-side@2x.png");
}

#toolbox-dock-window > image {
  background-image: url("chrome://global/skin/devtools/undock@2x.png");
}

#toolbox-dock-window,
#toolbox-dock-bottom,
#toolbox-dock-side {
  opacity: 0.8;
}

#toolbox-dock-window:hover,
#toolbox-dock-bottom:hover,
#toolbox-dock-side:hover {
  opacity: 1;
}

.devtools-separator {
  margin: 0 2px;
  width: 2px;
  background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent),
                    linear-gradient(transparent, hsla(206,37%,4%,.6), transparent),
                    linear-gradient(transparent, hsla(204,45%,98%,.1), transparent);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: 0, 1px, 2px;
}

#toolbox-buttons:empty + .devtools-separator,
.devtools-separator[invisible] {
  visibility: hidden;
}

#toolbox-controls-separator {
  margin: 0;
}

/* Command buttons */

.command-button {
  -moz-appearance: none;
  border: none;
  padding: 0 8px;
  margin: 0;
  width: 32px;
  position: relative;
}

.command-button:hover {
  background-color: hsla(206,37%,4%,.2);
}
.command-button:hover:active, .command-button[checked=true]:not(:hover) {
  background-color: hsla(206,37%,4%,.4);
}

.command-button > image {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-size: 64px 16px;
  background-position: 0 center;
  background-repeat: no-repeat;
}
.command-button:hover > image {
  background-position: -16px center;
}
.command-button:hover:active > image {
  background-position: -32px center;
}
.command-button[checked=true] > image {
  background-position: -48px center;
}
.command-button[open=true] > image {
  background-position: 0 center;
}

#command-button-paintflashing > image {
  background-image: url("chrome://global/skin/devtools/command-paintflashing.png");
}

#command-button-screenshot > image {
  background-image: url("chrome://global/skin/devtools/command-screenshot.png");
}

#command-button-responsive > image {
  background-image: url("chrome://global/skin/devtools/command-responsivemode.png");
}

#command-button-tilt > image {
  background-image: url("chrome://global/skin/devtools/command-tilt.png");
}

#command-button-scratchpad > image {
  background-image: url("chrome://global/skin/devtools/command-scratchpad.png");
  background-size: 48px 16px;
}

#command-button-pick > image {
  background-image: url("chrome://global/skin/devtools/command-pick.png");
}

#command-button-frames > image {
  background-image: url("chrome://global/skin/devtools/command-frames.png");
}

#command-button-splitconsole > image {
  background-image: url("chrome://global/skin/devtools/command-console.png");
}

#command-button-eyedropper > image {
  background-image: url("chrome://global/skin/devtools/command-eyedropper.png");
}

@media (min-resolution: 2dppx) {
  #command-button-paintflashing > image {
    background-image: url("chrome://global/skin/devtools/command-paintflashing@2x.png");
  }

  #command-button-screenshot > image {
    background-image: url("chrome://global/skin/devtools/command-screenshot@2x.png");
  }

  #command-button-responsive > image {
    background-image: url("chrome://global/skin/devtools/command-responsivemode@2x.png");
  }

  #command-button-tilt > image {
    background-image: url("chrome://global/skin/devtools/command-tilt@2x.png");
  }

  #command-button-scratchpad > image {
    background-image: url("chrome://global/skin/devtools/command-scratchpad@2x.png");
  }

  #command-button-pick > image {
    background-image: url("chrome://global/skin/devtools/command-pick@2x.png");
  }

  #command-button-frames > image {
    background-image: url("chrome://global/skin/devtools/command-frames@2x.png");
  }

  #command-button-splitconsole > image {
    background-image: url("chrome://global/skin/devtools/command-console@2x.png");
  }

  #command-button-eyedropper > image {
    background-image: url("chrome://global/skin/devtools/command-eyedropper@2x.png");
  }
}

/* Tabs */

.devtools-tabbar {
  -moz-appearance: none;
  min-height: 24px;
  border: 0px solid;
  border-bottom-width: 1px;
  padding: 0;
  background: var(--theme-tab-toolbar-background);
  border-bottom-color: var(--theme-splitter-color);
}

.theme-light .devtools-tabbar {
  box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
}

.theme-dark .devtools-tabbar {
  box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
}

#toolbox-tabs {
  margin: 0;
}

.devtools-tab {
  -moz-appearance: none;
  -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
  -moz-box-align: center;
  min-width: 32px;
  min-height: 24px;
  max-width: 110px;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 0;
  -moz-border-start-width: 1px;
  -moz-box-align: center;
}

.theme-dark .devtools-tab {
  color: var(--theme-body-color-alt);
  border-color: #42484f;
}

.theme-light .devtools-tab {
  color: var(--theme-body-color);
  border-color: var(--theme-splitter-color);
}

.theme-dark .devtools-tab:hover {
  background-color: hsla(206,37%,4%,.2);
  color: #ced3d9;
}

.theme-light .devtools-tab:hover {
  background-color: rgba(170,170,170,.2);
}

.theme-dark .devtools-tab:hover:active {
  background-color: hsla(206,37%,4%,.4);
  color: var(--theme-selection-color);
}

.theme-light .devtools-tab:hover:active {
  background-color: rgba(170,170,170,.4);
}

.theme-dark .devtools-tab:not([selected])[highlighted] {
  background-color: hsla(99,100%,14%,.2);
  box-shadow: 0 2px 0 #7bc107 inset;
}

.theme-light .devtools-tab:not([selected])[highlighted] {
  background-color: rgba(44, 187, 15, .2);
}

.devtools-tab > image {
  border: none;
  -moz-margin-end: 0;
  -moz-margin-start: 4px;
  opacity: 0.6;
  max-height: 16px;
  width: 16px; /* Prevents collapse during theme switching */
}

.devtools-tab > label {
  white-space: nowrap;
}

.devtools-tab:hover > image {
  opacity: 0.8;
}

.devtools-tab:active > image,
.devtools-tab[selected] > image {
  opacity: 1;
}

.devtools-tabbar .devtools-tab[selected],
.devtools-tabbar .devtools-tab[selected]:hover:active {
  color: var(--theme-selection-color);
  background-color: var(--theme-selection-background);
}

.theme-dark .devtools-tabbar .devtools-tab[selected] {
  box-shadow: 0 2px 0 #d7f1ff inset,
              0 8px 3px -5px #2b82bf inset,
              0 -2px 0 rgba(0,0,0,.2) inset;
}

.theme-light .devtools-tabbar .devtools-tab[selected] {
  box-shadow: 0 2px 0 #d7f1ff inset,
              0 8px 3px -5px #2b82bf inset,
              0 -2px 0 rgba(0,0,0,.06) inset;
}

#toolbox-tabs .devtools-tab[selected],
#toolbox-tabs .devtools-tab[highlighted] {
  border-width: 0;
  -moz-padding-start: 1px;
}

#toolbox-tabs .devtools-tab[selected]:last-child,
#toolbox-tabs .devtools-tab[highlighted]:last-child {
  -moz-padding-end: 1px;
}

#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
  -moz-border-start-width: 0;
  -moz-padding-start: 1px;
}

#toolbox-tabs .devtools-tab:first-child[selected] {
  -moz-border-start-width: 0;
}

#toolbox-tabs .devtools-tab:last-child {
  -moz-border-end-width: 1px;
}

.devtools-tab:not([highlighted]) > .highlighted-icon,
.devtools-tab[selected] > .highlighted-icon,
.devtools-tab:not([selected])[highlighted] > .default-icon {
  visibility: collapse;
}

/* The options tab is special - it doesn't have the same parent
   as the other tabs (toolbox-option-container vs toolbox-tabs) */
#toolbox-option-container .devtools-tab:not([selected]) {
  background-color: transparent;
}
#toolbox-option-container .devtools-tab {
  border-color: transparent;
  border-width: 0;
  -moz-padding-start: 1px;
}
#toolbox-tab-options > image {
  margin: 0 8px;
}


/* Since selected backgrounds are blue, we want to use the normal
 * (light) icons. */
.theme-light .command-button-invertable[checked=true]:not(:active) > image,
.theme-light .devtools-tab[icon-invertable][selected] > image,
.theme-light .devtools-tab[icon-invertable][highlighted] > image,
.theme-light #record-snapshot[checked] > image,
.theme-light #profiler-start[checked] > image,
.theme-light .notice-container button[checked] .button-icon {
  filter: none !important;
}

.theme-light .command-button:hover {
  background-color: inherit;
}

.theme-light .command-button:hover:active,
.theme-light .command-button[checked=true]:not(:hover) {
  background-color: inherit;
}

.hidden-labels-box:not(.visible) > label,
.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
  display: none;
}

.devtools-invisible-splitter {
  border-color: transparent;
}

.devtools-horizontal-splitter {
  border-bottom: 1px solid var(--theme-splitter-color);
}

.devtools-side-splitter {
  -moz-border-end: 1px solid var(--theme-splitter-color);
  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
}

/* Throbbers */
.devtools-throbber::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  -moz-margin-end: 0.5em;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 1.1s linear throbber-spin infinite;
}

@keyframes throbber-spin {
  from {
    transform: none;
  }
  to {
    transform: rotate(360deg);
  }
}


If you use default size of devtools change bottom to 200px:

Code: Select all


#inspector-breadcrumbs-toolbar {
  padding: 0px;
  border-bottom-width: 0px;
  border-top-width: 1px;
  margin-right: 300px !important;
  margin-left: 28px !important;
  border-top-color: var(--breadcrumbs-border-color);
  /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
     get mistaken as a splitter */
  background-color: var(--theme-tab-toolbar-background);
  display: block;
  position: relative;
  bottom:200px;
}


Also common.css from Tycho to complement this userstyle:

Code: Select all


:root.theme-light {
  font: message-box;
}

.devtools-monospace {
  font-family: Consolas, monospace;
}

/* Splitters */
.devtools-horizontal-splitter {
  -moz-appearance: none;
  background-image: none;
  background-color: transparent;
  border: 0;
  border-top: 1px solid rgba(118, 121, 125, .5);
  min-height: 3px;
  height: 3px;
  margin-top: -3px;
  position: relative;
}

.devtools-side-splitter {
  -moz-appearance: none;
  background-image: none;
  background-color: transparent;
  border: 0;
  -moz-border-end: 1px solid rgba(118, 121, 125, .5);
  min-width: 3px;
  width: 3px;
  -moz-margin-start: -3px;
  position: relative;
  cursor: e-resize;
}

.devtools-toolbox-side-iframe {
  min-width: 465px;
}

/* Autocomplete Popup */
/* Dark and light theme */

.devtools-autocomplete-popup {
  -moz-appearance: none !important;
  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
  background-color: transparent;
  border-radius: 3px;
  overflow-x: hidden;
  max-height: 40rem;
}

.devtools-autocomplete-listbox {
  -moz-appearance: none !important;
  background-color: transparent;
  border-width: 0px !important;
}

.devtools-autocomplete-listbox > richlistitem,
.devtools-autocomplete-listbox > richlistitem[selected] {
  width: 100%;
  background-color: transparent;
  border-radius: 4px;
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
  background-color: rgba(0,0,0,0.5);
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
  color: hsl(208,100%,60%);
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
  color: #eee;
}

.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
  color: #ccc;
}

.devtools-autocomplete-listbox > richlistitem > .initial-value,
.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  margin: 0;
  padding: 1px 0;
}

.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
  text-align: end;
}

/* Rest of the dark and light theme */

.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%));
}

.devtools-autocomplete-popup.light-theme,
.light-theme .CodeMirror-hints,
.light-theme .CodeMirror-Tern-tooltip {
  border: 1px solid hsl(210,24%,90%);
  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
}

.devtools-autocomplete-popup.light-theme {
  box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
}

.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
  background-color: rgba(128,128,128,0.3);
}

.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
  color: #222;
}

.devtools-autocomplete-listbox.light-theme > richlistitem > label {
  color: #666;
}

/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */

.devtools-tooltip .panel-arrowcontent {
  padding: 4px;
}

.devtools-tooltip .panel-arrowcontainer {
  /* Reseting the transition used when panels are shown */
  transition: none;
  /* Panels slide up/down/left/right when they appear using a transform.
  Since we want to remove the transition, we don't need to transform anymore
  plus it can interfeer by causing mouseleave events on the underlying nodes */
  transform: none;
}

.devtools-tooltip[clamped-dimensions] {
  min-height: 100px;
  max-height: 400px;
  min-width: 100px;
  max-width: 400px;
}
.devtools-tooltip[clamped-dimensions-no-min-height] {
  min-height: 0;
  max-height: 400px;
  min-width: 100px;
  max-width: 400px;
}
.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
  min-width: 400px;
  max-width: 400px;
}
.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
  overflow: hidden;
}
.devtools-tooltip[wide] {
  max-width: 600px;
}

/* Tooltip: Simple Text */

.devtools-tooltip-simple-text {
  max-width: 400px;
  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
  padding: 8px 12px;
  white-space: pre-wrap;
}

.devtools-tooltip-simple-text:first-child {
  margin-top: -4px;
}

.devtools-tooltip-simple-text:last-child {
  margin-bottom: -4px;
}

/* Tooltip: Alert Icon */

.devtools-tooltip-alert-icon {
  width: 32px;
  height: 32px;
  margin: 6px;
  -moz-margin-end: 20px;
}

.devtools-tooltip-alert-icon {
  list-style-image: url("chrome://global/skin/icons/warning-32.png");
}

/* Tooltip: Variables View */

.devtools-tooltip-variables-view-box {
  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
}

.devtools-tooltip-variables-view-box .variable-or-property > .title {
  -moz-padding-end: 6px;
}

/* Tooltip: Tiles */

.devtools-tooltip-tiles {
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.devtools-tooltip-iframe {
  border: none;
  background: transparent;
}

/* Eyedropper Widget */

.devtools-eyedropper-panel {
  pointer-events: none;
  -moz-appearance: none;
  width: 156px;
  height: 120px;
  background-color: transparent;
  border: none;
}
These changes make UXP devtools (mostly) look like Tycho devtools light theme. I like personally more Tycho devtools light theme than UXP devtools light theme so I used these to change devtools look.

Tycho devtools dark theme for UXP devtools is availabe also for those who like dark themes in separate topic:

https://forum.palemoon.org/viewtopic.php?f=26&t=20190

Those who don't like UXP devtools theme as much as Tycho devtools theme can use these userstyles with any userstyle manager of your choice.

And yes breadcrumbs divider arrow is inconsistent with rest of userstyle. I didn't find what correct value is for breadcrumbs divider arrow so that I could have changed image.
Last edited by win7-7 on 2018-08-28, 10:31, edited 5 times in total.

Locked