commit 21cde5d6516a80cb769ab1a31033680c4ffa9bac
author YuhanYang <yyhyyh@google.com> Tue Apr 26 01:45:54 2022
committer Chromium LUCI CQ <chromium-scoped@luci-project-accounts.iam.gserviceaccount.com> Tue Apr 26 01:45:54 2022
tree a0ef2d94eca1aa9912ad1ebc46dc36a20ede5322
parent e5d51064fad296b63188baf9888546b755887733

shimless: match the updated spec for the right pane in device info page

Changes: 1. Remove the text pill button's icon
         2. Change the style SKU warning icon to info icon
         3. Put the warning message into the Tooltip
Before: https://screenshot.googleplex.com/9s4GSxZBWBJPAFo
After: https://screenshot.googleplex.com/3YNswh9MGGkDUVi
Spec Doc: go/shimless-rma-spec

Bug: 1198187
Test: None
Change-Id: Id05ca5d69878fc456efd4f52f43212e850f43dfc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3591192
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: Gavin Williams <gavinwill@chromium.org>
Commit-Queue: Yuhan Yang <yyhyyh@google.com>
Cr-Commit-Position: refs/heads/main@{#995911}

ash/webui/shimless_rma/resources/reimaging_device_information_page.html

diff --git a/ash/webui/shimless_rma/resources/reimaging_device_information_page.html b/ash/webui/shimless_rma/resources/reimaging_device_information_page.html
index fa29af3..e32962d 100644
--- a/ash/webui/shimless_rma/resources/reimaging_device_information_page.html
+++ b/ash/webui/shimless_rma/resources/reimaging_device_information_page.html
@@ -9,7 +9,7 @@
   }
 
   cr-button {
-    border-radius: 20px;
+    border: 0;
   }
 
   .sku-warning {
@@ -22,11 +22,6 @@
     max-width: 400px;
   }
 
-  iron-icon {
-    height: 10px;
-    width: 50px;
-  }
-
   cr-input {
     --cr-input-error-display: none;
     margin-inline-end: 20px;
@@ -48,6 +43,23 @@
   .md-select {
     width: 336px;
   }
+  
+  #skuIconContainer {
+    align-items: center;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  #infoIcon {
+    display: inline-block;
+    height: 18px;
+    margin-inline-start: 6px;
+    width: 18px;
+  }
+
+  #tooltipContent {
+    line-height: var(--shimless-instructions-line-height);
+  }
 </style>
 
 <base-page>
@@ -135,29 +147,31 @@
           </cr-button>
         </div>
       </div>
-      <div>
+      <div id="skuIconContainer">
         <label id="skuLabel" class="cr-form-field-label">
           [[i18n('confirmDeviceInfoSkuLabel')]]
         </label>
-        <div class="input-holder">
-          <select id="skuSelect" class="md-select"
-              on-change="onSelectedSkuChange_" aria-labelledby="skuLabel"
-              disabled="[[allButtonsDisabled]]">
-            <template is="dom-repeat" items="[[skus_]]" as="sku">
-              <option value="[[sku]]">
-                [[sku]]
-              </option>
-            </template>
-          </select>
-          <cr-button id="resetSku" on-click="onResetSkuButtonClicked_"
-              disabled="[[disableResetSku_]]">
-            [[i18n('confirmDeviceInfoResetButtonLabel')]]
-          </cr-button>
-        </div>
+        <iron-icon icon="shimless-icon:info" id="infoIcon"
+            class="cr-form-field-label">
+        </iron-icon>
+        <paper-tooltip for="infoIcon">
+          <div id="tooltipContent">[[i18n('confirmDeviceInfoSkuWarning')]]</div> 
+        </paper-tooltip>
       </div>
-      <div class="sku-warning">
-        <iron-icon icon="shimless-icon:warning"></iron-icon>
-        [[i18n('confirmDeviceInfoSkuWarning')]]
+      <div class="input-holder">
+        <select id="skuSelect" class="md-select"
+            on-change="onSelectedSkuChange_" aria-labelledby="skuLabel"
+            disabled="[[allButtonsDisabled]]">
+          <template is="dom-repeat" items="[[skus_]]" as="sku">
+            <option value="[[sku]]">
+              [[sku]]
+            </option>
+          </template>
+        </select>
+        <cr-button id="resetSku" on-click="onResetSkuButtonClicked_"
+            disabled="[[disableResetSku_]]">
+          [[i18n('confirmDeviceInfoResetButtonLabel')]]
+        </cr-button>
       </div>
     </div>
   </div>