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