[DevToolsIcons] Update console toolbar icons
Screenshot: https://imgur.com/a/BdVLpdA
Bug: 1427397
Change-Id: Ib14f5cead89fffb36280fd7b72c383b072cd8dfd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4386721
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
diff --git a/front_end/Images/src/eye.svg b/front_end/Images/src/eye.svg
new file mode 100644
index 0000000..009cae8
--- /dev/null
+++ b/front_end/Images/src/eye.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13.5C10.972 13.5 11.7983 13.1597 12.479 12.479C13.1597 11.7983 13.5 10.972 13.5 10C13.5 9.028 13.1597 8.20167 12.479 7.521C11.7983 6.84033 10.972 6.5 10 6.5C9.028 6.5 8.20167 6.84033 7.521 7.521C6.84033 8.20167 6.5 9.028 6.5 10C6.5 10.972 6.84033 11.7983 7.521 12.479C8.20167 13.1597 9.028 13.5 10 13.5ZM10 12C9.44467 12 8.97233 11.8057 8.583 11.417C8.19433 11.0277 8 10.5553 8 10C8 9.44467 8.19433 8.97233 8.583 8.583C8.97233 8.19433 9.44467 8 10 8C10.5553 8 11.0277 8.19433 11.417 8.583C11.8057 8.97233 12 9.44467 12 10C12 10.5553 11.8057 11.0277 11.417 11.417C11.0277 11.8057 10.5553 12 10 12ZM10 16C8.014 16 6.20833 15.455 4.583 14.365C2.95833 13.2743 1.764 11.8193 1 10C1.764 8.18067 2.95833 6.72567 4.583 5.635C6.20833 4.545 8.014 4 10 4C11.986 4 13.7917 4.545 15.417 5.635C17.0417 6.72567 18.236 8.18067 19 10C18.236 11.8193 17.0417 13.2743 15.417 14.365C13.7917 15.455 11.986 16 10 16ZM10 14.5C11.5553 14.5 12.9927 14.0973 14.312 13.292C15.632 12.486 16.646 11.3887 17.354 10C16.646 8.61133 15.632 7.514 14.312 6.708C12.9927 5.90267 11.5553 5.5 10 5.5C8.44467 5.5 7.00733 5.90267 5.688 6.708C4.368 7.514 3.354 8.61133 2.646 10C3.354 11.3887 4.368 12.486 5.688 13.292C7.00733 14.0973 8.44467 14.5 10 14.5Z" fill="black"/>
+</svg>
diff --git a/front_end/Images/src/gear-filled.svg b/front_end/Images/src/gear-filled.svg
new file mode 100644
index 0000000..9963cb5
--- /dev/null
+++ b/front_end/Images/src/gear-filled.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.353 17.5H8.64432C8.10259 17.5 7.64871 17.1047 7.58283 16.5703L7.38517 15.1867C7.18752 15.0842 6.99718 14.9744 6.80684 14.8499L5.48913 15.377C4.97669 15.5674 4.413 15.3551 4.1641 14.9012L2.82442 12.5805C2.5682 12.0974 2.67801 11.5264 3.08797 11.2042L4.20802 10.3331C4.2007 10.2233 4.19338 10.1135 4.19338 9.99634C4.19338 9.88653 4.2007 9.7694 4.20802 9.65959L3.09529 8.78843C2.66337 8.459 2.55356 7.86603 2.82442 7.41215L4.17874 5.07687C4.42764 4.62299 4.99133 4.41801 5.48913 4.61567L6.81416 5.15007C7.0045 5.02562 7.19484 4.91581 7.38517 4.81332L7.58283 3.41508C7.64871 2.90264 8.10259 2.5 8.637 2.5H11.3456C11.8874 2.5 12.3412 2.89531 12.4071 3.42972L12.6048 4.81332C12.8024 4.91581 12.9928 5.02562 13.1831 5.15007L14.5008 4.62299C15.0206 4.43265 15.5843 4.64495 15.8332 5.09883L17.1802 7.42679C17.4437 7.90996 17.3266 8.48097 16.9166 8.80307L15.8039 9.67423C15.8112 9.78404 15.8185 9.89385 15.8185 10.011C15.8185 10.1281 15.8112 10.2379 15.8039 10.3477L16.9166 11.2189C17.3266 11.5483 17.4437 12.1193 17.1875 12.5805L15.8259 14.9378C15.5769 15.3917 15.0133 15.5966 14.5081 15.399L13.1904 14.8719C13.0001 14.9963 12.8098 15.1061 12.6194 15.2086L12.4218 16.6069C12.3486 17.1047 11.8947 17.5 11.353 17.5ZM12.561 9.99623C12.561 11.4113 11.4138 12.5585 9.99875 12.5585C8.58367 12.5585 7.43653 11.4113 7.43653 9.99623C7.43653 8.58115 8.58367 7.43401 9.99875 7.43401C11.4138 7.43401 12.561 8.58115 12.561 9.99623Z" fill="black"/>
+</svg>
diff --git a/front_end/panels/console/ConsoleView.ts b/front_end/panels/console/ConsoleView.ts
index c7e7d02..449fa98 100644
--- a/front_end/panels/console/ConsoleView.ts
+++ b/front_end/panels/console/ConsoleView.ts
@@ -395,7 +395,7 @@
this.showSettingsPaneSetting =
Common.Settings.Settings.instance().createSetting('consoleShowSettingsToolbar', false);
this.showSettingsPaneButton = new UI.Toolbar.ToolbarSettingToggle(
- this.showSettingsPaneSetting, 'largeicon-settings-gear', i18nString(UIStrings.consoleSettings));
+ this.showSettingsPaneSetting, 'gear', i18nString(UIStrings.consoleSettings), 'gear-filled');
this.progressToolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
this.groupSimilarSetting = Common.Settings.Settings.instance().moduleSetting('consoleGroupSimilar');
this.groupSimilarSetting.addChangeListener(() => this.updateMessageList());
diff --git a/front_end/panels/console/console-meta.ts b/front_end/panels/console/console-meta.ts
index 070bca8..f15e2a5 100644
--- a/front_end/panels/console/console-meta.ts
+++ b/front_end/panels/console/console-meta.ts
@@ -192,7 +192,7 @@
actionId: 'console.clear',
category: UI.ActionRegistration.ActionCategory.CONSOLE,
title: i18nLazyString(UIStrings.clearConsole),
- iconClass: UI.ActionRegistration.IconClass.LARGEICON_CLEAR,
+ iconClass: UI.ActionRegistration.IconClass.CLEAR,
async loadActionDelegate() {
const Console = await loadConsoleModule();
return Console.ConsoleView.ActionDelegate.instance();
@@ -225,7 +225,7 @@
actionId: 'console.create-pin',
category: UI.ActionRegistration.ActionCategory.CONSOLE,
title: i18nLazyString(UIStrings.createLiveExpression),
- iconClass: UI.ActionRegistration.IconClass.LARGEICON_VISIBILITY,
+ iconClass: UI.ActionRegistration.IconClass.EYE,
async loadActionDelegate() {
const Console = await loadConsoleModule();
return Console.ConsoleView.ActionDelegate.instance();
diff --git a/front_end/ui/legacy/ActionRegistration.ts b/front_end/ui/legacy/ActionRegistration.ts
index 5efd36b..f8605ea 100644
--- a/front_end/ui/legacy/ActionRegistration.ts
+++ b/front_end/ui/legacy/ActionRegistration.ts
@@ -227,8 +227,8 @@
LARGEICON_START_RECORDING = 'largeicon-start-recording',
LARGEICON_STOP_RECORDING = 'largeicon-stop-recording',
LARGEICON_REFRESH = 'largeicon-refresh',
- LARGEICON_CLEAR = 'largeicon-clear',
- LARGEICON_VISIBILITY = 'largeicon-visibility',
+ CLEAR = 'clear',
+ EYE = 'eye',
LARGEICON_PHONE = 'devices',
LARGEICON_PLAY = 'largeicon-play',
LARGEICON_DOWNLOAD = 'largeicon-download',
diff --git a/front_end/ui/legacy/Icon.ts b/front_end/ui/legacy/Icon.ts
index d0ff09b..32f7fce 100644
--- a/front_end/ui/legacy/Icon.ts
+++ b/front_end/ui/legacy/Icon.ts
@@ -104,11 +104,14 @@
['breakpoint-crossed', {cellWidth: 20, cellHeight: 20, padding: 0}],
['checkmark', {cellWidth: 20, cellHeight: 20, padding: 0}],
['chevron-double-right', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['clear', {cellWidth: 20, cellHeight: 20, padding: 0}],
['cross', {cellWidth: 20, cellHeight: 20, padding: 0}],
['database', {cellWidth: 20, cellHeight: 20, padding: 0}],
['devices', {cellWidth: 20, cellHeight: 20, padding: 0}],
['dots-vertical', {cellWidth: 20, cellHeight: 20, padding: 0}],
['edit', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['eye', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['gear-filled', {cellWidth: 20, cellHeight: 20, padding: 0}],
['gear', {cellWidth: 20, cellHeight: 20, padding: 0}],
['left-panel-close', {cellWidth: 20, cellHeight: 20, padding: 0}],
['left-panel-open', {cellWidth: 20, cellHeight: 20, padding: 0}],
@@ -277,11 +280,14 @@
['breakpoint-crossed', {position: 'a1', spritesheet: 'breakpoint-crossed', isMask: true}],
['checkmark', {position: 'a1', spritesheet: 'checkmark', isMask: true}],
['chevron-double-right', {position: 'a1', spritesheet: 'chevron-double-right', isMask: true}],
+ ['clear', {position: 'a1', spritesheet: 'clear', isMask: true}],
['cross', {position: 'a1', spritesheet: 'cross', isMask: true}],
['database', {position: 'a1', spritesheet: 'database', isMask: true}],
['devices', {position: 'a1', spritesheet: 'devices', isMask: true}],
['dots-vertical', {position: 'a1', spritesheet: 'dots-vertical', isMask: true}],
['edit', {position: 'a1', spritesheet: 'edit', isMask: true}],
+ ['eye', {position: 'a1', spritesheet: 'eye', isMask: true}],
+ ['gear-filled', {position: 'a1', spritesheet: 'gear-filled', isMask: true}],
['gear', {position: 'a1', spritesheet: 'gear', isMask: true}],
['left-panel-close', {position: 'a1', spritesheet: 'left-panel-close', isMask: true}],
['left-panel-open', {position: 'a1', spritesheet: 'left-panel-open', isMask: true}],
diff --git a/front_end/ui/legacy/SoftDropDown.ts b/front_end/ui/legacy/SoftDropDown.ts
index 261cfaa..ce154dc 100644
--- a/front_end/ui/legacy/SoftDropDown.ts
+++ b/front_end/ui/legacy/SoftDropDown.ts
@@ -51,7 +51,7 @@
this.element.classList.add('soft-dropdown');
ThemeSupport.ThemeSupport.instance().appendStyle(this.element, softDropDownButtonStyles);
this.titleElement = this.element.createChild('span', 'title');
- const dropdownArrowIcon = Icon.create('smallicon-triangle-down');
+ const dropdownArrowIcon = Icon.create('triangle-down');
this.element.appendChild(dropdownArrowIcon);
ARIAUtils.setExpanded(this.element, false);
diff --git a/front_end/ui/legacy/Toolbar.ts b/front_end/ui/legacy/Toolbar.ts
index ac15609..4a0bb48 100644
--- a/front_end/ui/legacy/Toolbar.ts
+++ b/front_end/ui/legacy/Toolbar.ts
@@ -633,7 +633,7 @@
if (shrinkable) {
this.element.classList.add('toolbar-has-dropdown-shrinkable');
}
- const dropdownArrowIcon = Icon.create('smallicon-triangle-down', 'toolbar-dropdown-arrow');
+ const dropdownArrowIcon = Icon.create('triangle-down', 'toolbar-dropdown-arrow');
this.element.appendChild(dropdownArrowIcon);
}
@@ -862,8 +862,8 @@
private readonly setting: Common.Settings.Setting<boolean>;
private willAnnounceState: boolean;
- constructor(setting: Common.Settings.Setting<boolean>, glyph: string, title: string) {
- super(title, glyph);
+ constructor(setting: Common.Settings.Setting<boolean>, glyph: string, title: string, toggledGlyph?: string) {
+ super(title, glyph, toggledGlyph);
this.defaultTitle = title;
this.setting = setting;
this.settingChanged();
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index 8cb545b..f1cefad 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -576,6 +576,10 @@
-webkit-mask-image: var(--image-file-chevron-double-right);
}
+.spritesheet-clear.icon-mask {
+ -webkit-mask-image: var(--image-file-clear);
+}
+
.spritesheet-database.icon-mask {
-webkit-mask-image: var(--image-file-database);
}
@@ -592,6 +596,14 @@
-webkit-mask-image: var(--image-file-edit);
}
+.spritesheet-eye.icon-mask {
+ -webkit-mask-image: var(--image-file-eye);
+}
+
+.spritesheet-gear-filled.icon-mask {
+ -webkit-mask-image: var(--image-file-gear-filled);
+}
+
.spritesheet-gear.icon-mask {
-webkit-mask-image: var(--image-file-gear);
}
