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