/* === file identical to profiler.inc.css === */
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark,
+.theme-light {
+ --cell-border-color: #9C9CFF;
+ --focus-cell-border-color: #9C9CFF;
+ --row-alt-background-color: #402800;
+ --row-hover-background-color: #795900;
+}
+
window {
padding: 0;
}
.notice-container {
margin-top: -50vh;
font-size: 120%;
-}
-
-.notice-container {
- background: #000000; /* Toolbars */
- color: #FF9F00; /* Light foreground text */
+ background-color: var(--theme-toolbar-background);
+ color: var(--theme-body-color);
}
#empty-notice button,
#recordings-pane > tabs,
#recordings-pane .devtools-toolbar {
- -moz-border-end-color: #9C9CFF; /* Splitters */
+ -moz-border-end-color: var(--theme-splitter-color);
}
#record-button {
.recording-item-duration,
.recording-item-save {
- color: #FF9F00; /* Foreground (Text) - Grey */
+ color: var(--theme-body-color-alt);
}
#recordings-list .selected label {
transition-property: opacity, transform;
}
-.theme-dark #profile-content tab {
- color: #8fa1b2; /* Body Text */
-}
-
-.theme-light #profile-content tab {
- color: #18191a; /* Body Text */
+#profile-content tab {
+ color: var(--theme-body-color);
}
#profile-content tab:not([selected]) {
#profile-content tab {
-moz-appearance: none;
- -moz-border-end: 1px solid #9C9CFF; /* Splitters */
+ -moz-border-end: 1px solid var(--theme-splitter-color);
}
#profile-content tab:hover {
- background-color: #FFCF00;
- color: #000000;
+ background-color: var(--theme-hover-background);
+ color: var(--theme-hover-color);
}
#profile-content tab[selected] {
- background-color: #008484; /* Select Highlight Blue */
- color: #000000; /* Light foreground text */
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
}
#profile-content tabpanel {
/* Profile call tree */
.call-tree-headers-container {
- border-top: 1px solid #A09090;
+ border-top: 1px solid var(--theme-splitter-color);
}
.call-tree-cells-container {
-moz-box-align: center;
overflow: hidden;
padding: 1px 4px;
+ color: var(--theme-body-color);
}
.call-tree-header:not(:last-child),
.call-tree-cell:not(:last-child) {
- -moz-border-end: 1px solid;
+ -moz-border-end-width: 1px;
+ -moz-border-end-style: solid;
}
.call-tree-header,
.call-tree-cell {
- -moz-border-end-color: #9C9CFF;
- color: #FF9F00; /* Body Text */
+ -moz-border-end-color: var(--cell-border-color);
}
.call-tree-header:not(:last-child) {
}
.call-tree-header {
- background-color: #A09090; /* Tab Toolbar */
- color: #000000;
+ background-color: var(--theme-contrastsidebar-background);
+ color: var(--theme-contrastsidebar-color);
}
.call-tree-item:last-child:not(:focus) {
- border-bottom: #9C9CFF;
+ border-bottom: 1px solid var(--cell-border-color);
}
.call-tree-item:nth-child(2n) {
- background-color: #392900;
+ background-color: var(--row-alt-background-color);
}
.call-tree-item:hover {
- background-color: #392900;
+ background-color: var(--row-hover-background-color);
}
.call-tree-item:focus {
- background-color: #008484; /* Select Highlight Blue */
- color: #000000;
+ background-color: var(--theme-selection-background);
+ color: var(--theme-selection-color);
}
.call-tree-item:focus label {
- color: #000000 !important; /* Light foreground text */
+ color: var(--theme-selection-color) !important;
}
.call-tree-item:focus .call-tree-cell {
- -moz-border-end-color: #9C9CFF;
+ -moz-border-end-color: var(--focus-cell-border-color);
}
.call-tree-item:not([origin="content"]) .call-tree-name,
.call-tree-item:not([origin="content"]) .call-tree-url,
-.call-tree-item:not([origin="content"]) .call-tree-line {
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
/* Style chrome and non-JS nodes differently. */
opacity: 0.6;
}
}
.call-tree-url {
- color: #9C9CFF;
+ color: var(--theme-highlight-blue);
}
.call-tree-line {
- color: #A09090;
+ color: var(--theme-content-color2);
+}
+
+.call-tree-column {
+ color: var(--theme-highlight-orange);
+ opacity: 0.6;
}
.call-tree-host {
}
.call-tree-host {
- color: #E7ADE7;
+ color: var(--theme-highlight-pink);
}
+.call-tree-name[value=""],
.call-tree-url[value=""],
.call-tree-line[value=""],
+.call-tree-column[value=""],
.call-tree-host[value=""] {
display: none;
}