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