[RPP Observations] Prefix warning messages with warning icon

https://screenshot.googleplex.com/8zGux5ZqUS4PEVe

Bug: None
Change-Id: I94ccf6dfc025bdfdcaf2f40eeecc6f41c62b953d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6050443
Reviewed-by: Connor Clark <[email protected]>
Auto-Submit: Adam Raine <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Adam Raine

front_end/panels/timeline/components/liveMetricsView.css

@@ -280,6 +280,20 @@
 .field-data-warning {
   margin-top: 4px;
   color: var(--sys-color-error);
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-warning);
+    background-color: var(--sys-color-error);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
 }
 
 .collection-period-range {

front_end/panels/timeline/components/metricCard.css

@@ -59,6 +59,20 @@
 .warning {
   margin-top: 4px;
   color: var(--sys-color-error);
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-warning);
+    background-color: var(--sys-color-error);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
 }
 
 .good-bg {
@@ -90,17 +104,34 @@
 }
 
 .environment-recs {
-  margin: 12px 0;
+  margin: 9px 0;
 }
 
 .environment-recs > summary {
   font-weight: var(--ref-typeface-weight-medium);
   margin-bottom: 4px;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-triangle-right);
+    background-color: var(--icon-default);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+}
+
+details.environment-recs[open] > summary::before {
+  mask-image: var(--image-file-triangle-down);
 }
 
 .environment-recs-list {
   margin: 0;
-  padding-left: 20px;
 }
 
 .detailed-compare-text {