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