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.svg");
47 #record-snapshot[checked] {
48 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
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;
61 .snapshot-item-thumbnail[flipped=true] {
62 transform: scaleY(-1);
65 .snapshot-item-thumbnail {
66 background-color: #000000;
69 .snapshot-item-details {
70 -moz-padding-start: 6px;
73 .snapshot-item-calls {
85 color: #A09090; /* Foreground (Text) - Grey */
89 text-decoration: underline;
93 .snapshot-item-save[disabled=true] {
94 text-decoration: none;
98 .snapshot-item-footer[saving]::before {
99 display: inline-block;
101 background: url("chrome://global/skin/icons/loading.gif") center no-repeat;
105 -moz-margin-end: 4px;
108 #snapshots-list .selected label {
109 /* Text inside a selected item should not be custom colored. */
110 color: inherit !important;
113 /* Debugging pane controls */
115 #debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
121 list-style-image: url("debugger-play.png");
122 -moz-image-region: rect(0px,32px,16px,16px);
126 list-style-image: url("debugger-step-over.png");
130 list-style-image: url("debugger-step-in.png");
134 list-style-image: url("debugger-step-out.png");
137 @media (min-resolution: 2dppx) {
139 list-style-image: url(debugger-play@2x.png);
140 -moz-image-region: rect(0px,64px,32px,32px);
144 list-style-image: url(debugger-step-over@2x.png);
148 list-style-image: url(debugger-step-in@2x.png);
152 list-style-image: url(debugger-step-out@2x.png);
156 #debugging-controls > toolbarbutton {
157 transition: opacity 0.15s ease-in-out;
160 #debugging-controls > toolbarbutton[disabled=true] {
165 -moz-padding-end: 24px;
168 #calls-slider .scale-slider {
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. */
179 /* Calls list pane */
181 #calls-list .side-menu-widget-container {
182 background: transparent;
185 #calls-list .side-menu-widget-item {
189 /* Calls list items */
191 #calls-list .side-menu-widget-item {
192 border-color: #504848;
193 border-bottom-color: transparent;
196 .call-item-view:hover {
197 background-color: #402800;
200 .call-item-view[draw-call] {
201 background-color: #403800;
204 .call-item-view[interesting-call] {
205 background-color: #272740;
209 width: calc(3em + 22px);
210 -moz-padding-start: 22px;
211 -moz-padding-end: 4px;
214 -moz-border-end: 1px solid;
215 -moz-margin-end: 6px;
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;
225 @media (min-resolution: 2dppx) {
226 .selected .call-item-gutter {
227 background-image: url("editor-debug-location@2x.png");
232 background-color: #A09090;
242 color: #FFCF00; /* Highlight Orange */
246 color: #9C9CFF; /* Highlight Blue */
249 .call-item-location {
250 -moz-padding-start: 2px;
251 -moz-padding-end: 6px;
256 .call-item-location:hover {
257 color: #FFCF00; /* Highlight Blue */
260 .call-item-view:hover .call-item-location,
261 .call-item-view[expanded] .call-item-location {
262 text-decoration: underline;
265 .call-item-location {
266 border-color: #A09090;
267 color: #9C9CFF; /* Highlight Blue-Grey */
271 -moz-padding-start: calc(3em + 22px);
272 padding-bottom: 10px;
279 .call-item-stack-fn {
284 .call-item-stack-fn-location {
285 -moz-padding-start: 2px;
286 -moz-padding-end: 6px;
289 text-decoration: underline;
292 .call-item-stack-fn-name {
293 color: #A09090; /* Content (Text) - Light */
296 .theme-dark .call-item-stack-fn-location {
297 color: #FF9F00; /* Highlight Blue-Grey */
300 .theme-dark .call-item-stack-fn-location:hover {
301 color: #9C9CFF; /* Highlight Blue */
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;
309 /* Rendering preview */
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;
318 #screenshot-container {
319 background-color: #000000;
322 @media (min-width: 701px) {
323 #screenshot-container {
330 @media (max-width: 700px) {
331 #screenshot-container {
339 background-image: -moz-element(#screenshot-rendering);
340 background-size: contain;
341 background-position: center, center;
342 background-repeat: no-repeat;
345 #screenshot-image[flipped=true] {
346 transform: scaleY(-1);
349 #screenshot-dimensions {
355 #screenshot-dimensions {
356 background-color: #402800;
359 /* Snapshot filmstrip */
361 #snapshot-filmstrip {
365 #snapshot-filmstrip {
366 border-top: 1px solid #000;
367 color: #FF9F00; /* Light foreground text */
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;
380 transition: opacity 0.1s ease-in-out;
383 .filmstrip-thumbnail[flipped=true] {
384 transform: scaleY(-1);
387 .filmstrip-thumbnail {
388 background-color: #000000;
391 .filmstrip-thumbnail {
392 -moz-border-end: 1px solid #000;
395 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
396 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
397 border: 1px solid #9C9CFF; /* Highlight Blue */