1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/debugger.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,624 @@
1.4 +/* vim:set ts=2 sw=2 sts=2 et: */
1.5 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.6 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.8 +
1.9 +/* Sources and breakpoints pane */
1.10 +
1.11 +#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
1.12 + border-color: transparent;
1.13 +}
1.14 +
1.15 +#sources-pane > tabs {
1.16 + -moz-border-end: 1px solid;
1.17 +}
1.18 +
1.19 +#sources-pane .devtools-toolbar {
1.20 + border: none; /* Remove the devtools-toolbar bottom border. */
1.21 + -moz-border-end: 1px solid;
1.22 +}
1.23 +
1.24 +.theme-dark #sources-pane > tabs,
1.25 +.theme-dark #sources-pane .devtools-toolbar {
1.26 + -moz-border-end-color: black; /* Match the splitter color. */
1.27 +}
1.28 +
1.29 +.theme-light #sources-pane > tabs,
1.30 +.theme-light #sources-pane .devtools-toolbar {
1.31 + -moz-border-end-color: #aaa; /* Match the splitter color. */
1.32 +}
1.33 +
1.34 +/* Sources and breakpoints list */
1.35 +
1.36 +.dbg-source-item {
1.37 + padding: 2px 0px;
1.38 +}
1.39 +
1.40 +.dbg-breakpoint-line {
1.41 + font-weight: 600;
1.42 +}
1.43 +
1.44 +.dbg-breakpoint-text {
1.45 + -moz-padding-start: 6px;
1.46 + font-style: italic;
1.47 + font-size: 90%;
1.48 +}
1.49 +
1.50 +.dbg-breakpoint-checkbox {
1.51 + width: 16px;
1.52 + height: 16px;
1.53 + margin: 2px;
1.54 +}
1.55 +
1.56 +/* Sources toolbar */
1.57 +
1.58 +#sources-toolbar > .devtools-toolbarbutton,
1.59 +#sources-controls > .devtools-toolbarbutton {
1.60 + min-width: 32px;
1.61 +}
1.62 +
1.63 +#black-box {
1.64 + list-style-image: url(debugger-blackbox.png);
1.65 +}
1.66 +
1.67 +#pretty-print {
1.68 + font-weight: bold;
1.69 +}
1.70 +
1.71 +#toggle-breakpoints {
1.72 + list-style-image: url(debugger-toggleBreakpoints.png);
1.73 +}
1.74 +
1.75 +#sources-toolbar .devtools-toolbarbutton:not([label]) {
1.76 + -moz-image-region: rect(0px,16px,16px,0px);
1.77 +}
1.78 +
1.79 +#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
1.80 + -moz-image-region: rect(0px,32px,16px,16px);
1.81 +}
1.82 +
1.83 +#sources .black-boxed {
1.84 + color: rgba(128,128,128,0.4);
1.85 +}
1.86 +
1.87 +#sources .selected > .black-boxed {
1.88 + color: rgba(255,255,255,0.4);
1.89 +}
1.90 +
1.91 +#sources .black-boxed > .dbg-breakpoint {
1.92 + display: none;
1.93 +}
1.94 +
1.95 +/* Black box message and source progress meter */
1.96 +
1.97 +#black-boxed-message,
1.98 +#source-progress-container {
1.99 + background: url(background-noise-toolbar.png);
1.100 + /* Prevent the container deck from aquiring the size from this message. */
1.101 + min-width: 1px;
1.102 + min-height: 1px;
1.103 +}
1.104 +
1.105 +#source-progress {
1.106 + min-height: 2em;
1.107 + min-width: 40em;
1.108 +}
1.109 +
1.110 +#black-boxed-message-label,
1.111 +#black-boxed-message-button {
1.112 + text-align: center;
1.113 + font-size: 120%;
1.114 +}
1.115 +
1.116 +#black-boxed-message-button {
1.117 + margin-top: 1em;
1.118 + padding: .25em;
1.119 +}
1.120 +
1.121 +/* Breadcrumbs stack frames view */
1.122 +
1.123 +.dbg-stackframe-details {
1.124 + -moz-padding-start: 4px;
1.125 +}
1.126 +
1.127 +/* Classic stack frames view */
1.128 +
1.129 +.dbg-classic-stackframe {
1.130 + display: block;
1.131 +}
1.132 +
1.133 +.dbg-classic-stackframe-title {
1.134 + font-weight: 600;
1.135 +}
1.136 +
1.137 +.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
1.138 + float: right;
1.139 +}
1.140 +
1.141 +.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
1.142 + float: left;
1.143 +}
1.144 +
1.145 +.dbg-classic-stackframe-details-url {
1.146 + max-width: 90%;
1.147 + text-align: end;
1.148 +}
1.149 +
1.150 +.theme-dark .dbg-classic-stackframe-details-url {
1.151 + color: #a9bacb; /* Light content text */
1.152 +}
1.153 +
1.154 +.theme-light .dbg-classic-stackframe-details-url {
1.155 + color: #667380; /* Dark grey content text */
1.156 +}
1.157 +
1.158 +.theme-dark .dbg-classic-stackframe-details-sep {
1.159 + color: #b6babf; /* Grey foreground text */
1.160 +}
1.161 +
1.162 +.theme-light .dbg-classic-stackframe-details-sep {
1.163 + color: #585959; /* Grey foreground text */
1.164 +}
1.165 +
1.166 +.theme-dark .dbg-classic-stackframe-details-line {
1.167 + color: #5e88b0; /* Highlight blue grey */
1.168 +}
1.169 +
1.170 +.theme-light .dbg-classic-stackframe-details-line {
1.171 + color: #5f88b0; /* Highlight blue grey */
1.172 +}
1.173 +
1.174 +#callstack-list .selected label {
1.175 + /* Text inside a selected item should not be custom colored. */
1.176 + color: inherit !important;
1.177 +}
1.178 +
1.179 +/* Tracer */
1.180 +
1.181 +#trace {
1.182 + list-style-image: url(tracer-icon.png);
1.183 + -moz-image-region: rect(0px,16px,16px,0px);
1.184 +}
1.185 +
1.186 +#trace[checked] {
1.187 + -moz-image-region: rect(0px,32px,16px,16px);
1.188 +}
1.189 +
1.190 +#clear-tracer {
1.191 + /* Make this button as narrow as the text inside it. */
1.192 + min-width: 1px;
1.193 +}
1.194 +
1.195 +.trace-name {
1.196 + -moz-padding-start: 4px;
1.197 +}
1.198 +
1.199 +/* Tracer dark theme */
1.200 +
1.201 +.theme-dark .trace-item {
1.202 + color: #f5f7fa; /* Light foreground text */
1.203 +}
1.204 +
1.205 +.theme-dark .trace-item.selected-matching {
1.206 + background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */
1.207 +}
1.208 +
1.209 +.theme-dark .selected > .trace-item {
1.210 + background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
1.211 +}
1.212 +
1.213 +.theme-dark .trace-call {
1.214 + color: #46afe3; /* Highlight blue */
1.215 +}
1.216 +
1.217 +.theme-dark .trace-return,
1.218 +.theme-dark .trace-yield {
1.219 + color: #70bf53; /* Highlight green */
1.220 +}
1.221 +
1.222 +.theme-dark .trace-throw {
1.223 + color: #eb5368; /* Highlight red */
1.224 +}
1.225 +
1.226 +.theme-dark .trace-param {
1.227 + color: #a9bacb; /* Content text light */
1.228 +}
1.229 +
1.230 +.theme-dark .trace-syntax {
1.231 + color: #8fa1b2; /* Content text grey */
1.232 +}
1.233 +
1.234 +/* Tracer light theme */
1.235 +
1.236 +.theme-light .trace-item {
1.237 + color: #292e33; /* Dark foreground text */
1.238 +}
1.239 +
1.240 +.theme-light .trace-item.selected-matching {
1.241 + background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
1.242 +}
1.243 +
1.244 +.theme-light .selected > .trace-item {
1.245 + background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
1.246 +}
1.247 +
1.248 +.theme-light .trace-call {
1.249 + color: #0088cc; /* Highlight blue */
1.250 +}
1.251 +
1.252 +.theme-light .trace-return,
1.253 +.theme-light .trace-yield {
1.254 + color: #2cbb0f; /* Highlight green */
1.255 +}
1.256 +
1.257 +.theme-light .trace-throw {
1.258 + color: #ed2655; /* Highlight red */
1.259 +}
1.260 +
1.261 +.theme-light .trace-param {
1.262 + color: #667380; /* Content text dark grey */
1.263 +}
1.264 +
1.265 +.theme-light .trace-syntax {
1.266 + color: #8fa1b2; /* Content text grey */
1.267 +}
1.268 +
1.269 +#tracer-traces .selected label {
1.270 + /* Text inside a selected item should not be custom colored. */
1.271 + color: inherit !important;
1.272 +}
1.273 +
1.274 +/* Watch expressions view */
1.275 +
1.276 +#expressions {
1.277 + min-height: 10px;
1.278 + max-height: 125px;
1.279 +}
1.280 +
1.281 +.dbg-expression {
1.282 + height: 20px;
1.283 +}
1.284 +
1.285 +.dbg-expression-arrow {
1.286 + width: 16px;
1.287 + height: auto;
1.288 + margin: 2px;
1.289 + background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
1.290 +}
1.291 +
1.292 +.dbg-expression-input {
1.293 + color: inherit;
1.294 +}
1.295 +
1.296 +.dbg-expression-button {
1.297 + -moz-appearance: none;
1.298 + border: none;
1.299 + background: none;
1.300 + cursor: pointer;
1.301 + text-decoration: underline;
1.302 +}
1.303 +
1.304 +.theme-dark .dbg-expression-button {
1.305 + color: #46afe3; /* Blue highlight color */
1.306 +}
1.307 +
1.308 +.theme-light .dbg-expression-button {
1.309 + color: #0088cc; /* Blue highlight color */
1.310 +}
1.311 +
1.312 +/* Event listeners view */
1.313 +
1.314 +.dbg-event-listener-type {
1.315 + font-weight: 600;
1.316 +}
1.317 +
1.318 +.theme-dark .dbg-event-listener-location {
1.319 + color: #a9bacb; /* Light content text */
1.320 +}
1.321 +
1.322 +.theme-light .dbg-event-listener-location {
1.323 + color: #667380; /* Dark grey content text */
1.324 +}
1.325 +
1.326 +.theme-dark .dbg-event-listener-separator {
1.327 + color: #b6babf; /* Grey foreground text */
1.328 +}
1.329 +
1.330 +.theme-light .dbg-event-listener-separator {
1.331 + color: #585959; /* Grey foreground text */
1.332 +}
1.333 +
1.334 +.theme-dark .dbg-event-listener-targets {
1.335 + color: #5e88b0; /* Highlight blue grey */
1.336 +}
1.337 +
1.338 +.theme-light .dbg-event-listener-targets {
1.339 + color: #5f88b0; /* Highlight blue grey */
1.340 +}
1.341 +
1.342 +.theme-dark #event-listeners .selected {
1.343 + /* Selected items shouldn't be displayed differently. */
1.344 + background: none;
1.345 + color: #fff;
1.346 +}
1.347 +
1.348 +.theme-light #event-listeners .selected {
1.349 + /* Selected items shouldn't be displayed differently. */
1.350 + background: none;
1.351 + color: #000;
1.352 +}
1.353 +
1.354 +/* Searchbox and the search operations help panel */
1.355 +
1.356 +#searchbox {
1.357 + min-width: 220px;
1.358 + -moz-margin-start: 1px;
1.359 +}
1.360 +
1.361 +#filter-label {
1.362 + -moz-margin-start: 2px;
1.363 +}
1.364 +
1.365 +#searchbox-panel-operators {
1.366 + margin-top: 5px;
1.367 + margin-bottom: 8px;
1.368 + -moz-margin-start: 2px;
1.369 +}
1.370 +
1.371 +.searchbox-panel-operator-button {
1.372 + min-width: 26px;
1.373 + margin-top: 0;
1.374 + margin-bottom: 0;
1.375 + -moz-margin-start: 2px;
1.376 + -moz-margin-end: 6px;
1.377 + text-align: center;
1.378 +}
1.379 +
1.380 +.searchbox-panel-operator-label {
1.381 + padding-bottom: 2px;
1.382 +}
1.383 +
1.384 +/* Searchbox results panel */
1.385 +
1.386 +#results-panel {
1.387 + border: none;
1.388 +}
1.389 +
1.390 +.results-panel-item {
1.391 + padding: 6px 8px;
1.392 + border-top: 1px solid rgba(128,128,128,0.2);
1.393 +}
1.394 +
1.395 +.results-panel-item:first-of-type {
1.396 + border-top: none;
1.397 +}
1.398 +
1.399 +.results-panel-item-label {
1.400 + font-weight: 600;
1.401 +}
1.402 +
1.403 +.results-panel-item-label-before {
1.404 + -moz-padding-end: 6px;
1.405 +}
1.406 +
1.407 +.theme-dark .results-panel-item-label {
1.408 + color: #f5f7fa; /* Light foreground text */
1.409 +}
1.410 +
1.411 +.theme-light .results-panel-item-label {
1.412 + color: #18191a; /* Dark foreground text */
1.413 +}
1.414 +
1.415 +.theme-dark .results-panel-item-label-before {
1.416 + color: #5e88b0; /* Highlight blue grey */
1.417 +}
1.418 +
1.419 +.theme-light .results-panel-item-label-before {
1.420 + color: #5f88b0; /* Highlight blue grey */
1.421 +}
1.422 +
1.423 +.theme-dark .results-panel-item-label-below {
1.424 + color: #5f7387; /* Dark grey content text */
1.425 +}
1.426 +
1.427 +.theme-light .results-panel-item-label-below {
1.428 + color: #667380; /* Dark grey content text */
1.429 +}
1.430 +
1.431 +#results-panel .selected label {
1.432 + /* Text inside a selected item should not be custom colored. */
1.433 + color: inherit !important;
1.434 +}
1.435 +
1.436 +/* Sources search view */
1.437 +
1.438 +#globalsearch {
1.439 + min-height: 10px;
1.440 + max-height: 50vh;
1.441 +}
1.442 +
1.443 +.dbg-results-header {
1.444 + -moz-padding-start: 6px;
1.445 +}
1.446 +
1.447 +.dbg-results-header-location {
1.448 + font-weight: 600;
1.449 +}
1.450 +
1.451 +.dbg-results-header-match-count {
1.452 + -moz-padding-start: 6px;
1.453 +}
1.454 +
1.455 +.dbg-results-line-number {
1.456 + min-width: 3em;
1.457 + -moz-border-end: 1px solid rgba(128,128,128,0.2);
1.458 + -moz-padding-end: 4px;
1.459 + text-align: end;
1.460 +}
1.461 +
1.462 +.dbg-results-line-contents {
1.463 + -moz-padding-start: 4px;
1.464 +}
1.465 +
1.466 +.dbg-results-line-contents-string[match=true] {
1.467 + background-color: rgba(255,255,0,0.2);
1.468 + border: 1px solid rgba(128,128,128,0.7);
1.469 + border-radius: 4px;
1.470 + margin-top: -1px !important;
1.471 + margin-bottom: -1px !important;
1.472 + cursor: pointer;
1.473 +}
1.474 +
1.475 +.dbg-results-line-contents-string[match=true][focusing] {
1.476 + transition: transform 0.3s ease-in-out;
1.477 +}
1.478 +
1.479 +.dbg-results-line-contents-string[match=true][focused] {
1.480 + transition-duration: 0.1s;
1.481 + transform: scale(1.75, 1.75);
1.482 +}
1.483 +
1.484 +.theme-dark .dbg-source-results:not(.selected):hover {
1.485 + background-color: #181d20; /* Sidebar background */
1.486 +}
1.487 +
1.488 +.theme-light .dbg-source-results:not(.selected):hover {
1.489 + background-color: #f7f7f7; /* Sidebar background */
1.490 +}
1.491 +
1.492 +.theme-dark .dbg-results-header {
1.493 + background-color: #252c33; /* Tab toolbar */
1.494 + color: #a9bacb; /* Light content text */
1.495 +}
1.496 +
1.497 +.theme-light .dbg-results-header {
1.498 + background-color: #ebeced; /* Tab toolbar */
1.499 + color: #667380; /* Dark grey content text */
1.500 +}
1.501 +
1.502 +.theme-dark .dbg-search-result:hover {
1.503 + background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */
1.504 +}
1.505 +
1.506 +.theme-light .dbg-search-result:hover {
1.507 + background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
1.508 +}
1.509 +
1.510 +.theme-dark .dbg-results-header-match-count {
1.511 + color: #5f7387; /* Dark grey content text */
1.512 +}
1.513 +
1.514 +.theme-light .dbg-results-header-match-count {
1.515 + color: #667380; /* Dark grey content text */
1.516 +}
1.517 +
1.518 +.theme-dark .dbg-results-line-number {
1.519 + background-color: #252c33; /* Tab toolbars */
1.520 + color: #b6babf; /* Grey foreground text */
1.521 +}
1.522 +
1.523 +.theme-light .dbg-results-line-number {
1.524 + background-color: #ebeced; /* Tab toolbars */
1.525 + color: #585959; /* Grey foreground text */
1.526 +}
1.527 +
1.528 +.theme-dark .dbg-results-line-contents-string {
1.529 + color: #b6babf; /* Grey foreground text */
1.530 +}
1.531 +
1.532 +.theme-light .dbg-results-line-contents-string {
1.533 + color: #585959; /* Grey foreground text */
1.534 +}
1.535 +
1.536 +.theme-dark .dbg-results-line-contents-string[match=true] {
1.537 + color: #f5f7fa; /* Light foreground text */
1.538 +}
1.539 +
1.540 +.theme-light .dbg-results-line-contents-string[match=true] {
1.541 + color: #18191a; /* Dark foreground text */
1.542 +}
1.543 +
1.544 +/* Toolbar controls */
1.545 +
1.546 +.devtools-sidebar-tabs > tabs > tab {
1.547 + min-height: 1em !important;
1.548 + padding: 0 !important;
1.549 +}
1.550 +
1.551 +#resume {
1.552 + list-style-image: url(debugger-pause.png);
1.553 + -moz-image-region: rect(0px,16px,16px,0px);
1.554 + transition: background 0.15s ease-in-out;
1.555 +}
1.556 +
1.557 +#resume[checked] {
1.558 + background: none;
1.559 + list-style-image: url(debugger-play.png);
1.560 + -moz-image-region: rect(0px,32px,16px,16px);
1.561 +}
1.562 +
1.563 +#resume ~ toolbarbutton {
1.564 + transition: opacity 0.15s ease-in-out;
1.565 +}
1.566 +
1.567 +#resume:not([checked]) ~ toolbarbutton {
1.568 + opacity: 0.5;
1.569 +}
1.570 +
1.571 +#step-over {
1.572 + list-style-image: url(debugger-step-over.png);
1.573 +}
1.574 +
1.575 +#step-in {
1.576 + list-style-image: url(debugger-step-in.png);
1.577 +}
1.578 +
1.579 +#step-out {
1.580 + list-style-image: url(debugger-step-out.png);
1.581 +}
1.582 +
1.583 +#instruments-pane-toggle {
1.584 + background: none;
1.585 + box-shadow: none;
1.586 + border: none;
1.587 + list-style-image: url(debugger-collapse.png);
1.588 + -moz-image-region: rect(0px,16px,16px,0px);
1.589 +}
1.590 +
1.591 +#instruments-pane-toggle[pane-collapsed] {
1.592 + list-style-image: url(debugger-expand.png);
1.593 +}
1.594 +
1.595 +#instruments-pane-toggle:active {
1.596 + -moz-image-region: rect(0px,32px,16px,16px);
1.597 +}
1.598 +
1.599 +/* Horizontal vs. vertical layout */
1.600 +
1.601 +#vertical-layout-panes-container {
1.602 + min-height: 35vh;
1.603 + max-height: 80vh;
1.604 +}
1.605 +
1.606 +#body[layout=vertical] #sources-pane > tabs {
1.607 + -moz-border-end: none;
1.608 +}
1.609 +
1.610 +#body[layout=vertical] #instruments-pane {
1.611 + margin: 0 !important;
1.612 + /* To prevent all the margin hacks to hide the sidebar. */
1.613 +}
1.614 +
1.615 +#body[layout=vertical] .side-menu-widget-container,
1.616 +#body[layout=vertical] .side-menu-widget-empty-text {
1.617 + box-shadow: none !important;
1.618 +}
1.619 +
1.620 +#body[layout=vertical] .side-menu-widget-item-arrow {
1.621 + background-image: none !important;
1.622 +}
1.623 +
1.624 +#body[layout=vertical] .side-menu-widget-group,
1.625 +#body[layout=vertical] .side-menu-widget-item {
1.626 + -moz-margin-end: 0;
1.627 +}
