corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1606785 - Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D249174
This commit is contained in:
hannajones
2025-05-21 03:51:43 +00:00
committed by hjones@mozilla.com
parent b10c7de8d0
commit c05f675ddf
116 changed files with 753 additions and 903 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierignore
View File

@@ -1252,6 +1252,10 @@ browser/extensions/translations/extension/
toolkit/components/uniffi-bindgen-gecko-js/src/templates/js/
toolkit/components/uniffi-bindgen-gecko-js/components/generated/*
# This is intended to simulate a css file generated from a scss file in order to
# test sourcemaps.
devtools/client/inspector/rules/test/doc_sourcemaps2.css
##############################################################################
# The list below is copied from ThirdPartyPaths.txt. Prettier doesn't currently
# support multiple ignore files or dynamic ignore configurations.
@@ -1470,7 +1474,6 @@ xpcom/build/mach_override.h
xpcom/io/crc32c.c
rlbox/rlbox_sandbox.hpp
##############################################################################
# The list below is copied from Generated.txt. Prettier doesn't currently
# support multiple ignore files or dynamic ignore configurations.

5
.stylelintignore
View File

@@ -41,6 +41,10 @@ devtools/client/debugger/test/mochitest/examples/
# no errors at all.
devtools/client/inspector/rules/test/doc_sourcemaps.css
# This is intended to simulate a css file generated from a scss file in order to
# test sourcemaps.
devtools/client/inspector/rules/test/doc_sourcemaps2.css
# Some of these produce parse errors, some have sourcemaps modified.
# They're tests, so let's just ignore all of them:
devtools/client/inspector/computed/test/doc_sourcemaps.css
@@ -96,4 +100,3 @@ toolkit/components/pdfjs/content/web/viewer-geckoview.css
# Ignore web-platform tests as they are not necessarily under our control.
testing/web-platform/tests/

39
devtools/client/aboutdebugging/src/base.css
View File

@@ -5,10 +5,10 @@
:root {
/* Colors from common.css */
--in-content-background-color: light-dark(#fff, rgb(28, 27, 34));
--in-content-border-color: light-dark(#d7d7db, rgba(249,249,250,0.2));
--in-content-border-color: light-dark(#d7d7db, rgba(249, 249, 250, 0.2));
--in-content-primary-button-background: light-dark(rgb(0, 97, 224), #00ddff);
--in-content-primary-button-background-active: light-dark(rgb(5, 62, 148), rgb(170,242,255));
--in-content-primary-button-background-hover: light-dark(rgb(2, 80, 187), rgb(128,235,255));
--in-content-primary-button-background-active: light-dark(rgb(5, 62, 148), rgb(170, 242, 255));
--in-content-primary-button-background-hover: light-dark(rgb(2, 80, 187), rgb(128, 235, 255));
--in-content-text-color: light-dark(#0c0c0d, #eee);
--bg-color: var(--in-content-background-color);
@@ -20,22 +20,24 @@
--box-background: light-dark(#fff, rgb(35, 34, 43));
--box-border-color: var(--in-content-border-color);
/* prettier-ignore */
--button-background-color: light-dark(
var(--grey-90-a10), /* Note: this is from Photon Default button */
rgb(72, 72, 84)
);
/* prettier-ignore */
--button-color: light-dark(
var(--grey-90), /* Note: this is from Photon Default button */
var(--white-100)
);
/* prettier-ignore */
--button-hover-background-color: light-dark(
var(--grey-90-a20), /* Note: this is from Photon Default button */
rgb(92, 92, 106)
);
--button-active-background-color: var(--grey-90-a30); /* Note: this is from Photon Default button */
--category-background-hover: rgba(12,12,13,0.1);
--category-text: light-dark(rgba(12,12,13), var(--text-color));
--category-background-hover: rgba(12, 12, 13, 0.1);
--category-text: light-dark(rgba(12, 12, 13), var(--text-color));
--category-text-selected: var(--in-content-primary-button-background);
--fieldpair-text-color: light-dark(var(--grey-50), var(--text-color));
@@ -61,9 +63,9 @@
--link-color-hover: var(--in-content-primary-button-background-hover);
--primary-button-background-color: light-dark(var(--blue-60), #00ddff);
--primary-button-color: light-dark(var(--white-100), rgb(43,42,51));
--primary-button-hover-background-color: light-dark(var(--blue-70), rgb(128,235,255));
--primary-button-active-background-color: light-dark(var(--blue-80), rgb(170,242,255));
--primary-button-color: light-dark(var(--white-100), rgb(43, 42, 51));
--primary-button-hover-background-color: light-dark(var(--blue-70), rgb(128, 235, 255));
--primary-button-active-background-color: light-dark(var(--blue-80), rgb(170, 242, 255));
--popup-header-background-color: light-dark(var(--grey-20), var(--grey-50));
--popup-header-color: light-dark(var(--grey-90), var(--white-100));
@@ -125,7 +127,6 @@
--card-shadow-blur-radius: var(--base-unit);
/*
* Variables particular to about:debugging
*/
@@ -176,7 +177,8 @@ a:active {
color: var(--link-color-active);
}
p, h1 {
p,
h1 {
margin: 0;
}
@@ -315,13 +317,15 @@ p, h1 {
/*
Form controls
*/
.default-button, .default-input {
.default-button,
.default-input {
box-sizing: border-box;
font-size: 1em;
}
/* Buttons from Photon */
.default-button, .primary-button {
.default-button,
.primary-button {
appearance: none;
margin: 0;
height: calc(var(--base-unit) * 8);
@@ -335,12 +339,14 @@ Form controls
}
/* Disabled state for buttons from Photon */
.default-button:disabled, .primary-button:disabled {
.default-button:disabled,
.primary-button:disabled {
opacity: 0.4;
}
/* Smaller variant size for buttons, from Photon */
.default-button--micro, .primary-button--micro {
.default-button--micro,
.primary-button--micro {
padding-inline-start: calc(2 * var(--base-unit));
padding-inline-end: calc(2 * var(--base-unit));
font-size: var(--micro-font-size);
@@ -386,9 +392,10 @@ Form controls
}
.ghost-button {
fill: ButtonText;
fill: ButtonText;
}
/* prettier-ignore */
:is(
.default-button,
.ghost-button,

5
devtools/client/aboutdebugging/src/components/RuntimeInfo.css
View File

@@ -2,7 +2,6 @@
* 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/. */
/**
* Layout for the runtime info container is:
*
@@ -20,8 +19,8 @@
grid-column-gap: var(--main-heading-icon-gap);
grid-template-areas:
"icon title action"
"icon subtitle .";
"icon title action"
"icon subtitle .";
grid-template-columns: var(--main-heading-icon-size) 1fr max-content;
grid-template-rows: 1fr max-content;

5
devtools/client/aboutdebugging/src/components/connect/ConnectPage.css
View File

@@ -16,8 +16,9 @@
.connect-page__usb-section__heading {
display: grid;
align-items: center;
grid-template-areas: "title . toggle"
"status . toggle";
grid-template-areas:
"title . toggle"
"status . toggle";
grid-template-columns: auto 1fr auto;
grid-column-gap: calc(var(--base-unit) * 2);
grid-row-gap: var(--base-unit);

3
devtools/client/aboutdebugging/src/components/connect/ConnectSection.css
View File

@@ -40,8 +40,7 @@
.connect-section__content {
line-height: 1.5;
padding-inline-start: calc(var(--base-unit) * 5
+ var(--header-col-gap) + var(--icon-size));
padding-inline-start: calc(var(--base-unit) * 5 + var(--header-col-gap) + var(--icon-size));
padding-inline-end: calc(var(--base-unit) * 5);
}

9
devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
View File

@@ -22,10 +22,11 @@
grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content;
grid-template-rows: 1fr minmax(0, auto) auto;
grid-column-gap: calc(var(--base-unit) * 2);
grid-template-areas: "icon name action"
"icon subname action"
"detail detail detail"
"additional_actions additional_actions additional_actions";
grid-template-areas:
"icon name action"
"icon subname action"
"detail detail detail"
"additional_actions additional_actions additional_actions";
margin-block-end: calc(var(--base-unit) * 4);
padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);

2
devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css
View File

@@ -14,7 +14,7 @@
}
.debug-target-pane__icon {
transition: transform 150ms cubic-bezier(.07, .95, 0, 1);
transition: transform 150ms cubic-bezier(0.07, 0.95, 0, 1);
transform: rotate(90deg);
}

3
devtools/client/aboutdebugging/src/components/shared/Message.css
View File

@@ -40,8 +40,7 @@
display: grid;
grid-column-gap: var(--base-unit);
grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
grid-template-areas:
"icon body button";
grid-template-areas: "icon body button";
margin: calc(var(--base-unit) * 2) 0;
padding: var(--base-unit);
-moz-context-properties: fill;

22
devtools/client/accessibility/accessibility.css
View File

@@ -217,7 +217,7 @@ body {
:root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-arrow::before {
border: 1px solid var(--theme-popup-border-color);
border-radius: var(--theme-popup-border-radius);
box-shadow: 0 0 4px hsla(210,4%,10%,.2);
box-shadow: 0 0 4px hsla(210, 4%, 10%, 0.2);
}
.tooltip-container .menuitem > .command[role="link"] {
@@ -288,7 +288,7 @@ body {
}
.description .link,
.accessibility-check-annotation .link {
.accessibility-check-annotation .link {
color: var(--accessibility-link-color);
cursor: pointer;
outline: 0;
@@ -301,7 +301,9 @@ body {
.description .link:focus:not(:active),
.accessibility-check-annotation .link:focus:not(:active) {
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
box-shadow:
0 0 0 2px var(--accessibility-toolbar-focus),
0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
border-radius: 2px;
}
@@ -312,7 +314,8 @@ body {
}
/* TreeView Customization */
.treeTable thead, .treeTable tbody {
.treeTable thead,
.treeTable tbody {
display: block;
}
@@ -358,7 +361,8 @@ body {
min-width: 50%;
}
.treeTable:focus, .treeTable tbody:focus {
.treeTable:focus,
.treeTable tbody:focus {
outline: 0;
}
@@ -493,7 +497,7 @@ body {
.split-box:not(.horz) .right-sidebar {
position: fixed;
width: inherit;
height: var(--accessibility-main-height)
height: var(--accessibility-main-height);
}
/* Tree customization */
@@ -549,7 +553,6 @@ body {
}
}
.accessible .tree .node:not(.focused):hover {
background-color: var(--theme-selection-background-hover);
}
@@ -758,7 +761,10 @@ body {
width: 14px;
display: inline-flex;
background-color: var(--accessibility-contrast-color);
box-shadow: 0 0 0 1px var(--grey-40), 6px 5px var(--accessibility-contrast-bg), 6px 5px 0 1px var(--grey-40);
box-shadow:
0 0 0 1px var(--grey-40),
6px 5px var(--accessibility-contrast-bg),
6px 5px 0 1px var(--grey-40);
margin-inline-end: 11px;
}

3
devtools/client/application/application.css
View File

@@ -2,12 +2,11 @@
* 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/. */
/*
/*
* Global styles
*/
@import "chrome://devtools/content/application/src/base.css";
/*
* Components
*/

2
devtools/client/application/src/base.css
View File

@@ -22,7 +22,7 @@
--base-line-height: 1.8;
--list-line-height: 1.25;
/* Global colours */
/* Global colours */
--separator-color: var(--theme-splitter-color);
--bg-color: var(--theme-toolbar-background);
--highlight-color: var(--theme-toolbar-background-hover);

4
devtools/client/application/src/components/App.css
View File

@@ -19,7 +19,7 @@ a.disabled-link:visited {
}
/* wide layout -> two columns, 1 row */
@media(min-width: 701px) {
@media (min-width: 701px) {
.app {
grid-template-columns: calc(var(--base-unit) * 50) auto;
height: 100vh;
@@ -27,7 +27,7 @@ a.disabled-link:visited {
}
/* vertical layout -> 1 column, 2 rows */
@media(max-width: 700px) {
@media (max-width: 700px) {
.app {
grid-template-rows: auto 1fr;
}

9
devtools/client/application/src/components/manifest/ManifestColorItem.css
View File

@@ -12,13 +12,16 @@
.manifest-item__color::before {
display: inline-block;
content: '';
content: "";
background-color: #fff;
background-image: linear-gradient(var(--color-value), var(--color-value)), /* injected via React */
background-image:
linear-gradient(var(--color-value), var(--color-value)) /* --color-value is injected via React */,
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
background-position:
0 0,
3px 3px;
border-radius: 50%;
width: calc(var(--base-unit) * 3);
height: calc(var(--base-unit) * 3);

1
devtools/client/application/src/components/routing/PageSwitcher.css
View File

@@ -2,7 +2,6 @@
* 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/. */
/*
* Page container for worker + manifest views
*/

29
devtools/client/application/src/components/routing/Sidebar.css
View File

@@ -2,32 +2,31 @@
* 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/. */
/*
* Sidebar list container
*/
.sidebar {
background-color: var(--bg-color);
background-color: var(--bg-color);
}
/* vertical layout -> the sidebar is the first row */
@media(max-width: 700px) {
.sidebar {
border-block-end: 1px solid var(--separator-color);
}
@media (max-width: 700px) {
.sidebar {
border-block-end: 1px solid var(--separator-color);
}
}
/* wide layout -> the sidebar occupies a whole column on the side */
@media(min-width: 701px) {
.sidebar {
min-height: 100vh;
border-inline-end: 1px solid var(--separator-color);
}
@media (min-width: 701px) {
.sidebar {
min-height: 100vh;
border-inline-end: 1px solid var(--separator-color);
}
}
.sidebar__list {
list-style: none;
padding: 0;
font-size: var(--body-10-font-size);
font-weight: var(--body-10-font-weight);
list-style: none;
padding: 0;
font-size: var(--body-10-font-size);
font-weight: var(--body-10-font-weight);
}

15
devtools/client/application/src/components/routing/SidebarItem.css
View File

@@ -2,7 +2,6 @@
* 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/. */
/*
* Sidebar list items
*/
@@ -17,17 +16,17 @@
}
.sidebar-item--selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.sidebar-item:not(.sidebar-item--selected):hover {
background-color: var(--highlight-color);
background-color: var(--highlight-color);
}
.sidebar-item__icon {
height: calc(var(--base-unit) * 4);
width: calc(var(--base-unit) * 4);
-moz-context-properties: fill;
fill: currentColor;
height: calc(var(--base-unit) * 4);
width: calc(var(--base-unit) * 4);
-moz-context-properties: fill;
fill: currentColor;
}

11
devtools/client/application/src/components/service-workers/Registration.css
View File

@@ -24,13 +24,14 @@
grid-template-rows: minmax(calc(var(--base-unit) * 6), auto) 1fr auto;
grid-column-gap: calc(4 * var(--base-unit));
grid-row-gap: calc(2 * var(--base-unit));
grid-template-areas: "header header-controls"
"workers workers"
"footer-controls footer-controls";
grid-template-areas:
"header header-controls"
"workers workers"
"footer-controls footer-controls";
}
/* vertical layout */
@media(max-width: 700px) {
@media (max-width: 700px) {
.registration__controls {
grid-area: footer-controls;
justify-self: end;
@@ -38,7 +39,7 @@
}
/* wide layout */
@media(min-width: 701px) {
@media (min-width: 701px) {
.registration__controls {
grid-area: header-controls;
}

10
devtools/client/application/src/components/service-workers/Worker.css
View File

@@ -2,7 +2,7 @@
* 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/. */
/*
/*
* The current layout of a service worker item is
*
* +------------+------------------------------+
@@ -15,8 +15,9 @@
.worker {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "icon source"
"icon misc";
grid-template-areas:
"icon source"
"icon misc";
column-gap: calc(var(--base-unit) * 2);
row-gap: var(--base-unit);
@@ -69,7 +70,8 @@
--status-border-color: var(--theme-text-color-alt);
}
.worker__status--installing, .worker__status--default {
.worker__status--installing,
.worker__status--default {
--status-bg-color: transparent;
--status-border-color: var(--theme-text-color-alt);
}

3
devtools/client/application/src/components/ui/UIButton.css
View File

@@ -54,7 +54,8 @@
}
.ui-button:focus {
box-shadow: 0 0 0 1px var(--blue-50) inset,
box-shadow:
0 0 0 1px var(--blue-50) inset,
0 0 0 1px var(--blue-50),
0 0 0 4px var(--blue-50-a30);
}

22
devtools/client/debugger/src/components/Editor/Breakpoints.css
View File

@@ -62,16 +62,17 @@
* The solution is to make the line number take the whole gutters element width,
* using a pseudo-element so it will widen the :hover target for line number elements.
*/
/* prettier-ignore */
:is(
&:not(.cm6-gutter-breakpoint),
&.cm6-gutter-breakpoint .breakpoint-marker
)::after {
content: "";
position: absolute;
height: 1lh;
right: 0;
left: 0;
}
)::after {
content: "";
position: absolute;
height: 1lh;
right: 0;
left: 0;
}
}
/* CodeMirror puts a padding on the line gutter, but we want the breakpoint to take the whole gutter */
@@ -118,9 +119,7 @@
}
/* End CM6 */
.editor-wrapper :not(.new-breakpoint)
> .CodeMirror-gutter-wrapper
> .CodeMirror-linenumber:hover::after {
.editor-wrapper :not(.new-breakpoint) > .CodeMirror-gutter-wrapper > .CodeMirror-linenumber:hover::after {
content: "";
position: absolute;
/* paint below the number */
@@ -131,8 +130,7 @@
bottom: 0;
height: 15px;
background-color: var(--gutter-hover-background-color);
mask: url(chrome://devtools/content/debugger/images/breakpoint.svg)
no-repeat;
mask: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat;
mask-size: auto 15px;
mask-position: right;
}

2
devtools/client/debugger/src/components/Editor/ConditionalPanel.css
View File

@@ -2,7 +2,7 @@
* 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/>. */
/* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */
/* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */
.conditional-breakpoint-panel-container {
padding-block: 1em;
}

5
devtools/client/debugger/src/components/Editor/Editor.css
View File

@@ -156,7 +156,7 @@ html[dir="rtl"] .editor-mount {
position: absolute;
top: 0;
bottom: 0;
left: calc( 50% - 1px );
left: calc(50% - 1px);
width: 1px;
height: 1.5em;
}
@@ -192,7 +192,8 @@ html[dir="rtl"] .editor-mount {
}
@keyframes fade-highlight-out {
0%, 30% {
0%,
30% {
/* We want to use a color with some transparency so text selection is visible through it */
background-color: var(--theme-contrast-background-alpha);
}

5
devtools/client/debugger/src/components/Editor/Preview/Popup.css
View File

@@ -80,7 +80,8 @@
margin-bottom: 5px;
}
.preview-tracer-header, .preview-tracer-warning {
.preview-tracer-header,
.preview-tracer-warning {
display: flex;
gap: 5px;
padding: 5px;
@@ -188,8 +189,6 @@
z-index: 100;
}
.theme-dark .tooltip .preview-popup {
border-color: var(--theme-body-color);
}

5
devtools/client/debugger/src/components/Editor/Tabs.css
View File

@@ -63,7 +63,8 @@
width: 100%;
height: 2px;
background-color: var(--tab-line-color, transparent);
transition: transform 250ms var(--animation-curve),
transition:
transform 250ms var(--animation-curve),
opacity 250ms var(--animation-curve);
opacity: 0;
transform: scaleX(0);
@@ -95,7 +96,7 @@
transform: scaleX(1);
}
.source-tab .img:is(.prettyPrint,.blackBox) {
.source-tab .img:is(.prettyPrint, .blackBox) {
mask-size: 14px;
}

8
devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css
View File

@@ -87,7 +87,6 @@
gap: 4px;
}
.project-text-search .refresh-btn {
background-color: transparent;
padding: 2px;
@@ -98,7 +97,7 @@
width: var(--size);
aspect-ratio: 1;
box-sizing: content-box;
grid-template-rows: var(--highlight-size) var(--remain-size);
grid-template-rows: var(--highlight-size) var(--remain-size);
grid-template-columns: var(--remain-size) var(--highlight-size);
&.devtools-button:focus-visible {
@@ -114,7 +113,7 @@
width: 5px;
background-color: var(--blue-40);
border-radius: 100%;
outline: 1px solid var(--theme-sidebar-background);
outline: 1px solid var(--theme-sidebar-background);
z-index: 1;
}
@@ -122,7 +121,8 @@
grid-row: 1 / -1;
grid-column: 1 / -1;
transition: rotate 0.2s;
width: 14px; height: 14px;
width: 14px;
height: 14px;
.highlight & {
rotate: 0.75turn;

34
devtools/client/debugger/src/components/PrimaryPanes/Tracer.css
View File

@@ -20,8 +20,9 @@
max-height: 100%;
display: grid;
grid-template-areas: "toolbar toolbar"
"timeline tabs";
grid-template-areas:
"toolbar toolbar"
"timeline tabs";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
@@ -60,7 +61,7 @@
--icon-inline-padding: 4px;
background-color: var(--theme-warning-background);
color: var(--theme-warning-color);
color: var(--theme-warning-color);
border-block-end: 1px solid var(--theme-splitter-color);
padding: 1em;
padding-inline-start: calc(var(--icon-inline-padding) * 2 + var(--icon-size));
@@ -110,7 +111,6 @@
}
}
.tracer-tab .call-tree-container {
display: flex;
flex-direction: column;
@@ -132,7 +132,8 @@
background-color: var(--theme-toolbar-error-background);
border-bottom: 1px solid var(--theme-splitter-color);
}
.search-exception, .search-value {
.search-exception,
.search-value {
padding: 5px 10px;
border-bottom: 1px solid var(--theme-splitter-color);
}
@@ -141,7 +142,6 @@
}
}
.tracer-tab .tree {
flex: 1;
overflow-x: auto;
@@ -179,7 +179,8 @@
color: var(--theme-selection-color);
}
.tracer-tab .frame-link.match, .tracer-tab .frame-link.match .frame-link-source {
.tracer-tab .frame-link.match,
.tracer-tab .frame-link.match .frame-link-source {
background: var(--theme-contrast-background);
color: var(--theme-contrast-color);
}
@@ -189,7 +190,7 @@
}
.tracer-tab .frame-link-source {
max-width:200px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
@@ -204,7 +205,8 @@
font-family: var(--monospace-font-family);
}
.tracer-dom-event, .tracer-dom-mutation {
.tracer-dom-event,
.tracer-dom-mutation {
padding-inline: 4px;
margin-inline: 5px;
@@ -327,10 +329,7 @@
.tracer-slider-bar {
width: 8px;
height: 100%;
background: linear-gradient(
var(--slider-bar-background) var(--slider-bar-progress, 0%),
transparent var(--slider-bar-progress, 0%)
);
background: linear-gradient(var(--slider-bar-background) var(--slider-bar-progress, 0%), transparent var(--slider-bar-progress, 0%));
background-color: var(--theme-body-background);
border: 1px solid var(--theme-splitter-color);
position: absolute;
@@ -347,7 +346,8 @@
border-inline-start: 1px solid var(--theme-splitter-color);
}
.tracer-slider-event, .tracer-slider-mutation {
.tracer-slider-event,
.tracer-slider-mutation {
position: absolute;
width: 3px;
left: 12px;
@@ -374,7 +374,8 @@
&.key {
background-color: var(--tracer-key-event-color);
}
&:hover, &.highlighted {
&:hover,
&.highlighted {
background-color: var(--blue-30);
/* make the highlights and hover go over mutations, as well as non-highlighted events */
z-index: 7;
@@ -403,7 +404,8 @@
border-radius: 50%;
}
.tracer-slider-mutation, .tracer-slider-mutation div {
.tracer-slider-mutation,
.tracer-slider-mutation div {
background-color: var(--tracer-mutation-color);
color: var(--tracer-mutation-darker-color);
font-size: 12px;

2
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
View File

@@ -94,7 +94,7 @@
.breakpoints-list .breakpoint,
.breakpoints-list .breakpoint-heading,
.breakpoints-options {
border-inline-start: 4px solid transparent
border-inline-start: 4px solid transparent;
}
html .breakpoints-list .breakpoint.is-conditional {

14
devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
View File

@@ -2,19 +2,19 @@
* 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/>. */
.dom-mutation-empty {
.dom-mutation-empty {
padding: 6px 20px;
text-align: center;
font-style: italic;
color: var(--theme-body-color);
white-space: normal;
}
}
.dom-mutation-empty a {
text-decoration: underline;
color: var(--theme-toolbar-selected-color);
cursor: pointer;
}
.dom-mutation-empty a {
text-decoration: underline;
color: var(--theme-toolbar-selected-color);
cursor: pointer;
}
.dom-mutation-list * {
user-select: none;

1
devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
View File

@@ -71,7 +71,6 @@
}
}
.expression-container {
padding-top: 3px;
padding-bottom: 3px;

8
devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
View File

@@ -71,13 +71,13 @@
.frames div[role="listbox"] .frame:hover,
.frames div[role="listbox"] .frame:focus {
background-color: var(--theme-toolbar-background-alt);
background-color: var(--theme-toolbar-background-alt);
}
.frames div[role="listbox"] .location-async-cause:hover,
.frames div[role="listbox"] .location-async-cause:focus
.frames div[role="listbox"] .location-async-cause:focus,
.frames div[role="listbox"] .location-async-cause:hover .async-label,
.frames div[role="listbox"] .location-async-cause:focus .async-label{
.frames div[role="listbox"] .location-async-cause:focus .async-label {
background-color: var(--theme-body-background);
}
@@ -100,7 +100,6 @@
background-color: light-dark(var(--theme-toolbar-background-alt), var(--theme-body-alternate-emphasized-background));
}
.frames div[role="listbox"] .frame.selected i.annotation-logo svg path {
fill: var(--theme-selection-color);
}
@@ -177,7 +176,6 @@
&::after {
flex: 1;
}
}
.frames-group .location-async-cause {

2
devtools/client/debugger/src/components/shared/SourceIcon.css
View File

@@ -80,7 +80,7 @@
width: 5px;
background-color: var(--purple-30);
border-radius: 100%;
outline: 1px solid var(--theme-sidebar-background);
outline: 1px solid var(--theme-sidebar-background);
translate: 12px 10px;
}

8
devtools/client/debugger/src/components/variables.css
View File

@@ -32,6 +32,10 @@
/* Animations */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

8
devtools/client/dom/content/dom-view.css
View File

@@ -78,11 +78,11 @@ body {
}
.treeTable .userClassLabel {
color: #E90000;
color: #e90000;
}
.treeTable .userFunctionLabel {
color: #025E2A;
color: #025e2a;
}
.treeTable .domLabel {
@@ -90,11 +90,11 @@ body {
}
.treeTable .domClassLabel {
color: #E90000;
color: #e90000;
}
.treeTable .domFunctionLabel {
color: #025E2A;
color: #025e2a;
}
.treeTable .ordinalLabel {

30
devtools/client/framework/options-panel.css
View File

@@ -1,18 +1,18 @@
/* 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/. */
:root{
:root {
user-select: none;
}
.theme-light {
--experimental-background: #E0EEFF;
--experimental-background: #e0eeff;
--experimental-color: #436286;
}
.theme-dark {
--experimental-background: #436286;
--experimental-color: #E0EEFF;
--experimental-color: #e0eeff;
}
#options-panel {
@@ -26,7 +26,7 @@
.options-vertical-pane {
margin: 5px;
width: calc(100%/3 - 10px);
width: calc(100% / 3 - 10px);
min-width: 320px;
padding-inline-start: 5px;
box-sizing: border-box;
@@ -37,7 +37,7 @@
only ~66% of the available space. */
@media (max-width: 1000px) {
.options-vertical-pane {
width: calc(100%/2 - 10px);
width: calc(100% / 2 - 10px);
}
}
@@ -97,7 +97,7 @@
display: inline-block;
font-size: 1rem;
font-style: italic;
/* To align it with the checkbox */
/* To align it with the checkbox */
padding: 4px 0 0;
padding-inline-end: 4px;
}
@@ -125,7 +125,7 @@
.deprecation-notice::before {
background-image: url("chrome://devtools/skin/images/alert.svg");
content: '';
content: "";
display: inline-block;
flex-shrink: 0;
height: 15px;
@@ -145,7 +145,7 @@
.deprecation-notice a {
color: currentColor;
}
.deprecation-notice a:hover{
.deprecation-notice a:hover {
text-decoration: underline;
}
@@ -174,17 +174,17 @@
.experimental-notice a {
color: currentColor;
}
.experimental-notice a:hover{
.experimental-notice a:hover {
text-decoration: underline;
}
@keyframes highlight {
0% {
background-color: var(--theme-highlight-yellow);
}
100% {
background-color: transparent;
}
0% {
background-color: var(--theme-highlight-yellow);
}
100% {
background-color: transparent;
}
}
.options-panel-highlight {

11
devtools/client/inspector/rules/test/doc_at_scope.css
View File

@@ -3,13 +3,15 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@scope (aside) {
div, [data-test="start-no-end"] {
div,
[data-test="start-no-end"] {
box-shadow: 60px -16px teal;
}
}
@scope (aside) to (.limit) {
div, [data-test="start-and-end"] {
div,
[data-test="start-and-end"] {
outline: 2px solid gold;
span {
@@ -19,7 +21,8 @@
/* This should show up as inherited rule for spans that are in .limit subtree, even
if the rule doesn't directly apply */
div, [data-test="start-and-end-inherit"] {
div,
[data-test="start-and-end-inherit"] {
color: salmon;
}
}
}

3
devtools/client/inspector/rules/test/doc_conditional_import.css vendored
View File

@@ -1,3 +1,4 @@
h1, [test-hint=imported-conditional] {
h1,
[test-hint="imported-conditional"] {
color: rebeccapurple;
}

2
devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
View File

@@ -1,3 +1,3 @@
table {
table {
border-collapse: collapse;
}

2
devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
View File

@@ -1,5 +1,5 @@
@import url("./doc_content_stylesheet_imported.css");
table {
table {
opacity: 1;
}

10
devtools/client/inspector/rules/test/doc_copystyles.css
View File

@@ -2,10 +2,12 @@
* 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/. */
html, body, #testid {
color: #F00;
background-color: #00F;
html,
body,
#testid {
color: #f00;
background-color: #00f;
font-size: 12px;
border-color: #00F !important;
border-color: #00f !important;
--var: "*/";
}

7
devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
View File

@@ -1,4 +1,5 @@
h1, [test-hint=imported-anonymous-layer--no-rule-layer] {
color:cyan;
outline: 10px solid cyan;
h1,
[test-hint="imported-anonymous-layer--no-rule-layer"] {
color: cyan;
outline: 10px solid cyan;
}

18
devtools/client/inspector/rules/test/doc_imported_named_layer.css
View File

@@ -1,13 +1,15 @@
@import url(./doc_imported_nested_named_layer.css) layer(importedNestedLayer);
@media screen {
h1, [test-hint=imported-named-layer--no-rule-layer] {
color:tomato;
border: 10px dotted currentColor;
}
h1,
[test-hint="imported-named-layer--no-rule-layer"] {
color: tomato;
border: 10px dotted currentColor;
}
@layer in-imported-stylesheet {
h1, [test-hint=imported-named-layer--named-layer] {
color: purple;
}
@layer in-imported-stylesheet {
h1,
[test-hint="imported-named-layer--named-layer"] {
color: purple;
}
}
}

7
devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
View File

@@ -1,5 +1,6 @@
@layer in-imported-nested-stylesheet {
h1, [test-hint=imported-nested-named-layer--named-layer] {
color: lime;
}
h1,
[test-hint="imported-nested-named-layer--named-layer"] {
color: lime;
}
}

3
devtools/client/inspector/rules/test/doc_imported_no_layer.css
View File

@@ -1,3 +1,4 @@
h1, [test-hint=imported-no-layer--no-rule-layer] {
h1,
[test-hint="imported-no-layer--no-rule-layer"] {
color: gold;
}

9
devtools/client/inspector/rules/test/doc_keyframeanimation.css
View File

@@ -11,16 +11,16 @@
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #FFCB01;
background-color: #ffcb01;
}
#pacman {
width: 0;
height: 0;
border-right: 60px solid transparent;
border-top: 60px solid #FFCB01;
border-left: 60px solid #FFCB01;
border-bottom: 60px solid #FFCB01;
border-top: 60px solid #ffcb01;
border-left: 60px solid #ffcb01;
border-bottom: 60px solid #ffcb01;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
border-top-right-radius: 60px;
@@ -41,7 +41,6 @@
animation: 4s linear 0s normal none infinite boxy;
}
#moxy {
animation-name: moxy, boxy;
animation-delay: 3.5s;

2
devtools/client/inspector/rules/test/doc_style_editor_link.css
View File

@@ -1,3 +1,3 @@
div {
opacity: 1;
}
}

6
devtools/client/inspector/rules/test/doc_urls_clickable.css
View File

@@ -1,9 +1,9 @@
.relative1 {
background-image: url(./doc_test_image.png);
background-image: url(./doc_test_image.png);
}
.absolute {
background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png");
background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png");
}
.base64 {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

2
devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
View File

@@ -1,3 +1,3 @@
body {
color: red;
}
}

4
devtools/client/jsonview/css/general.css
View File

@@ -5,7 +5,9 @@
/******************************************************************************/
/* General */
html, body, #content {
html,
body,
#content {
height: 100%;
}

5
devtools/client/jsonview/css/json-panel.css
View File

@@ -8,7 +8,10 @@
.jsonPrimitiveValue,
.jsonParseError {
font-size: 12px;
font-family: Lucida Grande, Tahoma, sans-serif;
font-family:
Lucida Grande,
Tahoma,
sans-serif;
line-height: 15px;
padding: 10px;
}

8
devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
View File

@@ -20,7 +20,7 @@
.network-monitor .custom-method-and-url .custom-url-value-label {
grid-column: 2 / 2;
grid-row: 1 / 1 ;
grid-row: 1 / 1;
margin-inline-start: 12px;
}
@@ -86,8 +86,10 @@
}
.network-monitor .custom-request button:focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
0 0 0 4px rgba(10,132,255,0.3)
box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
.network-monitor .custom-request #custom-request-send-button {

8
devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
View File

@@ -2,7 +2,7 @@
* 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/. */
.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input ) {
.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input) {
padding-inline-start: 0;
margin: 0;
}
@@ -193,8 +193,10 @@
}
.network-monitor .http-custom-request-button-container button:focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
0 0 0 4px rgba(10,132,255,0.3)
box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
.network-monitor .http-custom-request-button-container #http-custom-request-send-button {

3
devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
View File

@@ -140,7 +140,6 @@
margin-right: -33px;
margin-left: 5px;
padding: 0;
}
.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell {
display: inline;
@@ -187,7 +186,7 @@
unicode-bidi: plaintext;
}
.network-monitor .tabpanel-summary-value strong {
.network-monitor .tabpanel-summary-value strong {
margin-right: 3px;
}

12
devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
View File

@@ -2,10 +2,10 @@
* 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/. */
.network-monitor .network-action-bar {
width: 100%;
}
.network-monitor .network-action-bar {
width: 100%;
}
.network-monitor .network-action-bar .tabs-menu-item {
width: 50%;
}
.network-monitor .network-action-bar .tabs-menu-item {
width: 50%;
}

20
devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
View File

@@ -87,7 +87,6 @@
overflow: inherit;
}
/* Text inputs in tab panels */
.network-monitor .textbox-input {
@@ -100,7 +99,8 @@
/* Tree table in tab panels */
.network-monitor .tree-container, .tree-container .treeTable {
.network-monitor .tree-container,
.tree-container .treeTable {
position: relative;
height: 100%;
width: 100%;
@@ -392,7 +392,6 @@
align-items: center;
padding-inline-end: 20px;
--total-timings-width-percentage: 90%;
}
.network-monitor .requests-list-timings-total {
@@ -439,7 +438,6 @@
background: var(--timing-server-color-total);
}
.network-monitor .serviceworker-timings-color-launch {
background: var(--timing-server-color-1);
}
@@ -452,7 +450,6 @@
background: var(--timing-server-color-3);
}
/* Stack trace panel */
.network-monitor .stack-trace {
@@ -507,12 +504,14 @@
/* Custom request panel */
.network-monitor .custom-request-panel, .http-custom-request-panel {
.network-monitor .custom-request-panel,
.http-custom-request-panel {
height: 100%;
background-color: var(--theme-sidebar-background);
}
.theme-dark .network-monitor .custom-request-panel, .http-custom-request-panel {
.theme-dark .network-monitor .custom-request-panel,
.http-custom-request-panel {
color: var(--theme-selection-color);
}
@@ -520,7 +519,8 @@
font-weight: 600;
}
.network-monitor .custom-request-panel, .http-custom-request-panel textarea {
.network-monitor .custom-request-panel,
.http-custom-request-panel textarea {
resize: none;
font: message-box;
font-size: var(--theme-body-font-size);
@@ -557,8 +557,8 @@
width: 4.5em;
}
.network-monitor .http-custom-method-value{
width: 6.0em;
.network-monitor .http-custom-method-value {
width: 6em;
}
.network-monitor .custom-url-value,

4
devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
View File

@@ -37,7 +37,7 @@
}
.request-blocking-editable-label {
cursor: text
cursor: text;
}
/* The "Enable Blocking Requests" bar */
@@ -176,5 +176,5 @@
}
.request-blocking-notice-element::before {
content:"• ";
content: "• ";
}

22
devtools/client/netmonitor/src/assets/styles/RequestList.css
View File

@@ -38,10 +38,10 @@
right: 0;
inset-block: 0;
cursor: pointer;
/* The slow icon is absolutely positioned and can can overlap the column text.
This background gradient is added on its left side so the icon
has a solid background and the text slowly fades before the icon. */
background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%);
/* The slow icon is absolutely positioned and can can overlap the column text.
This background gradient is added on its left side so the icon
has a solid background and the text slowly fades before the icon. */
background-image: linear-gradient(to right, transparent, var(--theme-body-background) 43%);
padding-inline: 5px 30px;
&::before {
@@ -73,16 +73,16 @@
}
.request-list-item:not(.selected).odd .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%);
background-image: linear-gradient(to right, transparent, var(--table-zebra-inline-icons-background) 43%);
}
.request-list-item:not(.selected):hover .requests-list-slow-button,
.request-list-item:not(.selected).odd:hover .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%);
background-image: linear-gradient(to right, transparent, var(--table-selection-inline-icons-background-hover) 43%);
}
.request-list-item.selected .requests-list-slow-button {
background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%);
background-image: linear-gradient(to right, transparent, var(--theme-selection-background) 43%);
:root[forced-colors-active] & {
background-color: var(--theme-selection-background);
@@ -252,11 +252,11 @@
width: calc(100% - 11px);
}
.requests-list-header-button[data-sorted=ascending] > .button-icon {
.requests-list-header-button[data-sorted="ascending"] > .button-icon {
background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
}
.requests-list-header-button[data-sorted=descending] > .button-icon {
.requests-list-header-button[data-sorted="descending"] > .button-icon {
background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
}
@@ -500,8 +500,8 @@
border-inline-start-color: #585959 !important;
}
.requests-list-timings-division[data-division-scale=second],
.requests-list-timings-division[data-division-scale=minute] {
.requests-list-timings-division[data-division-scale="second"],
.requests-list-timings-division[data-division-scale="minute"] {
font-weight: 600;
}

36
devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
View File

@@ -83,31 +83,31 @@ path[data-statistic-name] {
fill: var(--stat-color);
}
[data-statistic-name=html] {
[data-statistic-name="html"] {
--stat-color: var(--theme-highlight-bluegrey);
}
[data-statistic-name=css] {
[data-statistic-name="css"] {
--stat-color: var(--theme-highlight-blue);
}
[data-statistic-name=js] {
[data-statistic-name="js"] {
--stat-color: var(--theme-highlight-lightorange);
}
[data-statistic-name=xhr] {
[data-statistic-name="xhr"] {
--stat-color: var(--theme-highlight-orange);
}
[data-statistic-name=fonts] {
[data-statistic-name="fonts"] {
--stat-color: var(--theme-highlight-purple);
}
[data-statistic-name=images] {
[data-statistic-name="images"] {
--stat-color: var(--theme-highlight-pink);
}
[data-statistic-name=media] {
[data-statistic-name="media"] {
--stat-color: var(--theme-highlight-green);
}
@@ -118,22 +118,22 @@ path[data-statistic-name] {
text-align: center;
}
.table-chart-row-label[name=count] {
.table-chart-row-label[name="count"] {
width: 3em;
text-align: end;
}
.table-chart-row-label[name=label] {
.table-chart-row-label[name="label"] {
width: 7em;
text-align: start;
}
.table-chart-row-label[name=size] {
.table-chart-row-label[name="size"] {
width: 7em;
text-align: start;
}
.table-chart-row-label[name=time] {
.table-chart-row-label[name="time"] {
width: 7em;
text-align: start;
}
@@ -162,15 +162,15 @@ path[data-statistic-name] {
}
.statistics-panel .charts,
.statistics-panel .pie-table-chart-container{
.statistics-panel .pie-table-chart-container {
margin-bottom: 2rem;
}
}
.offscreen{
position: absolute!important;
font-size: 0;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
clip-path: polygon(0 0,0 0,0 0,0 0);
.offscreen {
position: absolute !important;
font-size: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

5
devtools/client/netmonitor/src/assets/styles/StatusBar.css
View File

@@ -34,10 +34,7 @@
--bar-label-legend-color: var(--timing-marker-load-color);
}
:is(
.status-bar-label.dom-content-loaded,
.status-bar-label.load
)::before {
.status-bar-label:is(.dom-content-loaded, .load)::before {
content: "";
display: inline-block;
width: 12px;

1
devtools/client/netmonitor/src/assets/styles/StatusCode.css
View File

@@ -69,7 +69,6 @@
fill: currentColor;
}
/* Status codes for the headers side panel */
.headers-overview .summary .status .status-code {

1
devtools/client/netmonitor/src/assets/styles/UrlPreview.css
View File

@@ -76,7 +76,6 @@
float: left;
margin-right: -15px;
padding: 0 2px 0 0;
}
.url-preview tr.treeRow .treeValueCell {
display: inline;

2
devtools/client/netmonitor/src/assets/styles/messages.css
View File

@@ -83,7 +83,7 @@
border: none;
font-family: var(--monospace-font-family);
font-size: var(--theme-code-font-size);
line-height: calc(15/11);
line-height: calc(15 / 11);
direction: ltr;
text-align: left;
resize: none;

12
devtools/client/netmonitor/src/assets/styles/variables.css
View File

@@ -13,19 +13,16 @@
/* Colors for timing markers */
--timing-marker-color-opacity: 0.75;
/* prettier-ignore */
--timing-marker-dom-content-loaded-color:
rgb(
from var(--theme-highlight-blue) r g b /
var(--timing-marker-color-opacity)
);
--timing-marker-load-color:
rgb(
from var(--theme-highlight-red) r g b /
var(--timing-marker-color-opacity)
);
--timing-marker-load-color: rgb(from var(--theme-highlight-red) r g b / var(--timing-marker-color-opacity));
--table-splitter-color: light-dark(var(--grey-20), var(--grey-70));
--table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255,255,255,0.05));
--table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255, 255, 255, 0.05));
--table-zebra-inline-icons-background: light-dark(rgba(247, 247, 247), rgb(49, 47, 47));
--table-selection-background-hover: light-dark(rgba(209, 232, 255, 0.8), rgba(53, 59, 72, 1));
--table-selection-inline-icons-background-hover: light-dark(rgba(209, 232, 255), rgba(53, 59, 72, 1));
@@ -34,6 +31,7 @@
--timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
--timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
--timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
/* prettier-ignore */
--timing-send-color: light-dark(
rgba(0, 136, 204, 0.8), /* blue */
rgba(70, 175, 227, 0.8) /* light blue */
@@ -53,7 +51,7 @@
--timing-dns-color: var(--theme-highlight-purple);
--timing-ssl-color: var(--theme-highlight-orange);
--timing-connect-color: var(--theme-highlight-orange);
--timing-send-color:var(--theme-highlight-blue);
--timing-send-color: var(--theme-highlight-blue);
--timing-wait-color: var(--theme-highlight-gray);
--timing-receive-color: var(--theme-highlight-green);

61
devtools/client/responsive/index.css
View File

@@ -92,7 +92,7 @@ body,
#toolbar :is(select, button):focus-visible {
/* Adjust the outline otherwise it's clipped at the top */
outline-offset: -1px
outline-offset: -1px;
}
#toolbar-center-controls,
@@ -214,7 +214,7 @@ body,
#toolbar.user-agent #toolbar-center-controls {
grid-template-columns:
[device-selector]
.8fr
0.8fr
[separator]
max-content
[size-selector]
@@ -224,7 +224,7 @@ body,
[separator]
max-content
[dpr]
.6fr
0.6fr
[separator]
max-content
[throttling]
@@ -250,11 +250,13 @@ body,
/* When the UA label is here and it's on a second line, draw a separator between the
2 lines*/
#toolbar.user-agent {
background-image: linear-gradient(to bottom,
background-image: linear-gradient(
to bottom,
transparent var(--toolbar-row-height),
var(--theme-splitter-color) var(--toolbar-row-height),
var(--theme-splitter-color) calc(var(--toolbar-row-height) + 1px),
transparent 0);
transparent 0
);
}
}
@@ -416,8 +418,9 @@ body,
/* On screens that are >750px*/
@media (min-width: 750px) {
#device-form {
grid-template-areas: "name size dpr"
"user-agent touch buttons";
grid-template-areas:
"name size dpr"
"user-agent touch buttons";
}
#device-form-name input,
@@ -427,9 +430,10 @@ body,
.device-modal-content {
grid-template-columns: 1fr 1fr;
grid-template-areas: "phone phone"
"tablet laptop"
"tv custom";
grid-template-areas:
"phone phone"
"tablet laptop"
"tv custom";
}
.device-type-phones .device-list {
@@ -440,9 +444,10 @@ body,
/* On screens that are between 450px and 749px */
@media (min-width: 450px) and (max-width: 749px) {
#device-form {
grid-template-areas: "name size"
"user-agent dpr"
"touch buttons";
grid-template-areas:
"name size"
"user-agent dpr"
"touch buttons";
grid-template-columns: 2fr 1fr;
}
@@ -459,12 +464,13 @@ body,
/* On screens that are <450px */
@media (max-width: 449px) {
#device-form {
grid-template-areas: "name"
"size"
"dpr"
"user-agent"
"touch"
"buttons";
grid-template-areas:
"name"
"size"
"dpr"
"user-agent"
"touch"
"buttons";
}
#device-form-name input,
@@ -479,12 +485,13 @@ body,
@media (max-width: 749px) {
.device-modal-content {
grid-template-areas: "phone"
"phone"
"tablet"
"laptop"
"tv"
"custom";
grid-template-areas:
"phone"
"phone"
"tablet"
"laptop"
"tv"
"custom";
}
.device-modal-header {
@@ -705,9 +712,9 @@ body,
}
#device-form #device-form-save {
background-color: #0060DF;
background-color: #0060df;
color: #fff;
border: 1px solid #0060DF;
border: 1px solid #0060df;
width: 60px;
&:focus-visible {

4
devtools/client/responsive/responsive-browser.css
View File

@@ -4,7 +4,7 @@
:root {
/* This should map to --theme-toolbar-background. */
--rdm-background-color: #F5F5F6;
--rdm-background-color: #f5f5f6;
--rdm-shadow-color: rgba(155, 155, 155, 0.26);
&[devtoolstheme="dark"] {
@@ -83,7 +83,7 @@
}
html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px
grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px;
}
.browserContainer.responsive-mode > .browserStack > browser {

2
devtools/client/responsive/test/browser/doc_toolbox_rule_view.css
View File

@@ -7,4 +7,4 @@ div {
div {
width: 100px;
}
};
}

1
devtools/client/shared/components/AppErrorBoundary.css
View File

@@ -4,7 +4,6 @@
/* Base styles (common to most error boundaries) */
/* Container */
.app-error-panel {
color: var(--theme-text-color-strong);

6
devtools/client/shared/components/List.css
View File

@@ -14,7 +14,8 @@
overflow: auto;
}
.list:focus, .list .list-item-content:focus {
.list:focus,
.list .list-item-content:focus {
outline: 0;
}
@@ -22,7 +23,8 @@
background-color: var(--theme-toolbar-hover);
}
.list:focus li.current, .list li.active.current {
.list:focus li.current,
.list li.active.current {
background-color: var(--theme-emphasized-splitter-color);
}

2
devtools/client/shared/components/NotificationBox.css
View File

@@ -124,7 +124,7 @@
}
.notificationbox .messageCloseButton:active {
background-color: rgba(170, 170, 170, .4); /* --toolbar-tab-hover-active */
background-color: rgba(170, 170, 170, 0.4); /* --toolbar-tab-hover-active */
}
.notificationbox.wrapping .notificationInner .messageText {

2
devtools/client/shared/components/SearchModifiers.css
View File

@@ -47,7 +47,7 @@
background-image: url(chrome://devtools/content/debugger/images/case-match.svg);
}
.search-modifiers button > span.regex-match {
.search-modifiers button > span.regex-match {
background-image: url(chrome://devtools/content/debugger/images/regex-match.svg);
}

2
devtools/client/shared/components/SidebarToggle.css
View File

@@ -21,7 +21,7 @@
}
.sidebar-toggle.alignRight {
order: 10
order: 10;
}
/* Rotate button icon 90deg if the toolbox container is

26
devtools/client/shared/components/SmartTrace.css
View File

@@ -7,17 +7,15 @@
* Styles for React component at `devtools/client/shared/components/SmartTrace.js`
*/
.frames-group .frame{
.frames-group .frame {
display: block;
padding-inline-start: 16px;
}
.img.annotation-logo{
.img.annotation-logo {
background-color: var(--theme-body-color);
}
.frames .top-frames-list[role="listbox"] {
display: inline-grid;
grid-template-columns: auto 1fr;
@@ -68,7 +66,7 @@
/******* Group styles *******/
.frames-group {
grid-column:1 / -1;
grid-column: 1 / -1;
}
.frames .frames-group {
@@ -151,15 +149,15 @@
}
.frames-group .img.arrow {
mask: url("chrome://devtools/content/debugger/images/arrow.svg");
margin-inline-end: 4px;
background-color: var(--theme-icon-dimmed-color);
width: 10px;
height: 10px;
mask-size: 100%;
display: inline-block;
transform: rotate(-90deg);
transition: transform 0.18s ease;
mask: url("chrome://devtools/content/debugger/images/arrow.svg");
margin-inline-end: 4px;
background-color: var(--theme-icon-dimmed-color);
width: 10px;
height: 10px;
mask-size: 100%;
display: inline-block;
transform: rotate(-90deg);
transition: transform 0.18s ease;
}
.frames-group .img.arrow.expanded {

28
devtools/client/shared/components/reps/reps.css
View File

@@ -37,13 +37,7 @@
white-space: pre-wrap;
}
:is(
.objectBox-string,
.objectBox-textNode,
.objectBox > .nodeName,
.objectBox-node .tag-name,
.objectBox-node .attrName
).has-rtl-char {
:is(.objectBox-string, .objectBox-textNode, .objectBox > .nodeName, .objectBox-node .tag-name, .objectBox-node .attrName).has-rtl-char {
unicode-bidi: isolate;
}
@@ -106,7 +100,6 @@
content: "…";
}
.objectBox-function,
.objectBox-profile {
color: var(--object-color);
@@ -324,21 +317,17 @@
/* Open DOMNode in inspector or Accessible in accessibility inspector button */
:is(button, [role="button"]).open-accessibility-inspector {
background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg")
no-repeat;
background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg") no-repeat;
}
:is(button, [role="button"]).open-inspector {
background: url("chrome://devtools/content/shared/components/reps/images/open-inspector.svg")
no-repeat;
background: url("chrome://devtools/content/shared/components/reps/images/open-inspector.svg") no-repeat;
}
:is(button, [role="button"]).highlight-node {
background: url("chrome://devtools/skin/images/highlight-selector.svg")
no-repeat;
background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat;
}
:is(button, [role="button"]):is(.open-accessibility-inspector, .open-inspector, .highlight-node) {
display: inline-block;
vertical-align: top;
@@ -371,9 +360,7 @@ button.jump-definition {
width: 20px;
margin-left: 0.25em;
vertical-align: middle;
background: center
url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg")
no-repeat;
background: center url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg") no-repeat;
border-color: transparent;
stroke: var(--theme-icon-color);
-moz-context-properties: stroke;
@@ -392,7 +379,7 @@ button.jump-definition:hover {
:root[forced-colors-active] button.jump-definition:hover {
stroke: var(--theme-icon-hover-color);
border-color: var(--theme-icon-hover-color);
border-color: var(--theme-icon-hover-color);
}
/* In High Contrast Mode, the button has a solid background, so we only need
@@ -405,8 +392,7 @@ button.jump-definition:hover {
/* Invoke getter button */
button.invoke-getter {
mask: url(chrome://devtools/content/shared/components/reps/images/input.svg)
no-repeat;
mask: url(chrome://devtools/content/shared/components/reps/images/input.svg) no-repeat;
display: inline-block;
background-color: var(--theme-icon-color);
height: 10px;

4
devtools/client/shared/components/tabs/Tabs.css
View File

@@ -17,7 +17,7 @@
}
/* Hides the tab strip in the TabBar */
div[hidetabs=true] .tabs .tabs-navigation {
div[hidetabs="true"] .tabs .tabs-navigation {
display: none;
}
@@ -67,7 +67,7 @@ div[hidetabs=true] .tabs .tabs-navigation {
.tabs .tabs-menu-item.is-active {
color: var(--theme-toolbar-selected-color);
background-color: var(--theme-toolbar-selected-background);
background-color: var(--theme-toolbar-selected-background);
&:hover {
background-color: var(--theme-toolbar-selected-hover);

22
devtools/client/shared/components/tree/TreeView.css
View File

@@ -2,14 +2,14 @@
* 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');
@import url("chrome://devtools/content/shared/components/reps/reps.css");
/******************************************************************************/
/* TreeView Colors */
:root {
--tree-header-background: #C8D2DC;
--tree-header-sorted-background: #AAC3DC;
--tree-header-background: #c8d2dc;
--tree-header-sorted-background: #aac3dc;
}
/******************************************************************************/
@@ -156,12 +156,9 @@
user-select: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 0 !important;
background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(0, 0, 0, 0.05)),
radial-gradient(1px 60% at right,
rgba(0, 0, 0, 0.8) 0%,
transparent 80%) repeat-x var(--tree-header-background);
background:
linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)),
radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%) repeat-x var(--tree-header-background);
color: var(--theme-body-color);
white-space: nowrap;
}
@@ -188,10 +185,5 @@
}
.treeTable .treeHeaderCell:hover:active {
background-image: linear-gradient(
rgba(0, 0, 0, 0.1),
transparent),
radial-gradient(1px 60% at right,
rgba(0, 0, 0, 0.8) 0%,
transparent 80%);
background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent), radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
}

4
devtools/client/shared/toolbarbutton.css
View File

@@ -23,7 +23,7 @@
opacity: 0.5 !important;
}
&:is([open],:hover,:hover:active) {
&:is([open], :hover, :hover:active) {
background: var(--toolbarbutton-hover-background);
}
@@ -41,7 +41,7 @@
margin: 0 3px;
}
&[open=true] > .toolbarbutton-icon {
&[open="true"] > .toolbarbutton-icon {
color: var(--theme-icon-checked-color);
}
}

7
devtools/client/shared/widgets/cubic-bezier.css
View File

@@ -10,7 +10,7 @@
--bezier-curve-width: 150px;
--bezier-curve-height: 330px;
--bezier-preview-height: 40px;
--bezier-tooltip-container-height: calc(var(--bezier-curve-height) + var(--bezier-preview-height));
--bezier-tooltip-container-height: calc(var(--bezier-curve-height) + var(--bezier-preview-height));
display: grid;
grid-template-areas:
"presets curve"
@@ -68,9 +68,10 @@
is a registered property, so the engine will compute it to an rgb color,
which means it won't be seen as a system color in High Contrast Mode
and a default color would be used. */
forced-color-adjust: none;
forced-color-adjust: none;
}
/* prettier-ignore */
.cubic-bezier-container .display-wrap {
background:
repeating-linear-gradient(0deg,
@@ -120,7 +121,7 @@
height: 1px;
background-color: var(--timing-function-preview-scale);
/* opt-out of forced colors so we can see the line in High Contrast Mode */
forced-color-adjust: none;
forced-color-adjust: none;
}
.cubic-bezier-container .timing-function-preview .dot {

8
devtools/client/shared/widgets/filter-widget.css
View File

@@ -37,7 +37,7 @@
/* Make sure that when the presets list is shown, it has a fixed width */
width: 200px;
padding-left: 6px;
transition: width .1s;
transition: width 0.1s;
flex-shrink: 0;
border-left: 1px solid var(--theme-splitter-color);
}
@@ -113,11 +113,7 @@
height: 10px;
margin-right: 10px;
cursor: grab;
background: linear-gradient(to bottom,
currentColor 0,
currentcolor 1px,
transparent 1px,
transparent 2px);
background: linear-gradient(to bottom, currentColor 0, currentcolor 1px, transparent 1px, transparent 2px);
background-repeat: repeat-y;
background-size: auto 4px;
background-position: 0 1px;

10
devtools/client/shared/widgets/linear-widget.css
View File

@@ -43,13 +43,7 @@
.linear-easing-function-container .timing-function-preview {
width: var(--chart-size);
/* Draw a background line */
background: linear-gradient(
0deg,
transparent 45%,
var(--timing-function-preview-scale) 45%,
var(--timing-function-preview-scale) 55%,
transparent 55%
);
background: linear-gradient(0deg, transparent 45%, var(--timing-function-preview-scale) 45%, var(--timing-function-preview-scale) 55%, transparent 55%);
/* opt-out of forced colors so we can see the "line" gradient */
forced-color-adjust: none;
}
@@ -67,5 +61,5 @@
a registered color and gets computed to an rgb color which means the color
will be forced, even if the declaration value is a system color.
All the colors used here have High Contrast re-declaration so it should be fine */
forced-color-adjust: none;
forced-color-adjust: none;
}

62
devtools/client/shared/widgets/spectrum.css
View File

@@ -29,24 +29,13 @@
.spectrum-checker {
background-color: #eee;
background-image: linear-gradient(
45deg,
#ccc 25%,
transparent 25%,
transparent 75%,
#ccc 75%,
#ccc
),
linear-gradient(
45deg,
#ccc 25%,
transparent 25%,
transparent 75%,
#ccc 75%,
#ccc
);
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
background-position:
0 0,
6px 6px;
/* Make sure that the background color is properly set in High Contrast Mode */
forced-color-adjust: none;
}
@@ -99,11 +88,13 @@
width: 27px;
height: 27px;
background-color: #fff;
background-image: linear-gradient(var(--overlay-color), var(--overlay-color)),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
background-image:
linear-gradient(var(--overlay-color), var(--overlay-color)), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
background-position:
0 0,
6px 6px;
/* Make sure that the background color is properly set in High Contrast Mode */
forced-color-adjust: none;
@@ -189,34 +180,19 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
border: none;
}
:root[forced-colors-active] :is(
.spectrum-hue-input,
.spectrum-alpha-input
)::-moz-range-thumb {
:root[forced-colors-active] :is(.spectrum-hue-input, .spectrum-alpha-input)::-moz-range-thumb {
background: ButtonFace;
border: 2px solid ButtonText;
}
:root[forced-colors-active] :is(
.spectrum-hue-input,
.spectrum-alpha-input
):is(:hover, :focus-visible)::-moz-range-thumb {
:root[forced-colors-active] :is(.spectrum-hue-input, .spectrum-alpha-input):is(:hover, :focus-visible)::-moz-range-thumb {
border-color: SelectedItem;
}
.spectrum-hue-input::-moz-range-track {
border-radius: 2px;
height: 8px;
background: linear-gradient(
to right,
#ff0000 0%,
#ffff00 17%,
#00ff00 33%,
#00ffff 50%,
#0000ff 67%,
#ff00ff 83%,
#ff0000 100%
);
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
/* Make sure that the background color is properly set in High Contrast Mode */
forced-color-adjust: none;
}
@@ -297,7 +273,7 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
}
.spectrum-color-contrast.visible:not(.error) .contrast-ratio-min .accessibility-contrast-value,
.spectrum-color-contrast.visible:not(.error) .contrast-ratio-max .accessibility-contrast-value{
.spectrum-color-contrast.visible:not(.error) .contrast-ratio-max .accessibility-contrast-value {
margin-inline-start: 7px;
}
@@ -318,12 +294,16 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
}
.spectrum-color-contrast.visible:not(.error):-moz-locale-dir(ltr) .contrast-value-and-swatch:before {
box-shadow: 0 0 0 1px var(--accessibility-contrast-swatch-border-color), 6px 5px var(--accessibility-contrast-bg),
box-shadow:
0 0 0 1px var(--accessibility-contrast-swatch-border-color),
6px 5px var(--accessibility-contrast-bg),
6px 5px 0 1px var(--accessibility-contrast-swatch-border-color);
}
.spectrum-color-contrast.visible:not(.error):-moz-locale-dir(rtl) .contrast-value-and-swatch:before {
box-shadow: 0 0 0 1px var(--accessibility-contrast-swatch-border-color), -6px 5px var(--accessibility-contrast-bg),
box-shadow:
0 0 0 1px var(--accessibility-contrast-swatch-border-color),
-6px 5px var(--accessibility-contrast-bg),
-6px 5px 0 1px var(--accessibility-contrast-swatch-border-color);
}

15
devtools/client/themes/accessibility-color-contrast.css
View File

@@ -27,15 +27,12 @@
margin-inline-start: 4px;
}
.accessibility-color-contrast
.accessibility-contrast-value.AA:after,
.accessibility-color-contrast
.accessibility-contrast-value.AAA:after {
.accessibility-color-contrast .accessibility-contrast-value.AA:after,
.accessibility-color-contrast .accessibility-contrast-value.AAA:after {
color: var(--theme-highlight-green);
}
.accessibility-color-contrast
.accessibility-contrast-value.FAIL:after {
.accessibility-color-contrast .accessibility-contrast-value.FAIL:after {
color: var(--theme-icon-error-color);
display: inline-block;
width: 12px;
@@ -49,14 +46,12 @@
fill: currentColor;
}
.accessibility-color-contrast
.accessibility-contrast-value.AA:after {
.accessibility-color-contrast .accessibility-contrast-value.AA:after {
content: "AA\2713";
unicode-bidi: isolate;
}
.accessibility-color-contrast
.accessibility-contrast-value.AAA:after {
.accessibility-color-contrast .accessibility-contrast-value.AAA:after {
content: "AAA\2713";
unicode-bidi: isolate;
}

16
devtools/client/themes/animation.css
View File

@@ -183,7 +183,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
}
.animation-item:dir(rtl).animation-target {
right:0;
right: 0;
}
/* Reps component */
@@ -204,7 +204,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
flex: none;
}
.animation-target .objectBox .highlight-node:hover{
.animation-target .objectBox .highlight-node:hover {
fill: var(--theme-icon-color);
}
@@ -251,7 +251,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
}
.animation-summary-graph:dir(rtl) .animation-summary-graph-path {
transform: scaleX(-1.0);
transform: scaleX(-1);
}
.animation-computed-timing-path path {
@@ -262,7 +262,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
transform: scale(1, -1);
}
.animation-computed-timing-path path.infinity:nth-child(n+2) {
.animation-computed-timing-path path.infinity:nth-child(n + 2) {
opacity: 0.3;
}
@@ -274,7 +274,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
vector-effect: non-scaling-stroke;
}
.animation-effect-timing-path path.infinity:nth-child(n+2) {
.animation-effect-timing-path path.infinity:nth-child(n + 2) {
opacity: 0.3;
}
@@ -375,7 +375,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
paint-order: stroke;
stroke: var(--theme-body-background);
stroke-linejoin: round;
stroke-opacity: .5;
stroke-opacity: 0.5;
stroke-width: 4;
text-anchor: end;
}
@@ -385,7 +385,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
}
.animation-summary-graph:dir(rtl) .animation-name {
right:0;
right: 0;
}
/* Animation Detail */
@@ -509,7 +509,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h
}
.keyframes-graph:dir(rtl) .keyframes-graph-path {
transform: scaleX(-1.0);
transform: scaleX(-1);
}
.keyframes-graph-path {

18
devtools/client/themes/badge.css
View File

@@ -2,20 +2,20 @@
* 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/. */
:root {
:root {
--badge-active-background-color: var(--blue-60);
--badge-active-border-color: light-dark(rgba(255, 255, 255, 0.7), #FFF6);
--badge-active-border-color: light-dark(rgba(255, 255, 255, 0.7), #fff6);
--badge-background-color: light-dark(white, var(--grey-80));
--badge-border-color: light-dark(#CACAD1, var(--grey-50));
--badge-border-color: light-dark(#cacad1, var(--grey-50));
--badge-color: light-dark(var(--grey-60), var(--grey-40));
--badge-interactive-background-color: light-dark(var(--grey-20), var(--grey-70));
--badge-interactive-color: light-dark(var(--grey-90), var(--grey-30));
--badge-hover-interactive-background-color: light-dark(#DFDFE8, var(--grey-80));
--badge-hover-interactive-background-color: light-dark(#dfdfe8, var(--grey-80));
--badge-hover-interactive-color: var(--badge-color);
--badge-interactive-border-color: light-dark(#CACAD1, var(--grey-50));
--badge-scrollable-color: light-dark(#8000D7, #B98EFF);
--badge-scrollable-background-color: light-dark(#FFFFFF, var(--badge-interactive-background-color));
--badge-scrollable-active-background-color: #8000D7;
--badge-interactive-border-color: light-dark(#cacad1, var(--grey-50));
--badge-scrollable-color: light-dark(#8000d7, #b98eff);
--badge-scrollable-background-color: light-dark(#ffffff, var(--badge-interactive-background-color));
--badge-scrollable-active-background-color: #8000d7;
--badge-scrollable-active-color: var(--theme-selection-color);
&[forced-colors-active] {
@@ -99,7 +99,7 @@
color: var(--badge-hover-interactive-color);
}
.inspector-badge:is(.active,.interactive.active) {
.inspector-badge:is(.active, .interactive.active) {
background-color: var(--badge-active-background-color);
outline-color: var(--badge-active-border-color);
color: var(--theme-selection-color);

10
devtools/client/themes/boxmodel.css
View File

@@ -6,18 +6,18 @@
--position-text-color: light-dark(var(--grey-90), var(--grey-30));
--position-border-color: light-dark(var(--grey-50), var(--grey-40));
--margin-box-color: light-dark(#FDFFDF, #73764A);
--margin-box-color: light-dark(#fdffdf, #73764a);
--margin-box-text-color: light-dark(var(--grey-90), var(--grey-10));
--margin-box-border-color: light-dark(#D8E60A, #BDCA00);
--margin-box-border-color: light-dark(#d8e60a, #bdca00);
--border-box-color: light-dark(var(--grey-50), var(--grey-70));
--border-box-text-color: light-dark(var(--theme-selection-color), var(--grey-10));
--padding-box-color: light-dark(#E3DCFF, #6657A6);
--padding-box-color: light-dark(#e3dcff, #6657a6);
--padding-box-text-color: light-dark(var(--grey-90), var(--grey-10));
--content-box-color: light-dark(#CFF0FB, #407AA4);
--content-box-border-color: light-dark(#54A9FF, #00B8FF);
--content-box-color: light-dark(#cff0fb, #407aa4);
--content-box-border-color: light-dark(#54a9ff, #00b8ff);
--box-border-width: 1px;

8
devtools/client/themes/breadcrumbs.css
View File

@@ -2,7 +2,7 @@
* 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/. */
:root {
:root {
--breadcrumb-id-class-color: light-dark(#909090, var(--theme-text-color-strong));
--breadcrumb-tag-color: light-dark(var(--theme-body-color), var(--theme-contrast-color));
@@ -100,11 +100,7 @@
color: var(--theme-highlight-purple);
}
:is(
.breadcrumbs-widget-item-tag,
.breadcrumbs-widget-item-pseudo-classes,
.breadcrumbs-widget-item-classes
) {
:is(.breadcrumbs-widget-item-tag, .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item-classes) {
color: currentColor;
}

10
devtools/client/themes/changes.css
View File

@@ -20,9 +20,9 @@
:root.theme-dark {
--diff-add-background-color: rgba(18, 188, 0, 0.15);
--diff-add-text-color: #12BC00;
--diff-add-text-color: #12bc00;
--diff-remove-background-color: rgba(255, 0, 57, 0.15);
--diff-remove-text-color: #FF0039;
--diff-remove-text-color: #ff0039;
--diff-source-background: #222225;
}
@@ -73,8 +73,7 @@
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: calc(var(--diff-level-min-offset) +
var(--diff-level-offset) * var(--diff-level));
padding-left: calc(var(--diff-level-min-offset) + var(--diff-level-offset) * var(--diff-level));
}
#sidebar-panel-changes .changes__toolbar {
@@ -132,8 +131,7 @@
*/
background-blend-mode: overlay;
background-color: var(--theme-button-background);
background-image:
linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
background-image: linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
border-radius: 8px;
border: none;
color: var(--theme-body-color);

2
devtools/client/themes/chart.css
View File

@@ -20,7 +20,7 @@
.pie-chart-slice {
stroke-width: 1px;
cursor: pointer;
stroke: light-dark(rgba(255,255,255,0.8), rgba(0,0,0,0.2)) ;
stroke: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.2));
&[largest] {
stroke: light-dark(#000, #fff);

42
devtools/client/themes/common.css
View File

@@ -13,10 +13,7 @@
font: message-box;
font-size: var(--theme-body-font-size);
--tab-line-hover-color: light-dark(
rgba(0,0,0,.2),
rgba(255,255,255,.2)
);
--tab-line-hover-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
--tab-line-selected-color: var(--blue-50);
--toggle-thumb-color: light-dark(white, var(--grey-40));
@@ -38,7 +35,7 @@
--toggle-hover-thumb-color: var(--toggle-thumb-color);
--searchbox-no-match-background-color: light-dark(#ffe5e5, #402325);
--searchbox-no-match-stroke-color: light-dark(var(--red-60),var(--red-50));
--searchbox-no-match-stroke-color: light-dark(var(--red-60), var(--red-50));
--searchbox-background-color: transparent;
--searchbox-border-color: transparent;
@@ -150,7 +147,9 @@ html|input {
* Override wrong system font from forms.css
* Bug 1458224: buttons use a wrong default font-size on Linux
*/
html|button, html|select, html|input {
html|button,
html|select,
html|input {
font: message-box;
font-size: var(--theme-body-font-size);
}
@@ -402,11 +401,7 @@ iframe {
}
}
.devtools-button:empty:not(
[aria-expanded="true"],
[aria-pressed="true"],
.checked
):hover {
.devtools-button:empty:not([aria-expanded="true"], [aria-pressed="true"], .checked):hover {
background: var(--toolbarbutton-hover-background);
color: var(--toolbarbutton-hover-color);
@@ -424,7 +419,7 @@ iframe {
}
.theme-light .devtools-button[data-standalone] {
border-color: rgba(138,161,180,0.2);
border-color: rgba(138, 161, 180, 0.2);
}
/* Selectable button which is unchecked. */
@@ -675,11 +670,7 @@ iframe {
color: var(--theme-selection-color);
}
.theme-twisty:is(
.open,
[open],
[aria-expanded="true"]
) {
.theme-twisty:is(.open, [open], [aria-expanded="true"]) {
transform: none;
}
@@ -749,7 +740,9 @@ iframe {
width: 100%;
height: 2px;
background: transparent;
transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
transition:
transform 250ms var(--animation-curve),
opacity 250ms var(--animation-curve);
opacity: 0;
transform: scaleX(0);
@@ -798,7 +791,7 @@ iframe {
/* Checkbox Toggle */
.devtools-checkbox-toggle {
--x-pos: .15em;
--x-pos: 0.15em;
/* Reset native checkbox styling. */
appearance: none;
background-color: var(--toggle-track-color);
@@ -837,10 +830,9 @@ iframe {
}
}
/* For right-to-left layout, the toggle thumb goes in the opposite direction. */
html[dir="rtl"] .devtools-checkbox-toggle {
--x-pos: -.15em;
--x-pos: -0.15em;
}
html[dir="rtl"] .devtools-checkbox-toggle:checked {
@@ -849,14 +841,14 @@ html[dir="rtl"] .devtools-checkbox-toggle:checked {
.devtools-checkbox-toggle::before {
position: relative;
width: calc(1em - .3em);
height: calc(1em - .3em);
transform: translateY(.15em) translateX(var(--x-pos));
width: calc(1em - 0.3em);
height: calc(1em - 0.3em);
transform: translateY(0.15em) translateX(var(--x-pos));
border-radius: 100%;
display: block;
content: "";
background-color: var(--toggle-thumb-color);
transition: transform .1s ease-out;
transition: transform 0.1s ease-out;
}
.devtools-checkbox-toggle:checked::before {

7
devtools/client/themes/compatibility.css
View File

@@ -73,9 +73,10 @@
display: grid;
column-gap: var(--compatibility-base-unit);
padding: calc(var(--compatibility-base-unit) * 2);
grid-template-areas: "icon description"
". aliases"
". node-pane";
grid-template-areas:
"icon description"
". aliases"
". node-pane";
grid-template-columns: auto 1fr;
}

7
devtools/client/themes/computed.css
View File

@@ -2,9 +2,9 @@
* 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/. */
.theme-dark {
.theme-dark {
--row-striped-background: rgba(255, 255, 255, 0.05);
}
}
.theme-light {
--row-striped-background: rgba(247, 247, 247, 0.8);
@@ -215,7 +215,7 @@
border-width: 1px 1px 0 1px;
/* Make the border more visible in High Contrast Mode */
:root[forced-colors-active] &{
:root[forced-colors-active] & {
border-style: solid;
}
}
@@ -228,7 +228,6 @@
text-decoration: line-through;
}
#computed-no-results {
height: 100%;
}

57
devtools/client/themes/dark-theme.css
View File

@@ -42,11 +42,7 @@ body {
* FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
* failures in debug builds.
*/
:is(
.theme-link,
.cm-s-mozilla .cm-link,
:is(.cm-editor, .cm-highlighted) .tok-link
):visited {
:is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited {
color: var(--theme-link-color);
}
@@ -54,10 +50,7 @@ body {
.cm-s-mozilla .cm-meta,
.cm-s-mozilla .cm-hr,
.cm-s-mozilla .cm-comment,
:is(.cm-editor, .cm-highlighted) :is(
.tok-meta,
.tok-comment
),
:is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment),
.variable-or-property .token-undefined,
.variable-or-property .token-null,
.CodeMirror-Tern-completion-unknown:before {
@@ -78,7 +71,7 @@ body {
.variable-or-property .token-number,
.variable-or-property[return] > .title > .name,
.variable-or-property[scope] > .title > .name {
color: #709AFF;
color: #709aff;
}
.CodeMirror-Tern-completion-number:before {
@@ -96,10 +89,7 @@ body {
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-variable-2,
:is(.cm-editor, .cm-highlighted) :is(
.tok-variableName.tok-definition,
.tok-variableName
) {
:is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) {
color: var(--theme-highlight-blue);
}
@@ -140,7 +130,7 @@ body {
:is(.cm-editor, .cm-highlighted) .tok-string,
.variable-or-property .token-string,
.CodeMirror-Tern-farg {
color: #709AFF;
color: #709aff;
}
.CodeMirror-Tern-completion-string:before,
@@ -151,11 +141,7 @@ body {
.cm-s-mozilla .cm-atom,
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error,
:is(.cm-editor, .cm-highlighted) :is(
.tok-atom,
.tok-bool,
.tok-invalid
),
:is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid),
.variable-or-property .token-boolean,
.variable-or-property .token-domnode,
.variable-or-property[exception] > .title > .name {
@@ -174,7 +160,8 @@ body {
.devtools-toolbar,
.devtools-sidebar-tabs tabs,
.devtools-sidebar-alltabs,
.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
.cm-s-mozilla .CodeMirror-dialog {
/* General toolbar styling */
color: var(--theme-body-color);
background-color: var(--theme-toolbar-background);
border-color: var(--theme-splitter-color);
@@ -192,23 +179,21 @@ body {
* Best effort to match the existing theme, some of the colors
* are duplicated here to prevent weirdness in the main theme. */
.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
.CodeMirror.cm-s-mozilla {
/* Inherit platform specific font sizing and styles */
font-family: inherit;
font-size: inherit;
background: transparent;
}
.CodeMirror.cm-s-mozilla pre,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like {
.CodeMirror.cm-s-mozilla pre,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like {
color: var(--theme-text-color-strong);
}
.cm-s-mozilla .cm-operator,
:is(.cm-editor, .cm-highlighted) :is(
.tok-punctuation,
.tok-operator
) {
:is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) {
color: var(--theme-body-color);
}
@@ -225,24 +210,24 @@ body {
border-left-color: #aaa;
}
.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
background: rgba(185, 215, 253, .15);
.cm-s-mozilla .CodeMirror-activeline-background {
/* selected color with alpha */
background: rgba(185, 215, 253, 0.15);
}
/* Highlight for a line that contains an error. */
div.CodeMirror div.error-line {
background: rgba(255,0,0,0.2);
background: rgba(255, 0, 0, 0.2);
}
/* Generic highlighted text */
div.CodeMirror span.marked-text {
background: rgba(255,255,0,0.2);
border: 1px dashed rgba(192,192,0,0.6);
background: rgba(255, 255, 0, 0.2);
border: 1px dashed rgba(192, 192, 0, 0.6);
margin-inline-start: -1px;
margin-inline-end: -1px;
}
.cm-s-mozilla .empty-line .CodeMirror-linenumber,
/* Codemirror 6 */
:is(.cm-editor, .cm-highlighted) .cm-gutterElement.empty-line {
@@ -273,7 +258,7 @@ div.CodeMirror span.eval-text {
.CodeMirror-hints,
.CodeMirror-Tern-tooltip {
box-shadow: 0 0 4px rgba(255, 255, 255, .3);
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
background-color: #0f171f;
color: var(--theme-body-color);
}

31
devtools/client/themes/fonts.css
View File

@@ -29,7 +29,8 @@
overflow: auto;
}
#font-container, #font-editor {
#font-container,
#font-editor {
min-width: var(--min-container-width);
}
@@ -38,18 +39,18 @@
}
#font-editor {
padding-bottom: .5em;
padding-bottom: 0.5em;
}
#font-editor summary {
user-select: none;
cursor: pointer;
margin-bottom: .4em;
margin-bottom: 0.4em;
width: -moz-fit-content;
}
#font-editor details {
padding-bottom: .5em;
padding-bottom: 0.5em;
}
#font-editor details .label-open,
@@ -140,7 +141,7 @@
}
.font-group {
margin-bottom: .5em;
margin-bottom: 0.5em;
}
.font-group .font-name {
@@ -220,7 +221,7 @@
justify-content: space-between;
align-items: center;
padding: 0 20px;
margin: .6em 0;
margin: 0.6em 0;
}
/* Style *all* axis controls with a top separator. See reset below. */
@@ -313,7 +314,7 @@
}
/* Make native number steppers disappear by treating it as text field*/
.font-value-input[type=number] {
.font-value-input[type="number"] {
appearance: textfield;
}
@@ -385,7 +386,7 @@
color: var(--theme-text-color-alt);
font-size: smaller;
position: absolute;
bottom: -.6em;
bottom: -0.6em;
visibility: hidden;
}
@@ -398,12 +399,12 @@
.font-value-slider-container::before {
content: attr(data-min);
inset-inline-start: .3em;
inset-inline-start: 0.3em;
}
.font-value-slider-container::after {
content: attr(data-max);
inset-inline-end: .3em;
inset-inline-end: 0.3em;
}
.font-value-slider {
@@ -416,11 +417,10 @@
The value of font-weight goes from 100 to 900 in increments of 100.
Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
*/
.font-value-slider[name=font-weight] {
.font-value-slider[name="font-weight"] {
--notch-size: 3px;
/* Draw a vertical line to get one notch per background-image instance */
background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size),
transparent 0);
background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size), transparent 0);
/* Offset the background so the notch aligns with the center of the slider thumb */
background-position: 5px center;
/* Repeat the background-image horizontally */
@@ -448,7 +448,7 @@
}
.font-origin {
margin-top: -.25em;
margin-top: -0.25em;
color: var(--theme-comment);
justify-self: start;
}
@@ -516,7 +516,8 @@
}
}
& a, a:visited {
& a,
a:visited {
color: var(--theme-link-color);
}
}

5
devtools/client/themes/inspector-shared.css
View File

@@ -7,10 +7,7 @@
@import url("./inspector-swatches.css");
:root {
--inspector-highlight-background-color: light-dark(
var(--theme-highlight-yellow),
#521C76
);
--inspector-highlight-background-color: light-dark(var(--theme-highlight-yellow), #521c76);
--inspector-highlight-color: inherit;
&[forced-colors-active] {

26
devtools/client/themes/inspector-swatches.css
View File

@@ -43,11 +43,7 @@
}
}
:is(
.inspector-flex,
.inspector-grid,
.inspector-shapeswatch
)[aria-pressed="true"] {
:is(.inspector-flex, .inspector-grid, .inspector-shapeswatch)[aria-pressed="true"] {
background-color: var(--theme-toolbarbutton-checked-background);
stroke: var(--theme-toolbarbutton-checked-color);
}
@@ -116,18 +112,15 @@
/* We want to display a checker below the current swatch color that would be visible
if the swatch color isn't opaque */
.inspector-colorswatch::before {
content: '';
content: "";
background-color: #eee;
--checker-color: #ccc;
--background-gradient: linear-gradient(
45deg,
var(--checker-color) 25%,
transparent 25% 75%,
var(--checker-color) 75%
);
--background-gradient: linear-gradient(45deg, var(--checker-color) 25%, transparent 25% 75%, var(--checker-color) 75%);
background-image: var(--background-gradient), var(--background-gradient);
background-size: var(--swatch-size) var(--swatch-size);
background-position: 0 0, calc(var(--swatch-size) / 2) calc(var(--swatch-size) / 2);
background-position:
0 0,
calc(var(--swatch-size) / 2) calc(var(--swatch-size) / 2);
position: absolute;
border-radius: 50%;
inset: 0;
@@ -172,12 +165,7 @@
stroke: #808080;
}
:root[forced-colors-active] :is(
.inspector-bezierswatch,
.inspector-lineareasingswatch,
.inspector-filterswatch,
.inspector-angleswatch
) {
:root[forced-colors-active] :is(.inspector-bezierswatch, .inspector-lineareasingswatch, .inspector-filterswatch, .inspector-angleswatch) {
fill: ButtonFace;
stroke: var(--theme-icon-color);
/* For some icons, the outline can conflate with the background image in a weird way

3
devtools/client/themes/inspector.css
View File

@@ -105,8 +105,7 @@ window {
display: none;
}
#inspector-searchnavigation-container
.inspector-searchnavigation-buttons::before {
#inspector-searchnavigation-container .inspector-searchnavigation-buttons::before {
background-size: 16px;
margin-inline: 0;
}

29
devtools/client/themes/layout.css
View File

@@ -2,11 +2,11 @@
* 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/. */
:root {
:root {
--flex-basis-outline-border-color: var(--blue-40);
--flex-basis-outline-background-color: rgba(69, 161, 255, 0.25);
--flex-growing-delta-outline-background-color: rgba(221, 0, 169, 0.13);
--flex-shrinking-delta-outline-background-color: #E9E3FF;
--flex-shrinking-delta-outline-background-color: #e9e3ff;
--flex-min-max-properties-color: var(--purple-60);
}
@@ -283,11 +283,11 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
}
.flex-outline.vertical-tb {
transform: translate(50%, -2em) rotate(.25turn);
transform: translate(50%, -2em) rotate(0.25turn);
}
.flex-outline.vertical-bt {
transform:translate(50%, 12em) rotate(0.75turn);
transform: translate(50%, 12em) rotate(0.75turn);
}
.flex-outline.vertical-tb,
@@ -324,19 +324,16 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
top: 6px;
/* Making sure the icon is visible against any background by creating a plain background
around its shape, using a drop-shadow filter. */
filter:
drop-shadow(1px 0 0 var(--theme-body-background))
drop-shadow(0 1px 0 var(--theme-body-background))
drop-shadow(-1px 0 0 var(--theme-body-background))
filter: drop-shadow(1px 0 0 var(--theme-body-background)) drop-shadow(0 1px 0 var(--theme-body-background)) drop-shadow(-1px 0 0 var(--theme-body-background))
drop-shadow(0 -1px 0 var(--theme-body-background));
}
.flex-outline.vertical-tb .flex-outline-final.clamped::after {
transform: rotate(-.25turn);
transform: rotate(-0.25turn);
}
.flex-outline.vertical-bt .flex-outline-final.clamped::after {
transform: rotate(-.75turn);
transform: rotate(-0.75turn);
}
.flex-outline-basis {
@@ -383,7 +380,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
position: absolute;
left: 2px;
right: 2px;
top: calc(50% - .5px);
top: calc(50% - 0.5px);
height: 1px;
background: var(--theme-highlight-red);
}
@@ -401,14 +398,14 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
right: 2px;
border-width: 1px 1px 0 0;
transform-origin: top right;
transform: rotate(.125turn);
transform: rotate(0.125turn);
}
.flex-outline.shrinking .flex-outline-delta:after {
left: 2px;
border-width: 1px 0 0 1px;
transform-origin: top left;
transform: rotate(-.125turn);
transform: rotate(-0.125turn);
}
.flex-outline-point {
@@ -553,7 +550,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
.flex-outline.horizontal-rl,
.flex-outline.horizontal-rl .flex-outline-point,
.flex-outline.horizontal-rl .flex-outline-final.clamped::after {
transform: rotate(.5turn);
transform: rotate(0.5turn);
}
/**
@@ -584,7 +581,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
grid-column: 1;
display: grid;
grid-template-columns: max-content max-content;
gap: .5em;
gap: 0.5em;
}
.flex-item-sizing .flexibility .name {
@@ -613,7 +610,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
.flex-item-sizing .css-property-link {
font-weight: normal;
margin-inline-start: .5em;
margin-inline-start: 0.5em;
}
.flex-item-sizing .reasons,

62
devtools/client/themes/light-theme.css
View File

@@ -42,22 +42,14 @@ body {
* FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
* failures in debug builds.
*/
:is(
.theme-link,
.cm-s-mozilla .cm-link,
:is(.cm-editor, .cm-highlighted) .tok-link
):visited {
:is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited {
color: var(--theme-link-color);
}
.theme-comment,
.cm-s-mozilla .cm-meta,
.cm-s-mozilla .cm-hr,
.cm-s-mozilla .cm-comment
:is(.cm-editor, .cm-highlighted) :is(
.tok-meta,
.tok-comment
),
.cm-s-mozilla .cm-comment :is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment),
.variable-or-property .token-undefined,
.variable-or-property .token-null,
.CodeMirror-Tern-completion-unknown:before {
@@ -82,7 +74,7 @@ body {
}
.CodeMirror-Tern-completion-number:before {
background-color: hsl(72,100%,27%);
background-color: hsl(72, 100%, 27%);
}
.theme-fg-color1,
@@ -96,10 +88,7 @@ body {
.cm-s-mozilla .cm-def,
.cm-s-mozilla .cm-variable-2,
:is(.cm-editor, .cm-highlighted) :is(
.tok-variableName.tok-definition,
.tok-variableName
) {
:is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) {
color: var(--blue-55);
}
@@ -114,7 +103,7 @@ body {
}
.CodeMirror-Tern-completion-object:before {
background-color: hsl(208,56%,40%);
background-color: hsl(208, 56%, 40%);
}
.theme-fg-color3,
@@ -142,17 +131,13 @@ body {
.CodeMirror-Tern-completion-string:before,
.CodeMirror-Tern-completion-fn:before {
background-color: hsl(24,85%,39%);
background-color: hsl(24, 85%, 39%);
}
.cm-s-mozilla .cm-atom,
.cm-s-mozilla .cm-quote,
.cm-s-mozilla .cm-error,
:is(.cm-editor, .cm-highlighted) :is(
.tok-atom,
.tok-bool,
.tok-invalid
),
:is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid),
.variable-or-property .token-boolean,
.variable-or-property .token-domnode,
.variable-or-property[exception] > .title > .name {
@@ -171,7 +156,8 @@ body {
.devtools-toolbar,
.devtools-sidebar-tabs tabs,
.devtools-sidebar-alltabs,
.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
.cm-s-mozilla .CodeMirror-dialog {
/* General toolbar styling */
color: var(--theme-body-color);
background-color: var(--theme-toolbar-background);
border-color: var(--theme-splitter-color);
@@ -189,22 +175,20 @@ body {
* Best effort to match the existing theme, some of the colors
* are duplicated here to prevent weirdness in the main theme. */
.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
.CodeMirror.cm-s-mozilla {
/* Inherit platform specific font sizing and styles */
font-family: inherit;
font-size: inherit;
background: transparent;
}
.CodeMirror.cm-s-mozilla pre,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like,
.CodeMirror.cm-s-mozilla pre,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line,
.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like,
.cm-s-mozilla .cm-variable-3,
.cm-s-mozilla .cm-operator,
.cm-s-mozilla .cm-special,
:is(.cm-editor, .cm-highlighted) :is(
.tok-punctuation,
.tok-operator
) {
:is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) {
color: var(--theme-body-color);
}
@@ -213,19 +197,20 @@ body {
border-left: solid 1px black;
}
.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
background: rgba(185, 215, 253, .35);
.cm-s-mozilla .CodeMirror-activeline-background {
/* selected color with alpha */
background: rgba(185, 215, 253, 0.35);
}
/* Highlight for a line that contains an error. */
div.CodeMirror div.error-line {
background: rgba(255,0,0,0.2);
background: rgba(255, 0, 0, 0.2);
}
/* Generic highlighted text */
div.CodeMirror span.marked-text {
background: rgba(255,255,0,0.2);
border: 1px dashed rgba(192,192,0,0.6);
background: rgba(255, 255, 0, 0.2);
border: 1px dashed rgba(192, 192, 0, 0.6);
margin-inline-start: -1px;
margin-inline-end: -1px;
}
@@ -248,12 +233,13 @@ div.CodeMirror span.eval-text {
background-color: #ccd;
}
.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
.cm-s-mozilla .CodeMirror-linenumber {
/* line number text */
color: var(--grey-50);
}
.CodeMirror-hints,
.CodeMirror-Tern-tooltip {
box-shadow: 0 0 4px rgba(128, 128, 128, .5);
box-shadow: 0 0 4px rgba(128, 128, 128, 0.5);
background-color: var(--theme-sidebar-background);
}

35
devtools/client/themes/markup.css
View File

@@ -77,10 +77,10 @@ body.dragging .tag-line {
}
#root-wrapper:after {
content: "";
display: block;
clear: both;
position:relative;
content: "";
display: block;
clear: both;
position: relative;
}
.html-editor {
@@ -96,7 +96,7 @@ body.dragging .tag-line {
}
.html-editor-inner {
border: solid .1px;
border: solid 0.1px;
flex: 1 1 auto;
/* Keep the editor away from the markup view floating scrollbars */
@@ -283,7 +283,8 @@ ul.children + .tag-line::before {
z-index: 1;
}
.child.collapsed .child, .child.collapsed .children {
.child.collapsed .child,
.child.collapsed .children {
display: none;
}
@@ -365,7 +366,6 @@ ul.children + .tag-line::before {
forced-color-adjust: none;
}
.closing-bracket {
pointer-events: none;
}
@@ -428,7 +428,9 @@ ul.children + .tag-line::before {
}
.flash-out {
transition: background,color .5s;
transition:
background,
color 0.5s;
}
.editor {
@@ -534,10 +536,7 @@ ul.children + .tag-line::before {
/* In High Contrast Mode, we need to override all the colors so we can properly handle
the selected + focused-visible style */
:root[forced-colors-active] :is(
.tag,
.pseudo
) {
:root[forced-colors-active] :is(.tag, .pseudo) {
color: SelectedItem;
}
@@ -568,11 +567,7 @@ ul.children + .tag-line::before {
inplace editor input).
theme-selected doesn't work in this case since the text is a
sibling of the class, not a child. */
.tag-line[selected]:not(:has(.styleinspector-propertyeditor:focus)) :is(
.editor,
.editor.comment,
.editor :is(.attr-name, .attr-value, .tag, .pseudo)
) {
.tag-line[selected]:not(:has(.styleinspector-propertyeditor:focus)) :is(.editor, .editor.comment, .editor :is(.attr-name, .attr-value, .tag, .pseudo)) {
color: var(--theme-selection-color);
& :is([editable], .tag):focus-visible {
@@ -609,14 +604,10 @@ ul.children + .tag-line::before {
/* Selected nodes being flashed in the tree should have dark selected text. Here we target
nodes with theme-selected text colors and apply a dark, accessible text color for when
the yellow flashing background is applied. */
.tag-line[selected] :is(
.theme-selected.theme-bg-contrast ~ .editor,
.theme-selected ~ .editor .theme-fg-contrast
) {
.tag-line[selected] :is(.theme-selected.theme-bg-contrast ~ .editor, .theme-selected ~ .editor .theme-fg-contrast) {
color: var(--theme-contrast-color) !important;
}
/* Applicable to the DOCTYPE */
.doctype {
font-style: italic;

21
devtools/client/themes/memory.css
View File

@@ -4,7 +4,7 @@
/* CSS Variables specific to this panel that aren't defined by the themes */
.theme-dark {
--cell-border-color: rgba(255,255,255,0.15);
--cell-border-color: rgba(255, 255, 255, 0.15);
--row-alt-background-color: rgba(86, 117, 185, 0.15);
--row-hover-background-color: rgba(86, 117, 185, 0.25);
--link-color: var(--blue-40);
@@ -12,14 +12,17 @@
}
.theme-light {
--cell-border-color: rgba(0,0,0,0.15);
--row-alt-background-color: rgba(76,158,217,0.1);
--row-hover-background-color: rgba(76,158,217,0.2);
--cell-border-color: rgba(0, 0, 0, 0.15);
--row-alt-background-color: rgba(76, 158, 217, 0.1);
--row-hover-background-color: rgba(76, 158, 217, 0.2);
--link-color: var(--theme-link-color);
--link-color-active: var(--blue-70);
}
html, body, #app, #memory-tool {
html,
body,
#app,
#memory-tool {
height: 100%;
}
@@ -231,7 +234,7 @@ html, body, #app, #memory-tool {
margin-bottom: 14px;
}
.snapshot-list-item > .snapshot-title > input[type=checkbox] {
.snapshot-list-item > .snapshot-title > input[type="checkbox"] {
margin: 0;
margin-inline-end: 5px;
}
@@ -579,9 +582,9 @@ html, body, #app, #memory-tool {
.separator,
.not-available,
.heap-tree-item-address {
opacity: .5;
margin-left: .5em;
margin-right: .5em;
opacity: 0.5;
margin-left: 0.5em;
margin-right: 0.5em;
}
.heap-tree-item-address {

2
devtools/client/themes/perf.css
View File

@@ -167,7 +167,7 @@
appearance: none;
color: var(--theme-select-color);
background-color: var(--theme-select-background);
background-image: url('chrome://devtools/skin/images/arrow-dropdown-12.svg');
background-image: url("chrome://devtools/skin/images/arrow-dropdown-12.svg");
background-position: right 4px center;
background-repeat: no-repeat;

Some files were not shown because too many files have changed in this diff Show More