[CrOS cellular] Make cellular setup dialog responsive

Requirements:
   - https://carbon.googleplex.com/cros-ux/pages/lte-setup/setup-dialog

Screenshots:
   - https://screenshot.googleplex.com/9k9jbPVMqpn6tTY.png
   - https://screenshot.googleplex.com/BV2mY4zuwCq2drM.png
   - https://screenshot.googleplex.com/8Nq4yFZXQNtEu6q.png
   - https://screenshot.googleplex.com/WLvorXWMMzqmE5K.png

Bug: Bug: 1093185
Change-Id: I16e7080d1e650a963910607164807292d5be4fb1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2430298
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812405}

chrome/browser/resources/settings/chromeos/internet_page/cellular_setup_dialog.html

@@ -11,6 +11,17 @@
 <dom-module id="os-settings-cellular-setup-dialog">
   <template>
     <style include="settings-shared">
+      @media (min-width: 640px){
+        :host {
+          --cr-dialog-width: 512px;
+        }
+      }
+
+      @media (max-width: 640px){
+        :host {
+          --cr-dialog-width: 320px;
+        }
+      }
     </style>
     <!-- TODO(crbug/1093185): Change close logic when CellularSetup embedded -->
     <cr-dialog id="dialog">

chrome/test/data/webui/cr_components/chromeos/cellular_setup/cellular_setup_test.js

@@ -36,7 +36,7 @@ suite('CrComponentsCellularSetupTest', function() {
     const selectionFlow = cellularSetupPage.$$('setup-selection-flow');
     assertTrue(!!selectionFlow);
 
-    const psimBtn = selectionFlow.$$('#psim-flow-ui-btn');
+    const psimBtn = selectionFlow.$$('#psimFlowUiBtn');
     assertTrue(!!psimBtn);
 
     psimBtn.click();

chrome/test/data/webui/cr_components/chromeos/cellular_setup/esim_flow_ui_test.js

@@ -24,14 +24,22 @@ suite('CrComponentsEsimFlowUiTest', function() {
   });
 
   test('Forward navigation goes to final page', function() {
+    const qrCodePage = eSimPage.$$('#qr-code-page');
+    const finalPage = eSimPage.$$('#final-page');
+
+    assertTrue(!!qrCodePage);
+    assertTrue(!!finalPage);
+
     assertTrue(
-        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM);
+        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.ESIM &&
+        eSimPage.selectedESimPageName_ === qrCodePage.id);
 
     eSimPage.navigateForward();
     Polymer.dom.flush();
 
     assertTrue(
-        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL);
+        eSimPage.selectedESimPageName_ === cellular_setup.ESimPageName.FINAL &&
+        eSimPage.selectedESimPageName_ === finalPage.id);
   });
 
 

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

@@ -13,26 +13,73 @@
         --cr-card-radio-button-width: 224px
       }
 
-      #setup-flow-select-radio {
+      @media (min-width: 640px){
+        /* At above 640px card radio buttons should be aligned in a row  */
+        #setupFlowSelectRadio {
+          flex-direction: row;
+        }
+
+        .sim-icon-container {
+          height: 128px;
+        }
+
+        .sim-flow-ui-btn {
+         margin-bottom: 32px;
+        }
+      }
+
+      @media (max-width: 640px){
+        /* At below 640px card radio buttons should be aligned in a column  */
+        #setupFlowSelectRadio {
+          flex-direction: column;
+        }
+
+        .sim-flow-ui-btn {
+          margin-inline-end: 0;
+          margin-inline-start: 0;
+          width: 278px;
+        }
+
+        #psimFlowUiBtn {
+          margin-bottom: 8px;
+          margin-top: 16px;
+        }
+
+        #esimFlowUiBtn {
+          margin-bottom: 32px;
+          margin-top: 8px;
+        }
+
+        .flex-container {
+          display: flex;
+          flex-direction: row;
+        }
+
+        .sim-icon-container {
+          height: 64px;
+          margin: auto;
+          width: 128px;
+        }
+      }
+
+      #setupFlowSelectRadio {
         display: flex;
-        flex-direction: row;
         justify-content: center;
       }
 
       .sim-icon-container {
         background-position: center center;
         background-repeat: no-repeat;
-        background-size: cover;
-        height: 60px;
+        background-size: contain;
       }
 
-      #psim-icon-container {
+      #psimIconContainer {
         background-image: -webkit-image-set(
             url(psim_1x.png) 1x,
             url(psim_2x.png) 2x);
       }
 
-      #esim-icon-container {
+      #esimIconContainer {
         background-image: -webkit-image-set(
             url(esim_1x.png) 1x,
             url(esim_2x.png) 2x);
@@ -43,51 +90,61 @@
       }
       .sim-btn-title {
         font-weight: 600;  /* semibold */
-        margin-top: 15px;
+        margin-top: 16px;
       }
 
       .sim-btn-description {
-        margin-top: 10px;
+        margin-top: 8px;
       }
 
     </style>
     <cr-radio-group
         name="setup-flow-selection"
-        id="setup-flow-select-radio"
+        id="setupFlowSelectRadio"
         selected="{{setupFlowSelection_}}"
         on-selected-changed="onSetupFlowRadioSelectedChange_">
       <cr-card-radio-button
-          id="psim-flow-ui-btn"
+          id="psimFlowUiBtn"
           name="psim-flow-ui"
-          aria-labeledby="psim-btn-title"
-          aria-describedby="psim-btn-descritpion">
-        <div id="psim-icon-container" class="sim-icon-container"></div>
-        <div id="psim-btn-title"
-            class="sim-btn-title sim-btn-text"
-            aria-hidden="true">
-          [[i18n('pSimFlowSetup')]]
-        </div>
-        <div id="psim-btn-descritpion"
-            class="sim-btn-description sim-btn-text"
-            aria-hidden="true">
-          [[i18n('pSimFlowSetupMessage')]]
+          class="sim-flow-ui-btn"
+          aria-labeledby="psimBtnTitle"
+          aria-describedby="psimBtnDescritpion">
+        <div class="flex-container">
+          <div id="psimIconContainer" class="sim-icon-container"></div>
+          <div>
+            <div id="psimBtnTitle"
+                class="sim-btn-title sim-btn-text"
+                aria-hidden="true">
+              [[i18n('pSimFlowSetup')]]
+            </div>
+            <div id="psimBtnDescritpion"
+                class="sim-btn-description sim-btn-text"
+                aria-hidden="true">
+              [[i18n('pSimFlowSetupMessage')]]
+            </div>
+          </div>
         </div>
       </cr-card-radio-button>
       <cr-card-radio-button
-          id="esim-flow-ui-btn"
+          id="esimFlowUiBtn"
+          class="sim-flow-ui-btn"
           name="esim-flow-ui"
-          aria-labeledby="esim-btn-title"
-          aria-describedby="esim-btn-descritpion">
-        <div id="esim-icon-container" class="sim-icon-container"></div>
-        <div id="esim-btn-title"
-            class="sim-btn-title sim-btn-text"
-            aria-hidden="true">
-          [[i18n('eSimFlowSetup')]]
-        </div>
-        <div id="esim-btn-descrition"
-            class="sim-btn-description sim-btn-text"
-            aria-hidden="true">
-          [[i18n('eSimFlowSetupMessage')]]
+          aria-labeledby="esimBtnTitle"
+          aria-describedby="esimBtnDescrition">
+        <div class="flex-container">
+          <div id="esimIconContainer" class="sim-icon-container"></div>
+          <div>
+            <div id="esimBtnTitle"
+                class="sim-btn-title sim-btn-text"
+                aria-hidden="true">
+              [[i18n('eSimFlowSetup')]]
+            </div>
+            <div id="esimBtnDescrition"
+                class="sim-btn-description sim-btn-text"
+                aria-hidden="true">
+              [[i18n('eSimFlowSetupMessage')]]
+            </div>
+          </div>
         </div>
       </cr-card-radio-button>
     </cr-radio-group>

ui/webui/resources/cr_components/chromeos/cellular_setup/setup_selection_flow.js

@@ -15,7 +15,6 @@ Polymer({
   ],
 
   properties: {
-
     /**
      * Element name of the current selected sub-page.
      * @private {!cellularSetup.CellularSetupPageName}

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -22,7 +22,7 @@
         overflow-y: hidden;
         padding: 0;
         top: 50%;
-        width: 512px;
+        width: var(--cr-dialog-width, 512px);
       }
 
       @media (prefers-color-scheme: dark) {