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