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   max-width: 350px;
  29 }
  30
  31 /**
  32  * Lists and headers
  33  */
  34
  35 .list-item {
  36   padding: 2px;
  37 }
  38
  39 .list-item.selected {
  40   background: #008484;
  41   color: #FFCF00;
  42 }
  43
  44 .list-item.empty {
  45   color: #8050B0;
  46 }
  47
  48 /**
  49  * Stack frames
  50  */
  51
  52 #stackframes {
  53   /* background-color: white; */
  54 }
  55
  56 .dbg-stackframe {
  57   -moz-padding-start: 4px;
  58   -moz-padding-end: 4px;
  59 }
  60
  61 .dbg-stackframe-name {
  62   -moz-padding-end: 4px;
  63   font-weight: 600;
  64 }
  65
  66 /**
  67  * Properties view
  68  */
  69
  70 #variables {
  71 /*  background-color: white; */
  72 }
  73
  74 /**
  75  * Property element details container
  76  */
  77
  78 .details {
  79   -moz-margin-start: 10px;
  80 }
  81
  82 /**
  83  * Scope element
  84  */
  85
  86 .scope > .title {
  87   background: #E7ADE7;
  88   border-radius: 5px;
  89   color: #000000;
  90 }
  91
  92 .scope > .title > .arrow {
  93   margin-top: -2px;
  94 }
  95
  96 .scope > .title > .name {
  97   padding-top: 2px;
  98 }
  99
 100 .scope > .details {
 101   -moz-margin-start: 2px;
 102   -moz-margin-end: 2px;
 103 }
 104
 105 /**
 106  * Variable element
 107  */
 108
 109 .variable {
 110   -moz-margin-start: 1px;
 111   -moz-margin-end: 1px;
 112   margin-top: 2px;
 113   border-bottom: 1px dotted #008484;
 114   -moz-transition: background 1s ease-in-out;
 115   background: #000000;
 116 }
 117
 118 .variable[changed] {
 119   -moz-transition-duration: 0.4s;
 120   background: #FFCF00;
 121 }
 122
 123 .variable[added] {
 124   -moz-transition-duration: 0.4s;
 125   background: #008484;
 126 }
 127
 128 .variable > .title > .arrow {
 129   margin-top: -2px;
 130 }
 131
 132 .variable > .title > .name {
 133   color: #FF9F00;
 134   font-weight: 600;
 135 }
 136
 137 /**
 138  * Property element
 139  */
 140
 141 .property > .title > .arrow {
 142   margin-top: -2px;
 143 }
 144
 145 .property > .title > .key {
 146   color: #E7ADE7;
 147 }
 148
 149 /**
 150  * Non enumerable, configurable and writable variables and properties.
 151  */
 152
 153 .property[proto] > .title > .key,
 154 .variable[non-enumerable] > .title > .name,
 155 .property[non-enumerable] > .title > .key {
 156   opacity: 0.5;
 157 }
 158
 159 .variable[non-configurable] > .title > .name,
 160 .property[non-configurable] > .title > .key {
 161   border-bottom: 1px dashed #9C9CFF;
 162 }
 163
 164 .variable[non-writable] > .title > .name,
 165 .property[non-writable] > .title > .key {
 166   border-bottom: 1px dashed #FF0000;
 167 }
 168
 169 .variable[non-writable] > .title:after,
 170 .property[non-writable] > .title:after {
 171   content: " ";
 172   display: inline-block;
 173   width: 16px;
 174   height: 16px;
 175   background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
 176   opacity: 0.5;
 177 }
 178
 179 /**
 180  * Property values colors
 181  */
 182
 183 .token-undefined {
 184   -moz-padding-start: 6px;
 185   color: #8050B0;
 186 }
 187
 188 .token-null {
 189   -moz-padding-start: 6px;
 190   color: #008484;
 191 }
 192
 193 .token-boolean {
 194   -moz-padding-start: 6px;
 195   color: #FFCF00;
 196 }
 197
 198 .token-number {
 199   -moz-padding-start: 6px;
 200   color: #E7ADE7;
 201 }
 202
 203 .token-string {
 204   -moz-padding-start: 6px;
 205   color: #9C9CFF;
 206 }
 207
 208 .token-other {
 209   -moz-padding-start: 6px;
 210   color: #FF9F00;
 211 }
 212
 213 /**
 214  * Expand/collapse arrow
 215  */
 216
 217 .arrow {
 218   width: 9px;
 219   height: 9px;
 220   -moz-margin-start: 5px;
 221   -moz-margin-end: 5px;
 222   margin-top: -2px;
 223   background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat;
 224 }
 225
 226 .arrow[open] {
 227   background-image: url("chrome://global/skin/tree/twisty-open.gif");
 228 }
 229
 230 .scope > .title > .arrow {
 231   background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif");
 232 }
 233
 234 .scope > .title > .arrow[open] {
 235   background-image: url("chrome://global/skin/tree/twisty-open-selected.gif");
 236 }
 237
 238 /**
 239  * Animations
 240  */
 241
 242 .details[open][animated] {
 243   -moz-animation-duration: 0.25s;
 244   -moz-animation-name: showblock;
 245 }
 246
 247 @-moz-keyframes showblock {
 248   from {
 249     opacity: 0;
 250     -moz-transform-origin: top;
 251     -moz-transform: scaleY(0);
 252   }
 253
 254   to {
 255     opacity: 1;
 256     -moz-transform-origin: top;
 257     -moz-transform: scaleY(1);
 258   }
 259 }
 260
 261 /**
 262  * Toolbar Controls
 263  */
 264
 265 #resume {
 266   list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
 267   -moz-image-region: rect(0px, 16px, 16px, 0px);
 268 }
 269
 270 #resume[checked=true],
 271 #resume:hover {
 272   -moz-image-region: rect(0px, 32px, 16px, 16px);
 273 }
 274
 275 #step-over {
 276   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 277   -moz-image-region: rect(0px, 16px, 16px, 0px);
 278 }
 279 #step-over:hover {
 280   -moz-image-region: rect(0px, 32px, 16px, 16px);
 281 }
 282
 283 #step-in {
 284   list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
 285   -moz-image-region: rect(0px, 16px, 16px, 0px);
 286 }
 287 #step-in:hover {
 288   -moz-image-region: rect(0px, 32px, 16px, 16px);
 289 }
 290
 291 #step-out {
 292   list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
 293   -moz-image-region: rect(0px, 16px, 16px, 0px);
 294 }
 295 #step-out:hover {
 296   -moz-image-region: rect(0px, 32px, 16px, 16px);
 297 }
 298
 299 #debugger-controls > toolbarbutton {
 300 }
 301
 302 #debugger-controls > toolbarbutton:last-of-type {
 303 }
 304
 305 #debugger-controls {
 306 }