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