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