[DevToolsIcons] Update Network toolbar icons
Screenshot: https://imgur.com/a/JtAMLwc
Bug: 1427397
Change-Id: Ib68759752e9d6326a143304968f74a9356be3257
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4388619
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
diff --git a/front_end/ui/legacy/ActionRegistration.ts b/front_end/ui/legacy/ActionRegistration.ts
index f8605ea..b327f3d 100644
--- a/front_end/ui/legacy/ActionRegistration.ts
+++ b/front_end/ui/legacy/ActionRegistration.ts
@@ -224,8 +224,8 @@
export const enum IconClass {
LARGEICON_NODE_SEARCH = 'select-element',
- LARGEICON_START_RECORDING = 'largeicon-start-recording',
- LARGEICON_STOP_RECORDING = 'largeicon-stop-recording',
+ START_RECORDING = 'record-start',
+ STOP_RECORDING = 'record-stop',
LARGEICON_REFRESH = 'largeicon-refresh',
CLEAR = 'clear',
EYE = 'eye',
diff --git a/front_end/ui/legacy/FilterBar.ts b/front_end/ui/legacy/FilterBar.ts
index 2e8cf56..3b2a127 100644
--- a/front_end/ui/legacy/FilterBar.ts
+++ b/front_end/ui/legacy/FilterBar.ts
@@ -89,7 +89,7 @@
this.stateSetting =
Common.Settings.Settings.instance().createSetting('filterBar-' + name + '-toggled', Boolean(visibleByDefault));
this.filterButtonInternal =
- new ToolbarSettingToggle(this.stateSetting, 'largeicon-filter', i18nString(UIStrings.filter));
+ new ToolbarSettingToggle(this.stateSetting, 'filter', i18nString(UIStrings.filter), 'filter-filled');
this.filters = [];
diff --git a/front_end/ui/legacy/Icon.ts b/front_end/ui/legacy/Icon.ts
index 32f7fce..fdff182 100644
--- a/front_end/ui/legacy/Icon.ts
+++ b/front_end/ui/legacy/Icon.ts
@@ -109,16 +109,23 @@
['database', {cellWidth: 20, cellHeight: 20, padding: 0}],
['devices', {cellWidth: 20, cellHeight: 20, padding: 0}],
['dots-vertical', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['download', {cellWidth: 20, cellHeight: 20, padding: 0}],
['edit', {cellWidth: 20, cellHeight: 20, padding: 0}],
['eye', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['filter-filled', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['filter', {cellWidth: 20, cellHeight: 20, padding: 0}],
['gear-filled', {cellWidth: 20, cellHeight: 20, padding: 0}],
['gear', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['import', {cellWidth: 20, cellHeight: 20, padding: 0}],
['left-panel-close', {cellWidth: 20, cellHeight: 20, padding: 0}],
['left-panel-open', {cellWidth: 20, cellHeight: 20, padding: 0}],
['pause', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['record-start', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['record-stop', {cellWidth: 20, cellHeight: 20, padding: 0}],
['resume', {cellWidth: 20, cellHeight: 20, padding: 0}],
['right-panel-close', {cellWidth: 20, cellHeight: 20, padding: 0}],
['right-panel-open', {cellWidth: 20, cellHeight: 20, padding: 0}],
+ ['search', {cellWidth: 20, cellHeight: 20, padding: 0}],
['select-element', {cellWidth: 20, cellHeight: 20, padding: 0}],
['step-into', {cellWidth: 20, cellHeight: 20, padding: 0}],
['step-out', {cellWidth: 20, cellHeight: 20, padding: 0}],
@@ -228,7 +235,6 @@
['largeicon-dock-to-right', {position: 'd6', spritesheet: 'largeicons', isMask: true}],
['largeicon-download', {position: 'h6', spritesheet: 'largeicons', isMask: true}],
['largeicon-eyedropper', {position: 'b5', spritesheet: 'largeicons', isMask: true}],
- ['largeicon-filter', {position: 'c5', spritesheet: 'largeicons', isMask: true}],
['largeicon-font-editor', {position: 'i7', spritesheet: 'largeicons', isMask: true}],
['largeicon-large-list', {position: 'e5', spritesheet: 'largeicons', isMask: true}],
['largeicon-layout-editor', {position: 'a4', spritesheet: 'largeicons', isMask: true}],
@@ -254,7 +260,6 @@
['largeicon-replay-animation', {position: 'e2', spritesheet: 'largeicons', isMask: true}],
['largeicon-rotate', {position: 'g9', spritesheet: 'largeicons', isMask: true}],
['largeicon-rotate-screen', {position: 'g8', spritesheet: 'largeicons', isMask: true}],
- ['largeicon-search', {position: 'h4', spritesheet: 'largeicons', isMask: true}],
['largeicon-settings-gear', {position: 'g7', spritesheet: 'largeicons', isMask: true}],
['largeicon-shortcut-changed', {position: 'i4', spritesheet: 'largeicons', isMask: true}],
['largeicon-start-recording', {position: 'g2', spritesheet: 'largeicons', isMask: true}],
@@ -285,16 +290,23 @@
['database', {position: 'a1', spritesheet: 'database', isMask: true}],
['devices', {position: 'a1', spritesheet: 'devices', isMask: true}],
['dots-vertical', {position: 'a1', spritesheet: 'dots-vertical', isMask: true}],
+ ['download', {position: 'a1', spritesheet: 'download', isMask: true}],
['edit', {position: 'a1', spritesheet: 'edit', isMask: true}],
['eye', {position: 'a1', spritesheet: 'eye', isMask: true}],
+ ['filter-filled', {position: 'a1', spritesheet: 'filter-filled', isMask: true}],
+ ['filter', {position: 'a1', spritesheet: 'filter', isMask: true}],
['gear-filled', {position: 'a1', spritesheet: 'gear-filled', isMask: true}],
['gear', {position: 'a1', spritesheet: 'gear', isMask: true}],
+ ['import', {position: 'a1', spritesheet: 'import', isMask: true}],
['left-panel-close', {position: 'a1', spritesheet: 'left-panel-close', isMask: true}],
['left-panel-open', {position: 'a1', spritesheet: 'left-panel-open', isMask: true}],
['pause', {position: 'a1', spritesheet: 'pause', isMask: true}],
+ ['record-start', {position: 'a1', spritesheet: 'record-start', isMask: true}],
+ ['record-stop', {position: 'a1', spritesheet: 'record-stop', isMask: true}],
['resume', {position: 'a1', spritesheet: 'resume', isMask: true}],
['right-panel-close', {position: 'a1', spritesheet: 'right-panel-close', isMask: true}],
['right-panel-open', {position: 'a1', spritesheet: 'right-panel-open', isMask: true}],
+ ['search', {position: 'a1', spritesheet: 'search', isMask: true}],
['step-into', {position: 'a1', spritesheet: 'step-into', isMask: true}],
['step-out', {position: 'a1', spritesheet: 'step-out', isMask: true}],
['step-over', {position: 'a1', spritesheet: 'step-over', isMask: true}],
diff --git a/front_end/ui/legacy/inspectorCommon.css b/front_end/ui/legacy/inspectorCommon.css
index f1cefad..c5776b0 100644
--- a/front_end/ui/legacy/inspectorCommon.css
+++ b/front_end/ui/legacy/inspectorCommon.css
@@ -592,6 +592,10 @@
-webkit-mask-image: var(--image-file-dots-vertical);
}
+.spritesheet-download.icon-mask {
+ -webkit-mask-image: var(--image-file-download);
+}
+
.spritesheet-edit.icon-mask {
-webkit-mask-image: var(--image-file-edit);
}
@@ -600,6 +604,14 @@
-webkit-mask-image: var(--image-file-eye);
}
+.spritesheet-filter-filled.icon-mask {
+ -webkit-mask-image: var(--image-file-filter-filled);
+}
+
+.spritesheet-filter.icon-mask {
+ -webkit-mask-image: var(--image-file-filter);
+}
+
.spritesheet-gear-filled.icon-mask {
-webkit-mask-image: var(--image-file-gear-filled);
}
@@ -608,6 +620,10 @@
-webkit-mask-image: var(--image-file-gear);
}
+.spritesheet-import.icon-mask {
+ -webkit-mask-image: var(--image-file-import);
+}
+
.spritesheet-left-panel-close.icon-mask {
-webkit-mask-image: var(--image-file-left-panel-close);
}
@@ -620,6 +636,14 @@
-webkit-mask-image: var(--image-file-pause);
}
+.spritesheet-record-start.icon-mask {
+ -webkit-mask-image: var(--image-file-record-start);
+}
+
+.spritesheet-record-stop.icon-mask {
+ -webkit-mask-image: var(--image-file-record-stop);
+}
+
.spritesheet-resume.icon-mask {
-webkit-mask-image: var(--image-file-resume);
}
@@ -632,6 +656,10 @@
-webkit-mask-image: var(--image-file-right-panel-open);
}
+.spritesheet-search.icon-mask {
+ -webkit-mask-image: var(--image-file-search);
+}
+
.spritesheet-select-element.icon-mask {
-webkit-mask-image: var(--image-file-select-element);
}
