[DevToolsIcons] Update expand icons in Styles and Accessibility
Screenshot: https://imgur.com/a/1qdBuNJ
Bug: 1427397
Change-Id: I89f2130ff55ea16cc549558c53678b730fa518f3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4465707
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
diff --git a/front_end/Images/src/chevrons.svg b/front_end/Images/src/chevrons.svg
deleted file mode 100644
index 59e5ae1..0000000
--- a/front_end/Images/src/chevrons.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- xmlns:dc="http://purl.org/dc/elements/1.1/"
- xmlns:cc="http://creativecommons.org/ns#"
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
- xmlns:svg="http://www.w3.org/2000/svg"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="30"
- height="10"
- id="svg3232"
- version="1.1"
- inkscape:version="0.48.4 r9939"
- sodipodi:docname="chevrons.svg">
- <defs
- id="defs3234" />
- <sodipodi:namedview
- id="base"
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1.0"
- inkscape:pageopacity="0.0"
- inkscape:pageshadow="2"
- inkscape:zoom="2"
- inkscape:cx="375"
- inkscape:cy="-51.428571"
- inkscape:document-units="px"
- inkscape:current-layer="layer1"
- showgrid="false"
- inkscape:window-width="1640"
- inkscape:window-height="844"
- inkscape:window-x="516"
- inkscape:window-y="280"
- inkscape:window-maximized="0" />
- <metadata
- id="metadata3237">
- <rdf:RDF>
- <cc:Work
- rdf:about="">
- <dc:format>image/svg+xml</dc:format>
- <dc:type
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- <dc:title></dc:title>
- </cc:Work>
- </rdf:RDF>
- </metadata>
- <g
- inkscape:groupmode="layer"
- id="layer1">
- <path
- inkscape:connector-curvature="0"
- d="M 0,2.75005 0.96529,1.78476 5.07291,5.89238 0.96529,10 0,9.03471 3.13549,5.89238 z"
- id="path4-7" />
- <path
- inkscape:connector-curvature="0"
- d="M 27.24995,2.92708 28.21524,3.89238 24.10762,8 20,3.89238 l 0.96529,-0.9653 3.14233,3.13549 z"
- id="path4-7-5" />
- </g>
-</svg>
diff --git a/front_end/Images/src/file-sync-badge.svg b/front_end/Images/src/file-sync-badge.svg
deleted file mode 100644
index aaa170d..0000000
--- a/front_end/Images/src/file-sync-badge.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15" cy="17" r="3" fill="black"/>
-</svg>
diff --git a/front_end/models/persistence/PersistenceUtils.ts b/front_end/models/persistence/PersistenceUtils.ts
index a23a2d1..71bee4a 100644
--- a/front_end/models/persistence/PersistenceUtils.ts
+++ b/front_end/models/persistence/PersistenceUtils.ts
@@ -55,9 +55,9 @@
icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
- icon.classList.add('purple-dot');
+ icon.classList.add('dot', 'purple');
} else {
- icon.classList.add('green-dot');
+ icon.classList.add('dot', 'green');
}
return icon;
}
@@ -70,7 +70,7 @@
if (NetworkPersistenceManager.instance().hasMatchingNetworkUISourceCodeForHeaderOverridesFile(uiSourceCode)) {
const icon = new IconButton.Icon.Icon();
icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
- icon.classList.add('purple-dot');
+ icon.classList.add('dot', 'purple');
return icon;
}
}
diff --git a/front_end/panels/accessibility/axBreadcrumbs.css b/front_end/panels/accessibility/axBreadcrumbs.css
index 720cc6f..b048025 100644
--- a/front_end/panels/accessibility/axBreadcrumbs.css
+++ b/front_end/panels/accessibility/axBreadcrumbs.css
@@ -40,11 +40,10 @@
}
.ax-breadcrumbs .ax-node::before {
- -webkit-mask-image: var(--image-file-chevrons);
- -webkit-mask-position: 0 0;
- -webkit-mask-size: 30px 10px;
+ -webkit-mask-image: var(--image-file-chevron-right);
-webkit-mask-repeat: no-repeat;
- background-color: var(--color-syntax-7);
+ background-color: var(--icon-default);
+ transform: scale(0.7);
content: "";
text-shadow: none;
margin-right: -2px;
@@ -59,7 +58,7 @@
}
.ax-breadcrumbs .ax-node.parent::before {
- -webkit-mask-position: -20px 1px;
+ -webkit-mask-image: var(--image-file-chevron-down);
}
.ax-breadcrumbs .ax-node.no-dom-node {
diff --git a/front_end/panels/elements/stylesSidebarPane.css b/front_end/panels/elements/stylesSidebarPane.css
index 058af78..bda9c37 100644
--- a/front_end/panels/elements/stylesSidebarPane.css
+++ b/front_end/panels/elements/stylesSidebarPane.css
@@ -79,6 +79,10 @@
user-select: none;
}
+.styles-section .styles-section-subtitle devtools-icon {
+ margin-bottom: -4px;
+}
+
.styles-section .styles-section-subtitle .devtools-link {
color: var(--color-text-primary);
text-decoration-color: hsl(0deg 0% 60%);
diff --git a/front_end/panels/network/RequestHeadersView.ts b/front_end/panels/network/RequestHeadersView.ts
index fc06a5c..f1422d4 100644
--- a/front_end/panels/network/RequestHeadersView.ts
+++ b/front_end/panels/network/RequestHeadersView.ts
@@ -571,7 +571,7 @@
const icon = new IconButton.Icon.Icon();
icon.data = {iconName: 'document', color: 'var(--icon-default)', width: '16px', height: '16px'};
if (overridesSetting.get()) {
- icon.classList.add('purple-dot');
+ icon.classList.add('dot', 'purple');
}
const button = container.createChild('button', 'link devtools-link headers-link');
button.appendChild(icon);
diff --git a/front_end/panels/network/components/RequestHeadersView.css b/front_end/panels/network/components/RequestHeadersView.css
index 37580e7..aad65b9 100644
--- a/front_end/panels/network/components/RequestHeadersView.css
+++ b/front_end/panels/network/components/RequestHeadersView.css
@@ -151,21 +151,19 @@
padding-right: 3px;
}
-.purple-dot::before {
- -webkit-mask-image: url("Images/file-sync-badge.svg");
+.purple.dot::before {
background-color: var(--color-purple-bright);
content: url("Images/empty.svg");
- left: -3px;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ outline: 1px solid var(--icon-gap-toolbar);
+ left: 9px;
position: absolute;
- top: -3px;
+ top: 11px;
z-index: 1;
}
-.-theme-with-dark-background .purple-dot,
-:host-context(.-theme-with-dark-background) .purple-dot {
- filter: invert(80%) hue-rotate(350deg);
-}
-
summary label {
color: var(--color-text-secondary);
}
diff --git a/front_end/panels/network/components/RequestHeadersView.ts b/front_end/panels/network/components/RequestHeadersView.ts
index 4b02c81..13bc192 100644
--- a/front_end/panels/network/components/RequestHeadersView.ts
+++ b/front_end/panels/network/components/RequestHeadersView.ts
@@ -268,15 +268,8 @@
Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled');
// Disabled until https://crbug.com/1079231 is fixed.
// clang-format off
- const fileIcon = overridesSetting.get() ? html`
- <${IconButton.Icon.Icon.litTagName} class="inline-icon purple-dot" .data=${{
- iconName: 'document',
- color: 'var(--icon-default)',
- width: '16px',
- height: '16px',
- } as IconButton.Icon.IconData}>
- </${IconButton.Icon.Icon.litTagName}>` : html`
- <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+ const fileIcon = html`
+ <${IconButton.Icon.Icon.litTagName} class=${overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'} .data=${{
iconName: 'document',
color: 'var(--icon-default)',
width: '16px',
diff --git a/front_end/panels/sources/NavigatorView.ts b/front_end/panels/sources/NavigatorView.ts
index c9ed8e8..695aa06 100644
--- a/front_end/panels/sources/NavigatorView.ts
+++ b/front_end/panels/sources/NavigatorView.ts
@@ -1298,12 +1298,12 @@
}
const badgeIsPurple = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project() ===
binding.fileSystem.project();
- iconStyles = badgeIsPurple ? ['sync', 'sync-purple'] : ['sync'];
+ iconStyles = badgeIsPurple ? ['dot', 'purple'] : ['dot', 'green'];
} else if (
this.uiSourceCodeInternal.url().endsWith(Persistence.NetworkPersistenceManager.HEADERS_FILENAME) &&
Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance()
.hasMatchingNetworkUISourceCodeForHeaderOverridesFile(this.uiSourceCodeInternal)) {
- iconStyles = ['sync', 'sync-purple'];
+ iconStyles = ['dot', 'purple'];
} else {
if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCodeInternal)) {
iconType = 'snippet';
diff --git a/front_end/panels/sources/navigatorTree.css b/front_end/panels/sources/navigatorTree.css
index 052a25e..bed6987 100644
--- a/front_end/panels/sources/navigatorTree.css
+++ b/front_end/panels/sources/navigatorTree.css
@@ -51,7 +51,6 @@
.tree-outline {
--override-folder-tree-item-color: var(--icon-default);
--override-file-tree-item-color: var(--icon-default);
- --override-file-sync-badge-color: var(--color-tertiary-bright);
}
.navigator-fs-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
@@ -100,21 +99,20 @@
--override-file-tree-item-color: var(--icon-file-script);
}
-.navigator-file-tree-item devtools-icon.sync::before {
- content: url("Images/empty.svg");
- -webkit-mask-image: url("Images/file-sync-badge.svg");
- background-color: var(--override-file-sync-badge-color);
- position: absolute;
- z-index: 1;
+.navigator-file-tree-item devtools-icon.dot::before {
+ width: 7px;
+ height: 7px;
+ top: 12px;
+ left: 11px;
}
-.navigator-file-tree-item devtools-icon.sync.sync-purple::before {
- --override-file-sync-badge-color: var(--color-purple-bright);
+.navigator-file-tree-item.selected:not(.force-white-icons) devtools-icon.dot::before {
+ outline-color: var(--icon-gap-inactive);
}
-.navigator-file-tree-item.force-white-icons devtools-icon.sync::before,
-.navigator-file-tree-item.force-white-icons devtools-icon.sync.sync-purple::before {
- --override-file-sync-badge-color: var(--icon-force-white);
+.navigator-file-tree-item.selected.force-white-icons devtools-icon.dot::before {
+ background-color: var(--icon-force-white);
+ outline-color: var(--icon-gap-force-white);
}
.navigator-sm-stylesheet-tree-item .icons-container,
diff --git a/front_end/ui/components/icon_button/icon.css b/front_end/ui/components/icon_button/icon.css
index 350c1c5..aa06467 100644
--- a/front_end/ui/components/icon_button/icon.css
+++ b/front_end/ui/components/icon_button/icon.css
@@ -7,6 +7,7 @@
:host {
display: inline-block;
white-space: nowrap;
+ position: relative;
}
@media (forced-colors: active) {
diff --git a/front_end/ui/legacy/applicationColorTokens.css b/front_end/ui/legacy/applicationColorTokens.css
index ed09f5f..d1f7e34 100644
--- a/front_end/ui/legacy/applicationColorTokens.css
+++ b/front_end/ui/legacy/applicationColorTokens.css
@@ -27,6 +27,11 @@
--icon-folder-deployed: var(--color-primary-bright);
--icon-folder-workspace: var(--color-orange);
--icon-force-white: var(--color-on-primary);
+ --icon-gap-default: var(--color-on-primary);
+ --icon-gap-force-white: var(--legacy-selection-bg-color);
+ --icon-gap-inactive: var(--legacy-selection-inactive-bg-color);
+ --icon-gap-toolbar: var(--color-background-elevation-1);
+ --icon-gap-toolbar-hover: var(--color-background-elevation-2);
--icon-info: var(--color-primary-bright);
--icon-link: var(--color-primary-bright);
--icon-no-request: var(--color-orange-bright);
diff --git a/front_end/ui/legacy/components/inline_editor/cssLength.css b/front_end/ui/legacy/components/inline_editor/cssLength.css
index 56b97b7..1909a96 100644
--- a/front_end/ui/legacy/components/inline_editor/cssLength.css
+++ b/front_end/ui/legacy/components/inline_editor/cssLength.css
@@ -33,14 +33,15 @@
.icon {
position: absolute;
display: inline-block;
- -webkit-mask-image: var(--image-file-chevrons);
- -webkit-mask-position: -12px 4px;
- -webkit-mask-size: 19px 6px;
+ -webkit-mask-image: var(--image-file-chevron-down);
-webkit-mask-repeat: no-repeat;
- background-color: var(--color-text-primary);
+ background-color: var(--icon-default);
+ transform: scale(0.7);
+ margin-left: -7px;
+ margin-top: -3px;
content: "";
- height: 1em;
- width: 1em;
+ height: 2em;
+ width: 2em;
}
:host(:not(:last-child)) {
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index 7d26b58..f5435a3 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -1223,24 +1223,24 @@
background: var(--icon-force-white) !important; /* stylelint-disable-line declaration-no-important */
}
-.green-dot::before {
+.dot::before {
content: url("Images/empty.svg");
- -webkit-mask-image: url("Images/file-sync-badge.svg");
- background-color: var(--color-tertiary-bright);
- left: 6px;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ outline: 1px solid var(--icon-gap-default);
+ left: 9px;
position: absolute;
- top: 2px;
+ top: 9px;
z-index: 1;
}
-.purple-dot::before {
- -webkit-mask-image: url("Images/file-sync-badge.svg");
+.green::before {
+ background-color: var(--color-tertiary-bright);
+}
+
+.purple::before {
background-color: var(--color-purple-bright);
- content: url("Images/empty.svg");
- left: 6px;
- position: absolute;
- top: 2px;
- z-index: 1;
}
.expandable-inline-button {
diff --git a/front_end/ui/legacy/tabbedPane.css b/front_end/ui/legacy/tabbedPane.css
index 127b4d6..b760ec4 100644
--- a/front_end/ui/legacy/tabbedPane.css
+++ b/front_end/ui/legacy/tabbedPane.css
@@ -132,6 +132,14 @@
padding-right: 5px;
}
+.tabbed-pane-header-tab devtools-icon.dot::before {
+ outline-color: var(--icon-gap-toolbar);
+}
+
+.tabbed-pane-header-tab:hover devtools-icon.dot::before {
+ outline-color: var(--icon-gap-toolbar-hover);
+}
+
.tabbed-pane-header-tab:hover,
.tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible {
color: var(--color-text-primary);
