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
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* === file identical to profiler.inc.css === */
11 /* Reload and waiting notices */
19 background: #000000; /* Toolbars */
20 color: #FF9F00; /* Light foreground text */
24 #recording-notice button {
28 list-style-image: url("profiler-stopwatch.svg");
31 #empty-notice button[checked],
32 #recording-notice button[checked] {
33 list-style-image: url("profiler-stopwatch-checked.svg");
36 #empty-notice button .button-text,
37 #recording-notice button .button-text {
48 #recordings-pane > tabs,
49 #recordings-pane .devtools-toolbar {
50 -moz-border-end-width: 1px;
53 #recordings-pane > tabs,
54 #recordings-pane .devtools-toolbar {
55 -moz-border-end-color: #9C9CFF; /* Splitters */
59 list-style-image: url("profiler-stopwatch.svg");
62 #record-button[checked] {
63 list-style-image: url("profiler-stopwatch-checked.svg");
66 #record-button[locked] {
76 .recording-item-title {
80 .recording-item-footer {
85 .recording-item-save {
86 text-decoration: underline;
90 .recording-item-duration,
91 .recording-item-save {
92 color: #FF9F00; /* Foreground (Text) - Grey */
95 #recordings-list .selected label {
96 /* Text inside a selected item should not be custom colored. */
97 color: inherit !important;
102 #profile-content tabs {
103 -moz-box-align: stretch;
108 #profile-content tab {
110 background-color: transparent;
115 transition-duration: 0.25s;
116 transition-timing-function: ease-in-out;
117 transition-property: opacity, transform;
120 .theme-dark #profile-content tab {
121 color: #8fa1b2; /* Body Text */
124 .theme-light #profile-content tab {
125 color: #18191a; /* Body Text */
128 #profile-content tab:not([selected]) {
132 #profile-content tab[covered] {
134 transform: translateY(100%);
137 #profile-content tab {
138 -moz-appearance: none;
139 -moz-border-end: 1px solid #9C9CFF; /* Splitters */
142 #profile-content tab:hover {
143 background-color: #FFCF00;
147 #profile-content tab[selected] {
148 background-color: #008484; /* Select Highlight Blue */
149 color: #000000; /* Light foreground text */
152 #profile-content tabpanel {
153 -moz-box-orient: vertical;
154 transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */
157 #profile-newtab-button {
158 -moz-appearance: none;
159 background-color: transparent;
160 background-position: 4px 2px;
161 background-size: 54px 20px;
168 #profile-newtab-button {
169 background-color: #C09070;
172 #profile-newtab-button {
173 background-image: url("newtab.png");
176 @media (min-resolution: 2dppx) {
177 #profile-newtab-button {
178 background-image: url("newtab@2x.png");
182 /* Profile call tree */
184 .call-tree-headers-container {
185 border-top: 1px solid #A09090;
188 .call-tree-cells-container {
189 /* Hack: force hardware acceleration */
190 transform: translateZ(1px);
194 .call-tree-cells-container[categories-hidden] .call-tree-category {
198 .call-tree-header[type="duration"],
199 .call-tree-cell[type="duration"],
200 .call-tree-header[type="self-duration"],
201 .call-tree-cell[type="self-duration"] {
205 .call-tree-header[type="percentage"],
206 .call-tree-cell[type="percentage"],
207 .call-tree-header[type="self-percentage"],
208 .call-tree-cell[type="self-percentage"] {
212 .call-tree-header[type="samples"],
213 .call-tree-cell[type="samples"] {
217 .call-tree-header[type="function"],
218 .call-tree-cell[type="function"] {
224 -moz-box-align: center;
229 .call-tree-header:not(:last-child),
230 .call-tree-cell:not(:last-child) {
231 -moz-border-end: 1px solid;
236 -moz-border-end-color: #9C9CFF;
237 color: #FF9F00; /* Body Text */
240 .call-tree-header:not(:last-child) {
244 .call-tree-cell:not(:last-child) {
249 background-color: #A09090; /* Tab Toolbar */
253 .call-tree-item:last-child:not(:focus) {
254 border-bottom: #9C9CFF;
257 .call-tree-item:nth-child(2n) {
258 background-color: #392900;
261 .call-tree-item:hover {
262 background-color: #392900;
265 .call-tree-item:focus {
266 background-color: #008484; /* Select Highlight Blue */
270 .call-tree-item:focus label {
271 color: #000000 !important; /* Light foreground text */
274 .call-tree-item:focus .call-tree-cell {
275 -moz-border-end-color: #9C9CFF;
278 .call-tree-item:not([origin="content"]) .call-tree-name,
279 .call-tree-item:not([origin="content"]) .call-tree-url,
280 .call-tree-item:not([origin="content"]) .call-tree-line {
281 /* Style chrome and non-JS nodes differently. */
286 -moz-margin-start: 4px !important;
290 .call-tree-url:hover {
291 text-decoration: underline;
303 -moz-margin-start: 8px !important;
311 .call-tree-url[value=""],
312 .call-tree-line[value=""],
313 .call-tree-host[value=""] {
318 -moz-appearance: none;
319 background-color: transparent;
320 background-position: center;
321 background-repeat: no-repeat;
322 background-size: 11px;
324 -moz-margin-start: 8px !important;
330 background-image: url("magnifying-glass.png");
333 @media (min-resolution: 2dppx) {
335 background-image: url("magnifying-glass@2x.png");
339 .call-tree-item:hover .call-tree-zoom {
340 transition: opacity 0.3s ease-in;
344 .call-tree-item:hover .call-tree-zoom:hover {
348 .call-tree-category {
349 transform: scale(0.75);
350 transform-origin: center right;