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