some corrections and finishing touches to that LCARStrek works well for Firefox 55...

[themes.git] / devtools / debugger.css

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

/* === BEGIN debugger.inc.css === */

/* Sources and breakpoints pane */

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

#sources-pane > tabs {
  -moz-border-end: 1px solid #9C9CFF; /* Match the splitter color. */
}

#sources-toolbar > .devtools-toolbarbutton,
#sources-controls > .devtools-toolbarbutton {
  min-width: 32px;
}

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

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

#pretty-print {
  font-weight: bold;
}

#toggle-breakpoints {
  list-style-image: url("debugger-toggleBreakpoints.png");
}

@media (min-resolution: 2dppx) {
  #toggle-breakpoints {
    list-style-image: url(debugger-toggleBreakpoints@2x.png);
  }
}

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

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

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

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

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

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

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

  #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover {
    -moz-image-region: rect(32px,64px,64px,32px);
  }
}

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

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

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

#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
  background-image: none;
/*  box-shadow: inset -1px 0 0 #222426; */
}

#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
  background-image: none;
/*  box-shadow: inset 1px 0 0 #222426; */
}

/* Debugger unblackbox button */

#black-boxed-message-button > .button-box > .button-icon {
  width: 16px;
  height: 16px;
  background-image: url("debugger-blackbox.png");
  background-position: 0 0;
  background-size: 32px 16px;
  background-repeat: no-repeat;
  -moz-margin-end: 5px;
}

@media (min-resolution: 2dppx) {
  #black-boxed-message-button > .button-box > .button-icon {
    background-image: url("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;
}

/* Tracer */

#trace {
  list-style-image: url("tracer-icon.png");
  -moz-image-region: rect(0px,16px,16px,0px);
}

#trace:hover,
#trace[checked] {
  -moz-image-region: rect(0px,32px,16px,16px);
}

@media (min-resolution: 2dppx) {
  #trace {
    list-style-image: url(tracer-icon@2x.png);
    -moz-image-region: rect(0px,32px,32px,0px);
  }

  #trace:hover,
  #trace[checked] {
    -moz-image-region: rect(0px,64px,32px,32px);
  }
}

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

.trace-name {
  -moz-padding-start: 4px !important;
}

/* Tracer dark+light theme */

.trace-item {
  color: #FF9F00; /* Light foreground text */
}

.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: #9C9CFF; /* highlight blue */
}

.trace-return,
.trace-yield {
  color: #008484; /* highlight green */
}

.trace-throw {
  color: #FF0000; /* highlight red */
}

.trace-param {
  color: #E7ADE7; /* Content text light  */
}

.trace-syntax {
  color: #A09090; /* highlight grey */
}

/* Breadcrumbs stack frames view */

.breadcrumbs-widget-item {
  max-width: none;
}

#stackframes {
  min-height: 25px;
}

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

/* Classic stack frames view */

.dbg-classic-stackframe {
  display: block;
  padding: 0 4px;
}

.dbg-classic-stackframe-title {
  font-weight: 600;
  color: #9C9CFF;
}

.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;
  color: #3333FF;
}

.dbg-classic-stackframe-details-sep {
  color: #A09090;
}

.dbg-classic-stackframe-details-line {
  color: #9C9CFF;
}

#callstack-list .side-menu-widget-item.selected label {
  color: #FFCF00;
}

/* Sources and breakpoints view */

.dbg-breakpoint {
  -moz-margin-start: 4px;
}

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

.dbg-breakpoint-text {
  -moz-margin-start: 10px !important;
  font-style: italic;
  font-size: 90%;
}

.dbg-breakpoint-checkbox {
  width: 16px;
  height: 16px;
  margin: 2px;
}

/* Variable bubble view */

.devtools-tooltip-simple-text.token-undefined,
.devtools-tooltip-simple-text.token-null {
  text-align: center;
  color: #A09090 !important; /* Override the theme's color. */
}

.devtools-tooltip-simple-text.token-boolean {
  text-align: center;
  color: #9C9CFF !important;
}

.devtools-tooltip-simple-text.token-number {
  text-align: center;
  color: #E7ADE7 !important;
}

.devtools-tooltip-simple-text.token-string {
  text-align: start;
  color: #008484 !important;
}

.devtools-tooltip-simple-text.token-other {
  text-align: center;
  color: #FF9F00 !important;
}

/* Instruments pane (watch expressions, variables, event listeners...) */

#instruments-pane .side-menu-widget-container,
#instruments-pane .side-menu-widget-empty-text {
/*  box-shadow: none !important; */
}

/* Watch expressions view */

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

.dbg-expression {
  height: 20px;
}

.dbg-expression-arrow {
  background-image: url("commandline-icon.png");
  background-position: -16px 0;
  background-repeat: no-repeat;
  background-size: 32px 16px;
  width: 16px;
  height: 16px;
  margin: 2px;
}

@media (min-resolution: 2dppx) {
  .dbg-expression-arrow {
    background-image: url(commandline-icon@2x.png);
  }
}

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

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

  color: #9C9CFF; /* Blue highlight color */
}

/* Event listeners view */

.dbg-event-listener {
  padding: 0 8px;
}

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

.dbg-event-listener-separator {
  color: #A09090;
}

.dbg-event-listener-targets {
  color: #9C9CFF;
}

.dbg-event-listener-location {
  color: #E7ADE7;
}

#event-listeners .side-menu-widget-item.selected {
  background: none !important;
}

/* Searchbox and the search operations help panel */

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

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

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

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

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

/* Searchbox results panel */

.results-panel {
  padding: 4px;
}

.results-panel-item {
  border: 1px solid #A09090;
  border-top-color: #8050B0;
  padding: 5px;
  cursor: pointer;
}

.results-panel-item:first-of-type {
  border-top-color: #9C9CFF;
  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:not(.selected):not(:hover) {
/*  text-shadow: 0 1px #fff;*/
}

.results-panel-item-label-before {
  -moz-margin-end: 5px !important;
  color: #A09090;
  cursor: inherit;
}

.results-panel-item-label {
  color: #9C9CFF;
  font-weight: 600;
  cursor: inherit;
}

.results-panel-item-label-below {
  color: #FF9F00;
  cursor: inherit;
}

/* Sources search view */

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

#globalsearch + .devtools-horizontal-splitter {
  -moz-border-top-colors: #9C9CFF;
}

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

.dbg-source-results:not(.selected):hover {
  background-color: #000000; /* Sidebar background */
}

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

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

.dbg-results-header-match-count {
  -moz-padding-start: 6px;
  color: #8050B0;
}

.dbg-results-line-number {
  background: #000000;
  min-width: 40px;
  -moz-border-end: 1px solid #9C9CFF;
  -moz-padding-end: 4px;
  padding-top: 2px;
  text-align: end;
  color: #FF9F00;
}

.dbg-results-line-contents {
  -moz-padding-start: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.dbg-results-line-contents-string {
  padding: 1px;
}

.dbg-results-line-contents-string[match=true] {
  background: #E7ADE7;
  color: #000000;
  padding: 0;
  border: 1px solid #9C9CFF;
  border-radius: 4px;
  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);
}

/* Toolbar controls */

#toggle-panes {
  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

#toggle-panes:not([panesHidden]) {
  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
}

#toggle-panes:hover,
#toggle-panes:hover:active {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

#resume {
  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

#resume:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

#resume[checked=true] {
  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
}

@media (min-resolution: 2dppx) {
  #resume {
    list-style-image: url(debugger-pause@2x.png);
    -moz-image-region: rect(0px, 32px, 32px, 0px);
  }

  #resume:hover {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }

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

#resume ~ toolbarbutton {
/*  transition: opacity 0.15s ease-in-out; */
}

#resume:not([checked]) ~ toolbarbutton {
/*  opacity: 0.5; */
}

#step-over {
  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
#step-over:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

#step-in {
  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
#step-in:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

#step-out {
  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
#step-out:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

@media (min-resolution: 2dppx) {
  #step-over {
    list-style-image: url(debugger-step-over@2x.png);
    -moz-image-region: rect(0px, 32px, 32px, 0);
  }

  #step-over:hover {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }

  #step-in {
    list-style-image: url(debugger-step-in@2x.png);
    -moz-image-region: rect(0px, 32px, 32px, 0);
  }

  #step-in:hover {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }

  #step-out {
    list-style-image: url(debugger-step-out@2x.png);
    -moz-image-region: rect(0px, 32px, 32px, 0);
  }

  #step-out:hover {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }
}

#instruments-pane-toggle {
/*  background: none;
  box-shadow: none;
  border: none; */
  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
  -moz-image-region: rect(0px,16px,16px,0px);
}

#instruments-pane-toggle[pane-collapsed] {
  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
}

#instruments-pane-toggle:hover {
  -moz-image-region: rect(0px,32px,16px,16px);
}

@media (min-resolution: 2dppx) {
  #instruments-pane-toggle {
    list-style-image: url(debugger-collapse@2x.png);
    -moz-image-region: rect(0px,32px,32px,0px);
  }

  #instruments-pane-toggle[pane-collapsed] {
    list-style-image: url(debugger-expand@2x.png);
  }

  #instruments-pane-toggle:hover {
    -moz-image-region: rect(0px,64px,32px,32px);
  }
}

/* Horizontal vs. vertical layout */

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

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

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

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

/* === END debugger.inc.css === */