LCARStrek/devtools/debugger.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 window {
   7   padding: 0;
   8 }
   9
  10 /* Sources and breakpoints pane */
  11
  12 #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
  13   border-color: transparent;
  14 }
  15
  16 #sources-pane > tabs {
  17 /*  border-inline-end: 1px solid;*/
  18 }
  19
  20 #sources-pane .devtools-toolbar {
  21   border: none; /* Remove the devtools-toolbar bottom border. */
  22 /*  border-inline-end: 1px solid;*/
  23 }
  24
  25 #sources-pane > tabs,
  26 #sources-pane .devtools-toolbar {
  27   border-inline-end-color: var(--theme-splitter-color);
  28 }
  29
  30 /* Sources and breakpoints list */
  31
  32 .dbg-source-item {
  33   padding: 2px 0px;
  34 }
  35
  36 .dbg-wasm-item .icon {
  37   display: block;
  38   background-image: url(chrome://devtools/skin/images/webconsole.svg);
  39   background-repeat: no-repeat;
  40   background-size: 72px 60px;
  41   /* show warning icon */
  42   background-position: -24px -24px;
  43   width: 10px;
  44   height: 10px;
  45   position: absolute;
  46   margin-inline-start: -15px;
  47   margin-top: 3px;
  48 }
  49
  50 .dbg-breakpoint-line {
  51   font-weight: 600;
  52 }
  53
  54 .dbg-breakpoint-text {
  55   padding-inline-start: 6px;
  56   font-style: italic;
  57   font-size: 90%;
  58 }
  59
  60 .dbg-breakpoint-checkbox {
  61   width: 16px;
  62   height: 16px;
  63   margin: 2px;
  64 }
  65
  66 .dbg-breakpoint-condition-thrown-message {
  67   display: none;
  68   color: var(--theme-highlight-red);
  69 }
  70
  71 .dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
  72   display: block;
  73   padding-inline-start: 0;
  74 }
  75
  76 /* Sources toolbar */
  77
  78 #sources-toolbar > .devtools-toolbarbutton,
  79 #sources-controls > .devtools-toolbarbutton {
  80   min-width: 16px;
  81 }
  82
  83 #black-box {
  84   list-style-image: url("images/debugger-blackbox.svg");
  85 }
  86
  87 #pretty-print {
  88   list-style-image: url("images/debugger-prettyprint.svg");
  89 }
  90
  91 #toggle-breakpoints {
  92   list-style-image: url(images/debugger-toggleBreakpoints.svg);
  93   -moz-image-region: rect(0,32px,16px,16px);
  94 }
  95
  96 #toggle-breakpoints[checked] {
  97   -moz-image-region: rect(0,16px,16px,0);
  98 }
  99
 100 #toggle-breakpoints[checked] > image {
 101   /* This button has a special checked image, don't make it blue */
 102   filter: none;
 103 }
 104
 105 #toggle-promise-debugger {
 106   /* TODO Bug 1186119: Add a toggle promise debugger image */
 107 }
 108
 109 #sources .black-boxed {
 110   color: #8050B0;
 111 }
 112
 113 #sources .selected .black-boxed {
 114   color: #000000;
 115 }
 116
 117 #sources .black-boxed ~ .dbg-breakpoint {
 118   display: none;
 119 }
 120
 121 /* Debugger unblackbox button */
 122
 123 #black-boxed-message-button > .button-box > .button-icon {
 124   width: 16px;
 125   height: 16px;
 126   background-image: url("images/debugger-blackbox.svg");
 127   background-position: 0 0;
 128   background-size: cover;
 129 }
 130
 131 /* Black box message and source progress meter */
 132
 133 #black-boxed-message,
 134 #source-progress-container {
 135   background-color: #A09090;
 136   /* Prevent the container deck from aquiring the size from this message. */
 137   min-width: 1px;
 138   min-height: 1px;
 139   color: #000000;
 140 }
 141
 142 #source-progress {
 143   min-height: 2em;
 144   min-width: 40em;
 145 }
 146
 147 #black-boxed-message-label,
 148 #black-boxed-message-button {
 149   text-align: center;
 150   font-size: 120%;
 151 }
 152
 153 #black-boxed-message-button {
 154   margin-top: 1em;
 155   padding: .25em;
 156 }
 157
 158 /* Breadcrumbs stack frames view */
 159
 160 .dbg-stackframe-details {
 161   padding-inline-start: 4px;
 162 }
 163
 164 /* Classic stack frames view */
 165
 166 .dbg-classic-stackframe {
 167   display: block;
 168 }
 169
 170 .dbg-classic-stackframe-title {
 171   font-weight: 600;
 172 }
 173
 174 .dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
 175   float: right;
 176 }
 177
 178 .dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
 179   float: left;
 180 }
 181
 182 .dbg-classic-stackframe-details-url {
 183   max-width: 90%;
 184   text-align: end;
 185 }
 186
 187 .dbg-classic-stackframe-details-url {
 188   color: var(--theme-content-color1);
 189 }
 190
 191 .dbg-classic-stackframe-details-sep {
 192   color: var(--theme-body-color-alt)
 193 }
 194
 195 .dbg-classic-stackframe-details-line {
 196   color: var(--theme-highlight-bluegrey);
 197 }
 198
 199 #callstack-list .selected label {
 200   /* Text inside a selected item should not be custom colored. */
 201   color: inherit !important;
 202 }
 203
 204 /* Tracer */
 205
 206 #trace {
 207   list-style-image: url("images/tracer-icon.png");
 208 }
 209
 210 @media (min-resolution: 1.1dppx) {
 211   #trace {
 212     list-style-image: url("images/tracer-icon@2x.png");
 213   }
 214 }
 215
 216 #clear-tracer {
 217   /* Make this button as narrow as the text inside it. */
 218   min-width: 1px;
 219 }
 220
 221 .trace-name {
 222   padding-inline-start: 4px;
 223 }
 224
 225 /* Tracer dark+light theme */
 226
 227 .trace-item {
 228   color: var(--theme-content-color1);
 229 }
 230
 231 .trace-item.black-boxed {
 232   color: #A09090;
 233 }
 234
 235 .trace-item.selected-matching {
 236   background-color: #004242; /* Select highlight blue at 40% alpha */
 237 }
 238
 239 .selected > .trace-item {
 240   background-color: #004242; /* Select highlight blue at 75% alpha */
 241 }
 242
 243 .trace-call {
 244   color: var(--theme-highlight-blue);
 245 }
 246
 247 .trace-return,
 248 .trace-yield {
 249   color: var(--theme-highlight-green);
 250 }
 251
 252 .trace-throw {
 253   color: var(--theme-highlight-red);
 254 }
 255
 256 .trace-param {
 257   color: var(--theme-highlight-pink);
 258 }
 259
 260 .trace-syntax {
 261   color: var(--theme-content-color2);
 262 }
 263
 264 /* Watch expressions view */
 265
 266 #expressions {
 267   min-height: 10px;
 268   max-height: 125px;
 269 }
 270
 271 .dbg-expression {
 272   height: 20px;
 273 }
 274
 275 .dbg-expression-arrow {
 276   background-image: var(--theme-command-line-image-focus);
 277   width: 16px;
 278   height: 16px;
 279   margin: 2px;
 280 }
 281
 282 .dbg-expression-input {
 283   color: inherit;
 284 }
 285
 286 .dbg-expression-button {
 287   border: none;
 288   background: none;
 289   text-decoration: underline;
 290   cursor: pointer;
 291   color: var(--theme-highlight-blue);
 292 }
 293
 294 /* Event listeners view */
 295
 296 .dbg-event-listener-type {
 297   font-weight: 600;
 298 }
 299
 300 .dbg-event-listener-location {
 301   color: var(--theme-highlight-pink);
 302 }
 303
 304 .dbg-event-listener-separator {
 305   color: var(--theme-body-color-alt);
 306 }
 307
 308 .dbg-event-listener-targets {
 309   color: var(--theme-highlight-blue);
 310 }
 311
 312 #event-listeners .selected {
 313   /* Selected items shouldn't be displayed differently. */
 314   background: none;
 315   color: var(--theme-content-color1);
 316 }
 317
 318 /* Searchbox and the search operations help panel */
 319
 320 #searchbox {
 321   min-width: 220px;
 322   margin-inline-start: 1px;
 323 }
 324
 325 #filter-label {
 326   margin-inline-start: 2px;
 327 }
 328
 329 #searchbox-panel-operators {
 330   margin-top: 5px;
 331   margin-bottom: 8px;
 332   margin-inline-start: 2px;
 333 }
 334
 335 .searchbox-panel-operator-button {
 336   min-width: 26px;
 337   margin-top: 0;
 338   margin-bottom: 0;
 339   margin-inline-start: 2px;
 340   margin-inline-end: 6px;
 341   text-align: center;
 342 }
 343
 344 .searchbox-panel-operator-label {
 345   padding-bottom: 2px;
 346 }
 347
 348 /* Searchbox results panel */
 349
 350 #results-panel {
 351   border: none;
 352 }
 353
 354 .results-panel-item {
 355   padding: 6px 8px;
 356   border-top: 1px solid #A09090;
 357 }
 358
 359 .results-panel-item:first-of-type {
 360   border-top: none;
 361   border-radius: 4px 4px 0 0;
 362 }
 363
 364 .results-panel-item:last-of-type {
 365   border-radius: 0 0 4px 4px;
 366 }
 367
 368 .results-panel-item:only-of-type {
 369   border-radius: 4px;
 370 }
 371
 372 .results-panel-item-label {
 373   font-weight: 600;
 374 }
 375
 376 .results-panel-item-label-before {
 377   padding-inline-end: 6px;
 378 }
 379
 380 .results-panel-item-label {
 381   color: var(--theme-highlight-blue);
 382 }
 383
 384 .results-panel-item-label-before {
 385   color: var(--theme-content-color2);
 386 }
 387
 388 .results-panel-item-label-below {
 389   color: var(--theme-content-color3);
 390 }
 391
 392 #results-panel .selected label {
 393   /* Text inside a selected item should not be custom colored. */
 394   color: inherit !important;
 395 }
 396
 397 /* Sources search view */
 398
 399 #globalsearch {
 400   min-height: 10px;
 401   max-height: 50vh;
 402 }
 403
 404 #globalsearch + .devtools-horizontal-splitter {
 405   -moz-border-top-colors: var(--theme-splitter-color);
 406 }
 407
 408 .dbg-source-results {
 409   padding: 0;
 410   background: none !important;
 411 }
 412
 413 .dbg-source-results:not(.selected):hover {
 414   background-color: var(--theme-sidebar-background);
 415 }
 416
 417 .dbg-results-header {
 418   padding-inline-start: 6px;
 419 }
 420
 421 .dbg-results-header-location {
 422   font-weight: 600;
 423 }
 424
 425 .dbg-results-header-match-count {
 426   padding-inline-start: 6px;
 427   color: var(--theme-body-color-inactive);
 428 }
 429
 430 .dbg-results-line-number {
 431   min-width: 3em;
 432   border-inline-end: 1px solid #9C9CFF;
 433   padding-inline-end: 4px;
 434   text-align: end;
 435 }
 436
 437 .dbg-results-line-contents {
 438   padding-inline-start: 4px;
 439 }
 440
 441 .dbg-results-line-contents-string[match=true] {
 442   background: #E7ADE7;
 443   color: var(--theme-selection-color);
 444   border: 1px solid #9C9CFF;
 445   border-radius: 4px;
 446   margin-top: -1px !important;
 447   margin-bottom: -1px !important;
 448   cursor: pointer;
 449 }
 450
 451 .dbg-results-line-contents-string[match=true][focusing] {
 452   transition: transform 0.3s ease-in-out;
 453 }
 454
 455 .dbg-results-line-contents-string[match=true][focused] {
 456   transition-duration: 0.1s;
 457   transform: scale(1.75, 1.75);
 458 }
 459
 460 .dbg-source-results:not(.selected):hover {
 461   background-color: var(--theme-sidebar-background);
 462 }
 463
 464 .dbg-results-header {
 465   background-color: var(--theme-tab-toolbar-background);
 466 }
 467
 468 .dbg-results-header {
 469   color: var(--theme-content-color1);
 470 }
 471
 472 .dbg-search-result:hover {
 473   background-color: #004242; /* Select highlight blue at 40% alpha */
 474 }
 475
 476 .dbg-results-header-match-count {
 477   color: var(--theme-content-color3);
 478 }
 479
 480 .dbg-results-line-number {
 481   background-color: var(--theme-tab-toolbar-background);
 482   color: var(--theme-body-color-alt);
 483 }
 484
 485 .dbg-results-line-contents-string {
 486   color: var(--theme-body-color-alt);
 487 }
 488
 489 .theme-dark .dbg-results-line-contents-string[match=true] {
 490   color: var(--theme-selection-color);
 491 }
 492
 493 .theme-light .dbg-results-line-contents-string[match=true] {
 494   color: var(--theme-body-color);
 495 }
 496
 497 /* Toolbar controls */
 498
 499 #resume {
 500   list-style-image: url(images/pause.svg);
 501 }
 502
 503 #resume[checked] {
 504   list-style-image: url(images/play.svg);
 505 }
 506
 507 #resume[break-on-next] {
 508   background: var(--theme-highlight-lightorange);
 509 }
 510
 511 #step-over {
 512   list-style-image: url(images/debugger-step-over.svg);
 513 }
 514
 515 #step-in {
 516   list-style-image: url(images/debugger-step-in.svg);
 517 }
 518
 519 #step-out {
 520   list-style-image: url(images/debugger-step-out.svg);
 521 }
 522
 523 #instruments-pane-toggle {
 524   list-style-image: var(--theme-pane-collapse-image);
 525 }
 526
 527 #instruments-pane-toggle[pane-collapsed] {
 528   list-style-image: var(--theme-pane-expand-image);
 529 }
 530
 531 /* Horizontal vs. vertical layout */
 532
 533 #vertical-layout-panes-container {
 534   min-height: 35vh;
 535   max-height: 80vh;
 536 }
 537
 538 #body[layout=vertical] #sources-pane > tabs {
 539   border-inline-end: none;
 540 }
 541
 542 #body[layout=vertical] #instruments-pane {
 543   margin: 0 !important;
 544   /* To prevent all the margin hacks to hide the sidebar. */
 545 }
 546
 547 #body[layout=vertical] .side-menu-widget-container,
 548 #body[layout=vertical] .side-menu-widget-empty-text {
 549   box-shadow: none !important;
 550 }
 551
 552 #body[layout=vertical] .side-menu-widget-item-arrow {
 553   background-image: none !important;
 554 }
 555
 556 #body[layout=vertical] .side-menu-widget-group,
 557 #body[layout=vertical] .side-menu-widget-item {
 558   margin-inline-end: 0;
 559 }