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 */
16 background-color: var(--theme-toolbar-background);
17 color: var(--theme-body-color);
21 #recording-notice button {
25 list-style-image: url("profiler-stopwatch.svg");
28 #empty-notice button[checked],
29 #recording-notice button[checked] {
30 list-style-image: url("profiler-stopwatch-checked.svg");
33 #empty-notice button .button-text,
34 #recording-notice button .button-text {
45 #recordings-pane > tabs,
46 #recordings-pane .devtools-toolbar {
47 -moz-border-end-width: 1px;
50 #recordings-pane > tabs,
51 #recordings-pane .devtools-toolbar {
52 -moz-border-end-color: var(--theme-splitter-color);
56 list-style-image: url("profiler-stopwatch.svg");
59 #record-button[checked] {
60 list-style-image: url("profiler-stopwatch-checked.svg");
63 #record-button[locked] {
73 .recording-item-title {
77 .recording-item-footer {
82 .recording-item-save {
83 text-decoration: underline;
87 .recording-item-duration,
88 .recording-item-save {
89 color: var(--theme-body-color-alt);
92 #recordings-list .selected label {
93 /* Text inside a selected item should not be custom colored. */
94 color: inherit !important;
99 #profile-content tabs {
100 -moz-box-align: stretch;
105 #profile-content tab {
107 background-color: transparent;
112 transition-duration: 0.25s;
113 transition-timing-function: ease-in-out;
114 transition-property: opacity, transform;
117 #profile-content tab {
118 color: var(--theme-body-color);
121 #profile-content tab:not([selected]) {
125 #profile-content tab[covered] {
127 transform: translateY(100%);
130 #profile-content tab {
131 -moz-appearance: none;
132 -moz-border-end: 1px solid var(--theme-splitter-color);
135 #profile-content tab:hover {
136 background-color: var(--theme-hover-background);
137 color: var(--theme-hover-color);
140 #profile-content tab[selected] {
141 background-color: var(--theme-selection-background);
142 color: var(--theme-selection-color);
145 #profile-content tabpanel {
146 -moz-box-orient: vertical;
147 transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */
150 #profile-newtab-button {
151 -moz-appearance: none;
152 background-color: transparent;
153 background-position: 4px 2px;
154 background-size: 54px 20px;
161 #profile-newtab-button {
162 background-color: #C09070;
165 #profile-newtab-button {
166 background-image: url("newtab.png");
169 @media (min-resolution: 2dppx) {
170 #profile-newtab-button {
171 background-image: url("newtab@2x.png");
175 /* Profile call tree */
177 .call-tree-headers-container {
178 border-top: 1px solid var(--theme-splitter-color);
181 .call-tree-cells-container {
182 /* Hack: force hardware acceleration */
183 transform: translateZ(1px);
187 .call-tree-cells-container[categories-hidden] .call-tree-category {
191 .call-tree-header[type="duration"],
192 .call-tree-cell[type="duration"],
193 .call-tree-header[type="self-duration"],
194 .call-tree-cell[type="self-duration"] {
198 .call-tree-header[type="percentage"],
199 .call-tree-cell[type="percentage"],
200 .call-tree-header[type="self-percentage"],
201 .call-tree-cell[type="self-percentage"] {
205 .call-tree-header[type="samples"],
206 .call-tree-cell[type="samples"] {
210 .call-tree-header[type="function"],
211 .call-tree-cell[type="function"] {
217 -moz-box-align: center;
220 color: var(--theme-body-color);
223 .call-tree-header:not(:last-child),
224 .call-tree-cell:not(:last-child) {
225 -moz-border-end: 1px solid;
230 -moz-border-end-color: #9C9CFF;
233 .call-tree-header:not(:last-child) {
237 .call-tree-cell:not(:last-child) {
242 background-color: var(--theme-contrastsidebar-background);
243 color: var(--theme-contrastsidebar-color);
246 .call-tree-item:last-child:not(:focus) {
247 border-bottom: #9C9CFF;
250 .call-tree-item:nth-child(2n) {
251 background-color: #392900;
254 .call-tree-item:hover {
255 background-color: #392900;
258 .call-tree-item:focus {
259 background-color: var(--theme-selection-background);
260 color: var(--theme-selection-color);
263 .call-tree-item:focus label {
264 color: var(--theme-selection-color) !important;
267 .call-tree-item:focus .call-tree-cell {
268 -moz-border-end-color: #9C9CFF;
271 .call-tree-item:not([origin="content"]) .call-tree-name,
272 .call-tree-item:not([origin="content"]) .call-tree-url,
273 .call-tree-item:not([origin="content"]) .call-tree-line {
274 /* Style chrome and non-JS nodes differently. */
279 -moz-margin-start: 4px !important;
283 .call-tree-url:hover {
284 text-decoration: underline;
288 color: var(--theme-highlight-blue);
292 color: var(--theme-content-color2);
296 -moz-margin-start: 8px !important;
301 color: var(--theme-highlight-pink);
304 .call-tree-url[value=""],
305 .call-tree-line[value=""],
306 .call-tree-host[value=""] {
311 -moz-appearance: none;
312 background-color: transparent;
313 background-position: center;
314 background-repeat: no-repeat;
315 background-size: 11px;
317 -moz-margin-start: 8px !important;
323 background-image: url("magnifying-glass.png");
326 @media (min-resolution: 2dppx) {
328 background-image: url("magnifying-glass@2x.png");
332 .call-tree-item:hover .call-tree-zoom {
333 transition: opacity 0.3s ease-in;
337 .call-tree-item:hover .call-tree-zoom:hover {
341 .call-tree-category {
342 transform: scale(0.75);
343 transform-origin: center right;