1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
10 background-color: #000000;
13 /* Sources and breakpoints pane */
19 #sources-and-editor-splitter {
20 -moz-border-start-color: transparent;
28 #sources .side-menu-widget-item-checkbox {
29 -moz-margin-end: -6px;
32 transition: opacity .15s ease 0s;
35 /* Only show the checkbox when the source is hovered over, is selected, or if it
37 #sources .side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
38 #sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
39 #sources .side-menu-widget-item-checkbox:not([checked]) {
41 transition: opacity .15s ease-out 0s;
44 #sources .side-menu-widget-item-checkbox > .checkbox-check {
45 -moz-appearance: none;
47 background-image: url("itemToggle.png");
48 background-repeat: no-repeat;
49 background-clip: content-box;
50 background-position: -16px 0;
51 background-size: 32px 16px;
57 #sources .side-menu-widget-item-checkbox[checked] > .checkbox-check {
58 background-position: 0 0;
61 #sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents {
65 #sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents > .dbg-breakpoint {
69 #sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
70 background-image: none;
71 /* box-shadow: inset -1px 0 0 #222426; */
74 #sources .side-menu-widget-item.selected > .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
75 background-image: none;
76 /* box-shadow: inset 1px 0 0 #222426; */
79 /* Black box message and source progress meter */
82 #source-progress-container {
83 background-color: #A09090;
84 /* Prevent the container deck from aquiring the height from this message. */
94 #black-boxed-message-label,
95 #black-boxed-message-button {
100 #black-boxed-message-button {
105 /* ListWidget items */
111 .list-widget-item:not(.selected):not(.empty):hover {
112 /* background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;*/
115 .list-widget-item.selected.light {
116 /* background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
120 .list-widget-item.selected {
125 .list-widget-item.empty {
130 /* Stack frames view */
136 .dbg-stackframe-details {
137 -moz-padding-start: 4px;
140 .dbg-stackframe-menuitem[checked] {
143 outline: 1px solid #008484;
147 .dbg-stackframe-menuitem-details {
148 -moz-padding-start: 16px;
151 /* Sources and breakpoints view */
154 -moz-margin-start: -14px;
157 .dbg-breakpoint-line {
161 .dbg-breakpoint-text {
162 -moz-margin-start: 10px !important;
167 .dbg-breakpoint-checkbox {
173 /* Instruments pane (watch expressions, variables, event listeners...) */
175 #instruments-pane > tabs > tab {
176 min-height: 25px !important;
177 padding: 0 !important;
180 #instruments-pane > tabpanels > tabpanel {
184 /* Watch expressions view */
195 .dbg-expression-arrow {
198 background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16);
201 .dbg-expression-input {
202 -moz-padding-start: 2px !important;
205 /* Event listeners view */
207 .dbg-event-listener {
211 .dbg-event-listener-type {
215 .dbg-event-listener-separator {
219 .dbg-event-listener-targets {
223 .dbg-event-listener-location {
227 /* Searchbox and the search operations help panel */
229 .devtools-searchinput {
231 -moz-margin-start: 1px;
235 -moz-margin-start: 2px;
238 #searchbox-panel-operators {
241 -moz-margin-start: 2px;
244 .searchbox-panel-operator-button {
248 -moz-margin-start: 2px;
249 -moz-margin-end: 6px;
253 .searchbox-panel-operator-label {
257 /* Searchbox results panel */
263 .results-panel-item {
264 border: 1px solid #A09090;
265 border-top-color: #8050B0;
270 .results-panel-item:first-of-type {
271 border-top-color: #9C9CFF;
272 border-radius: 4px 4px 0 0;
275 .results-panel-item:last-of-type {
276 border-radius: 0 0 4px 4px;
279 .results-panel-item:only-of-type {
283 .results-panel-item:not(.selected):not(:hover) {
284 /* text-shadow: 0 1px #fff;*/
287 .results-panel-item-pre {
288 -moz-margin-end: 5px !important;
293 .results-panel-item-name {
299 .results-panel-item-details {
304 /* Sources search view */
310 #globalsearch > vbox:not(:empty) {
315 #globalsearch + .devtools-horizontal-splitter {
316 -moz-border-top-colors: #9C9CFF;
319 .dbg-source-results {
321 background: none !important;
324 .dbg-results-header {
325 -moz-padding-start: 6px;
328 .dbg-results-header-location {
332 .dbg-results-header-match-count {
333 -moz-padding-start: 6px;
337 .dbg-results-line-number {
340 -moz-border-end: 1px solid #9C9CFF;
341 -moz-padding-end: 4px;
347 .dbg-results-line-contents {
348 -moz-padding-start: 4px;
353 .dbg-results-line-contents-string {
357 .dbg-results-line-contents-string[match=true] {
361 border: 1px solid #9C9CFF;
366 .dbg-results-line-contents-string[match=true][focusing] {
367 transition: transform 0.3s ease-in-out;
370 .dbg-results-line-contents-string[match=true][focused] {
371 transition-duration: 0.1s;
372 transform: scale(1.75, 1.75);
375 /* Toolbar controls */
378 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
379 -moz-image-region: rect(0px, 16px, 16px, 0px);
382 #toggle-panes:not([panesHidden]) {
383 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
387 #toggle-panes:hover:active {
388 -moz-image-region: rect(0px, 32px, 16px, 16px);
391 #resumption-panel-desc {
395 #resumption-order-panel {
396 -moz-margin-start: -8px;
400 list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
401 -moz-image-region: rect(0px, 16px, 16px, 0px);
404 #resume[checked=true],
406 -moz-image-region: rect(0px, 32px, 16px, 16px);
410 list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
411 -moz-image-region: rect(0px, 16px, 16px, 0px);
414 -moz-image-region: rect(0px, 32px, 16px, 16px);
418 list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
419 -moz-image-region: rect(0px, 16px, 16px, 0px);
422 -moz-image-region: rect(0px, 32px, 16px, 16px);
426 list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
427 -moz-image-region: rect(0px, 16px, 16px, 0px);
430 -moz-image-region: rect(0px, 32px, 16px, 16px);
433 #debugger-controls > toolbarbutton {
436 #debugger-controls > toolbarbutton:last-of-type {
442 #instruments-pane-toggle {
446 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
447 -moz-image-region: rect(0px,16px,16px,0px);
450 #instruments-pane-toggle[pane-collapsed] {
451 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
454 #instruments-pane-toggle:hover,
455 #instruments-pane-toggle:hover:active {
456 -moz-image-region: rect(0px,32px,16px,16px);
459 /* Horizontal vs. vertical layout */
461 #vertical-layout-panes-container {
466 #body[layout=vertical] #instruments-pane {
467 margin: 0 !important;
468 /* To prevent all the margin hacks to hide the sidebar. */
471 #body[layout=vertical] .side-menu-widget-container {
472 box-shadow: none !important;
475 #body[layout=vertical] .side-menu-widget-item-arrow {
476 background-image: none !important;