gecko-dev/devtools/client/themes/debugger.css

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

/* Sources and breakpoints pane */

#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
  border-color: transparent;
}

#sources-pane > tabs {
  border-inline-end: 1px solid;
}

#sources-pane .devtools-toolbar {
  border: none; /* Remove the devtools-toolbar bottom border. */
  border-inline-end: 1px solid;
}

#sources-pane > tabs,
#sources-pane .devtools-toolbar {
  border-inline-end-color: var(--theme-splitter-color);
}

/* Sources and breakpoints list */

.dbg-source-item {
  padding: 2px 0px;
}

.dbg-wasm-item .icon {
  display: block;
  background-image: url(chrome://devtools/skin/images/webconsole.svg);
  background-repeat: no-repeat;
  background-size: 72px 60px;
  /* show warning icon */
  background-position: -24px -24px;
  width: 10px;
  height: 10px;
  position: absolute;
  margin-inline-start: -15px;
  margin-top: 3px;
}

.dbg-breakpoint-line {
  font-weight: 600;
}

.dbg-breakpoint-text {
  padding-inline-start: 6px;
  font-style: italic;
  font-size: 90%;
}

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

/* Sources toolbar */

#sources-toolbar > .devtools-toolbarbutton,
#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;
}

#sources .black-boxed {
  color: rgba(128,128,128,0.4);
}

#sources .selected .black-boxed {
  color: rgba(255,255,255,0.4);
}

#sources .black-boxed ~ .dbg-breakpoint {
  display: none;
}

/* Debugger unblackbox button */

#black-boxed-message-button > .button-box > .button-icon {
  width: 16px;
  height: 16px;
  background-image: url(images/item-toggle.svg);
  background-position: 0 0;
  background-size: cover;
}

/* Black box message and source progress meter */

#black-boxed-message,
#source-progress-container {
  /* Prevent the container deck from aquiring the size from this message. */
  min-width: 1px;
  min-height: 1px;
}

#source-progress {
  min-height: 2em;
  min-width: 40em;
}

#black-boxed-message-label,
#black-boxed-message-button {
  text-align: center;
  font-size: 120%;
}

#black-boxed-message-button {
  margin-top: 1em;
  padding: .25em;
}

/* Breadcrumbs stack frames view */

.dbg-stackframe-details {
  padding-inline-start: 4px;
}

/* Classic stack frames view */

.dbg-classic-stackframe {
  display: block;
}

.dbg-classic-stackframe-title {
  font-weight: 600;
}

.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
  float: right;
}

.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
  float: left;
}

.dbg-classic-stackframe-details-url {
  max-width: 90%;
  text-align: end;
}

.dbg-classic-stackframe-details-url {
  color: var(--theme-content-color1);
}

.dbg-classic-stackframe-details-sep {
  color: var(--theme-body-color-alt)
}

.dbg-classic-stackframe-details-line {
  color: var(--theme-highlight-bluegrey);
}

#callstack-list .selected label {
  /* Text inside a selected item should not be custom colored. */
  color: inherit !important;
}

/* Tracer */

#trace {
  list-style-image: url(images/tracer-icon.png);
}

@media (min-resolution: 1.1dppx) {
  #trace {
    list-style-image: url(images/tracer-icon@2x.png);
  }
}

#clear-tracer {
  /* Make this button as narrow as the text inside it. */
  min-width: 1px;
}

.trace-name {
  padding-inline-start: 4px;
}

/* Tracer dark theme */

.theme-dark .trace-item {
  color: var(--theme-selection-color);
}

.theme-dark .trace-item.black-boxed {
  color: rgba(128,128,128,0.4);
}

.theme-dark .trace-item.selected-matching {
  background-color: rgba(86, 117, 185, .4); /* Select highlight blue at 40% alpha */
}

.theme-dark .selected > .trace-item {
  background-color: rgba(86, 117, 185, .6); /* Select highlight blue at 60% alpha */
}

.trace-call {
  color: var(--theme-highlight-blue);
}

.trace-return,
.trace-yield {
  color: var(--theme-highlight-green);
}

.trace-throw {
  color: var(--theme-highlight-red);
}

.trace-param {
  color: var(--theme-content-color1);
}

.theme-dark .trace-syntax {
  color: var(--theme-content-color2);
}

/* Tracer light theme */
.theme-light .trace-item {
  color: var(--theme-content-color1);
}

.theme-light .trace-item.black-boxed {
  color: rgba(128,128,128,0.4);
}

.theme-light .trace-item.selected-matching {
  background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
}

.theme-light .selected > .trace-item {
  background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
}

#tracer-traces .selected label {
  /* Text inside a selected item should not be custom colored. */
  color: inherit !important;
}

/* Watch expressions view */

#expressions {
  min-height: 10px;
  max-height: 125px;
}

.dbg-expression {
  height: 20px;
}

.dbg-expression-arrow {
  background-image: var(--theme-command-line-image-focus);
  width: 16px;
  height: 16px;
  margin: 2px;
}

.dbg-expression-input {
  color: inherit;
}

.dbg-expression-button {
  -moz-appearance: none;
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
}

.dbg-expression-button {
  color: var(--theme-highlight-blue);
}

/* Event listeners view */

.dbg-event-listener-type {
  font-weight: 600;
}

.dbg-event-listener-location {
  color: var(--theme-content-color1);
}

.dbg-event-listener-separator {
  color: var(--theme-body-color-alt);
}

.dbg-event-listener-targets {
  color: var(--theme-highlight-bluegrey);
}

.theme-dark #event-listeners .selected {
  /* Selected items shouldn't be displayed differently. */
  background: none;
  color: #fff;
}

.theme-light #event-listeners .selected {
  /* Selected items shouldn't be displayed differently. */
  background: none;
  color: #000;
}

/* Searchbox and the search operations help panel */

#searchbox {
  min-width: 220px;
  margin-inline-start: 1px;
}

#filter-label {
  margin-inline-start: 2px;
}

#searchbox-panel-operators {
  margin-top: 5px;
  margin-bottom: 8px;
  margin-inline-start: 2px;
}

.searchbox-panel-operator-button {
  min-width: 26px;
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-start: 2px;
  margin-inline-end: 6px;
  text-align: center;
}

.searchbox-panel-operator-label {
  padding-bottom: 2px;
}

/* Searchbox results panel */

#results-panel {
  border: none;
}

.results-panel-item {
  padding: 6px 8px;
  border-top: 1px solid rgba(128,128,128,0.2);
}

.results-panel-item:first-of-type {
  border-top: none;
}

.results-panel-item-label {
  font-weight: 600;
}

.results-panel-item-label-before {
  padding-inline-end: 6px;
}

.theme-dark .results-panel-item-label {
  color: var(--theme-selection-color);
}

.theme-light .results-panel-item-label {
  color: var(--theme-body-color);
}

.results-panel-item-label-before {
  color: var(--theme-highlight-bluegrey);
}

.results-panel-item-label-below {
  color: var(--theme-content-color3);
}

#results-panel .selected label {
  /* Text inside a selected item should not be custom colored. */
  color: inherit !important;
}

/* Sources search view */

#globalsearch {
  min-height: 10px;
  max-height: 50vh;
}

.dbg-results-header {
  padding-inline-start: 6px;
}

.dbg-results-header-location {
  font-weight: 600;
}

.dbg-results-header-match-count {
  padding-inline-start: 6px;
}

.dbg-results-line-number {
  min-width: 3em;
  border-inline-end: 1px solid rgba(128,128,128,0.2);
  padding-inline-end: 4px;
  text-align: end;
}

.dbg-results-line-contents {
  padding-inline-start: 4px;
}

.dbg-results-line-contents-string[match=true] {
  background-color: rgba(255,255,0,0.2);
  border: 1px solid rgba(128,128,128,0.7);
  border-radius: 4px;
  margin-top: -1px !important;
  margin-bottom: -1px !important;
  cursor: pointer;
}

.dbg-results-line-contents-string[match=true][focusing] {
  transition: transform 0.3s ease-in-out;
}

.dbg-results-line-contents-string[match=true][focused] {
  transition-duration: 0.1s;
  transform: scale(1.75, 1.75);
}

.dbg-source-results:not(.selected):hover {
  background-color: var(--theme-sidebar-background);
}

.dbg-results-header {
  background-color: var(--theme-tab-toolbar-background);
}

.theme-dark .dbg-results-header {
  color: var(--theme-content-color1);
}

.theme-light .dbg-results-header {
  color: var(--theme-content-color3);
}

.theme-dark .dbg-search-result:hover {
  background-color: rgba(86, 117, 185, .2); /* Select highlight blue at 40% alpha */
}

.theme-light .dbg-search-result:hover {
  background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
}

.dbg-results-header-match-count {
  color: var(--theme-content-color3);
}

.dbg-results-line-number {
  background-color: var(--theme-tab-toolbar-background);
  color: var(--theme-body-color-alt);
}

.dbg-results-line-contents-string {
  color: var(--theme-body-color-alt);
}

.theme-dark .dbg-results-line-contents-string[match=true] {
  color: var(--theme-selection-color);
}

.theme-light .dbg-results-line-contents-string[match=true] {
  color: var(--theme-body-color);
}

/* Toolbar controls */

#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);
}

/* Horizontal vs. vertical layout */

#vertical-layout-panes-container {
  min-height: 35vh;
  max-height: 80vh;
}

#body[layout=vertical] #sources-pane > tabs {
  border-inline-end: none;
}

#body[layout=vertical] #instruments-pane {
  margin: 0 !important;
  /* To prevent all the margin hacks to hide the sidebar. */
}

#body[layout=vertical] .side-menu-widget-container,
#body[layout=vertical] .side-menu-widget-empty-text {
  box-shadow: none !important;
}

#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;
}