[DevToolsIcons] Update BFCache frame and help icons
Screenshot: https://imgur.com/a/ktqTqB0
Bug: 1427397
Change-Id: I2b2aafd80a1570651cfa61fed96e29199bf52d3d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4403732
Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
index 8f601b1..f411c04 100644
--- a/config/gni/devtools_grd_files.gni
+++ b/config/gni/devtools_grd_files.gni
@@ -118,7 +118,6 @@
"front_end/Images/flex-wrap-icon.svg",
"front_end/Images/folder.svg",
"front_end/Images/frame-crossed.svg",
- "front_end/Images/frame-embedded-icon.svg",
"front_end/Images/frame-icon.svg",
"front_end/Images/frame.svg",
"front_end/Images/gear-filled.svg",
diff --git a/config/gni/devtools_image_files.gni b/config/gni/devtools_image_files.gni
index 9f17ae0..3a5a671 100644
--- a/config/gni/devtools_image_files.gni
+++ b/config/gni/devtools_image_files.gni
@@ -125,7 +125,6 @@
"flex-wrap-icon.svg",
"folder.svg",
"frame-crossed.svg",
- "frame-embedded-icon.svg",
"frame-icon.svg",
"frame.svg",
"gear-filled.svg",
diff --git a/front_end/Images/src/frame-embedded-icon.svg b/front_end/Images/src/frame-embedded-icon.svg
deleted file mode 100644
index c9a4723..0000000
--- a/front_end/Images/src/frame-embedded-icon.svg
+++ /dev/null
@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
- width="15"
- height="13"
- viewBox="0 0 3.9687502 3.4395833"
- version="1.1"
- id="svg234"
- inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
- sodipodi:docname="frame-embedded-icon.svg"
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:svg="http://www.w3.org/2000/svg">
- <sodipodi:namedview
- id="namedview236"
- pagecolor="#ffffff"
- bordercolor="#666666"
- borderopacity="1.0"
- inkscape:pageshadow="2"
- inkscape:pageopacity="0.0"
- inkscape:pagecheckerboard="0"
- inkscape:document-units="mm"
- showgrid="false"
- units="px"
- inkscape:zoom="14.493388"
- inkscape:cx="40.880712"
- inkscape:cy="34.084509"
- inkscape:window-width="2142"
- inkscape:window-height="1445"
- inkscape:window-x="0"
- inkscape:window-y="0"
- inkscape:window-maximized="1"
- inkscape:current-layer="layer1" />
- <defs
- id="defs231" />
- <g
- inkscape:label="Layer 1"
- inkscape:groupmode="layer"
- id="layer1"
- transform="translate(122.81654,83.789169)">
- <g
- id="g1853"
- style="fill:#000000"
- transform="matrix(0.26458333,0,0,0.26458333,-144.04935,-84.186044)">
- <path
- inkscape:connector-curvature="0"
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="m 85,6 h 7 v 5 h -7 z m 1,1 h 5 v 3 h -5 z"
- id="path1838" />
- <path
- inkscape:connector-curvature="0"
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M 82.5,2 C 81.67157,2 81,2.67157 81,3.5 v 9 c 0,0.8284 0.67157,1.5 1.5,1.5 H 93 c 0.8284,0 1.5,-0.6716 1.5,-1.5 v -9 C 94.5,2.67157 93.8284,2 93,2 Z m 0,10.5 V 5 H 93 v 7.5 z"
- id="path1840" />
- </g>
- </g>
-</svg>
diff --git a/front_end/panels/application/components/BackForwardCacheView.ts b/front_end/panels/application/components/BackForwardCacheView.ts
index 236fd47..d8ffba9 100644
--- a/front_end/panels/application/components/BackForwardCacheView.ts
+++ b/front_end/panels/application/components/BackForwardCacheView.ts
@@ -337,11 +337,11 @@
return LitHtml.html`
<div class="text-ellipsis">
${node.treeNodeData.iconName ? LitHtml.html`
- <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+ <${IconButton.Icon.Icon.litTagName} class="inline-icon" style="margin-bottom: -3px;" .data=${{
iconName: node.treeNodeData.iconName,
color: 'var(--color-text-secondary)',
- width: '16px',
- height: '16px',
+ width: '20px',
+ height: '20px',
} as IconButton.Icon.IconData}>
</${IconButton.Icon.Icon.litTagName}>
` : LitHtml.nothing}
@@ -353,7 +353,7 @@
const frameTreeData = this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1});
// Override the icon for the outermost frame.
- frameTreeData.node.treeNodeData.iconName = 'frame-icon';
+ frameTreeData.node.treeNodeData.iconName = 'frame';
let title = '';
// The translation pipeline does not support nested plurals. We avoid this
// here by pulling out the logic for one of the plurals into code instead.
@@ -432,7 +432,7 @@
...node,
children: () => Promise.resolve(children),
};
- node.treeNodeData.iconName = 'frame-embedded-icon';
+ node.treeNodeData.iconName = 'iframe';
} else if (!explanationTree.url.length) {
// If the current node increased the blank count, but it has no children and
// is therefore not shown, decrement the blank count again.
@@ -550,8 +550,8 @@
${category}
<div class="help-outline-icon">
<${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
- iconName: 'help_outline',
- color: 'var(--color-text-secondary)',
+ iconName: 'help',
+ color: 'var(--icon-default)',
width: '16px',
height: '16px',
} as IconButton.Icon.IconData} title=${explainerText}>
diff --git a/test/unittests/front_end/panels/application/components/BackForwardCacheView_test.ts b/test/unittests/front_end/panels/application/components/BackForwardCacheView_test.ts
index 127d564..46b00a0 100644
--- a/test/unittests/front_end/panels/application/components/BackForwardCacheView_test.ts
+++ b/test/unittests/front_end/panels/application/components/BackForwardCacheView_test.ts
@@ -220,7 +220,7 @@
{
treeNodeData: {
text: '(2) https://www.example.com',
- iconName: 'frame-icon',
+ iconName: 'frame',
},
children: [
{
@@ -231,7 +231,7 @@
{
treeNodeData: {
text: '(1) https://www.example.com/frame.html',
- iconName: 'frame-embedded-icon',
+ iconName: 'iframe',
},
children: [
{