1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/canvasdebugger.inc.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,501 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this file,
1.6 + * You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +%filter substitution
1.9 +%define darkCheckerboardBackground #000
1.10 +%define lightCheckerboardBackground #fff
1.11 +%define checkerboardCell rgba(128,128,128,0.2)
1.12 +%define checkerboardPattern linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@), linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@)
1.13 +%define gutterWidth 3em
1.14 +%define gutterPaddingStart 22px
1.15 +
1.16 +/* Reload and waiting notices */
1.17 +
1.18 +.notice-container {
1.19 + margin-top: -50vh;
1.20 + font-size: 120%;
1.21 +}
1.22 +
1.23 +.theme-dark .notice-container {
1.24 + background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
1.25 + color: #f5f7fa; /* Light foreground text */
1.26 +}
1.27 +
1.28 +.theme-light .notice-container {
1.29 + background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
1.30 + color: #585959; /* Grey foreground text */
1.31 +}
1.32 +
1.33 +#reload-notice > button {
1.34 + min-height: 2em;
1.35 +}
1.36 +
1.37 +#empty-notice > button {
1.38 + min-width: 30px;
1.39 + min-height: 28px;
1.40 + margin: 0;
1.41 + list-style-image: url(profiler-stopwatch.png);
1.42 + -moz-image-region: rect(0px,16px,16px,0px);
1.43 +}
1.44 +
1.45 +#empty-notice > button .button-text {
1.46 + display: none;
1.47 +}
1.48 +
1.49 +.theme-dark #import-notice {
1.50 + font-size: 250%;
1.51 + color: rgba(255,255,255,0.2);
1.52 +}
1.53 +
1.54 +.theme-light #import-notice {
1.55 + font-size: 250%;
1.56 + color: rgba(0,0,0,0.2);
1.57 +}
1.58 +
1.59 +/* Snapshots pane */
1.60 +
1.61 +#snapshots-pane > tabs {
1.62 + -moz-border-end: 1px solid;
1.63 +}
1.64 +
1.65 +#snapshots-pane .devtools-toolbar {
1.66 + -moz-border-end: 1px solid;
1.67 +}
1.68 +
1.69 +.theme-dark #snapshots-pane > tabs,
1.70 +.theme-dark #snapshots-pane .devtools-toolbar {
1.71 + -moz-border-end-color: black; /* Match the splitter color. */
1.72 +}
1.73 +
1.74 +.theme-light #snapshots-pane > tabs,
1.75 +.theme-light #snapshots-pane .devtools-toolbar {
1.76 + -moz-border-end-color: #aaa; /* Match the splitter color. */
1.77 +}
1.78 +
1.79 +#record-snapshot {
1.80 + list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.png");
1.81 + -moz-image-region: rect(0px,16px,16px,0px);
1.82 +}
1.83 +
1.84 +#record-snapshot[checked] {
1.85 + -moz-image-region: rect(0px,32px,16px,16px);
1.86 +}
1.87 +
1.88 +/* Snapshots items */
1.89 +
1.90 +.snapshot-item-thumbnail {
1.91 + image-rendering: -moz-crisp-edges;
1.92 + background-image: @checkerboardPattern@;
1.93 + background-size: 12px 12px, 12px 12px;
1.94 + background-position: 0px 0px, 6px 6px;
1.95 + background-repeat: repeat, repeat;
1.96 +}
1.97 +
1.98 +.snapshot-item-thumbnail[flipped=true] {
1.99 + transform: scaleY(-1);
1.100 +}
1.101 +
1.102 +.theme-dark .snapshot-item-thumbnail {
1.103 + background-color: @darkCheckerboardBackground@;
1.104 +}
1.105 +
1.106 +.theme-light .snapshot-item-thumbnail {
1.107 + background-color: @lightCheckerboardBackground@;
1.108 +}
1.109 +
1.110 +.snapshot-item-details {
1.111 + -moz-padding-start: 6px;
1.112 +}
1.113 +
1.114 +.snapshot-item-calls {
1.115 + padding-top: 4px;
1.116 + font-size: 80%;
1.117 +}
1.118 +
1.119 +.snapshot-item-save {
1.120 + padding-bottom: 2px;
1.121 + font-size: 90%;
1.122 +}
1.123 +
1.124 +.theme-dark .snapshot-item-calls,
1.125 +.theme-dark .snapshot-item-save {
1.126 + color: #b6babf; /* Foreground (Text) - Grey */
1.127 +}
1.128 +
1.129 +.theme-light .snapshot-item-calls,
1.130 +.theme-light .snapshot-item-save {
1.131 + color: #585959; /* Foreground (Text) - Grey */
1.132 +}
1.133 +
1.134 +.snapshot-item-save {
1.135 + text-decoration: underline;
1.136 + cursor: pointer;
1.137 +}
1.138 +
1.139 +.snapshot-item-save[disabled=true] {
1.140 + text-decoration: none;
1.141 + pointer-events: none;
1.142 +}
1.143 +
1.144 +.snapshot-item-footer[saving]::before {
1.145 + display: inline-block;
1.146 + content: "";
1.147 + background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
1.148 + width: 16px;
1.149 + height: 16px;
1.150 + margin-top: -2px;
1.151 + -moz-margin-end: 4px;
1.152 +}
1.153 +
1.154 +#snapshots-list .selected label {
1.155 + /* Text inside a selected item should not be custom colored. */
1.156 + color: inherit !important;
1.157 +}
1.158 +
1.159 +/* Debugging pane controls */
1.160 +
1.161 +#resume {
1.162 + list-style-image: url(debugger-play.png);
1.163 + -moz-image-region: rect(0px,32px,16px,16px);
1.164 +}
1.165 +
1.166 +#step-over {
1.167 + list-style-image: url(debugger-step-over.png);
1.168 +}
1.169 +
1.170 +#step-in {
1.171 + list-style-image: url(debugger-step-in.png);
1.172 +}
1.173 +
1.174 +#step-out {
1.175 + list-style-image: url(debugger-step-out.png);
1.176 +}
1.177 +
1.178 +#debugging-controls > toolbarbutton {
1.179 + transition: opacity 0.15s ease-in-out;
1.180 +}
1.181 +
1.182 +#debugging-controls > toolbarbutton[disabled=true] {
1.183 + opacity: 0.5;
1.184 +}
1.185 +
1.186 +#calls-slider {
1.187 + -moz-padding-end: 24px;
1.188 +}
1.189 +
1.190 +#calls-slider .scale-slider {
1.191 + margin: 0;
1.192 +}
1.193 +
1.194 +#debugging-toolbar-sizer-button {
1.195 + /* This button's only purpose in life is to make the
1.196 + container .devtools-toolbar have the right height. */
1.197 + visibility: hidden;
1.198 + min-width: 1px;
1.199 +}
1.200 +
1.201 +/* Calls list pane */
1.202 +
1.203 +#calls-list .side-menu-widget-container {
1.204 + background: transparent;
1.205 +}
1.206 +
1.207 +#calls-list .side-menu-widget-item {
1.208 + padding: 0;
1.209 +}
1.210 +
1.211 +/* Calls list items */
1.212 +
1.213 +.theme-dark #calls-list .side-menu-widget-item {
1.214 + border-color: #111;
1.215 + border-bottom-color: transparent;
1.216 +}
1.217 +
1.218 +.theme-light #calls-list .side-menu-widget-item {
1.219 + border-color: #eee;
1.220 + border-bottom-color: transparent;
1.221 +}
1.222 +
1.223 +.theme-dark .call-item-view:hover {
1.224 + background-color: rgba(255,255,255,.025);
1.225 +}
1.226 +
1.227 +.theme-light .call-item-view:hover {
1.228 + background-color: rgba(0,0,0,.025);
1.229 +}
1.230 +
1.231 +.theme-dark .call-item-view[draw-call] {
1.232 + background-color: rgba(112,191,83,0.15);
1.233 +}
1.234 +
1.235 +.theme-light .call-item-view[draw-call] {
1.236 + background-color: rgba(44,187,15,0.1);
1.237 +}
1.238 +
1.239 +.theme-dark .call-item-view[interesting-call] {
1.240 + background-color: rgba(223,128,255,0.15);
1.241 +}
1.242 +
1.243 +.theme-light .call-item-view[interesting-call] {
1.244 + background-color: rgba(184,46,229,0.1);
1.245 +}
1.246 +
1.247 +.call-item-gutter {
1.248 + width: calc(@gutterWidth@ + @gutterPaddingStart@);
1.249 + -moz-padding-start: @gutterPaddingStart@;
1.250 + -moz-padding-end: 4px;
1.251 + padding-top: 2px;
1.252 + padding-bottom: 2px;
1.253 + -moz-border-end: 1px solid;
1.254 + -moz-margin-end: 6px;
1.255 +}
1.256 +
1.257 +.selected .call-item-gutter {
1.258 + background-image: url("editor-debug-location.png");
1.259 + background-repeat: no-repeat;
1.260 + background-position: 6px center;
1.261 + background-size: 12px;
1.262 +}
1.263 +
1.264 +.theme-dark .call-item-gutter {
1.265 + background-color: #181d20;
1.266 + color: #5f7387;
1.267 + border-color: #000;
1.268 +}
1.269 +
1.270 +.theme-light .call-item-gutter {
1.271 + background-color: #f7f7f7;
1.272 + color: #667380;
1.273 + border-color: #aaa;
1.274 +}
1.275 +
1.276 +.call-item-index {
1.277 + text-align: end;
1.278 +}
1.279 +
1.280 +.theme-dark .call-item-context {
1.281 + color: #eb5368; /* Highlight Orange */
1.282 +}
1.283 +
1.284 +.theme-light .call-item-context {
1.285 + color: #f13c00; /* Highlight Orange */
1.286 +}
1.287 +
1.288 +.theme-dark .call-item-name {
1.289 + color: #46afe3; /* Highlight Blue */
1.290 +}
1.291 +
1.292 +.theme-light .call-item-name {
1.293 + color: #0088cc; /* Highlight Blue */
1.294 +}
1.295 +
1.296 +.call-item-location {
1.297 + -moz-padding-start: 2px;
1.298 + -moz-padding-end: 6px;
1.299 + text-align: end;
1.300 + cursor: pointer;
1.301 +}
1.302 +
1.303 +.theme-dark .call-item-location:hover {
1.304 + color: #0088cc; /* Highlight Blue */
1.305 +}
1.306 +
1.307 +.theme-light .call-item-location:hover {
1.308 + color: #46afe3; /* Highlight Blue */
1.309 +}
1.310 +
1.311 +.call-item-view:hover .call-item-location,
1.312 +.call-item-view[expanded] .call-item-location {
1.313 + text-decoration: underline;
1.314 +}
1.315 +
1.316 +.theme-dark .call-item-location {
1.317 + border-color: #111;
1.318 + color: #5e88b0; /* Highlight Blue-Grey */
1.319 +}
1.320 +
1.321 +.theme-light .call-item-location {
1.322 + border-color: #eee;
1.323 + color: #5f88b0; /* Highlight Blue-Grey */
1.324 +}
1.325 +
1.326 +.call-item-stack {
1.327 + -moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
1.328 + padding-bottom: 10px;
1.329 +}
1.330 +
1.331 +.theme-dark .call-item-stack {
1.332 + background: rgba(0,0,0,0.9);
1.333 +}
1.334 +
1.335 +.theme-light .call-item-stack {
1.336 + background: rgba(255,255,255,0.9);
1.337 +}
1.338 +
1.339 +.call-item-stack-fn {
1.340 + padding-top: 2px;
1.341 + padding-bottom: 2px;
1.342 +}
1.343 +
1.344 +.call-item-stack-fn-location {
1.345 + -moz-padding-start: 2px;
1.346 + -moz-padding-end: 6px;
1.347 + text-align: end;
1.348 + cursor: pointer;
1.349 + text-decoration: underline;
1.350 +}
1.351 +
1.352 +.theme-dark .call-item-stack-fn-name {
1.353 + color: #a9bacb; /* Content (Text) - Light */
1.354 +}
1.355 +
1.356 +.theme-light .call-item-stack-fn-name {
1.357 + color: #667380; /* Content (Text) - Dark Grey */
1.358 +}
1.359 +
1.360 +.theme-dark .call-item-stack-fn-location {
1.361 + color: #5e88b0; /* Highlight Blue-Grey */
1.362 +}
1.363 +
1.364 +.theme-light .call-item-stack-fn-location {
1.365 + color: #5e88b0; /* Highlight Blue-Grey */
1.366 +}
1.367 +
1.368 +.theme-dark .call-item-stack-fn-location:hover {
1.369 + color: #0088cc; /* Highlight Blue */
1.370 +}
1.371 +
1.372 +.theme-light .call-item-stack-fn-location:hover {
1.373 + color: #46afe3; /* Highlight Blue */
1.374 +}
1.375 +
1.376 +#calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
1.377 + /* Text inside a selected item should not be custom colored. */
1.378 + color: inherit !important;
1.379 +}
1.380 +
1.381 +/* Rendering preview */
1.382 +
1.383 +#screenshot-container {
1.384 + background-image: @checkerboardPattern@;
1.385 + background-size: 30px 30px, 30px 30px;
1.386 + background-position: 0px 0px, 15px 15px;
1.387 + background-repeat: repeat, repeat;
1.388 +}
1.389 +
1.390 +.theme-dark #screenshot-container {
1.391 + background-color: @darkCheckerboardBackground@;
1.392 +}
1.393 +
1.394 +.theme-light #screenshot-container {
1.395 + background-color: @lightCheckerboardBackground@;
1.396 +}
1.397 +
1.398 +@media (min-width: 701px) {
1.399 + #screenshot-container {
1.400 + width: 30vw;
1.401 + max-width: 50vw;
1.402 + min-width: 100px;
1.403 + }
1.404 +}
1.405 +
1.406 +@media (max-width: 700px) {
1.407 + #screenshot-container {
1.408 + height: 40vh;
1.409 + max-height: 70vh;
1.410 + min-height: 100px;
1.411 + }
1.412 +}
1.413 +
1.414 +#screenshot-image {
1.415 + background-image: -moz-element(#screenshot-rendering);
1.416 + background-size: contain;
1.417 + background-position: center, center;
1.418 + background-repeat: no-repeat;
1.419 +}
1.420 +
1.421 +#screenshot-image[flipped=true] {
1.422 + transform: scaleY(-1);
1.423 +}
1.424 +
1.425 +#screenshot-dimensions {
1.426 + padding-top: 4px;
1.427 + padding-bottom: 4px;
1.428 + text-align: center;
1.429 +}
1.430 +
1.431 +.theme-dark #screenshot-dimensions {
1.432 + background-color: rgba(0,0,0,0.4);
1.433 +}
1.434 +
1.435 +.theme-light #screenshot-dimensions {
1.436 + background-color: rgba(255,255,255,0.8);
1.437 +}
1.438 +
1.439 +/* Snapshot filmstrip */
1.440 +
1.441 +#snapshot-filmstrip {
1.442 + overflow: hidden;
1.443 +}
1.444 +
1.445 +.theme-dark #snapshot-filmstrip {
1.446 + border-top: 1px solid #000;
1.447 + background-image: url(background-noise-toolbar.png);
1.448 + color: #f5f7fa; /* Light foreground text */
1.449 +}
1.450 +
1.451 +.theme-light #snapshot-filmstrip {
1.452 + border-top: 1px solid #aaa;
1.453 + background-image: url(background-noise-toolbar.png);
1.454 + color: #585959; /* Grey foreground text */
1.455 +}
1.456 +
1.457 +.filmstrip-thumbnail {
1.458 + image-rendering: -moz-crisp-edges;
1.459 + background-image: @checkerboardPattern@;
1.460 + background-size: 12px 12px, 12px 12px;
1.461 + background-position: 0px -1px, 6px 5px;
1.462 + background-repeat: repeat, repeat;
1.463 + background-origin: content-box;
1.464 + cursor: pointer;
1.465 + padding-top: 1px;
1.466 + padding-bottom: 1px;
1.467 + transition: opacity 0.1s ease-in-out;
1.468 +}
1.469 +
1.470 +.filmstrip-thumbnail[flipped=true] {
1.471 + transform: scaleY(-1);
1.472 +}
1.473 +
1.474 +.theme-dark .filmstrip-thumbnail {
1.475 + background-color: @darkCheckerboardBackground@;
1.476 +}
1.477 +
1.478 +.theme-light .filmstrip-thumbnail {
1.479 + background-color: @lightCheckerboardBackground@;
1.480 +}
1.481 +
1.482 +.theme-dark .filmstrip-thumbnail {
1.483 + -moz-border-end: 1px solid #000;
1.484 +}
1.485 +
1.486 +.theme-light .filmstrip-thumbnail {
1.487 + -moz-border-end: 1px solid #aaa;
1.488 +}
1.489 +
1.490 +.theme-dark #snapshot-filmstrip > .filmstrip-thumbnail:hover,
1.491 +.theme-dark #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
1.492 + border: 1px solid #46afe3; /* Highlight Blue */
1.493 + margin: 0 0 0 -1px;
1.494 + padding: 0;
1.495 + opacity: 0.66;
1.496 +}
1.497 +
1.498 +.theme-light #snapshot-filmstrip > .filmstrip-thumbnail:hover,
1.499 +.theme-light #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
1.500 + border: 1px solid #0088cc; /* Highlight Blue */
1.501 + margin: 0 0 0 -1px;
1.502 + padding: 0;
1.503 + opacity: 0.66;
1.504 +}
