LCARStrek/browser/devtools/debugger.css

   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/. */
   4
   5 window {
   6   padding: 0;
   7 }
   8
   9 #body {
  10   background-color: #000000;
  11 }
  12
  13 /* Sources and breakpoints pane */
  14
  15 #sources-pane {
  16   min-width: 50px;
  17 }
  18
  19 #sources-and-editor-splitter {
  20   -moz-border-start-color: transparent;
  21 }
  22
  23 #pretty-print {
  24   min-width: 0;
  25   font-weight: bold;
  26 }
  27
  28 #sources .side-menu-widget-item-checkbox {
  29   -moz-margin-end: -6px;
  30   padding: 0;
  31   opacity: 0;
  32   transition: opacity .15s ease 0s;
  33 }
  34
  35 /* Only show the checkbox when the source is hovered over, is selected, or if it
  36  * is not checked. */
  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]) {
  40   opacity: 1;
  41   transition: opacity .15s ease-out 0s;
  42 }
  43
  44 #sources .side-menu-widget-item-checkbox > .checkbox-check {
  45   -moz-appearance: none;
  46   background: 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;
  52   width: 16px;
  53   height: 16px;
  54   border: 0;
  55 }
  56
  57 #sources .side-menu-widget-item-checkbox[checked] > .checkbox-check {
  58   background-position: 0 0;
  59 }
  60
  61 #sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents {
  62   color: #8050B0;
  63 }
  64
  65 #sources .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents > .dbg-breakpoint {
  66   display: none;
  67 }
  68
  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; */
  72 }
  73
  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; */
  77 }
  78
  79 /* Black box message and source progress meter */
  80
  81 #black-boxed-message,
  82 #source-progress-container {
  83   background-color: #A09090;
  84   /* Prevent the container deck from aquiring the height from this message. */
  85   min-height: 1px;
  86   color: #000000;
  87 }
  88
  89 #source-progress {
  90   min-height: 2em;
  91   min-width: 40em;
  92 }
  93
  94 #black-boxed-message-label,
  95 #black-boxed-message-button {
  96   text-align: center;
  97   font-size: 120%;
  98 }
  99
 100 #black-boxed-message-button {
 101   margin-top: 1em;
 102   padding: .25em;
 103 }
 104
 105 /* ListWidget items */
 106
 107 .list-widget-item {
 108   padding: 2px;
 109 }
 110
 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;*/
 113 }
 114
 115 .list-widget-item.selected.light {
 116 /*  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
 117   color: #000;*/
 118 }
 119
 120 .list-widget-item.selected {
 121   background: #008484;
 122   color: #FFCF00;
 123 }
 124
 125 .list-widget-item.empty {
 126   color: #8050B0;
 127   /* padding: 4px; */
 128 }
 129
 130 /* Stack frames view */
 131
 132 #stackframes {
 133   min-height: 25px;
 134 }
 135
 136 .dbg-stackframe-details {
 137   -moz-padding-start: 4px;
 138 }
 139
 140 .dbg-stackframe-menuitem[checked] {
 141   margin-top: 3px;
 142   margin-bottom: 3px;
 143   outline: 1px solid #008484;
 144   font-weight: 600;
 145 }
 146
 147 .dbg-stackframe-menuitem-details {
 148   -moz-padding-start: 16px;
 149 }
 150
 151 /* Sources and breakpoints view */
 152
 153 .dbg-breakpoint {
 154   -moz-margin-start: -14px;
 155 }
 156
 157 .dbg-breakpoint-line {
 158   font-weight: 600;
 159 }
 160
 161 .dbg-breakpoint-text {
 162   -moz-margin-start: 10px !important;
 163   font-style: italic;
 164   font-size: 90%;
 165 }
 166
 167 .dbg-breakpoint-checkbox {
 168   width: 16px;
 169   height: 16px;
 170   margin: 2px;
 171 }
 172
 173 /* Instruments pane (watch expressions, variables, event listeners...) */
 174
 175 #instruments-pane > tabs > tab {
 176   min-height: 25px !important;
 177   padding: 0 !important;
 178 }
 179
 180 #instruments-pane > tabpanels > tabpanel {
 181   background: #000000;
 182 }
 183
 184 /* Watch expressions view */
 185
 186 #expressions {
 187   min-height: 10px;
 188   max-height: 125px;
 189 }
 190
 191 .dbg-expression {
 192   height: 20px;
 193 }
 194
 195 .dbg-expression-arrow {
 196   width: 16px;
 197   height: auto;
 198   background: -moz-image-rect(url("commandline-icon.png"), 0, 32, 16, 16);
 199 }
 200
 201 .dbg-expression-input {
 202   -moz-padding-start: 2px !important;
 203 }
 204
 205 /* Event listeners view */
 206
 207 .dbg-event-listener {
 208   padding: 4px 8px;
 209 }
 210
 211 .dbg-event-listener-type {
 212   font-weight: 600;
 213 }
 214
 215 .dbg-event-listener-separator {
 216   color: #A09090;
 217 }
 218
 219 .dbg-event-listener-targets {
 220   color: #9C9CFF;
 221 }
 222
 223 .dbg-event-listener-location {
 224   color: #E7ADE7;
 225 }
 226
 227 /* Searchbox and the search operations help panel */
 228
 229 .devtools-searchinput {
 230   min-width: 220px;
 231   -moz-margin-start: 1px;
 232 }
 233
 234 #filter-label {
 235   -moz-margin-start: 2px;
 236 }
 237
 238 #searchbox-panel-operators {
 239   margin-top: 5px;
 240   margin-bottom: 8px;
 241   -moz-margin-start: 2px;
 242 }
 243
 244 .searchbox-panel-operator-button {
 245   min-width: 26px;
 246   margin-top: 0;
 247   margin-bottom: 0;
 248   -moz-margin-start: 2px;
 249   -moz-margin-end: 6px;
 250   text-align: center;
 251 }
 252
 253 .searchbox-panel-operator-label {
 254   padding-bottom: 2px;
 255 }
 256
 257 /* Searchbox results panel */
 258
 259 .results-panel {
 260   padding: 4px;
 261 }
 262
 263 .results-panel-item {
 264   border: 1px solid #A09090;
 265   border-top-color: #8050B0;
 266   padding: 5px;
 267   cursor: pointer;
 268 }
 269
 270 .results-panel-item:first-of-type {
 271   border-top-color: #9C9CFF;
 272   border-radius: 4px 4px 0 0;
 273 }
 274
 275 .results-panel-item:last-of-type {
 276   border-radius: 0 0 4px 4px;
 277 }
 278
 279 .results-panel-item:only-of-type {
 280   border-radius: 4px;
 281 }
 282
 283 .results-panel-item:not(.selected):not(:hover) {
 284 /*  text-shadow: 0 1px #fff;*/
 285 }
 286
 287 .results-panel-item-pre {
 288   -moz-margin-end: 5px !important;
 289   color: #A09090;
 290   cursor: inherit;
 291 }
 292
 293 .results-panel-item-name {
 294   color: #9C9CFF;
 295   font-weight: 600;
 296   cursor: inherit;
 297 }
 298
 299 .results-panel-item-details {
 300   color: #FF9F00;
 301   cursor: inherit;
 302 }
 303
 304 /* Sources search view */
 305
 306 #globalsearch {
 307   min-height: 10px;
 308 }
 309
 310 #globalsearch > vbox:not(:empty) {
 311   min-height: 10px;
 312   max-height: 125px;
 313 }
 314
 315 #globalsearch + .devtools-horizontal-splitter {
 316   -moz-border-top-colors: #9C9CFF;
 317 }
 318
 319 .dbg-source-results {
 320   padding: 0;
 321   background: none !important;
 322 }
 323
 324 .dbg-results-header {
 325   -moz-padding-start: 6px;
 326 }
 327
 328 .dbg-results-header-location {
 329   font-weight: 600;
 330 }
 331
 332 .dbg-results-header-match-count {
 333   -moz-padding-start: 6px;
 334   color: #8050B0;
 335 }
 336
 337 .dbg-results-line-number {
 338   background: #000000;
 339   min-width: 40px;
 340   -moz-border-end: 1px solid #9C9CFF;
 341   -moz-padding-end: 4px;
 342   padding-top: 2px;
 343   text-align: end;
 344   color: #FF9F00;
 345 }
 346
 347 .dbg-results-line-contents {
 348   -moz-padding-start: 4px;
 349   padding-top: 1px;
 350   padding-bottom: 1px;
 351 }
 352
 353 .dbg-results-line-contents-string {
 354   padding: 1px;
 355 }
 356
 357 .dbg-results-line-contents-string[match=true] {
 358   background: #E7ADE7;
 359   color: #000000;
 360   padding: 0;
 361   border: 1px solid #9C9CFF;
 362   border-radius: 4px;
 363   cursor: pointer;
 364 }
 365
 366 .dbg-results-line-contents-string[match=true][focusing] {
 367   transition: transform 0.3s ease-in-out;
 368 }
 369
 370 .dbg-results-line-contents-string[match=true][focused] {
 371   transition-duration: 0.1s;
 372   transform: scale(1.75, 1.75);
 373 }
 374
 375 /* Toolbar controls */
 376
 377 #toggle-panes {
 378   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 379   -moz-image-region: rect(0px, 16px, 16px, 0px);
 380 }
 381
 382 #toggle-panes:not([panesHidden]) {
 383   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 384 }
 385
 386 #toggle-panes:hover,
 387 #toggle-panes:hover:active {
 388   -moz-image-region: rect(0px, 32px, 16px, 16px);
 389 }
 390
 391 #resumption-panel-desc {
 392   width: 200px;
 393 }
 394
 395 #resumption-order-panel {
 396   -moz-margin-start: -8px;
 397 }
 398
 399 #resume {
 400   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 401   -moz-image-region: rect(0px, 16px, 16px, 0px);
 402 }
 403
 404 #resume[checked=true],
 405 #resume:hover {
 406   -moz-image-region: rect(0px, 32px, 16px, 16px);
 407 }
 408
 409 #step-over {
 410   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 411   -moz-image-region: rect(0px, 16px, 16px, 0px);
 412 }
 413 #step-over:hover {
 414   -moz-image-region: rect(0px, 32px, 16px, 16px);
 415 }
 416
 417 #step-in {
 418   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 419   -moz-image-region: rect(0px, 16px, 16px, 0px);
 420 }
 421 #step-in:hover {
 422   -moz-image-region: rect(0px, 32px, 16px, 16px);
 423 }
 424
 425 #step-out {
 426   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 427   -moz-image-region: rect(0px, 16px, 16px, 0px);
 428 }
 429 #step-out:hover {
 430   -moz-image-region: rect(0px, 32px, 16px, 16px);
 431 }
 432
 433 #debugger-controls > toolbarbutton {
 434 }
 435
 436 #debugger-controls > toolbarbutton:last-of-type {
 437 }
 438
 439 #debugger-controls {
 440 }
 441
 442 #instruments-pane-toggle {
 443 /*  background: none;
 444   box-shadow: none;
 445   border: none; */
 446   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 447   -moz-image-region: rect(0px,16px,16px,0px);
 448 }
 449
 450 #instruments-pane-toggle[pane-collapsed] {
 451   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 452 }
 453
 454 #instruments-pane-toggle:hover,
 455 #instruments-pane-toggle:hover:active {
 456   -moz-image-region: rect(0px,32px,16px,16px);
 457 }
 458
 459 /* Horizontal vs. vertical layout */
 460
 461 #vertical-layout-panes-container {
 462   min-height: 35vh;
 463   max-height: 80vh;
 464 }
 465
 466 #body[layout=vertical] #instruments-pane {
 467   margin: 0 !important;
 468   /* To prevent all the margin hacks to hide the sidebar. */
 469 }
 470
 471 #body[layout=vertical] .side-menu-widget-container {
 472   box-shadow: none !important;
 473 }
 474
 475 #body[layout=vertical] .side-menu-widget-item-arrow {
 476   background-image: none !important;
 477 }