From 27ddda8dd96ff1bc5b45c35c859caa4ff0491cfe Mon Sep 17 00:00:00 2001
From: Riho Isawa <rhisawa@google.com>
Date: Thu, 25 Nov 2021 04:23:44 +0000
Subject: [PATCH] [devtools] Add circled exclamation icon

This CL adds the circled exclamation icon for the layout of BFCache on devtools
https://docs.google.com/presentation/d/1kQbFM1FxSZcMTBL9vmgF1fT4ntGKk3B9iY6rhU_0kSs/edit#slide=id.gfa319b6ac2_0_0

Bug: None
Change-Id: I6ce9a1eacb6dfca812ce878233a1216eca1c1a8d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3301347
Commit-Queue: Riho Isawa <rhisawa@google.com>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
---
 config/gni/devtools_grd_files.gni                    | 1 +
 config/gni/devtools_image_files.gni                  | 1 +
 front_end/Images/src/circled_exclamation_icon.svg    | 3 +++
 front_end/panels/application/BackForwardCacheView.ts | 9 ++++++++-
 4 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 front_end/Images/src/circled_exclamation_icon.svg

diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
index 6519c67879..4d91451b95 100644
--- a/config/gni/devtools_grd_files.gni
+++ b/config/gni/devtools_grd_files.gni
@@ -45,6 +45,7 @@ grd_files_release_sources = [
   "front_end/Images/chromeRight.avif",
   "front_end/Images/chromeSelect.svg",
   "front_end/Images/chromeSelectDark.svg",
+  "front_end/Images/circled_exclamation_icon.svg",
   "front_end/Images/close-icon.svg",
   "front_end/Images/copy_icon.svg",
   "front_end/Images/cssoverview_icons_2x.avif",
diff --git a/config/gni/devtools_image_files.gni b/config/gni/devtools_image_files.gni
index d1240746dc..e6e81dd866 100644
--- a/config/gni/devtools_image_files.gni
+++ b/config/gni/devtools_image_files.gni
@@ -56,6 +56,7 @@ devtools_svg_sources = [
   "chevrons.svg",
   "chromeSelect.svg",
   "chromeSelectDark.svg",
+  "circled_exclamation_icon.svg",
   "close-icon.svg",
   "copy_icon.svg",
   "dropdown_7x6_icon.svg",
diff --git a/front_end/Images/src/circled_exclamation_icon.svg b/front_end/Images/src/circled_exclamation_icon.svg
new file mode 100644
index 0000000000..8ea29220c0
--- /dev/null
+++ b/front_end/Images/src/circled_exclamation_icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 4.233 4.233" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.25 10.25h1.5v1.5h-1.5zm0-6h1.5v4.5h-1.5ZM7.992.5C3.853.5.5 3.86.5 8c0 4.14 3.353 7.5 7.492 7.5 4.148 0 7.508-3.36 7.508-7.5 0-4.14-3.36-7.5-7.508-7.5ZM8 14c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z" transform="scale(.26458)" style="fill:#000"/>
+</svg>
diff --git a/front_end/panels/application/BackForwardCacheView.ts b/front_end/panels/application/BackForwardCacheView.ts
index 7a71b467ce..7477435331 100644
--- a/front_end/panels/application/BackForwardCacheView.ts
+++ b/front_end/panels/application/BackForwardCacheView.ts
@@ -262,7 +262,14 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     return LitHtml.html`
-      <li>${explanation.reason} : ${
+      <li>
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+      iconName: 'circled_exclamation_icon',
+      color: 'orange',
+      width: '16px',
+      height: '16px',
+    } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+        ${explanation.reason} : ${
         (explanation.reason in NotRestoredReasonDescription) ?
             LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
             LitHtml.nothing} </li>