LCARStrek/browser/devtools/debugger.css

   1 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
   2 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
   3 /* This Source Code Form is subject to the terms of the Mozilla Public
   4  * License, v. 2.0. If a copy of the MPL was not distributed with this
   5  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   6
   7 window {
   8   padding: 0;
   9 }
  10
  11 #body {
  12   background-color: #000000;
  13 }
  14
  15 /**
  16  * Debugger content
  17  */
  18
  19 #dbg-content {
  20   padding: 0;
  21 }
  22
  23 #scripts {
  24   min-width: 150px;
  25 }
  26
  27 /**
  28  * This hardcoded width likely due to a toolkit Windows specific bug.
  29  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  30  */
  31 #scripts-search {
  32   width: 200px;
  33 }
  34
  35 /**
  36  * Lists and headers
  37  */
  38
  39 .list-item {
  40   padding: 2px;
  41 }
  42
  43 .list-item:not(.selected):not(.empty):hover {
  44   /* background: #cddae5; */
  45 }
  46
  47 .list-item.selected {
  48   background: #008484;
  49   color: #FFCF00;
  50 }
  51
  52 .list-item.empty {
  53   color: #8050B0;
  54   /* padding: 4px; */
  55 }
  56
  57 /**
  58  * Scripts searching
  59  */
  60
  61 #globalsearch {
  62   background-color: #000000;
  63   min-height: 50px;
  64   max-height: 150px;
  65 }
  66
  67 .dbg-script-results:not(:last-child) {
  68   border-bottom: 1px dotted #9C9CFF;
  69 }
  70
  71 .dbg-results-header {
  72   -moz-padding-start: 6px;
  73 }
  74
  75 .dbg-results-header .script-url {
  76   font-weight: 600;
  77 }
  78
  79 .dbg-results-header .match-count {
  80   -moz-padding-start: 6px;
  81   color: 8050B0;
  82 }
  83
  84 .dbg-results-container .line-number {
  85   background: #000000;
  86   min-width: 35px;
  87   -moz-padding-end: 4px;
  88   -moz-border-end: 1px dotted #9C9CFF;
  89   text-align: end;
  90   font: 8pt monospace;
  91 }
  92
  93 .dbg-results-container .line-contents {
  94   -moz-padding-start: 4px;
  95   font: 8pt monospace;
  96 }
  97
  98 .dbg-results-container .line-contents:hover {
  99   background: #000000;
 100 }
 101
 102 .dbg-results-container .line-contents > .string {
 103   padding: 1px;
 104 }
 105
 106 .dbg-results-container .line-contents > .string[match=true] {
 107   background: #E7ADE7;
 108   color: #000000;
 109   padding: 0;
 110   border: 1px solid #9C9CFF;
 111   border-radius: 4px;
 112   cursor: pointer;
 113   transition: transform 0.2s ease-in-out;
 114   transform: scale(1, 1);
 115 }
 116
 117 .dbg-results-container .line-contents > .string[match=true][focused] {
 118   transition-duration: 0.1s;
 119   transform: scale(1.75, 1.75);
 120 }
 121
 122 #scripts-search-panel .description {
 123   margin-top: -6px;
 124   margin-bottom: 8px;
 125   -moz-margin-start: 0;
 126   -moz-margin-end: 0;
 127 }
 128
 129 #scripts-search-panel button.operator {
 130   min-width: 0;
 131   margin: 0;
 132   padding: 0;
 133   font: 9pt "Liberation Mono", Consolas, "Courier New", monospace;
 134 }
 135
 136 #scripts-search-panel label.operator {
 137   -moz-padding-start: 6px;
 138   padding-bottom: 1px;
 139 }
 140
 141 /**
 142  * Stack frames and breakpoints panel
 143  */
 144
 145 #stackframes\+breakpoints {
 146   background-color: #000000;
 147   min-width: 50px;
 148 }
 149
 150 #stackframes\+breakpoints[animated] {
 151   -moz-transition: margin 0.25s ease-in-out;
 152 }
 153
 154 /**
 155  * Stack frames view
 156  */
 157
 158 #stackframes {
 159   /* background-color: white; */
 160 }
 161
 162 .dbg-stackframe {
 163   -moz-padding-start: 4px;
 164   -moz-padding-end: 4px;
 165 }
 166
 167 .dbg-stackframe-name {
 168   -moz-padding-end: 4px;
 169   font-weight: 600;
 170 }
 171
 172 /**
 173  * Breakpoints view
 174  */
 175
 176 #breakpoints {
 177   background-color: #000000;
 178 }
 179
 180 .dbg-breakpoint-info {
 181   font-weight: 600;
 182 }
 183
 184 .dbg-breakpoint-text {
 185   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
 186 }
 187
 188 /**
 189  * Properties view
 190  */
 191
 192 #variables {
 193 /*  background-color: white; */
 194   min-width: 50px;
 195 }
 196
 197 #variables[animated] {
 198   -moz-transition: margin 0.25s ease-in-out;
 199 }
 200
 201 /**
 202  * Property element details container
 203  */
 204
 205 .details {
 206   -moz-margin-start: 10px;
 207 }
 208
 209 /**
 210  * Scope element
 211  */
 212
 213 .scope > .title {
 214   background: #E7ADE7;
 215   border-radius: 5px;
 216   color: #000000;
 217 }
 218
 219 .scope > .title > .arrow {
 220   margin-top: -2px;
 221 }
 222
 223 .scope > .title > .name {
 224   padding-top: 2px;
 225 }
 226
 227 .scope > .details {
 228   -moz-margin-start: 2px;
 229   -moz-margin-end: 2px;
 230 }
 231
 232 /**
 233  * Variable element
 234  */
 235
 236 .variable {
 237   -moz-margin-start: 1px;
 238   -moz-margin-end: 1px;
 239   margin-top: 2px;
 240   transition: background 1s ease-in-out;
 241   background: #000000;
 242 }
 243
 244 .variable:not(:last-child) {
 245   border-bottom: 1px dotted #008484;
 246   border-radius: 8px;
 247 }
 248
 249 .variable:last-child {
 250   margin-bottom: 2px;
 251 }
 252
 253 .variable[changed] {
 254   transition-duration: 0.4s;
 255   background: #FFCF00;
 256 }
 257
 258 .variable[added] {
 259   transition-duration: 0.4s;
 260   background: #008484;
 261 }
 262
 263 .variable > .title > .arrow {
 264   margin-top: -2px;
 265 }
 266
 267 .variable > .title > .name {
 268   color: #FF9F00;
 269   font-weight: 600;
 270 }
 271
 272 /**
 273  * Property element
 274  */
 275
 276 .property > .title > .arrow {
 277   margin-top: -2px;
 278 }
 279
 280 .property > .title > .key {
 281   color: #E7ADE7;
 282 }
 283
 284 /**
 285  * Non enumerable, configurable and writable variables and properties.
 286  */
 287
 288 .property[proto] > .title > .key,
 289 .variable[non-enumerable] > .title > .name,
 290 .property[non-enumerable] > .title > .key {
 291   opacity: 0.5;
 292 }
 293
 294 .variable[non-configurable] > .title > .name,
 295 .property[non-configurable] > .title > .key {
 296   border-bottom: 1px dashed #9C9CFF;
 297 }
 298
 299 .variable[non-writable] > .title > .name,
 300 .property[non-writable] > .title > .key {
 301   border-bottom: 1px dashed #FF0000;
 302 }
 303
 304 .variable[non-writable] > .title:after,
 305 .property[non-writable] > .title:after {
 306   content: " ";
 307   display: inline-block;
 308   width: 16px;
 309   height: 16px;
 310   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 311   opacity: 0.5;
 312 }
 313
 314 #element-tooltip > label {
 315   margin: 0 2px 0 2px;
 316 }
 317
 318 #element-tooltip > label[non-enumerable],
 319 #element-tooltip > label[non-configurable],
 320 #element-tooltip > label[non-writable]{
 321   text-decoration: line-through;
 322 }
 323
 324 /**
 325  * Property values colors
 326  */
 327
 328 .token-undefined {
 329   -moz-padding-start: 6px;
 330   color: #8050B0;
 331 }
 332
 333 .token-null {
 334   -moz-padding-start: 6px;
 335   color: #008484;
 336 }
 337
 338 .token-boolean {
 339   -moz-padding-start: 6px;
 340   color: #FFCF00;
 341 }
 342
 343 .token-number {
 344   -moz-padding-start: 6px;
 345   color: #E7ADE7;
 346 }
 347
 348 .token-string {
 349   -moz-padding-start: 6px;
 350   color: #9C9CFF;
 351 }
 352
 353 .token-other {
 354   -moz-padding-start: 6px;
 355   color: #FF9F00;
 356 }
 357
 358 /**
 359  * Expand/collapse arrow
 360  */
 361
 362 .arrow {
 363   width: 9px;
 364   height: 9px;
 365   -moz-margin-start: 5px;
 366   -moz-margin-end: 5px;
 367   margin-top: -2px;
 368   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 369 }
 370
 371 .arrow[open] {
 372   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 373 }
 374
 375 .scope > .title > .arrow {
 376   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 377 }
 378
 379 .scope > .title > .arrow[open] {
 380   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 381 }
 382
 383 /**
 384  * Animations
 385  */
 386
 387 .details[open][animated],
 388 .dbg-results-container[open][animated] {
 389   animation-duration: 0.25s;
 390   animation-name: showblock;
 391 }
 392
 393 @keyframes showblock {
 394   from {
 395     opacity: 0;
 396     transform-origin: top;
 397     transform: scaleY(0);
 398   }
 399
 400   to {
 401     opacity: 1;
 402     transform-origin: top;
 403     transform: scaleY(1);
 404   }
 405 }
 406
 407 /**
 408  * Toolbar Controls
 409  */
 410
 411 #toggle-panes {
 412   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 413   -moz-image-region: rect(0px, 16px, 16px, 0px);
 414 }
 415
 416 #toggle-panes:not([stackframesAndBreakpointsHidden]):not([variablesHidden]) {
 417   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 418 }
 419
 420 #toggle-panes:hover,
 421 #toggle-panes:hover:active {
 422   -moz-image-region: rect(0px, 32px, 16px, 16px);
 423 }
 424
 425 #resume {
 426   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 427   -moz-image-region: rect(0px, 16px, 16px, 0px);
 428 }
 429
 430 #resume[checked=true],
 431 #resume:hover {
 432   -moz-image-region: rect(0px, 32px, 16px, 16px);
 433 }
 434
 435 #step-over {
 436   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 437   -moz-image-region: rect(0px, 16px, 16px, 0px);
 438 }
 439 #step-over:hover {
 440   -moz-image-region: rect(0px, 32px, 16px, 16px);
 441 }
 442
 443 #step-in {
 444   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 445   -moz-image-region: rect(0px, 16px, 16px, 0px);
 446 }
 447 #step-in:hover {
 448   -moz-image-region: rect(0px, 32px, 16px, 16px);
 449 }
 450
 451 #step-out {
 452   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 453   -moz-image-region: rect(0px, 16px, 16px, 0px);
 454 }
 455 #step-out:hover {
 456   -moz-image-region: rect(0px, 32px, 16px, 16px);
 457 }
 458
 459 #debugger-controls > toolbarbutton {
 460 }
 461
 462 #debugger-controls > toolbarbutton:last-of-type {
 463 }
 464
 465 #debugger-controls {
 466 }