first part of syncing LCARStrek with Firefox 49/50 devtools theme changes

[themes.git] / LCARStrek / devtools / 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/. */

window {
  padding: 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;
}

.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: 16px;
}

#sources-toolbar .devtools-toolbarbutton:not([label]) {
  -moz-image-region: rect(0,16px,16px,0);
}

@media (min-resolution: 1.1dppx) {
  #sources-toolbar .devtools-toolbarbutton:not([label]) {
    -moz-image-region: rect(0,32px,32px,0);
  }
}

#black-box {
  list-style-image: url("images/debugger-blackbox.png");
}

@media (min-resolution: 1.1dppx) {
  #black-box {
    list-style-image: url(images/debugger-blackbox@2x.png);
  }
}

#pretty-print {
  list-style-image: url(images/debugger-prettyprint.png);
}

@media (min-resolution: 1.1dppx) {
  #pretty-print {
    list-style-image: url(images/debugger-prettyprint@2x.png);
  }
}

#toggle-breakpoints {
  list-style-image: url(images/debugger-toggleBreakpoints.svg);
  -moz-image-region: rect(0,32px,16px,16px) !important;
}

#toggle-breakpoints[checked] {
  -moz-image-region: rect(0,16px,16px,0) !important;
}

#toggle-breakpoints[checked] > image {
  /* This button has a special checked image, don't make it blue */
  filter: none;
}

#toggle-promise-debugger {
  /* TODO Bug 1186119: Add a toggle promise debugger image */
}

#sources .black-boxed {
  color: #8050B0;
}

#sources .selected .black-boxed {
  color: #000000;
}

#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/debugger-blackbox.png");
  background-position: 0 0;
  background-size: 32px 16px;
  background-repeat: no-repeat;
  margin-inline-end: 5px;
}

@media (min-resolution: 1.1dppx) {
  #black-boxed-message-button > .button-box > .button-icon {
    background-image: url("images/debugger-blackbox@2x.png");
  }
}

/* Black box message and source progress meter */

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

#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+light theme */

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

.trace-item.black-boxed {
  color: #A09090;
}

.trace-item.selected-matching {
  background-color: #004242; /* Select highlight blue at 40% alpha */
}

.selected > .trace-item {
  background-color: #004242; /* Select highlight blue at 75% 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-highlight-pink);
}

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

/* 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 {
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--theme-highlight-blue);
}

/* Event listeners view */

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

.dbg-event-listener-location {
  color: var(--theme-highlight-pink);
}

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

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

#event-listeners .selected {
  /* Selected items shouldn't be displayed differently. */
  background: none;
  color: var(--theme-content-color1);
}

/* 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 #A09090;
}

.results-panel-item:first-of-type {
  border-top: none;
  border-radius: 4px 4px 0 0;
}

.results-panel-item:last-of-type {
  border-radius: 0 0 4px 4px;
}

.results-panel-item:only-of-type {
  border-radius: 4px;
}

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

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

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

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

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

#globalsearch + .devtools-horizontal-splitter {
  -moz-border-top-colors: var(--theme-splitter-color);
}

.dbg-source-results {
  padding: 0;
  background: none !important;
}

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

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

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

.dbg-results-header-match-count {
  padding-inline-start: 6px;
  color: var(--theme-body-color-inactive);
}

.dbg-results-line-number {
  min-width: 3em;
  border-inline-end: 1px solid #9C9CFF;
  padding-inline-end: 4px;
  text-align: end;
}

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

.dbg-results-line-contents-string[match=true] {
  background: #E7ADE7;
  color: var(--theme-selection-color);
  border: 1px solid #9C9CFF;
  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);
}

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

.dbg-search-result:hover {
  background-color: #004242; /* 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/debugger-pause.png);
}

#resume[checked] {
  list-style-image: url(images/debugger-play.png);
}

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

  #resume[checked] {
    list-style-image: url(images/debugger-play@2x.png);
  }
}

#resume[break-on-next] {
  background: var(--theme-highlight-lightorange);
}

#step-over {
  list-style-image: url(images/debugger-step-over.png);
}

#step-in {
  list-style-image: url(images/debugger-step-in.png);
}

#step-out {
  list-style-image: url(images/debugger-step-out.png);
}

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

  #step-in {
    list-style-image: url(images/debugger-step-in@2x.png);
  }

  #step-out {
    list-style-image: url(images/debugger-step-out@2x.png);
  }
}

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