1 /* vim:set ts=2 sw=2 sts=2 et: */
2 /* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
4 * You can obtain one at http://mozilla.org/MPL/2.0/. */
6 /* CSS Variables specific to this panel that aren't defined by the themes */
9 --cell-border-color: #A09090;
10 --focus-cell-border-color: #9C9CFF;
11 --row-alt-background-color: #403400;
12 --row-hover-background-color: #544400;
17 #performance-toolbar > tabs,
18 #performance-toolbar {
19 -moz-border-end-color: var(--theme-splitter-color);
22 #performance-toolbar-controls-detail-views > toolbarbutton {
26 #performance-toolbar-controls-detail-views .toolbarbutton-text {
27 -moz-padding-start: 4px;
28 -moz-padding-end: 8px;
31 /* Recording Notice */
33 #performance-view .notice-container {
35 background-color: var(--theme-toolbar-background);
36 color: var(--theme-body-color);
40 #performance-view .notice-container button {
49 list-style-image: url(profiler-stopwatch.svg);
52 .record-button[checked] {
53 list-style-image: url(profiler-stopwatch-checked.svg);
56 .record-button[locked] {
60 .record-button .button-icon {
64 .record-button .button-text {
70 #select-waterfall-view {
71 list-style-image: url(performance-icons.svg#details-waterfall);
74 #select-js-calltree-view,
75 #select-memory-calltree-view {
76 list-style-image: url(performance-icons.svg#details-call-tree);
79 #select-js-flamegraph-view,
80 #select-memory-flamegraph-view {
81 list-style-image: url(performance-icons.svg#details-flamegraph);
84 /* Profile call tree */
86 .call-tree-cells-container {
87 /* Hack: force hardware acceleration */
88 transform: translateZ(1px);
92 .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"],
93 .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"],
94 .call-tree-cells-container[categories-hidden] .call-tree-category {
100 padding-top: 2px !important;
101 padding-bottom: 2px !important;
104 .call-tree-header[type="duration"],
105 .call-tree-cell[type="duration"],
106 .call-tree-header[type="self-duration"],
107 .call-tree-cell[type="self-duration"] {
111 .call-tree-header[type="percentage"],
112 .call-tree-cell[type="percentage"],
113 .call-tree-header[type="self-percentage"],
114 .call-tree-cell[type="self-percentage"] {
118 .call-tree-header[type="samples"],
119 .call-tree-cell[type="samples"] {
123 .call-tree-header[type="allocations"],
124 .call-tree-cell[type="allocations"],
125 .call-tree-header[type="self-allocations"],
126 .call-tree-cell[type="self-allocations"] {
130 .call-tree-header[type="function"],
131 .call-tree-cell[type="function"] {
137 -moz-box-align: center;
140 color: var(--theme-body-color);
141 -moz-border-end-color: var(--cell-border-color);
144 .call-tree-header:not(:last-child),
145 .call-tree-cell:not(:last-child) {
146 -moz-border-end-width: 1px;
147 -moz-border-end-style: solid;
150 .call-tree-header:not(:last-child) {
154 .call-tree-cell:not(:last-child) {
159 background-color: var(--theme-tab-toolbar-background);
162 .call-tree-item:last-child:not(:focus) {
163 border-bottom: 1px solid var(--cell-border-color);
166 .call-tree-item:nth-child(2n) {
167 background-color: var(--row-alt-background-color);
170 .call-tree-item:hover {
171 background-color: var(--row-hover-background-color);
174 .call-tree-item:focus {
175 background-color: var(--theme-selection-background);
178 .call-tree-item:focus label {
179 color: var(--theme-selection-color) !important;
182 .call-tree-item:focus .call-tree-cell {
183 -moz-border-end-color: var(--focus-cell-border-color);
186 .call-tree-item:not([origin="content"]) .call-tree-name,
187 .call-tree-item:not([origin="content"]) .call-tree-url,
188 .call-tree-item:not([origin="content"]) .call-tree-line,
189 .call-tree-item:not([origin="content"]) .call-tree-column {
190 /* Style chrome and non-JS nodes differently. */
195 -moz-margin-start: 4px !important;
199 .call-tree-url:hover {
200 text-decoration: underline;
204 color: var(--theme-highlight-blue);
208 color: var(--theme-highlight-orange);
212 color: var(--theme-highlight-orange);
217 -moz-margin-start: 8px !important;
219 color: var(--theme-content-color2);
222 .call-tree-name[value=""],
223 .call-tree-url[value=""],
224 .call-tree-line[value=""],
225 .call-tree-column[value=""],
226 .call-tree-host[value=""] {
231 -moz-appearance: none;
232 background-color: transparent;
233 background-position: center;
234 background-repeat: no-repeat;
235 background-size: 11px;
237 -moz-margin-start: 8px !important;
242 .theme-dark .call-tree-zoom {
243 background-image: url(magnifying-glass.png);
246 .theme-light .call-tree-zoom {
247 background-image: url(magnifying-glass-light.png);
250 @media (min-resolution: 2dppx) {
251 .theme-dark .call-tree-zoom {
252 background-image: url(magnifying-glass@2x.png);
255 .theme-light .call-tree-zoom {
256 background-image: url(magnifying-glass-light@2x.png);
260 .call-tree-item:hover .call-tree-zoom {
261 transition: opacity 0.3s ease-in;
265 .call-tree-item:hover .call-tree-zoom:hover {
269 .call-tree-category {
270 transform: scale(0.75);
271 transform-origin: center right;
275 * Details Waterfall Styles
278 .waterfall-list-contents {
279 /* Hack: force hardware acceleration */
280 transform: translateZ(1px);
285 .waterfall-header-contents {
289 .waterfall-background-ticks {
290 /* Background created on a <canvas> in js. */
291 /* @see browser/devtools/timeline/widgets/waterfall.js */
292 background-image: -moz-element(#waterfall-background);
293 background-repeat: repeat-y;
294 background-position: -1px center;
297 .waterfall-marker-container[is-spacer] {
298 pointer-events: none;
301 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
302 background-color: #403400;
305 .waterfall-marker-container:hover {
306 background-color: #FFCF00 !important;
309 .waterfall-marker-item {
314 -moz-border-end: 1px solid var(--theme-splitter-color);
317 .waterfall-marker-container:hover > .waterfall-sidebar {
318 background-color: transparent;
321 .waterfall-header-name {
326 .waterfall-header-tick {
329 transform-origin: left center;
330 color: var(--theme-body-color);
333 .waterfall-header-tick:not(:first-child) {
334 -moz-margin-start: -100px !important; /* Don't affect layout. */
337 .waterfall-marker-bullet {
340 -moz-margin-start: 8px;
341 -moz-margin-end: 6px;
346 .waterfall-marker-name {
348 padding-bottom: 1px !important;
351 .waterfall-marker-bar {
355 transform-origin: left center;
358 .waterfall-marker-container.selected > .waterfall-sidebar,
359 .waterfall-marker-container.selected > .waterfall-marker-item {
360 background-color: var(--theme-selection-background);
361 color: var(--theme-selection-color);
364 .waterfall-marker-container.selected .waterfall-marker-bullet,
365 .waterfall-marker-container.selected .waterfall-marker-bar {
366 border-color: initial !important;
369 .waterfall-marker-location {
373 .waterfall-marker-location:hover,
374 .waterfall-marker-location:focus {
375 text-decoration: underline;
379 -moz-padding-start: 8px;
380 -moz-padding-end: 8px;
385 .marker-details-bullet {
392 #waterfall-details > * {
396 .marker-details-labelname {
397 -moz-padding-end: 4px;
400 .marker-details-type {
405 .marker-details-duration {
409 /* Recording items */
415 .recording-item-title {
419 .recording-item-footer {
424 .recording-item-save {
425 text-decoration: underline;
429 .recording-item-duration,
430 .recording-item-save {
431 color: var(--theme-body-color-alt);
434 #recordings-list .selected label {
435 /* Text inside a selected item should not be custom colored. */
436 color: inherit !important;