[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

@@ -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",

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",

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>

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>