diff --git a/.prettierignore b/.prettierignore
index 96dbc4e03eb0..3066f2054365 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -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.
diff --git a/.stylelintignore b/.stylelintignore
index 343e536673d3..033f81a57104 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -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/
-
diff --git a/devtools/client/aboutdebugging/src/base.css b/devtools/client/aboutdebugging/src/base.css
index 7b482c247b32..b0f861f7688c 100644
--- a/devtools/client/aboutdebugging/src/base.css
+++ b/devtools/client/aboutdebugging/src/base.css
@@ -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,
diff --git a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css
index e6fcd9dd7e04..aa2d98ff72d5 100644
--- a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css
@@ -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;
diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css
index a693bf41135a..eda98d02a5de 100644
--- a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css
@@ -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);
diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css b/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css
index 4349b147b09d..c08b849cf6f4 100644
--- a/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css
+++ b/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css
@@ -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);
}
diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
index f049f33b2387..04920019b0ed 100644
--- a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css
@@ -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);
diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css
index 616b4ac28cb0..1d6ed8bb2ee1 100644
--- a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css
+++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css
@@ -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);
}
diff --git a/devtools/client/aboutdebugging/src/components/shared/Message.css b/devtools/client/aboutdebugging/src/components/shared/Message.css
index 76aa2c616cf4..6c62efe8be7b 100644
--- a/devtools/client/aboutdebugging/src/components/shared/Message.css
+++ b/devtools/client/aboutdebugging/src/components/shared/Message.css
@@ -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;
diff --git a/devtools/client/accessibility/accessibility.css b/devtools/client/accessibility/accessibility.css
index 1f06e1e3f280..dd7dee90e04b 100644
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -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;
}
diff --git a/devtools/client/application/application.css b/devtools/client/application/application.css
index 61b616faec69..2bac566ca5a3 100644
--- a/devtools/client/application/application.css
+++ b/devtools/client/application/application.css
@@ -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
*/
diff --git a/devtools/client/application/src/base.css b/devtools/client/application/src/base.css
index 85b475a875ab..6a115f9e3da7 100644
--- a/devtools/client/application/src/base.css
+++ b/devtools/client/application/src/base.css
@@ -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);
diff --git a/devtools/client/application/src/components/App.css b/devtools/client/application/src/components/App.css
index e0bcef7d2dc2..69a5556bf263 100644
--- a/devtools/client/application/src/components/App.css
+++ b/devtools/client/application/src/components/App.css
@@ -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;
}
diff --git a/devtools/client/application/src/components/manifest/ManifestColorItem.css b/devtools/client/application/src/components/manifest/ManifestColorItem.css
index 92dadec27192..8d00b1128d37 100644
--- a/devtools/client/application/src/components/manifest/ManifestColorItem.css
+++ b/devtools/client/application/src/components/manifest/ManifestColorItem.css
@@ -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);
diff --git a/devtools/client/application/src/components/routing/PageSwitcher.css b/devtools/client/application/src/components/routing/PageSwitcher.css
index e713adb1bf6c..2bac3659cb3a 100644
--- a/devtools/client/application/src/components/routing/PageSwitcher.css
+++ b/devtools/client/application/src/components/routing/PageSwitcher.css
@@ -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
*/
diff --git a/devtools/client/application/src/components/routing/Sidebar.css b/devtools/client/application/src/components/routing/Sidebar.css
index 872f5cca867c..f1554aae6b75 100644
--- a/devtools/client/application/src/components/routing/Sidebar.css
+++ b/devtools/client/application/src/components/routing/Sidebar.css
@@ -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);
}
diff --git a/devtools/client/application/src/components/routing/SidebarItem.css b/devtools/client/application/src/components/routing/SidebarItem.css
index f1852748ab7f..82adaef8320b 100644
--- a/devtools/client/application/src/components/routing/SidebarItem.css
+++ b/devtools/client/application/src/components/routing/SidebarItem.css
@@ -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;
}
diff --git a/devtools/client/application/src/components/service-workers/Registration.css b/devtools/client/application/src/components/service-workers/Registration.css
index 84b6de58e1fd..e37d534061e5 100644
--- a/devtools/client/application/src/components/service-workers/Registration.css
+++ b/devtools/client/application/src/components/service-workers/Registration.css
@@ -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;
}
diff --git a/devtools/client/application/src/components/service-workers/Worker.css b/devtools/client/application/src/components/service-workers/Worker.css
index e44b49ef6ba5..7eb7f352a6b9 100644
--- a/devtools/client/application/src/components/service-workers/Worker.css
+++ b/devtools/client/application/src/components/service-workers/Worker.css
@@ -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);
}
diff --git a/devtools/client/application/src/components/ui/UIButton.css b/devtools/client/application/src/components/ui/UIButton.css
index a055b8167449..6f0bb86915f9 100644
--- a/devtools/client/application/src/components/ui/UIButton.css
+++ b/devtools/client/application/src/components/ui/UIButton.css
@@ -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);
}
diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.css b/devtools/client/debugger/src/components/Editor/Breakpoints.css
index 157b1f33a984..ce0f2b115ecc 100644
--- a/devtools/client/debugger/src/components/Editor/Breakpoints.css
+++ b/devtools/client/debugger/src/components/Editor/Breakpoints.css
@@ -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;
}
diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css
index 32f47379b061..86ecbbbd9a0a 100644
--- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css
+++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css
@@ -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 . */
- /* 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;
}
diff --git a/devtools/client/debugger/src/components/Editor/Editor.css b/devtools/client/debugger/src/components/Editor/Editor.css
index 50e57a16c90d..4b98346051d0 100644
--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -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);
}
diff --git a/devtools/client/debugger/src/components/Editor/Preview/Popup.css b/devtools/client/debugger/src/components/Editor/Preview/Popup.css
index f06dce8e7dd3..54998fb85d79 100644
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.css
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.css
@@ -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);
}
diff --git a/devtools/client/debugger/src/components/Editor/Tabs.css b/devtools/client/debugger/src/components/Editor/Tabs.css
index b6c210c212bd..7ace76b293cf 100644
--- a/devtools/client/debugger/src/components/Editor/Tabs.css
+++ b/devtools/client/debugger/src/components/Editor/Tabs.css
@@ -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;
}
diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css
index 0b6445c55589..981c48540bfc 100644
--- a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css
+++ b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css
@@ -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;
diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css b/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css
index 00fb7b0b3aab..dee6600c41a5 100644
--- a/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css
+++ b/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css
@@ -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;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
index 0bec9b8e51fc..96be95229819 100644
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
@@ -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 {
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
index f63d653d7ebf..0a23ebc47bbc 100644
--- a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css
@@ -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 . */
- .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;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
index 78d128210baf..77eaf7d1c3c7 100644
--- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css
@@ -71,7 +71,6 @@
}
}
-
.expression-container {
padding-top: 3px;
padding-bottom: 3px;
diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
index 098b0b0b5a7e..e894af3031fc 100644
--- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css
@@ -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 {
diff --git a/devtools/client/debugger/src/components/shared/SourceIcon.css b/devtools/client/debugger/src/components/shared/SourceIcon.css
index 78577c80432a..45e2e23cbbfc 100644
--- a/devtools/client/debugger/src/components/shared/SourceIcon.css
+++ b/devtools/client/debugger/src/components/shared/SourceIcon.css
@@ -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;
}
diff --git a/devtools/client/debugger/src/components/variables.css b/devtools/client/debugger/src/components/variables.css
index c260c0607a2b..009b365deaa0 100644
--- a/devtools/client/debugger/src/components/variables.css
+++ b/devtools/client/debugger/src/components/variables.css
@@ -32,6 +32,10 @@
/* Animations */
@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
diff --git a/devtools/client/dom/content/dom-view.css b/devtools/client/dom/content/dom-view.css
index d2fd77e52543..6558a6057c4e 100644
--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -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 {
diff --git a/devtools/client/framework/options-panel.css b/devtools/client/framework/options-panel.css
index 0eba0d16f70a..b8a431bb4061 100644
--- a/devtools/client/framework/options-panel.css
+++ b/devtools/client/framework/options-panel.css
@@ -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 {
diff --git a/devtools/client/inspector/rules/test/doc_at_scope.css b/devtools/client/inspector/rules/test/doc_at_scope.css
index c265e01e6dde..c9beeffc87bd 100644
--- a/devtools/client/inspector/rules/test/doc_at_scope.css
+++ b/devtools/client/inspector/rules/test/doc_at_scope.css
@@ -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;
}
-}
\ No newline at end of file
+}
diff --git a/devtools/client/inspector/rules/test/doc_conditional_import.css b/devtools/client/inspector/rules/test/doc_conditional_import.css
index 32529fc60805..e594bddff8db 100644
--- a/devtools/client/inspector/rules/test/doc_conditional_import.css
+++ b/devtools/client/inspector/rules/test/doc_conditional_import.css
@@ -1,3 +1,4 @@
-h1, [test-hint=imported-conditional] {
+h1,
+[test-hint="imported-conditional"] {
color: rebeccapurple;
}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
index 712ba78fb6f6..aafa1def75da 100644
--- a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
@@ -1,3 +1,3 @@
-table {
+table {
border-collapse: collapse;
}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
index 5aa5e2c6cbe7..3e5a61586c8c 100644
--- a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
@@ -1,5 +1,5 @@
@import url("./doc_content_stylesheet_imported.css");
-table {
+table {
opacity: 1;
}
diff --git a/devtools/client/inspector/rules/test/doc_copystyles.css b/devtools/client/inspector/rules/test/doc_copystyles.css
index 83f0c87b1262..1a57877efa30 100644
--- a/devtools/client/inspector/rules/test/doc_copystyles.css
+++ b/devtools/client/inspector/rules/test/doc_copystyles.css
@@ -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: "*/";
}
diff --git a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
index fb537b53aee0..0015617035ea 100644
--- a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
+++ b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
@@ -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;
}
diff --git a/devtools/client/inspector/rules/test/doc_imported_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
index 3341a6ffe140..f80a993d4dd9 100644
--- a/devtools/client/inspector/rules/test/doc_imported_named_layer.css
+++ b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
@@ -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;
}
+ }
}
diff --git a/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
index e1f572c2063b..def8758e6a14 100644
--- a/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
+++ b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css
@@ -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;
+ }
}
diff --git a/devtools/client/inspector/rules/test/doc_imported_no_layer.css b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
index 9290eebc08ca..fdd41258a6ea 100644
--- a/devtools/client/inspector/rules/test/doc_imported_no_layer.css
+++ b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
@@ -1,3 +1,4 @@
-h1, [test-hint=imported-no-layer--no-rule-layer] {
+h1,
+[test-hint="imported-no-layer--no-rule-layer"] {
color: gold;
}
diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.css b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
index e735389c52e5..6136dad7bd6b 100644
--- a/devtools/client/inspector/rules/test/doc_keyframeanimation.css
+++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
@@ -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;
diff --git a/devtools/client/inspector/rules/test/doc_style_editor_link.css b/devtools/client/inspector/rules/test/doc_style_editor_link.css
index e49e1f587190..41045509311e 100644
--- a/devtools/client/inspector/rules/test/doc_style_editor_link.css
+++ b/devtools/client/inspector/rules/test/doc_style_editor_link.css
@@ -1,3 +1,3 @@
div {
opacity: 1;
-}
\ No newline at end of file
+}
diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.css b/devtools/client/inspector/rules/test/doc_urls_clickable.css
index e2f77934e2d6..a8dd5206c67b 100644
--- a/devtools/client/inspector/rules/test/doc_urls_clickable.css
+++ b/devtools/client/inspector/rules/test/doc_urls_clickable.css
@@ -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==");
}
diff --git a/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
index b719c608467f..60f1eab97137 100644
--- a/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
+++ b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css
@@ -1,3 +1,3 @@
body {
color: red;
-}
\ No newline at end of file
+}
diff --git a/devtools/client/jsonview/css/general.css b/devtools/client/jsonview/css/general.css
index 90b4cab0f3f9..f93de300b716 100644
--- a/devtools/client/jsonview/css/general.css
+++ b/devtools/client/jsonview/css/general.css
@@ -5,7 +5,9 @@
/******************************************************************************/
/* General */
-html, body, #content {
+html,
+body,
+#content {
height: 100%;
}
diff --git a/devtools/client/jsonview/css/json-panel.css b/devtools/client/jsonview/css/json-panel.css
index d6ad127bc025..1028484e3df7 100644
--- a/devtools/client/jsonview/css/json-panel.css
+++ b/devtools/client/jsonview/css/json-panel.css
@@ -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;
}
diff --git a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
index 954998532621..6e4e18286806 100644
--- a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
@@ -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 {
diff --git a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
index 6eb064a62f61..3b1c55b58e2c 100644
--- a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
@@ -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 {
diff --git a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
index a10e21b33b89..904dd5dedd61 100644
--- a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
@@ -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;
}
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
index a2d46ed522d4..0ad4b5d7e179 100644
--- a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
@@ -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%;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
index 1ebcaa7e0bb7..ce19e5e63ba4 100644
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -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,
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
index a3eac199b7cc..436d38436700 100644
--- a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
@@ -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: "• ";
}
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestList.css b/devtools/client/netmonitor/src/assets/styles/RequestList.css
index fc5851403309..b5bc2e4a9be7 100644
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -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;
}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
index 7a3b3d201288..1ae94d2d1f5e 100644
--- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -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);
}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusBar.css b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
index 13930247bf56..db6216a48966 100644
--- a/devtools/client/netmonitor/src/assets/styles/StatusBar.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
@@ -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;
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusCode.css b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
index 62b6266c57fc..1b32d75c861b 100644
--- a/devtools/client/netmonitor/src/assets/styles/StatusCode.css
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -69,7 +69,6 @@
fill: currentColor;
}
-
/* Status codes for the headers side panel */
.headers-overview .summary .status .status-code {
diff --git a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
index a4a3bce699a2..38650b14a9df 100644
--- a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
+++ b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
@@ -76,7 +76,6 @@
float: left;
margin-right: -15px;
padding: 0 2px 0 0;
-
}
.url-preview tr.treeRow .treeValueCell {
display: inline;
diff --git a/devtools/client/netmonitor/src/assets/styles/messages.css b/devtools/client/netmonitor/src/assets/styles/messages.css
index b115d7cf34df..7315b1b761a7 100644
--- a/devtools/client/netmonitor/src/assets/styles/messages.css
+++ b/devtools/client/netmonitor/src/assets/styles/messages.css
@@ -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;
diff --git a/devtools/client/netmonitor/src/assets/styles/variables.css b/devtools/client/netmonitor/src/assets/styles/variables.css
index 366b55f687b3..e808ed36ce41 100644
--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -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);
diff --git a/devtools/client/responsive/index.css b/devtools/client/responsive/index.css
index 9c053e7db61b..4538d52df73a 100644
--- a/devtools/client/responsive/index.css
+++ b/devtools/client/responsive/index.css
@@ -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 {
diff --git a/devtools/client/responsive/responsive-browser.css b/devtools/client/responsive/responsive-browser.css
index 8e6b68c9fe54..2ae163232533 100644
--- a/devtools/client/responsive/responsive-browser.css
+++ b/devtools/client/responsive/responsive-browser.css
@@ -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 {
diff --git a/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css b/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css
index 7ed528635b57..77be303e5fa5 100644
--- a/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css
+++ b/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css
@@ -7,4 +7,4 @@ div {
div {
width: 100px;
}
-};
+}
diff --git a/devtools/client/shared/components/AppErrorBoundary.css b/devtools/client/shared/components/AppErrorBoundary.css
index 2585231ff7b3..6409f7fad5a0 100644
--- a/devtools/client/shared/components/AppErrorBoundary.css
+++ b/devtools/client/shared/components/AppErrorBoundary.css
@@ -4,7 +4,6 @@
/* Base styles (common to most error boundaries) */
-
/* Container */
.app-error-panel {
color: var(--theme-text-color-strong);
diff --git a/devtools/client/shared/components/List.css b/devtools/client/shared/components/List.css
index 055e48eca80d..12c74889ab72 100644
--- a/devtools/client/shared/components/List.css
+++ b/devtools/client/shared/components/List.css
@@ -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);
}
diff --git a/devtools/client/shared/components/NotificationBox.css b/devtools/client/shared/components/NotificationBox.css
index 27b63b6ddc68..bf6193ad6880 100644
--- a/devtools/client/shared/components/NotificationBox.css
+++ b/devtools/client/shared/components/NotificationBox.css
@@ -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 {
diff --git a/devtools/client/shared/components/SearchModifiers.css b/devtools/client/shared/components/SearchModifiers.css
index b92f12b1f991..fa640a82ad3e 100644
--- a/devtools/client/shared/components/SearchModifiers.css
+++ b/devtools/client/shared/components/SearchModifiers.css
@@ -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);
}
diff --git a/devtools/client/shared/components/SidebarToggle.css b/devtools/client/shared/components/SidebarToggle.css
index f715816d8cd0..4e6dd42951b3 100644
--- a/devtools/client/shared/components/SidebarToggle.css
+++ b/devtools/client/shared/components/SidebarToggle.css
@@ -21,7 +21,7 @@
}
.sidebar-toggle.alignRight {
- order: 10
+ order: 10;
}
/* Rotate button icon 90deg if the toolbox container is
diff --git a/devtools/client/shared/components/SmartTrace.css b/devtools/client/shared/components/SmartTrace.css
index 34ef4c18e2e4..37bbbc1bfeca 100644
--- a/devtools/client/shared/components/SmartTrace.css
+++ b/devtools/client/shared/components/SmartTrace.css
@@ -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 {
diff --git a/devtools/client/shared/components/reps/reps.css b/devtools/client/shared/components/reps/reps.css
index f1f8123bd274..f67123cb0b43 100644
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -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;
diff --git a/devtools/client/shared/components/tabs/Tabs.css b/devtools/client/shared/components/tabs/Tabs.css
index 6366d949d5be..f7be508f3d81 100644
--- a/devtools/client/shared/components/tabs/Tabs.css
+++ b/devtools/client/shared/components/tabs/Tabs.css
@@ -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);
diff --git a/devtools/client/shared/components/tree/TreeView.css b/devtools/client/shared/components/tree/TreeView.css
index a98c24f385dc..96917bebffe9 100644
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.css
@@ -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%);
}
diff --git a/devtools/client/shared/toolbarbutton.css b/devtools/client/shared/toolbarbutton.css
index df6de1a82bb0..3c481279fd12 100644
--- a/devtools/client/shared/toolbarbutton.css
+++ b/devtools/client/shared/toolbarbutton.css
@@ -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);
}
}
diff --git a/devtools/client/shared/widgets/cubic-bezier.css b/devtools/client/shared/widgets/cubic-bezier.css
index 333c7267514d..00512283e711 100644
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -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 {
diff --git a/devtools/client/shared/widgets/filter-widget.css b/devtools/client/shared/widgets/filter-widget.css
index aeee4db42e7d..ee730fdcf85e 100644
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -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;
diff --git a/devtools/client/shared/widgets/linear-widget.css b/devtools/client/shared/widgets/linear-widget.css
index bd722f4eb54f..d94d0b0f8afd 100644
--- a/devtools/client/shared/widgets/linear-widget.css
+++ b/devtools/client/shared/widgets/linear-widget.css
@@ -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;
}
diff --git a/devtools/client/shared/widgets/spectrum.css b/devtools/client/shared/widgets/spectrum.css
index 227f9135c395..e2572fb396df 100644
--- a/devtools/client/shared/widgets/spectrum.css
+++ b/devtools/client/shared/widgets/spectrum.css
@@ -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);
}
diff --git a/devtools/client/themes/accessibility-color-contrast.css b/devtools/client/themes/accessibility-color-contrast.css
index 3b1a92188880..5d871949eff2 100644
--- a/devtools/client/themes/accessibility-color-contrast.css
+++ b/devtools/client/themes/accessibility-color-contrast.css
@@ -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;
}
diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css
index f244d5dad5f1..b599c753385f 100644
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -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 {
diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css
index 2d12858e435b..1c4a85efd6ed 100644
--- a/devtools/client/themes/badge.css
+++ b/devtools/client/themes/badge.css
@@ -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);
diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css
index e735af877631..3471c0ca4080 100644
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -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;
diff --git a/devtools/client/themes/breadcrumbs.css b/devtools/client/themes/breadcrumbs.css
index 5edd6697be40..d7f92bd620da 100644
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -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;
}
diff --git a/devtools/client/themes/changes.css b/devtools/client/themes/changes.css
index fa16cd04b1a5..15fde07abc0e 100644
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -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);
diff --git a/devtools/client/themes/chart.css b/devtools/client/themes/chart.css
index f4a8ce8d7c2d..76adf443c9ff 100644
--- a/devtools/client/themes/chart.css
+++ b/devtools/client/themes/chart.css
@@ -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);
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
index 7edf51f55256..6acf4cd9575c 100644
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -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 {
diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css
index 98739ee81c10..5e01a0e3be41 100644
--- a/devtools/client/themes/compatibility.css
+++ b/devtools/client/themes/compatibility.css
@@ -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;
}
diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css
index 96891ea67d9c..2e2fc9872d4c 100644
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -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%;
}
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
index b49f6cceef3d..f12b99d7aa4c 100644
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -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);
}
diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css
index 5ca4a4339520..69a87e2fbd10 100644
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -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);
}
}
diff --git a/devtools/client/themes/inspector-shared.css b/devtools/client/themes/inspector-shared.css
index 8cbde0cf766c..3ce70e55b416 100644
--- a/devtools/client/themes/inspector-shared.css
+++ b/devtools/client/themes/inspector-shared.css
@@ -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] {
diff --git a/devtools/client/themes/inspector-swatches.css b/devtools/client/themes/inspector-swatches.css
index 8fd475982b15..1b1f1b176e42 100644
--- a/devtools/client/themes/inspector-swatches.css
+++ b/devtools/client/themes/inspector-swatches.css
@@ -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
diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css
index 1f3f7a49be16..575cde54297f 100644
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -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;
}
diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css
index 97a220445b28..0ed7d3c50cb9 100644
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -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,
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
index 41d620d728b7..493aa38b9f32 100644
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -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);
}
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
index 4af1f9b580db..daadf19c24f2 100644
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -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;
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
index 06adbd46e6c6..df1ae04dc811 100644
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -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 {
diff --git a/devtools/client/themes/perf.css b/devtools/client/themes/perf.css
index 87a1d7ba6977..e2997a95d684 100644
--- a/devtools/client/themes/perf.css
+++ b/devtools/client/themes/perf.css
@@ -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;
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
index 4aeac7adb232..2d5f9959fe53 100644
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -198,15 +198,16 @@
.ruleview-computedlist,
[hidden]:is(
- .ruleview-expandable-container,
- .ruleview-overridden-items,
- .ruleview-overridden-rule-filter,
- .ruleview-warning,
- .ruleview-unused-warning,
- .ruleview-compatibility-warning,
- .ruleview-used,
- .ruleview-invalid-at-computed-value-time-warning,
-),
+ .ruleview-expandable-container,
+ .ruleview-overridden-items,
+ .ruleview-overridden-rule-filter,
+ .ruleview-warning,
+ .ruleview-unused-warning,
+ .ruleview-compatibility-warning,
+ .ruleview-used,
+ .ruleview-invalid-at-computed-value-time-warning,
+
+ ),
.ruleview-overridden .inspector-grid {
display: none;
}
@@ -347,46 +348,41 @@
*/
.ruleview-rule.unmatched,
.ruleview-rule.uneditable,
-.ruleview-rule[unmatched=true],
-.ruleview-rule[uneditable=true] {
+.ruleview-rule[unmatched="true"],
+.ruleview-rule[uneditable="true"] {
background: var(--theme-tab-toolbar-background);
}
-:root[forced-colors-active] .ruleview-rule:is(
- .unmatched,
- [unmatched=true]
-) {
+:root[forced-colors-active] .ruleview-rule:is(.unmatched, [unmatched="true"]) {
/* Set an inactive color in High Contrast Mode as we don't have the
distinct background that is set in regular mode */
color: var(--theme-text-color-inactive);
}
.ruleview-rule.uneditable :focus,
-.ruleview-rule[uneditable=true] :focus {
+.ruleview-rule[uneditable="true"] :focus {
outline: none;
}
.ruleview-rule.uneditable .theme-link,
-.ruleview-rule[uneditable=true] .theme-link {
+.ruleview-rule[uneditable="true"] .theme-link {
color: var(--theme-highlight-bluegrey);
}
.ruleview-rule.uneditable .ruleview-enableproperty,
-.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+.ruleview-rule[uneditable="true"] .ruleview-enableproperty {
visibility: hidden;
}
.ruleview-rule.uneditable .inspector-swatch,
-.ruleview-rule[uneditable=true] .inspector-swatch {
+.ruleview-rule[uneditable="true"] .inspector-swatch {
cursor: default;
}
.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
-.ruleview-propertyvalue,
-.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
-.ruleview-propertyvalue {
+.ruleview-rule.uneditable .ruleview-propertyvaluecontainer > .ruleview-propertyvalue,
+.ruleview-rule[uneditable="true"] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable="true"] .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
border-bottom-color: transparent;
}
@@ -424,7 +420,8 @@
color: var(--theme-comment);
}
-.ruleview-rule-indent, .ruleview-ancestor-ruleclose {
+.ruleview-rule-indent,
+.ruleview-ancestor-ruleclose {
white-space: pre;
/*
* We do want to keep the underlying chars for the indent for user to copy/paste,
@@ -483,7 +480,7 @@
background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
/* Using fill to paint the border, and stroke for the tick */
-moz-context-properties: fill, stroke;
- fill: rgba(0,0,0,.3);
+ fill: rgba(0, 0, 0, 0.3);
stroke: transparent;
}
@@ -495,17 +492,17 @@
:root[platform="win"].theme-dark .ruleview-enableproperty,
:root[platform="linux"].theme-dark .ruleview-enableproperty {
- fill: rgba(255,255,255,.4);
+ fill: rgba(255, 255, 255, 0.4);
}
:root[platform="win"] .ruleview-enableproperty:checked,
:root[platform="linux"] .ruleview-enableproperty:checked {
- stroke: rgba(0,0,0,.6);
+ stroke: rgba(0, 0, 0, 0.6);
}
:root[platform="win"].theme-dark .ruleview-enableproperty:checked,
:root[platform="linux"].theme-dark .ruleview-enableproperty:checked {
- stroke: rgba(255,255,255,.8);
+ stroke: rgba(255, 255, 255, 0.8);
}
.ruleview-warning,
@@ -526,11 +523,10 @@
}
.ruleview-invalid-at-computed-value-time-warning {
- background-image: var(--invalid-at-computed-value-time-icon);
- fill: var(--invalid-at-computed-value-time-fill-color);
+ background-image: var(--invalid-at-computed-value-time-icon);
+ fill: var(--invalid-at-computed-value-time-fill-color);
}
-
.ruleview-unused-warning {
background-image: url(resource://devtools-shared-images/info-small.svg);
background-color: var(--theme-sidebar-background);
@@ -575,11 +571,7 @@
.ruleview-newproperty {
/* As we don't have the checkbox displayed before the input, we need to align it
with the property name above it. */
- margin-inline-start: calc(
- var(--rule-enableproperty-size) +
- var(--rule-enableproperty-margin-inline-start) +
- var(--rule-enableproperty-margin-inline-end)
- );
+ margin-inline-start: calc(var(--rule-enableproperty-size) + var(--rule-enableproperty-margin-inline-start) + var(--rule-enableproperty-margin-inline-end));
}
.ruleview-namecontainer,
@@ -688,7 +680,7 @@
}
}
-.ruleview-propertycontainer > * {
+.ruleview-propertycontainer > * {
vertical-align: middle;
}
@@ -710,7 +702,6 @@
/* Put the box-shadow inside the element so it's still visible when sibling elements are highlighted */
box-shadow: inset 0 -1px 0 0 var(--theme-contrast-border);
-
/* property name and value and unmatched/inactive colors need to be adjusted
in order to have enough contrast against the highlighted background */
& .ruleview-propertyname {
@@ -731,7 +722,8 @@
don't have specific highlighted colors (selectors, semi colons, stylesheet location, ...) */
:root[forced-colors-active] & {
color: var(--theme-contrast-color);
- a, .theme-twisty {
+ a,
+ .theme-twisty {
color: var(--theme-contrast-color);
}
@@ -744,7 +736,7 @@
.ruleview-namecontainer:hover > .ruleview-propertyname,
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
- text-decoration: 1px underline dashed hsl(0,0%,50%);
+ text-decoration: 1px underline dashed hsl(0, 0%, 50%);
}
/* ancestor rules info element (parent at-rules, parent of nested rules, …) */
@@ -762,7 +754,7 @@
max-width: max-content;
}
-.ruleview-rule-ancestor-data [role="listitem"].has-tooltip:hover .container-query-declaration {
+.ruleview-rule-ancestor-data [role="listitem"].has-tooltip:hover .container-query-declaration {
text-decoration: underline;
text-decoration-color: var(--theme-highlight-blue);
text-decoration-style: dotted;
@@ -771,7 +763,7 @@
text-underline-offset: 2px;
}
-.ruleview-rule-ancestor-data [role="listitem"] :is(button,[role="button"]).open-inspector {
+.ruleview-rule-ancestor-data [role="listitem"] :is(button, [role="button"]).open-inspector {
/* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */
margin-inline: 1ch 0;
user-select: auto;
@@ -787,9 +779,9 @@
color: var(--theme-text-color-alt);
}
-.ruleview-rule:is(.unmatched, [unmatched=true]) .ruleview-selector,
+.ruleview-rule:is(.unmatched, [unmatched="true"]) .ruleview-selector,
.ruleview-selector.unmatched,
-.ruleview-property:is(.unused, .ruleview-overridden) :is(.ruleview-propertyname,.ruleview-propertyvalue) {
+.ruleview-property:is(.unused, .ruleview-overridden) :is(.ruleview-propertyname, .ruleview-propertyvalue) {
color: var(--theme-text-color-inactive);
}
diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css
index e8bba2c015d0..0c75f326af43 100644
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -8,7 +8,7 @@
/* Splitters */
:root {
- --devtools-splitter-color: #e0e0e2 /* --grey-25 */;
+ --devtools-splitter-color: #e0e0e2 /* --grey-25 */;
/* Use :where() so we don't get a higher specificity for this rule */
&:where([devtoolstheme="dark"]) {
--devtools-splitter-color: #38383d /* --grey-70 */;
@@ -30,20 +30,20 @@
--devtools-splitter-top-width: 2px;
--devtools-splitter-bottom-width: 2px;
- --devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
- var(--devtools-splitter-bottom-width) +
- var(--devtools-splitter-element-size));
- --devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
- var(--devtools-splitter-bottom-width) +
- var(--devtools-emphasized-splitter-element-size));
+ --devtools-horizontal-splitter-min-height: calc(
+ var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-splitter-element-size)
+ );
+ --devtools-emphasized-horizontal-splitter-min-height: calc(
+ var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-emphasized-splitter-element-size)
+ );
/* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
--devtools-splitter-inline-start-width: 1px;
--devtools-splitter-inline-end-width: 4px;
- --devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) +
- var(--devtools-splitter-inline-end-width) +
- var(--devtools-splitter-element-size));
+ --devtools-vertical-splitter-min-width: calc(
+ var(--devtools-splitter-inline-start-width) + var(--devtools-splitter-inline-end-width) + var(--devtools-splitter-element-size)
+ );
}
splitter.devtools-horizontal-splitter,
@@ -64,7 +64,7 @@ splitter.devtools-horizontal-splitter,
/* opt-out of forced colors because the transparent borders are turned into
opaque ones in High Contrast Mode. --devtools-splitter-color has specific value
in High Contrast Mode so we should be fine */
- forced-color-adjust: none;
+ forced-color-adjust: none;
}
splitter.devtools-horizontal-splitter {
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
index cc7f35643da7..2f2ece4d4b10 100644
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -78,7 +78,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
display: none;
}
-li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
+li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
display: block;
}
@@ -231,7 +231,7 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
opacity: 0.3;
}
-.stylesheet-linked-file:not(:empty){
+.stylesheet-linked-file:not(:empty) {
margin-inline-end: 0.4em;
}
@@ -293,7 +293,10 @@ h3 {
}
.splitview-nav > li.splitview-active {
- background-size: 0 0, 0 0, auto;
+ background-size:
+ 0 0,
+ 0 0,
+ auto;
}
.stylesheet-toggle {
diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css
index 58a312569699..6cdee729304a 100644
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -183,7 +183,7 @@ splitter.devtools-horizontal-splitter,
&:hover {
fill: var(--theme-icon-hover-color);
- }
+ }
}
.devtools-dropdown-button:dir(rtl) {
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
index 2bfadfe6e2e4..67c64fefe0ce 100644
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -19,7 +19,6 @@
color: var(--theme-toolbar-color);
}
-
.toolbox-always-on-top {
display: flex;
padding: 6px;
@@ -276,7 +275,7 @@
text-overflow: ellipsis;
color: var(--theme-toolbar-color);
background-color: transparent;
- /* adjust outline offset so it's not clipped */
+ /* adjust outline offset so it's not clipped */
--theme-outline-offset: -2px;
}
@@ -629,10 +628,7 @@
min-height: 75px;
}
-:is(
- #toolbox-panel-webconsole,
- #toolbox-deck
-)[hidden] {
+:is(#toolbox-panel-webconsole, #toolbox-deck)[hidden] {
visibility: hidden;
}
@@ -671,9 +667,7 @@
pointer-events: none;
}
-#toolbox-container.tabs-reordering
- .devtools-tab:not(.selected):hover
- .devtools-tab-line {
+#toolbox-container.tabs-reordering .devtools-tab:not(.selected):hover .devtools-tab-line {
background: transparent;
opacity: 0;
transition: none;
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
index 91a6e5113404..c2cfc2b5a7a9 100644
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -22,14 +22,14 @@
* Since they're defined in :root with light-dark(), we need to register them so we'll get
* the actual final (rgb) color, and not the declaration with substituted variables
*/
- @property --bezier-diagonal-color {
- syntax: '';
+@property --bezier-diagonal-color {
+ syntax: "";
inherits: true;
initial-value: transparent;
}
@property --timing-function-control-point-background {
- syntax: '';
+ syntax: "";
inherits: true;
initial-value: transparent;
}
@@ -39,7 +39,7 @@
--bezier-diagonal-color: light-dark(rgba(0, 0, 0, 0.2), #eee);
--timing-function-grid-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
- --timing-function-line-color: #4C9ED9;
+ --timing-function-line-color: #4c9ed9;
--timing-function-preview-scale: light-dark(var(--grey-43), var(--grey-40));
--timing-function-preview-dot-border: white;
--timing-function-control-point-background: light-dark(var(--grey-55), var(--grey-20));
@@ -54,10 +54,10 @@
--theme-arrowpanel-background: var(--theme-popup-background);
--theme-arrowpanel-color: var(--theme-popup-color);
--theme-arrowpanel-border-color: var(--theme-popup-border-color);
- --theme-arrowpanel-separator: light-dark(ThreeDShadow, rgba(249,249,250,.1));
- --theme-arrowpanel-active-background: light-dark(hsla(0,0%,80%,.45), rgba(249,249,250,.15));
+ --theme-arrowpanel-separator: light-dark(ThreeDShadow, rgba(249, 249, 250, 0.1));
+ --theme-arrowpanel-active-background: light-dark(hsla(0, 0%, 80%, 0.45), rgba(249, 249, 250, 0.15));
--theme-arrowpanel-active-outline-color: transparent;
- --theme-arrowpanel-disabled-color: light-dark(GrayText, rgba(249,249,250,.5));
+ --theme-arrowpanel-disabled-color: light-dark(GrayText, rgba(249, 249, 250, 0.5));
&[forced-colors-active] {
/* The active state have a different background but with an outline in HCM */
@@ -72,6 +72,7 @@
work even if we don't have a resulting system color, as the
consumers of this variable already need to opt out of forced colors
so it can be used in the background gradient */
+ /* prettier-ignore */
--timing-function-grid-color: light-dark(
/* In light mode, the grid appears much more contrasted, so lower the opacity even more */
rgb(from GrayText r g b / 0.4),
@@ -85,7 +86,7 @@
}
:root[platform="mac"].theme-light {
- --theme-arrowpanel-separator: hsla(210,4%,10%,.14);
+ --theme-arrowpanel-separator: hsla(210, 4%, 10%, 0.14);
}
/*
@@ -95,8 +96,9 @@
Unset the color-scheme on those element so it uses the one we set on :root in common.css,
which matches our light/dark theme.
*/
-menupopup, panel {
- color-scheme: unset
+menupopup,
+panel {
+ color-scheme: unset;
}
strong {
@@ -149,7 +151,8 @@ strong {
margin: 0;
}
- dt,dd {
+ dt,
+ dd {
display: inline;
}
@@ -166,7 +169,6 @@ strong {
}
}
-
/* Tooltip: Compatibility tooltip */
.devtools-tooltip-css-compatibility {
@@ -182,7 +184,6 @@ strong {
overflow-y: auto;
}
-
/* Tooltip: Inactive CSS tooltip */
.devtools-tooltip-inactive-css,
@@ -270,15 +271,17 @@ strong {
color: var(--theme-highlight-red);
}
-
/* Tooltip: Tiles */
.devtools-tooltip-tiles {
background-color: #eee;
- background-image: 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: 20px 20px;
- background-position: 0 0, 10px 10px;
+ background-position:
+ 0 0,
+ 10px 10px;
}
.tooltip-container {
@@ -470,7 +473,7 @@ strong {
background: var(--theme-arrowpanel-background);
border: 1px solid var(--theme-arrowpanel-border-color);
border-radius: var(--theme-arrowpanel-border-radius);
- box-shadow: 0 0 4px hsla(210,4%,10%,.2);
+ box-shadow: 0 0 4px hsla(210, 4%, 10%, 0.2);
}
> .tooltip-arrow {
@@ -576,15 +579,15 @@ strong {
--theme-outline-offset: -2px;
}
- &:not([disabled],[open],:active):hover {
+ &:not([disabled], [open], :active):hover {
background-color: var(--theme-popup-hover-background);
color: var(--theme-popup-hover-color);
}
- &:not([disabled]):is([open],:hover:active) {
+ &:not([disabled]):is([open], :hover:active) {
background-color: var(--theme-arrowpanel-active-background);
color: var(--theme-arrowpanel-active-color);
- box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+ box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
outline: 1px solid var(--theme-arrowpanel-active-outline-color);
}
@@ -621,11 +624,7 @@ strong {
}
/* Use :where to avoid having a high specificity that would take over the rule above */
- .menuitem > button.command:where(
- [role="menuitem"],
- [role="menuitemcheckbox"],
- [role="link"]
- ) {
+ .menuitem > button.command:where([role="menuitem"], [role="menuitemcheckbox"], [role="link"]) {
appearance: none;
border: none;
background-color: transparent;
@@ -889,7 +888,7 @@ strong {
flex: 1;
padding: var(--image-tooltip-image-padding);
justify-content: center;
- min-height: 1px
+ min-height: 1px;
}
.devtools-tooltip-image {
@@ -911,7 +910,7 @@ strong {
.invoke-confirm {
color: var(--theme-popup-color);
- border: 1px solid rgba(0,0,0, 0.1);
+ border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 212px;
}
@@ -1024,7 +1023,7 @@ strong {
/* Indent the content script items */
.webconsole-evaluation-selector-item.indented::before {
content: "\2514\2500" !important;
- z-index:1000;
+ z-index: 1000;
margin-inline-start: 20px;
}
.checkbox-container .menuitem > .command.indented > .label {
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
index 3fe05df13dba..688634b064a0 100644
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -8,19 +8,19 @@
* the actual final (rgb) color, and not the declaration with subtituted variables
*/
@property --theme-highlight-blue {
- syntax: '';
+ syntax: "";
inherits: true;
initial-value: transparent;
}
@property --theme-highlight-red {
- syntax: '';
+ syntax: "";
inherits: true;
initial-value: transparent;
}
@property --theme-body-color {
- syntax: '';
+ syntax: "";
inherits: true;
initial-value: transparent;
}
@@ -42,7 +42,7 @@
--theme-focus-outline-size: 2px;
--theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color);
--theme-outline-offset: 0px;
- /**
+ /**
* we want the box shadow to be 2px bigger than the offset so we have a "double border"
* (without it impacting the element layout), which should work whatever
* the background-color is (e.g. a clickable element in a "selected" blue-background container)
@@ -60,7 +60,7 @@
* with lower opacity than the 0.6 we apply on highlighter so this can be used as
* background color without being too bold
*/
- --dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3);
+ --dimmed-highlighter-box-content-color: hsl(197, 71%, 73%, 0.3);
/*
* Photon Colors CSS Variables v3.3.2
@@ -246,12 +246,11 @@
--theme-toolbarbutton-color: light-dark(var(--grey-70), var(--grey-40));
--theme-toolbarbutton-hover-background: color-mix(in srgb, currentColor 14%, transparent);
--theme-toolbarbutton-hover-color: var(--theme-toolbarbutton-color);
- --theme-toolbarbutton-checked-background: color-mix(in srgb,var(--theme-toolbarbutton-checked-color) 5%,transparent);
+ --theme-toolbarbutton-checked-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 5%, transparent);
--theme-toolbarbutton-checked-color: light-dark(var(--blue-60), var(--blue-30));
--theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-hover-background);
--theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-color);
- --theme-toolbarbutton-active-background: color-mix(in srgb,var(--theme-toolbarbutton-checked-color) 20%,transparent);
-
+ --theme-toolbarbutton-active-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 20%, transparent);
/* Used for select elements */
/* Note: we don't use the pair of system properties Field/FieldText here (like
@@ -265,34 +264,17 @@
/* Warning colors */
--theme-warning-background: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%));
- --theme-warning-border: light-dark(
- /* Yellow 60 + opacity */
- rgba(215, 182, 0, 0.28) ,
- hsl(60, 30%, 26%)
- );
+ --theme-warning-border: light-dark(/* Yellow 60 + opacity */ rgba(215, 182, 0, 0.28), hsl(60, 30%, 26%));
--theme-warning-color: light-dark(var(--yellow-80), hsl(43, 94%, 81%));
/* Error colors */
--theme-error-background: light-dark(hsl(344, 73%, 97%), hsl(345, 23%, 24%));
- --theme-error-border: light-dark(
- rgb(from var(--red-60) r g b / 0.12),
- hsl(345, 30%, 35%)
- );
+ --theme-error-border: light-dark(rgb(from var(--red-60) r g b / 0.12), hsl(345, 30%, 35%));
--theme-error-color: light-dark(var(--red-70), var(--red-20));
-/* Flashing colors used to highlight updates */
- --theme-contrast-background: light-dark(
- /* = Yellow 50-a40 on white */
- #fff699,
- /* = Yellow 50-a20 on body background */
- #4f4b1f
- );
- --theme-contrast-background-alpha: light-dark(
- /* Yellow 50-a40 */
- rgba(255, 233, 0, 0.4),
- /* Yellow 50-a15 */
- rgba(255, 233, 0, 0.15)
- );
+ /* Flashing colors used to highlight updates */
+ --theme-contrast-background: light-dark(/* = Yellow 50-a40 on white */ #fff699, /* = Yellow 50-a20 on body background */ #4f4b1f);
+ --theme-contrast-background-alpha: light-dark(/* Yellow 50-a40 */ rgba(255, 233, 0, 0.4), /* Yellow 50-a15 */ rgba(255, 233, 0, 0.15));
--theme-contrast-color: light-dark(black, white);
/* This is used for search/filter results underline and need to have a 3:1 contrast against the background */
--theme-contrast-border: light-dark(var(--yellow-70), var(--yellow-65));
@@ -303,15 +285,15 @@
&[forced-colors-active] {
/* Color picked from HCM palette created by a11y team */
- --theme-highlight-blue: light-dark(#0060DF, #00DDFF);
- --theme-highlight-red: light-dark(#C50042, #FF9AA2);
- --theme-highlight-green: light-dark(#005E5E, #3FE1B0);
- --theme-highlight-purple: #952BB9;
- --theme-highlight-purple-text: #F7E2FF;
- --theme-highlight-yellow: light-dark(#FFFFCC, #FFEA80);
- --theme-highlight-orange: light-dark(#CC3D00, #FFB587);
- --theme-highlight-pink: light-dark(#FF9AA2, #FFDFE7);
- --theme-highlight-gray: light-dark(#5B5B66, #F0F0F4);
+ --theme-highlight-blue: light-dark(#0060df, #00ddff);
+ --theme-highlight-red: light-dark(#c50042, #ff9aa2);
+ --theme-highlight-green: light-dark(#005e5e, #3fe1b0);
+ --theme-highlight-purple: #952bb9;
+ --theme-highlight-purple-text: #f7e2ff;
+ --theme-highlight-yellow: light-dark(#ffffcc, #ffea80);
+ --theme-highlight-orange: light-dark(#cc3d00, #ffb587);
+ --theme-highlight-pink: light-dark(#ff9aa2, #ffdfe7);
+ --theme-highlight-gray: light-dark(#5b5b66, #f0f0f4);
--theme-body-background: Canvas;
@@ -368,7 +350,6 @@
--theme-link-color: LinkText;
--theme-internal-link-color: LinkText;
-
--theme-focus-outline-color: CanvasText;
--theme-focus-textinput-outline-color: SelectedItem;
--theme-icon-color: ButtonText;
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index eb0df9af43ed..c9af02ca1778 100644
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -24,10 +24,7 @@
--console-input-background: light-dark(var(--theme-body-background), var(--theme-tab-toolbar-background));
--console-message-background: var(--theme-body-background);
- --console-message-border: light-dark(
- color-mix(in srgb, var(--grey-10), var(--grey-20)),
- var(--theme-splitter-color)
- );
+ --console-message-border: light-dark(color-mix(in srgb, var(--grey-10), var(--grey-20)), var(--theme-splitter-color));
--console-message-color: var(--theme-text-color-strong);
--console-error-background: var(--theme-error-background);
--console-error-border: var(--theme-error-border);
@@ -117,7 +114,7 @@
* the last element is actually the second-to-last element when the output is
* scrolled all the way down, because we include an empty buffer div which
* grows to simulate the height of unrendered content.) */
- .webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) {
+.webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) {
border-bottom-width: 0;
/* Adjust the min-height since we now only have a single border. */
min-height: calc(var(--console-row-height) + 1px);
@@ -342,10 +339,7 @@
background-color: var(--console-warning-color);
}
-:root[forced-colors-active] :is(
- .message-repeats,
- .warning-group-badge
-) {
+:root[forced-colors-active] :is(.message-repeats, .warning-group-badge) {
color: Canvas;
background-color: CanvasText;
}
@@ -718,12 +712,10 @@ a.learn-more-link.webconsole-learn-more-link {
But when the filter input is not focused, or empty, and there is no filtered messages,
we don't want to display it as it provides little value
*/
-.webconsole-filterbar-primary[data-has-filtered-by-text="false"]
- .devtools-searchbox input:is(:not(:focus),:empty) ~ #devtools-console-output-filter-summary {
+.webconsole-filterbar-primary[data-has-filtered-by-text="false"] .devtools-searchbox input:is(:not(:focus), :empty) ~ #devtools-console-output-filter-summary {
display: none;
}
-
/* Special casing String reps, and warning/error string colors
* so they are legible */
.message .message-body > .objectBox-string,
@@ -773,20 +765,16 @@ a.learn-more-link.webconsole-learn-more-link {
}
/* Styles for JavaScript Tracer messages */
-.webconsole-app :is(
- .jstracer-dom-event,
- .jstracer-dom-mutation,
- .jstracer-implementation
- ) {
+.webconsole-app :is(.jstracer-dom-event, .jstracer-dom-mutation, .jstracer-implementation) {
padding-inline: 4px;
margin-inline: 2px;
}
.webconsole-app .jstracer-dom-event {
- background-color: var( --console-tracer-dom-background);
+ background-color: var(--console-tracer-dom-background);
color: var(--console-tracer-dom-color);
}
.webconsole-app .jstracer-dom-mutation {
- background-color: var( --console-tracer-dom-background);
+ background-color: var(--console-tracer-dom-background);
color: var(--console-tracer-dom-color);
margin-inline-end: 4px;
}
@@ -853,7 +841,6 @@ a.learn-more-link.webconsole-learn-more-link {
font-variant-numeric: tabular-nums;
}
-
.consoletable tr:nth-child(even) td {
background-color: var(--table-zebra-background);
}
@@ -973,7 +960,7 @@ a.learn-more-link.webconsole-learn-more-link {
/* Center the collapse button in the left gutter (first-level only) */
.message.network > .collapse-button,
-.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button {
+.message:is(.startGroup, .startGroupCollapsed)[data-indent="0"] > .collapse-button {
width: 24px;
margin-inline-start: var(--console-icon-horizontal-offset);
margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
@@ -981,7 +968,7 @@ a.learn-more-link.webconsole-learn-more-link {
/* Use a bigger arrow that is visually similar to other icons (10px) */
.message.network > .collapse-button::before,
-.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button::before {
+.message:is(.startGroup, .startGroupCollapsed)[data-indent="0"] > .collapse-button::before {
width: 100%;
background-image: url("chrome://devtools/skin/images/arrow-big.svg");
fill: var(--theme-icon-dimmed-color);
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
index ddf6fca5ec40..17af27533f0d 100644
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -5,15 +5,15 @@
@import url(chrome://devtools/skin/breadcrumbs.css);
.theme-dark {
- --table-splitter-color: rgba(255,255,255,0.15);
- --table-zebra-background: rgba(255,255,255,0.05);
+ --table-splitter-color: rgba(255, 255, 255, 0.15);
+ --table-zebra-background: rgba(255, 255, 255, 0.05);
--sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
--sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
}
.theme-light {
- --table-splitter-color: rgba(0,0,0,0.15);
- --table-zebra-background: rgba(0,0,0,0.05);
+ --table-splitter-color: rgba(0, 0, 0, 0.15);
+ --table-zebra-background: rgba(0, 0, 0, 0.05);
--sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
--sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
}
@@ -68,8 +68,7 @@
.devtools-responsive-container > .devtools-side-splitter {
/* This is a normally vertical splitter, but we have turned it horizontal
due to the smaller resolution */
- min-height: calc(var(--devtools-splitter-top-width) +
- var(--devtools-splitter-bottom-width) + 1px);
+ min-height: calc(var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + 1px);
border-top-width: var(--devtools-splitter-top-width);
border-bottom-width: var(--devtools-splitter-bottom-width);
margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
@@ -139,7 +138,7 @@
/* Custom scope stylings */
-.variables-view-watch-expressions .title > .name {
+.variables-view-watch-expressions .title > .name {
max-width: 14em;
}
@@ -258,17 +257,20 @@
color: inherit;
text-align: start;
font-weight: inherit !important;
- border-image: linear-gradient(transparent 15%,
- var(--theme-splitter-color) 15%,
- var(--theme-splitter-color) 85%,
- transparent 85%,
- transparent calc(100% - 1px),
- var(--theme-splitter-color) calc(100% - 1px)) 1 1;
+ border-image: linear-gradient(
+ transparent 15%,
+ var(--theme-splitter-color) 15%,
+ var(--theme-splitter-color) 85%,
+ transparent 85%,
+ transparent calc(100% - 1px),
+ var(--theme-splitter-color) calc(100% - 1px)
+ )
+ 1 1;
background-repeat: no-repeat;
}
.table-widget-column-header:not([sorted]):hover {
- background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
+ background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}
.table-widget-column-header[sorted] {
@@ -283,20 +285,20 @@
background-position: 6px center;
}
-.table-widget-column-header[sorted=ascending] {
+.table-widget-column-header[sorted="ascending"] {
background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
}
-.table-widget-column-header[sorted=descending] {
+.table-widget-column-header[sorted="descending"] {
background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
}
.theme-dark .table-widget-column[readonly] {
- background-color: rgba(255,255,255,0.1);
+ background-color: rgba(255, 255, 255, 0.1);
}
.theme-light .table-widget-column[readonly] {
- background-color: rgba(0,0,0,0.1);
+ background-color: rgba(0, 0, 0, 0.1);
}
.table-widget-body .devtools-side-splitter:last-of-type {
diff --git a/devtools/client/webconsole/components/App.css b/devtools/client/webconsole/components/App.css
index 031e09980a3c..1f0ed5aa6df7 100644
--- a/devtools/client/webconsole/components/App.css
+++ b/devtools/client/webconsole/components/App.css
@@ -64,12 +64,13 @@ body {
* rows/columns to "auto" to make them collapse when the element
* they contain is hidden.
*/
- grid-template-areas: "chrome-debug-toolbar chrome-debug-toolbar"
- "filter-toolbar sidebar"
- "filter-toolbar-secondary sidebar"
- "output-input sidebar"
- "eval-notification sidebar"
- "reverse-search sidebar";
+ grid-template-areas:
+ "chrome-debug-toolbar chrome-debug-toolbar"
+ "filter-toolbar sidebar"
+ "filter-toolbar-secondary sidebar"
+ "output-input sidebar"
+ "eval-notification sidebar"
+ "reverse-search sidebar";
grid-template-rows: auto var(--primary-toolbar-height) auto 1fr auto auto;
grid-template-columns: minmax(200px, 1fr) minmax(0, auto);
max-height: 100vh !important;
@@ -154,12 +155,7 @@ body {
--jsterm-border-width: 0;
--jsterm-padding-top: 0;
--jsterm-padding-bottom: 0;
- min-height: calc(
- var(--console-row-height) +
- var(--jsterm-border-width) +
- var(--jsterm-padding-top) +
- var(--jsterm-padding-bottom)
- );
+ min-height: calc(var(--console-row-height) + var(--jsterm-border-width) + var(--jsterm-padding-top) + var(--jsterm-padding-bottom));
padding-top: var(--jsterm-padding-top);
padding-bottom: var(--jsterm-padding-bottom);
border-top-color: var(--theme-splitter-color);
@@ -183,7 +179,7 @@ body {
}
.webconsole-input-openEditorButton {
- /* adjust outline offset so it's not clipped */
+ /* adjust outline offset so it's not clipped */
--theme-outline-offset: -2px;
height: var(--console-row-height);
margin: 0;
@@ -291,14 +287,15 @@ body {
* rows/columns to "auto" to make them collapse when the element
* they contain is hidden.
*/
- grid-template-areas: "chrome-debug-toolbar chrome-debug-toolbar chrome-debug-toolbar"
- "notification notification notification"
- "editor-toolbar filter-toolbar sidebar"
- "editor filter-toolbar-secondary sidebar"
- "editor output sidebar"
- "eager-evaluation output sidebar"
- "eval-notification output sidebar"
- "reverse-search output sidebar";
+ grid-template-areas:
+ "chrome-debug-toolbar chrome-debug-toolbar chrome-debug-toolbar"
+ "notification notification notification"
+ "editor-toolbar filter-toolbar sidebar"
+ "editor filter-toolbar-secondary sidebar"
+ "editor output sidebar"
+ "eager-evaluation output sidebar"
+ "eval-notification output sidebar"
+ "reverse-search output sidebar";
grid-template-rows:
auto
auto
@@ -348,7 +345,6 @@ body {
align-items: center;
}
-
.jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-executeButton::before {
content: url("chrome://devtools/skin/images/webconsole/run.svg");
height: 16px;
diff --git a/devtools/client/webconsole/components/Input/EagerEvaluation.css b/devtools/client/webconsole/components/Input/EagerEvaluation.css
index b4da4c1753de..44f3d887ab5b 100644
--- a/devtools/client/webconsole/components/Input/EagerEvaluation.css
+++ b/devtools/client/webconsole/components/Input/EagerEvaluation.css
@@ -23,8 +23,7 @@
width: 14px;
height: 14px;
margin: 0 8px;
- background: url(chrome://devtools/skin/images/webconsole/return.svg) no-repeat
- center;
+ background: url(chrome://devtools/skin/images/webconsole/return.svg) no-repeat center;
background-size: 12px;
-moz-context-properties: fill;
fill: var(--theme-icon-dimmed-color);
@@ -67,9 +66,7 @@
flex-grow: 1;
background-color: var(--console-input-background);
/* Reserve a bit of whitespace after the content. */
- min-height: calc(
- var(--console-row-height) + var(--console-input-extra-padding)
- );
+ min-height: calc(var(--console-row-height) + var(--console-input-extra-padding));
}
/*
diff --git a/devtools/client/webconsole/components/Input/EvaluationNotification.css b/devtools/client/webconsole/components/Input/EvaluationNotification.css
index 2e387bda7fac..43d21fcd34fc 100644
--- a/devtools/client/webconsole/components/Input/EvaluationNotification.css
+++ b/devtools/client/webconsole/components/Input/EvaluationNotification.css
@@ -5,7 +5,7 @@
.evaluation-notification.warning {
color: var(--console-warning-color);
border-color: var(--console-warning-border);
- background-color: var(--console-warning-background)
+ background-color: var(--console-warning-background);
}
.evaluation-notification.warning .evaluation-notification__icon {
diff --git a/devtools/client/webconsole/components/Input/ReverseSearchInput.css b/devtools/client/webconsole/components/Input/ReverseSearchInput.css
index 63984499599b..8527ae948644 100644
--- a/devtools/client/webconsole/components/Input/ReverseSearchInput.css
+++ b/devtools/client/webconsole/components/Input/ReverseSearchInput.css
@@ -24,8 +24,7 @@
:root[platform="mac"] .webconsole-app .reverse-search {
border-end-start-radius: 5px;
}
-:root[platform="mac"] .webconsole-app:not(.jsterm-editor, .sidebar-visible) .reverse-search
-{
+:root[platform="mac"] .webconsole-app:not(.jsterm-editor, .sidebar-visible) .reverse-search {
border-end-end-radius: 5px;
}
diff --git a/devtools/server/actors/highlighters/css/highlighters.css b/devtools/server/actors/highlighters/css/highlighters.css
index 0138133c9fb8..0711872e0937 100644
--- a/devtools/server/actors/highlighters/css/highlighters.css
+++ b/devtools/server/actors/highlighters/css/highlighters.css
@@ -2,7 +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/. */
-:host { display: contents; }
+:host {
+ display: contents;
+}
.highlighter-container {
--highlighter-accessibility-bounds-color: #6a5acd;
@@ -112,12 +114,7 @@
}
@media (prefers-reduced-motion) {
- .use-simple-highlighters :is(
- .box-model-content,
- .box-model-padding,
- .box-model-border,
- .box-model-margin
- ) {
+ .use-simple-highlighters :is(.box-model-content, .box-model-padding, .box-model-border, .box-model-margin) {
fill: none;
stroke-width: 3;
}
@@ -168,8 +165,7 @@
[class$="infobar-container"] > [class$="infobar"]:before {
left: calc(50% - var(--highlighter-bubble-arrow-size));
- border: var(--highlighter-bubble-arrow-size) solid
- var(--highlighter-bubble-border-color);
+ border: var(--highlighter-bubble-arrow-size) solid var(--highlighter-bubble-border-color);
}
[class$="infobar-container"] > [class$="infobar"]:after {
@@ -188,19 +184,15 @@
border-right-color: transparent;
}
-[class$="infobar-container"][position="top"]:not([hide-arrow])
- > [class$="infobar"]:before,
-[class$="infobar-container"][position="top"]:not([hide-arrow])
- > [class$="infobar"]:after {
+[class$="infobar-container"][position="top"]:not([hide-arrow]) > [class$="infobar"]:before,
+[class$="infobar-container"][position="top"]:not([hide-arrow]) > [class$="infobar"]:after {
border-bottom: 0;
top: 100%;
display: block;
}
-[class$="infobar-container"][position="bottom"]:not([hide-arrow])
- > [class$="infobar"]:before,
-[class$="infobar-container"][position="bottom"]:not([hide-arrow])
- > [class$="infobar"]:after {
+[class$="infobar-container"][position="bottom"]:not([hide-arrow]) > [class$="infobar"]:before,
+[class$="infobar-container"][position="bottom"]:not([hide-arrow]) > [class$="infobar"]:after {
border-top: 0;
bottom: 100%;
display: block;
@@ -438,10 +430,7 @@
text-anchor: end;
}
-:is(
- .viewport-size-highlighter-viewport-infobar-container,
- .viewport-size-on-resize-highlighter-viewport-infobar-container
-) {
+:is(.viewport-size-highlighter-viewport-infobar-container, .viewport-size-on-resize-highlighter-viewport-infobar-container) {
shape-rendering: crispEdges;
background-color: var(--highlighter-viewport-size-background-color);
color: var(--grey-80);
@@ -528,7 +517,7 @@
cursor: nwse-resize;
}
-[class^=measuring-tool-handler].dragging {
+[class^="measuring-tool-handler"].dragging {
fill: var(--highlighter-guide-color);
}
@@ -565,7 +554,7 @@
line-height: 1.5em;
}
-[class^=measuring-tool-guide] {
+[class^="measuring-tool-guide"] {
stroke: var(--highlighter-guide-color);
stroke-dasharray: 5 3;
shape-rendering: crispEdges;
@@ -591,10 +580,7 @@
pointer-events: auto;
/* Offset the UI so it is centered around the pointer */
- transform: translate(
- calc(var(--magnifier-width) / -2),
- calc(var(--magnifier-height) / -2)
- );
+ transform: translate(calc(var(--magnifier-width) / -2), calc(var(--magnifier-height) / -2));
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
@@ -620,16 +606,10 @@
height: var(--label-height);
position: relative;
- --label-horizontal-center: translateX(
- calc((var(--magnifier-width) - var(--label-width)) / 2)
- );
- --label-horizontal-left: translateX(
- calc((-1 * var(--label-width) + var(--magnifier-width) / 2))
- );
+ --label-horizontal-center: translateX(calc((var(--magnifier-width) - var(--label-width)) / 2));
+ --label-horizontal-left: translateX(calc((-1 * var(--label-width) + var(--magnifier-width) / 2)));
--label-horizontal-right: translateX(calc(var(--magnifier-width) / 2));
- --label-vertical-top: translateY(
- calc((-1 * var(--magnifier-height)) - var(--label-height))
- );
+ --label-vertical-top: translateY(calc((-1 * var(--magnifier-height)) - var(--label-height)));
/* By default the color label container sits below the canvas.
Here we just center it horizontally */
@@ -786,7 +766,6 @@ button.paused-dbg-resume-button {
font-size: var(--highlighter-font-size);
}
-
/* Remote Node Picker Notice Highlighter */
#node-picker-notice-root {
@@ -857,7 +836,6 @@ button.paused-dbg-resume-button {
background-image: url(resource://devtools-shared-images/command-pick-remote-touch.svg);
}
-
#node-picker-notice-hide-button {
border: 0;
border-radius: 2px;
@@ -967,7 +945,8 @@ button.paused-dbg-resume-button {
width: 8px;
display: inline-flex;
background-color: var(--accessibility-highlighter-contrast-ratio-color);
- box-shadow: 0 0 0 1px var(--grey-40),
+ box-shadow:
+ 0 0 0 1px var(--grey-40),
4px 3px var(--accessibility-highlighter-contrast-ratio-bg),
4px 3px 0 1px var(--grey-40);
margin-inline-start: 3px;
@@ -980,7 +959,7 @@ button.paused-dbg-resume-button {
.accessible-infobar-audit .accessible-contrast-ratio.AA::after,
.accessible-infobar-audit .accessible-contrast-ratio.AAA::after {
- color: #90E274;
+ color: #90e274;
}
.accessible-infobar-audit .accessible-audit::before,
@@ -996,7 +975,7 @@ button.paused-dbg-resume-button {
}
.accessible-infobar-audit .accessible-contrast-ratio.FAIL:after {
- color: #E57180;
+ color: #e57180;
margin-inline-start: 3px;
background-image: url(resource://devtools-shared-images/error-small.svg);
fill: var(--red-40);
@@ -1062,7 +1041,7 @@ button.paused-dbg-resume-button {
}
.tabbing-order .tabbing-order-infobar-container {
- font-size:calc(var(--highlighter-font-size) + 2px);
+ font-size: calc(var(--highlighter-font-size) + 2px);
}
.tabbing-order .tabbing-order-bounds {
diff --git a/devtools/shared/commands/resource/tests/style_document.css b/devtools/shared/commands/resource/tests/style_document.css
index aa545339249c..951094ff8e8e 100644
--- a/devtools/shared/commands/resource/tests/style_document.css
+++ b/devtools/shared/commands/resource/tests/style_document.css
@@ -1 +1,3 @@
-body { margin: 1px; }
+body {
+ margin: 1px;
+}
diff --git a/devtools/shared/commands/resource/tests/style_iframe.css b/devtools/shared/commands/resource/tests/style_iframe.css
index 30e7ae802b5e..2ea39ffc9173 100644
--- a/devtools/shared/commands/resource/tests/style_iframe.css
+++ b/devtools/shared/commands/resource/tests/style_iframe.css
@@ -1 +1,3 @@
-body { padding: 1px; }
+body {
+ padding: 1px;
+}