Samuel Mbabhazi
7493f83176
Convert the legacy comma-separated rgb()/rgba()/hsl()/hsla() notation to the modern space and slash separated syntax in DevTools CSS files and in the shipped themed SVG icons. Every converted value is numerically identical to the original. Deliberately left unchanged: test fixtures and expectations (computed values still serialize to the legacy syntax), the vendored CodeMirror stylesheets, and the contributor docs diagrams. The remaining occurrences in JS files can be handled in a follow-up, since most of them are computed-value assertions in tests. Differential Revision: https://phabricator.services.mozilla.com/D322271
190 lines
4.9 KiB
CSS
190 lines
4.9 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
@import url("chrome://devtools/content/shared/components/reps/reps.css");
|
|
|
|
/******************************************************************************/
|
|
/* TreeView Colors */
|
|
|
|
:root {
|
|
--tree-header-background: #c8d2dc;
|
|
--tree-header-sorted-background: #aac3dc;
|
|
}
|
|
|
|
/******************************************************************************/
|
|
/* TreeView Table*/
|
|
|
|
.treeTable {
|
|
color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.treeTable .treeLabelCell,
|
|
.treeTable .treeValueCell {
|
|
padding: 2px 0;
|
|
padding-inline-start: 4px;
|
|
line-height: 16px; /* make rows 20px tall */
|
|
vertical-align: top;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.treeTable .treeLabelCell {
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
padding-inline-start: var(--tree-label-cell-indent);
|
|
}
|
|
|
|
.treeTable .treeLabelCell::after {
|
|
content: ":";
|
|
color: var(--theme-comment);
|
|
}
|
|
|
|
.treeTable .treeValueCell.inputEnabled {
|
|
padding-block: 0;
|
|
}
|
|
|
|
.treeTable .treeValueCell.inputEnabled input {
|
|
width: 100%;
|
|
height: 20px;
|
|
margin: 0;
|
|
margin-inline-start: -2px;
|
|
border: solid 1px transparent;
|
|
outline: none;
|
|
box-shadow: none;
|
|
padding: 0 1px;
|
|
color: var(--theme-text-color-strong);
|
|
background: var(--theme-sidebar-background);
|
|
}
|
|
|
|
.treeTable .treeValueCell.inputEnabled input:focus {
|
|
transition: all 150ms ease-in-out;
|
|
}
|
|
|
|
.treeTable .treeValueCell > [aria-labelledby],
|
|
.treeTable .treeLabelCell > .treeLabel {
|
|
unicode-bidi: plaintext;
|
|
text-align: match-parent;
|
|
}
|
|
|
|
/* No padding if there is actually no label */
|
|
.treeTable .treeLabel:empty {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
.treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* :not(.selected) is used because row selection styles should have
|
|
more precedence than row hovering. */
|
|
.treeTable .treeRow:not(.selected):hover {
|
|
background-color: var(--theme-selection-background-hover) !important;
|
|
}
|
|
|
|
.treeTable .treeRow.selected {
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
.treeTable .treeRow.selected :where(:not(.objectBox-jsonml)),
|
|
.treeTable .treeRow.selected .treeLabelCell::after {
|
|
color: var(--theme-selection-color);
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Invert text selection color in selected rows */
|
|
.treeTable .treeRow.selected :not(input, textarea)::selection {
|
|
color: var(--theme-selection-background);
|
|
background-color: var(--theme-selection-color);
|
|
}
|
|
|
|
/* Filtering */
|
|
.treeTable .treeRow.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.treeTable .treeValueCellDivider {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Learn More link */
|
|
.treeTable .treeValueCell .learn-more-link {
|
|
user-select: none;
|
|
color: var(--theme-link-color);
|
|
cursor: pointer;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.treeTable .treeValueCell .learn-more-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/******************************************************************************/
|
|
/* Toggle Icon */
|
|
|
|
.treeTable .treeRow .treeIcon {
|
|
box-sizing: content-box;
|
|
height: 14px;
|
|
width: 14px;
|
|
padding: 1px;
|
|
/* Set the size of loading spinner (see .devtools-throbber) */
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
/* Use a total width of 20px (margins + padding + width) */
|
|
margin-inline: 3px 1px;
|
|
}
|
|
|
|
/* All expanded/collapsed styles need to apply on immediate children
|
|
since there might be nested trees within a tree. */
|
|
.treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
|
|
cursor: pointer;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/******************************************************************************/
|
|
/* Header */
|
|
|
|
.treeTable .treeHeaderRow {
|
|
height: 18px;
|
|
}
|
|
|
|
.treeTable .treeHeaderCell {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-bottom: 1px solid rgb(0 0 0 / 0.2);
|
|
padding: 0 !important;
|
|
background:
|
|
linear-gradient(rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.05)),
|
|
radial-gradient(1px 60% at right, rgb(0 0 0 / 0.8) 0%, transparent 80%) repeat-x var(--tree-header-background);
|
|
color: var(--theme-body-color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.treeTable .treeHeaderCellBox {
|
|
padding-block: 2px;
|
|
padding-inline: 10px 14px;
|
|
}
|
|
|
|
.treeTable .treeHeaderRow > .treeHeaderCell:first-child > .treeHeaderCellBox {
|
|
padding: 0;
|
|
}
|
|
|
|
.treeTable .treeHeaderSorted {
|
|
background-color: var(--tree-header-sorted-background);
|
|
}
|
|
|
|
.treeTable .treeHeaderSorted > .treeHeaderCellBox {
|
|
background: url(chrome://devtools/skin/images/sort-descending-arrow.svg) no-repeat calc(100% - 4px);
|
|
}
|
|
|
|
.treeTable .treeHeaderSorted.sortedAscending > .treeHeaderCellBox {
|
|
background-image: url(chrome://devtools/skin/images/sort-ascending-arrow.svg);
|
|
}
|
|
|
|
.treeTable .treeHeaderCell:hover:active {
|
|
background-image: linear-gradient(rgb(0 0 0 / 0.1), transparent), radial-gradient(1px 60% at right, rgb(0 0 0 / 0.8) 0%, transparent 80%);
|
|
}
|