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/. */
5 /* Reload and waiting notices */
11 background-color: #000000; /* Toolbars */
12 color: #FF9F00; /* Light foreground text */
15 #empty-notice > button {
19 list-style-image: url("profiler-stopwatch.svg");
22 #empty-notice > button .button-text {
33 #snapshots-pane > tabs {
34 -moz-border-end: 1px solid;
37 #snapshots-pane .devtools-toolbar {
38 -moz-border-end: 1px solid;
40 -moz-border-end-color: #9C9CFF; /* Match the splitter color. */
44 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-tbutton.svg");
47 #record-snapshot:hover {
48 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
51 #record-snapshot[checked] {
52 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked-tbutton.svg");
55 #record-snapshot[checked]:hover {
56 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
61 .snapshot-item-thumbnail {
62 image-rendering: -moz-crisp-edges;
63 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);
64 background-size: 12px 12px, 12px 12px;
65 background-position: 0px 0px, 6px 6px;
66 background-repeat: repeat, repeat;
69 .snapshot-item-thumbnail[flipped=true] {
70 transform: scaleY(-1);
73 .snapshot-item-thumbnail {
74 background-color: #000000;
77 .snapshot-item-details {
78 -moz-padding-start: 6px;
81 .snapshot-item-calls {
93 color: #A09090; /* Foreground (Text) - Grey */
97 text-decoration: underline;
101 .snapshot-item-save[disabled=true] {
102 text-decoration: none;
103 pointer-events: none;
106 .snapshot-item-footer[saving]::before {
107 display: inline-block;
109 background: url("chrome://global/skin/icons/loading.gif") center no-repeat;
113 -moz-margin-end: 4px;
116 #snapshots-list .selected label {
117 /* Text inside a selected item should not be custom colored. */
118 color: inherit !important;
121 /* Debugging pane controls */
123 #debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
129 list-style-image: url("debugger-play.png");
130 -moz-image-region: rect(0px,32px,16px,16px);
134 list-style-image: url("debugger-step-over.png");
138 list-style-image: url("debugger-step-in.png");
142 list-style-image: url("debugger-step-out.png");
145 @media (min-resolution: 2dppx) {
147 list-style-image: url(debugger-play@2x.png);
148 -moz-image-region: rect(0px,64px,32px,32px);
152 list-style-image: url(debugger-step-over@2x.png);
156 list-style-image: url(debugger-step-in@2x.png);
160 list-style-image: url(debugger-step-out@2x.png);
164 #debugging-controls > toolbarbutton {
165 transition: opacity 0.15s ease-in-out;
168 #debugging-controls > toolbarbutton[disabled=true] {
173 -moz-padding-end: 24px;
176 #calls-slider .scale-slider {
180 #debugging-toolbar-sizer-button {
181 /* This button's only purpose in life is to make the
182 container .devtools-toolbar have the right height. */
187 /* Calls list pane */
189 #calls-list .side-menu-widget-container {
190 background: transparent;
193 #calls-list .side-menu-widget-item {
197 /* Calls list items */
199 #calls-list .side-menu-widget-item {
200 border-color: #504848;
201 border-bottom-color: transparent;
204 .call-item-view:hover {
205 background-color: #402800;
208 .call-item-view[draw-call] {
209 background-color: #403800;
212 .call-item-view[interesting-call] {
213 background-color: #272740;
217 width: calc(3em + 22px);
218 -moz-padding-start: 22px;
219 -moz-padding-end: 4px;
222 -moz-border-end: 1px solid;
223 -moz-margin-end: 6px;
226 .selected .call-item-gutter {
227 background-image: url("editor-debug-location.png");
228 background-repeat: no-repeat;
229 background-position: 6px center;
230 background-size: 12px;
233 @media (min-resolution: 2dppx) {
234 .selected .call-item-gutter {
235 background-image: url("editor-debug-location@2x.png");
240 background-color: #A09090;
250 color: #FFCF00; /* Highlight Orange */
254 color: #9C9CFF; /* Highlight Blue */
257 .call-item-location {
258 -moz-padding-start: 2px;
259 -moz-padding-end: 6px;
264 .call-item-location:hover {
265 color: #FFCF00; /* Highlight Blue */
268 .call-item-view:hover .call-item-location,
269 .call-item-view[expanded] .call-item-location {
270 text-decoration: underline;
273 .call-item-location {
274 border-color: #A09090;
275 color: #9C9CFF; /* Highlight Blue-Grey */
279 -moz-padding-start: calc(3em + 22px);
280 padding-bottom: 10px;
287 .call-item-stack-fn {
292 .call-item-stack-fn-location {
293 -moz-padding-start: 2px;
294 -moz-padding-end: 6px;
297 text-decoration: underline;
300 .call-item-stack-fn-name {
301 color: #A09090; /* Content (Text) - Light */
304 .theme-dark .call-item-stack-fn-location {
305 color: #FF9F00; /* Highlight Blue-Grey */
308 .theme-dark .call-item-stack-fn-location:hover {
309 color: #9C9CFF; /* Highlight Blue */
312 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
313 /* Text inside a selected item should not be custom colored. */
314 color: inherit !important;
317 /* Rendering preview */
319 #screenshot-container {
320 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);
321 background-size: 30px 30px, 30px 30px;
322 background-position: 0px 0px, 15px 15px;
323 background-repeat: repeat, repeat;
326 #screenshot-container {
327 background-color: #000000;
330 @media (min-width: 701px) {
331 #screenshot-container {
338 @media (max-width: 700px) {
339 #screenshot-container {
347 background-image: -moz-element(#screenshot-rendering);
348 background-size: contain;
349 background-position: center, center;
350 background-repeat: no-repeat;
353 #screenshot-image[flipped=true] {
354 transform: scaleY(-1);
357 #screenshot-dimensions {
363 #screenshot-dimensions {
364 background-color: #402800;
367 /* Snapshot filmstrip */
369 #snapshot-filmstrip {
373 #snapshot-filmstrip {
374 border-top: 1px solid #000;
375 color: #FF9F00; /* Light foreground text */
378 .filmstrip-thumbnail {
379 image-rendering: -moz-crisp-edges;
380 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);
381 background-size: 12px 12px, 12px 12px;
382 background-position: 0px -1px, 6px 5px;
383 background-repeat: repeat, repeat;
384 background-origin: content-box;
388 transition: opacity 0.1s ease-in-out;
391 .filmstrip-thumbnail[flipped=true] {
392 transform: scaleY(-1);
395 .filmstrip-thumbnail {
396 background-color: #000000;
399 .filmstrip-thumbnail {
400 -moz-border-end: 1px solid #000;
403 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
404 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
405 border: 1px solid #9C9CFF; /* Highlight Blue */