LCARStrek/browser/devtools/canvasdebugger.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 file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* Reload and waiting notices */
   6
   7 .notice-container {
   8   margin-top: -50vh;
   9   font-size: 120%;
  10
  11   background-color: #000000; /* Toolbars */
  12   color: #FF9F00; /* Light foreground text */
  13 }
  14
  15 #empty-notice > button {
  16   min-width: 30px;
  17   min-height: 28px;
  18   margin: 0;
  19   list-style-image: url("profiler-stopwatch.svg");
  20 }
  21
  22 #empty-notice > button .button-text {
  23   display: none;
  24 }
  25
  26 #import-notice {
  27   font-size: 250%;
  28   color: #FFCF00;
  29 }
  30
  31 /* Snapshots pane */
  32
  33 #snapshots-pane > tabs {
  34   -moz-border-end: 1px solid;
  35 }
  36
  37 #snapshots-pane .devtools-toolbar {
  38   -moz-border-end: 1px solid;
  39
  40   -moz-border-end-color: #9C9CFF; /* Match the splitter color. */
  41 }
  42
  43 #record-snapshot {
  44   list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-tbutton.svg");
  45 }
  46
  47 #record-snapshot:hover {
  48   list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
  49 }
  50
  51 #record-snapshot[checked] {
  52   list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked-tbutton.svg");
  53 }
  54
  55 #record-snapshot[checked]:hover {
  56   list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
  57 }
  58
  59 /* Snapshots items */
  60
  61 .snapshot-item-thumbnail {
  62   image-rendering: -moz-crisp-edges;
  63   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
  64   background-size: 12px 12px, 12px 12px;
  65   background-position: 0px 0px, 6px 6px;
  66   background-repeat: repeat, repeat;
  67 }
  68
  69 .snapshot-item-thumbnail[flipped=true] {
  70   transform: scaleY(-1);
  71 }
  72
  73 .snapshot-item-thumbnail {
  74   background-color: #000000;
  75 }
  76
  77 .snapshot-item-details {
  78   -moz-padding-start: 6px;
  79 }
  80
  81 .snapshot-item-calls {
  82   padding-top: 4px;
  83   font-size: 80%;
  84 }
  85
  86 .snapshot-item-save {
  87   padding-bottom: 2px;
  88   font-size: 90%;
  89 }
  90
  91 .snapshot-item-calls,
  92 .snapshot-item-save {
  93   color: #A09090; /* Foreground (Text) - Grey */
  94 }
  95
  96 .snapshot-item-save {
  97   text-decoration: underline;
  98   cursor: pointer;
  99 }
 100
 101 .snapshot-item-save[disabled=true] {
 102   text-decoration: none;
 103   pointer-events: none;
 104 }
 105
 106 .snapshot-item-footer[saving]::before {
 107   display: inline-block;
 108   content: "";
 109   background: url("chrome://global/skin/icons/loading.gif") center no-repeat;
 110   width: 16px;
 111   height: 16px;
 112   margin-top: -2px;
 113   -moz-margin-end: 4px;
 114 }
 115
 116 #snapshots-list .selected label {
 117   /* Text inside a selected item should not be custom colored. */
 118   color: inherit !important;
 119 }
 120
 121 /* Debugging pane controls */
 122
 123 #debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
 124   width: 16px;
 125   height: 16px;
 126 }
 127
 128 #resume {
 129   list-style-image: url("debugger-play.png");
 130   -moz-image-region: rect(0px,32px,16px,16px);
 131 }
 132
 133 #step-over {
 134   list-style-image: url("debugger-step-over.png");
 135 }
 136
 137 #step-in {
 138   list-style-image: url("debugger-step-in.png");
 139 }
 140
 141 #step-out {
 142   list-style-image: url("debugger-step-out.png");
 143 }
 144
 145 @media (min-resolution: 2dppx) {
 146   #resume {
 147     list-style-image: url(debugger-play@2x.png);
 148     -moz-image-region: rect(0px,64px,32px,32px);
 149   }
 150
 151   #step-over {
 152     list-style-image: url(debugger-step-over@2x.png);
 153   }
 154
 155   #step-in {
 156     list-style-image: url(debugger-step-in@2x.png);
 157   }
 158
 159   #step-out {
 160     list-style-image: url(debugger-step-out@2x.png);
 161   }
 162 }
 163
 164 #debugging-controls > toolbarbutton {
 165   transition: opacity 0.15s ease-in-out;
 166 }
 167
 168 #debugging-controls > toolbarbutton[disabled=true] {
 169   opacity: 0.5;
 170 }
 171
 172 #calls-slider {
 173   -moz-padding-end: 24px;
 174 }
 175
 176 #calls-slider .scale-slider {
 177   margin: 0;
 178 }
 179
 180 #debugging-toolbar-sizer-button {
 181   /* This button's only purpose in life is to make the
 182      container .devtools-toolbar have the right height. */
 183   visibility: hidden;
 184   min-width: 1px;
 185 }
 186
 187 /* Calls list pane */
 188
 189 #calls-list .side-menu-widget-container {
 190   background: transparent;
 191 }
 192
 193 #calls-list .side-menu-widget-item {
 194   padding: 0;
 195 }
 196
 197 /* Calls list items */
 198
 199 #calls-list .side-menu-widget-item {
 200   border-color: #504848;
 201   border-bottom-color: transparent;
 202 }
 203
 204 .call-item-view:hover {
 205   background-color: #402800;
 206 }
 207
 208 .call-item-view[draw-call] {
 209   background-color: #403800;
 210 }
 211
 212 .call-item-view[interesting-call] {
 213   background-color: #272740;
 214 }
 215
 216 .call-item-gutter {
 217   width: calc(3em + 22px);
 218   -moz-padding-start: 22px;
 219   -moz-padding-end: 4px;
 220   padding-top: 2px;
 221   padding-bottom: 2px;
 222   -moz-border-end: 1px solid;
 223   -moz-margin-end: 6px;
 224 }
 225
 226 .selected .call-item-gutter {
 227   background-image: url("editor-debug-location.png");
 228   background-repeat: no-repeat;
 229   background-position: 6px center;
 230   background-size: 12px;
 231 }
 232
 233 @media (min-resolution: 2dppx) {
 234   .selected .call-item-gutter {
 235     background-image: url("editor-debug-location@2x.png");
 236   }
 237 }
 238
 239 .call-item-gutter {
 240   background-color: #A09090;
 241   color: #000000;
 242   border-color: #000;
 243 }
 244
 245 .call-item-index {
 246   text-align: end;
 247 }
 248
 249 .call-item-context {
 250   color: #FFCF00; /* Highlight Orange */
 251 }
 252
 253 .call-item-name {
 254   color: #9C9CFF; /* Highlight Blue */
 255 }
 256
 257 .call-item-location {
 258   -moz-padding-start: 2px;
 259   -moz-padding-end: 6px;
 260   text-align: end;
 261   cursor: pointer;
 262 }
 263
 264 .call-item-location:hover {
 265   color: #FFCF00; /* Highlight Blue */
 266 }
 267
 268 .call-item-view:hover .call-item-location,
 269 .call-item-view[expanded] .call-item-location {
 270   text-decoration: underline;
 271 }
 272
 273 .call-item-location {
 274   border-color: #A09090;
 275   color: #9C9CFF; /* Highlight Blue-Grey */
 276 }
 277
 278 .call-item-stack {
 279   -moz-padding-start: calc(3em + 22px);
 280   padding-bottom: 10px;
 281 }
 282
 283 .call-item-stack {
 284   background: #403800;
 285 }
 286
 287 .call-item-stack-fn {
 288   padding-top: 2px;
 289   padding-bottom: 2px;
 290 }
 291
 292 .call-item-stack-fn-location {
 293   -moz-padding-start: 2px;
 294   -moz-padding-end: 6px;
 295   text-align: end;
 296   cursor: pointer;
 297   text-decoration: underline;
 298 }
 299
 300 .call-item-stack-fn-name {
 301   color: #A09090; /* Content (Text) - Light */
 302 }
 303
 304 .theme-dark .call-item-stack-fn-location {
 305   color: #FF9F00; /* Highlight Blue-Grey */
 306 }
 307
 308 .theme-dark .call-item-stack-fn-location:hover {
 309   color: #9C9CFF; /* Highlight Blue */
 310 }
 311
 312 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
 313   /* Text inside a selected item should not be custom colored. */
 314   color: inherit !important;
 315 }
 316
 317 /* Rendering preview */
 318
 319 #screenshot-container {
 320   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
 321   background-size: 30px 30px, 30px 30px;
 322   background-position: 0px 0px, 15px 15px;
 323   background-repeat: repeat, repeat;
 324 }
 325
 326 #screenshot-container {
 327   background-color: #000000;
 328 }
 329
 330 @media (min-width: 701px) {
 331   #screenshot-container {
 332     width: 30vw;
 333     max-width: 50vw;
 334     min-width: 100px;
 335   }
 336 }
 337
 338 @media (max-width: 700px) {
 339   #screenshot-container {
 340     height: 40vh;
 341     max-height: 70vh;
 342     min-height: 100px;
 343   }
 344 }
 345
 346 #screenshot-image {
 347   background-image: -moz-element(#screenshot-rendering);
 348   background-size: contain;
 349   background-position: center, center;
 350   background-repeat: no-repeat;
 351 }
 352
 353 #screenshot-image[flipped=true] {
 354   transform: scaleY(-1);
 355 }
 356
 357 #screenshot-dimensions {
 358   padding-top: 4px;
 359   padding-bottom: 4px;
 360   text-align: center;
 361 }
 362
 363 #screenshot-dimensions {
 364   background-color: #402800;
 365 }
 366
 367 /* Snapshot filmstrip */
 368
 369 #snapshot-filmstrip {
 370   overflow: hidden;
 371 }
 372
 373 #snapshot-filmstrip {
 374   border-top: 1px solid #000;
 375   color: #FF9F00; /* Light foreground text */
 376 }
 377
 378 .filmstrip-thumbnail {
 379   image-rendering: -moz-crisp-edges;
 380   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
 381   background-size: 12px 12px, 12px 12px;
 382   background-position: 0px -1px, 6px 5px;
 383   background-repeat: repeat, repeat;
 384   background-origin: content-box;
 385   cursor: pointer;
 386   padding-top: 1px;
 387   padding-bottom: 1px;
 388   transition: opacity 0.1s ease-in-out;
 389 }
 390
 391 .filmstrip-thumbnail[flipped=true] {
 392   transform: scaleY(-1);
 393 }
 394
 395 .filmstrip-thumbnail {
 396   background-color: #000000;
 397 }
 398
 399 .filmstrip-thumbnail {
 400   -moz-border-end: 1px solid #000;
 401 }
 402
 403 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
 404 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
 405   border: 1px solid #9C9CFF; /* Highlight Blue */
 406   margin: 0 0 0 -1px;
 407   padding: 0;
 408   opacity: 0.66;
 409 }