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