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