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