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