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