[CrOS Settings] Create cellular setup iconset.

Create cellular setup iconset and move activation code page icons into
the iconset.

Bug: 1093185
Change-Id: I06fe411ecf059d180b3f999279052e87b888bbf3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2566354
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832499}

ui/webui/resources/cr_components/BUILD.gn

@@ -98,6 +98,7 @@ preprocess_grit("preprocess_generated") {
       "chromeos/cellular_setup/base_page.m.js",
       "chromeos/cellular_setup/button_bar.m.js",
       "chromeos/cellular_setup/cellular_setup_delegate.m.js",
+      "chromeos/cellular_setup/cellular_setup_icons.m.js",
       "chromeos/cellular_setup/cellular_setup.m.js",
       "chromeos/cellular_setup/cellular_types.m.js",
       "chromeos/cellular_setup/esim_flow_ui.m.js",
@@ -205,6 +206,7 @@ preprocess_grit("preprocess_polymer2") {
       "chromeos/cellular_setup/button_bar.js",
       "chromeos/cellular_setup/cellular_setup_delegate.html",
       "chromeos/cellular_setup/cellular_setup_delegate.js",
+      "chromeos/cellular_setup/cellular_setup_icons.html",
       "chromeos/cellular_setup/cellular_setup.html",
       "chromeos/cellular_setup/cellular_setup.js",
       "chromeos/cellular_setup/cellular_types.html",

ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn

@@ -366,6 +366,7 @@ group("polymer3_elements") {
     ":activation_code_page_module",
     ":base_page_module",
     ":button_bar_module",
+    ":cellular_setup_icons_module",
     ":cellular_setup_module",
     ":esim_flow_ui_module",
     ":final_page_module",
@@ -475,6 +476,12 @@ polymer_modulizer("cellular_setup") {
   auto_imports = cr_components_chromeos_auto_imports
 }
 
+polymer_modulizer("cellular_setup_icons") {
+  js_file = "cellular_setup_icons.m.js"
+  html_file = "cellular_setup_icons.html"
+  html_type = "iron-iconset"
+}
+
 js_modulizer("modulize") {
   input_files = [
     "cellular_types.js",

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html

 <link rel="import" href="../../../html/polymer.html">
 
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="../../../html/i18n_behavior.html">
 <link rel="import" href="../../../cr_elements/cr_input/cr_input.html">
 <link rel="import" href="base_page.html">
 <link rel="import" href="cellular_setup_delegate.html">
+<link rel="import" href="cellular_setup_icons.html">
 
 <dom-module id="activation-code-page">
   <template>
@@ -47,15 +49,11 @@
       }
 
       .button-image {
-        height: 20px;
         margin-inline-end: 8px;
-        width: 20px;
       }
 
       .scan-finish-image {
-        height: 20px;
         position: absolute;
-        width: 20px;
        }
 
       .scan-finish-message {
@@ -67,7 +65,12 @@
         cursor: default;
       }
 
+      #startScanningContainer {
+        --iron-icon-fill-color: #1A73E8;
+      }
+
       #scanSuccessContainer {
+        --iron-icon-fill-color: #1E8E3E;
         margin-bottom: 8px;
       }
 
@@ -77,6 +80,7 @@
       }
 
       #scanFailureContainer {
+        --iron-icon-fill-color: #D93025;
         margin-bottom: 4px;
       }
 
@@ -101,8 +105,9 @@
         z-index: 2;
       }
 
-      #switchCameraButton img {
+      #switchCameraButton iron-icon {
         filter: brightness(2.1);
+        --iron-icon-fill-color: #5F6368;
       }
     </style>
     <base-page>
@@ -115,9 +120,7 @@
               on-click="onSwitchCameraButtonPressed_"
               hidden$="[[isUiElementHidden_(UiElement.SWITCH_CAMERA, state_, hasMultipleCameras_)]]"
               disabled="[[isUiElementDisabled_(UiElement.SWITCH_CAMERA, state_)]]">
-            <img class="button-image"
-                src="activation_code_page_switch_camera.svg"
-                aria-hidden="true">
+            <iron-icon class="button-image" icon="cellular-setup:switch-camera"></iron-icon>
             [[i18n('switchCamera')]]
           </cr-button>
           <video id="video"
@@ -129,9 +132,7 @@
                 id="startScanningButton"
                 on-click="startScanning_"
                 aria-describedby="scanQrCodeDescription">
-              <img class="button-image"
-                  src="activation_code_page_camera.svg"
-                  aria-hidden="true">
+              <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon>
               [[i18n('useCamera')]]
             </cr-button>
           </div>
@@ -140,16 +141,14 @@
             <div>
               <div id="scanSuccessContainer"
                   hidden$="[[isUiElementHidden_(UiElement.SCAN_SUCCESS, state_)]]">
-                <img class="scan-finish-image"
-                    src="activation_code_page_checked.svg">
+                <iron-icon class="scan-finish-image" icon="cellular-setup:checked"></iron-icon>
                 <span class="label scan-finish-message" id="scanSuccessMessage">
                   [[i18n('scanQRCodeSuccess')]]
                 </span>
               </div>
               <div id="scanFailureContainer"
                   hidden$="[[isUiElementHidden_(UiElement.SCAN_FAILURE, state_)]]">
-                <img class="scan-finish-image"
-                    src="activation_code_page_error.svg">
+                <iron-icon class="scan-finish-image" icon="cellular-setup:error"></iron-icon>
                 <span class="label scan-finish-message" id="scanFailureMessage">
                   [[i18n('scanQrCodeInvalid')]]
                 </span>

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_camera.svg

-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="1" y="2" width="18" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.667 4.167h-2.642L12.5 2.5h-5L5.975 4.167H3.334c-.917 0-1.667.75-1.667 1.666v10c0 .917.75 1.667 1.667 1.667h13.333c.917 0 1.667-.75 1.667-1.667v-10c0-.916-.75-1.666-1.667-1.666zm0 11.666H3.334v-10h13.333v10zm-10-5A3.332 3.332 0 1 1 10 14.166a3.332 3.332 0 0 1-3.333-3.333z" fill="#fff"/></mask><g mask="url(#a)"><path fill="#1A73E8" d="M0 0h20v20H0z"/></g></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_checked.svg

-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.707 7.293a1 1 0 0 0-1.414 0L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414z" fill="#1E8E3E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" fill="#1E8E3E"/></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_error.svg

-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 10h2V6H9v4zm1-8c-4.416 0-8 3.584-8 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 14c-3.308 0-6-2.693-6-6 0-3.308 2.692-6 6-6 3.307 0 6 2.692 6 6 0 3.307-2.693 6-6 6zm-1-2h2v-2H9v2z" fill="#D93025"/></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page_switch_camera.svg

-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9V7H4.802A5.996 5.996 0 0 1 10 4a6 6 0 0 1 5.917 5h2.021c-.491-3.945-3.853-7-7.93-7a7.992 7.992 0 0 0-6.009 2.712L4 3H2v6h5zm5.938 2v2h2.198a5.996 5.996 0 0 1-5.198 3 6 6 0 0 1-5.917-5H2c.492 3.945 3.853 7 7.93 7a7.992 7.992 0 0 0 6.009-2.712V17h2v-6h-5zM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#5F6368"/></svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<!-- These icons were converted from source .svg files. -->
+
+<iron-iconset-svg name="cellular-setup" size="20">
+  <svg>
+    <defs>
+        <g id="camera" viewBox="0 0 20 20"><mask id="a" maskUnits="userSpaceOnUse" x="1" y="2" width="18" height="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.667 4.167h-2.642L12.5 2.5h-5L5.975 4.167H3.334c-.917 0-1.667.75-1.667 1.666v10c0 .917.75 1.667 1.667 1.667h13.333c.917 0 1.667-.75 1.667-1.667v-10c0-.916-.75-1.666-1.667-1.666zm0 11.666H3.334v-10h13.333v10zm-10-5A3.332 3.332 0 1 1 10 14.166a3.332 3.332 0 0 1-3.333-3.333z" fill="#fff"></mask><g mask="url(#a)"><path d="M0 0h20v20H0z"></g></g>
+        <g id="checked" viewBox="0 0 20 20"><path d="M13.707 7.293a1 1 0 0 0-1.414 0L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"></path></g>
+        <g id="error" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 10h2V6H9v4zm1-8c-4.416 0-8 3.584-8 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 14c-3.308 0-6-2.693-6-6 0-3.308 2.692-6 6-6 3.307 0 6 2.692 6 6 0 3.307-2.693 6-6 6zm-1-2h2v-2H9v2z"></g>
+        <g id="switch-camera" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9V7H4.802A5.996 5.996 0 0 1 10 4a6 6 0 0 1 5.917 5h2.021c-.491-3.945-3.853-7-7.93-7a7.992 7.992 0 0 0-6.009 2.712L4 3H2v6h5zm5.938 2v2h2.198a5.996 5.996 0 0 1-5.198 3 6 6 0 0 1-5.917-5H2c.492 3.945 3.853 7 7.93 7a7.992 7.992 0 0 0 6.009-2.712V17h2v-6h-5zM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
\ No newline at end of file

ui/webui/resources/cr_components/chromeos/cellular_setup/profile_discovery_list_item.html

@@ -3,6 +3,8 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="cellular_setup_icons.html">
 
 <dom-module id="profile-discovery-list-item">
   <template>
@@ -23,13 +25,9 @@
       }
 
       #checkmark {
-        -webkit-mask: url(activation_code_page_checked.svg) no-repeat center;
-        background-color: var(--google-blue-600);
-        height: 20px;
+        --iron-icon-fill-color: var(--google-blue-600);
         margin-inline-end: 8px;
-        mask: url(activation_code_page_checked.svg) no-repeat center;
         padding-inline-end: var(--cr-section-padding);
-        width: 20px;
       }
     </style>
     <div class="two-line no-padding" selectable>
@@ -47,8 +45,11 @@
             </div>
           </div>
         </div>
-        <span id="checkmark" hidden$="[[!selected]]"
+        <iron-icon id="checkmark"
+            icon="cellular-setup:checked"
+            hidden$="[[!selected]]"
             tabindex="-1">
+        </iron-icon>
       </div>
     </div>
   </template>

ui/webui/resources/cr_components/cr_components_images.grdp

@@ -27,22 +27,6 @@
              compress="gzip" />
 
     <!-- CellularSetup Images -->
-    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_CAMERA_SVG"
-             file="cr_components/chromeos/cellular_setup/activation_code_page_camera.svg"
-             type="BINDATA"
-             compress="gzip" />
-    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_CHECKED_SVG"
-             file="cr_components/chromeos/cellular_setup/activation_code_page_checked.svg"
-             type="BINDATA"
-             compress="gzip" />
-    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_SWITCH_CAMERA_SVG"
-             file="cr_components/chromeos/cellular_setup/activation_code_page_switch_camera.svg"
-             type="BINDATA"
-             compress="gzip" />
-    <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ACTIVATION_CODE_PAGE_ERROR_SVG"
-             file="cr_components/chromeos/cellular_setup/activation_code_page_error.svg"
-             type="BINDATA"
-             compress="gzip" />
     <include name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_ERROR_1X_PNG"
              file="cr_components/chromeos/cellular_setup/error_1x.png"
              type="BINDATA"