Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7493f83

Browse files
samuelmbabhazibomsy
samuelmbabhazi
authored and
bomsy
committed
Bug 2054228 - Use the modern space-separated color syntax in DevTools stylesheets and themed SVGs. r=devtools-reviewers,bomsy
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
1 parent 1a826a5 commit 7493f83

45 files changed

Lines changed: 175 additions & 175 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎devtools/client/aboutdebugging/src/base.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
:root {
6-
--box-background: light-dark(#fff, rgb(35, 34, 43));
6+
--box-background: light-dark(#fff, rgb(35 34 43));
77

8-
--category-background-hover: rgba(12, 12, 13, 0.1);
9-
--category-text: light-dark(rgba(12, 12, 13), var(--text-color));
8+
--category-background-hover: rgb(12 12 13 / 0.1);
9+
--category-text: light-dark(rgb(12 12 13), var(--text-color));
1010
--category-text-selected: var(--button-background-color-primary);
1111

1212
--fieldpair-text-color: light-dark(var(--grey-50), var(--text-color));
1313

1414
--sidebar-text-color: light-dark(var(--category-text), var(--text-color));
1515
--sidebar-selected-color: var(--category-text-selected);
16-
--sidebar-background-hover: light-dark(var(--category-background-hover), rgb(92, 92, 106));
16+
--sidebar-background-hover: light-dark(var(--category-background-hover), rgb(92 92 106));
1717

1818
--card-separator-color: light-dark(var(--grey-20), var(--grey-50));
1919

‎devtools/client/accessibility/accessibility.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
--accessibility-font-size: 12px;
77
--accessibility-toolbar-height-tall: 35px;
88
--accessibility-toolbar-focus: var(--blue-50);
9-
--accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
9+
--accessibility-toolbar-focus-alpha30: rgb(10 132 255 / 0.3);
1010
--accessibility-full-length-minus-splitter: calc(100% - 1px);
1111
--accessibility-horizontal-padding: 5px;
1212
--accessibility-horizontal-indent: 20px;
@@ -23,7 +23,7 @@
2323
--accessibility-unfocused-tree-focused-node-twisty-fill: light-dark(var(--theme-icon-dimmed-color), var(--theme-selection-color));
2424
--accessibility-link-color: var(--theme-link-color);
2525
--accessibility-link-color-active: light-dark(var(--blue-70), var(--blue-40));
26-
--accessibility-body-background-a90: light-dark(rgba(255, 255, 255, 0.9), rgba(42, 42, 46, 0.9));
26+
--accessibility-body-background-a90: light-dark(rgb(255 255 255 / 0.9), rgb(42 42 46 / 0.9));
2727
--accessibility-code-background: light-dark(var(--grey-20), var(--grey-70));
2828

2929
&[forced-colors-active] {
@@ -217,7 +217,7 @@ body {
217217
:root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-arrow::before {
218218
border: 1px solid var(--theme-popup-border-color);
219219
border-radius: var(--theme-popup-border-radius);
220-
box-shadow: 0 0 4px hsla(210, 4%, 10%, 0.2);
220+
box-shadow: 0 0 4px hsl(210 4% 10% / 0.2);
221221
}
222222

223223
.tooltip-container .menuitem > .command[role="link"] {

‎devtools/client/application/src/base.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
--highlight-color: var(--theme-toolbar-background-hover);
2828

2929
/* extra, raw colors */
30-
--blue-50-a30: rgba(10, 132, 255, 0.3);
30+
--blue-50-a30: rgb(10 132 255 / 0.3);
3131

3232
/* Global layout vars */
3333
--base-unit: 4px;

‎devtools/client/debugger/src/components/Editor/Editor.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
44

55
.editor-wrapper {
6-
--debug-expression-background: rgba(202, 227, 255, 0.5);
7-
--debug-line-error-border: rgb(255, 0, 0);
8-
--debug-expression-error-background: rgba(231, 116, 113, 0.3);
9-
--line-exception-background: hsl(344, 73%, 97%);
6+
--debug-expression-background: rgb(202 227 255 / 0.5);
7+
--debug-line-error-border: rgb(255 0 0);
8+
--debug-expression-error-background: rgb(231 116 113 / 0.3);
9+
--line-exception-background: hsl(344 73% 97%);
1010
}
1111

1212
.theme-dark .editor-wrapper {
13-
--debug-expression-background: rgba(202, 227, 255, 0.3);
14-
--line-exception-background: hsl(345, 23%, 24%);
13+
--debug-expression-background: rgb(202 227 255 / 0.3);
14+
--line-exception-background: hsl(345 23% 24%);
1515
}
1616

1717
.editor-wrapper .CodeMirror-linewidget {

‎devtools/client/debugger/src/components/Editor/Preview/Popup.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
/* Use a color other than yellow to highlight the hovered token on the paused line
175175
as the paused line is already yellow */
176176
.paused-line .preview-token {
177-
background-color: light-dark(rgba(202, 227, 255, 0.5), rgba(202, 227, 255, 0.3));
177+
background-color: light-dark(rgb(202 227 255 / 0.5), rgb(202 227 255 / 0.3));
178178
}
179179

180180
/* This rule only make sure the text remains readable when hovering a token on the paused line. */
@@ -262,5 +262,5 @@
262262
}
263263

264264
.theme-dark .exception-stacktrace .line {
265-
color: hsl(210, 40%, 60%);
265+
color: hsl(210 40% 60%);
266266
}

‎devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
overflow-y: hidden;
1515

1616
/* Using the same colors as the Netmonitor's --table-selection-background-hover */
17-
--search-result-background-hover: rgba(209, 232, 255, 0.8);
17+
--search-result-background-hover: rgb(209 232 255 / 0.8);
1818
}
1919

2020
.theme-dark .search-container {
21-
--search-result-background-hover: rgba(53, 59, 72, 1);
21+
--search-result-background-hover: rgb(53 59 72 / 1);
2222
}
2323

2424
.project-text-search {

‎devtools/client/debugger/src/components/shared/menu.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ menupopup {
1010
background: #f2f2f2;
1111
border-radius: 5px;
1212
color: #585858;
13-
box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
13+
box-shadow: 0 0 4px 0 rgb(190 190 190 / 0.8);
1414
min-width: 130px;
1515
}
1616

‎devtools/client/debugger/src/components/variables.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@
1818
--theme-inline-preview-label-pause-color: var(--paused-color);
1919
--theme-inline-preview-label-pause-background: var(--paused-background-color);
2020

21-
--search-overlays-semitransparent: light-dark(rgba(221, 225, 228, 0.66), rgba(42, 46, 56, 0.66));
21+
--search-overlays-semitransparent: light-dark(rgb(221 225 228 / 0.66), rgb(42 46 56 / 0.66));
2222
--popup-shadow-color: light-dark(#d0d0d0, #5c667b);
23-
--theme-inline-preview-background: light-dark(rgb(251, 247, 255), rgb(43, 38, 50));
23+
--theme-inline-preview-background: light-dark(rgb(251 247 255), rgb(43 38 50));
2424
--theme-inline-preview-border-color: light-dark(#ebd1ff, #47326c);
2525
--theme-inline-preview-label-trace-color: light-dark(#6300a6, #dfccff);
2626
--theme-inline-preview-label-trace-background: light-dark(
27-
hsl(from rgb(244, 230, 255) h s calc(l * 0.7) / 30%) /* use 30% opacity to allow showing text selection background */,
27+
hsl(from rgb(244 230 255) h s calc(l * 0.7) / 30%) /* use 30% opacity to allow showing text selection background */,
2828
hsl(from #3f2e5f h s calc(l * 2) / 30%) /* dark theme requires some specific luminosity factor */
2929
);
30-
--paused-background-color: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%));
31-
--paused-color: light-dark(var(--theme-body-color), hsl(43, 94%, 81%));
30+
--paused-background-color: light-dark(hsl(54 100% 92%), hsl(42 37% 19%));
31+
--paused-color: light-dark(var(--theme-body-color), hsl(43 94% 81%));
3232
--paused-error-color: light-dark(var(--red-70), var(--red-20));
3333
}
3434

‎devtools/client/debugger/src/utils/editor/source-editor.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44

55
:root {
66
--breakpoint-active-color: light-dark(
7-
rgba(44, 187, 15, 0.2),
8-
rgba(45, 210, 158, 0.5))
7+
rgb(44 187 15 / 0.2),
8+
rgb(45 210 158 / 0.5))
99
;
1010
--breakpoint-active-color-hover: light-dark(
11-
rgba(44, 187, 15, 0.5),
12-
rgba(0, 255, 175, 0.7)
11+
rgb(44 187 15 / 0.5),
12+
rgb(0 255 175 / 0.7)
1313
);
1414

1515
/* use 30% opacity to allow showing text selection background */
@@ -47,7 +47,7 @@
4747
.CodeMirror .hit-count {
4848
display: inline-block;
4949
height: 12px;
50-
border: solid rgba(0, 0, 0, 0.2);
50+
border: solid rgb(0 0 0 / 0.2);
5151
border-width: 1px 1px 1px 0;
5252
border-radius: 0 3px 3px 0;
5353
padding: 0 3px;

‎devtools/client/jsonview/css/search-box.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515

1616
/* JSONView doesn't load dark-theme.css */
1717
.theme-dark .devtools-filterinput {
18-
background-color: rgba(24, 29, 32, 1);
19-
color: rgba(184, 200, 217, 1);
18+
background-color: rgb(24 29 32 / 1);
19+
color: rgb(184 200 217 / 1);
2020
}

0 commit comments

Comments
 (0)