[CrOS cellular] Add carrier title to provisioning page

Requirements:
   - https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g7dc3c1fe01_5_125
Screenshot:
   - https://screenshot.googleplex.com/7S9tRak4yYCiP2a.png

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

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

@@ -22,12 +22,49 @@
           --cr-dialog-width: 320px;
         }
       }
+
+      :host {
+        --cr-dialog-title-slot-padding-bottom: 0;
+        --cr-dialog-title-slot-padding-end: 0;
+        --cr-dialog-title-slot-padding-start: 0;
+        --cr-dialog-title-slot-padding-top: 0;
+      }
+
+      #header {
+        padding-bottom: 16px;
+        padding-inline-end:  20px;
+        padding-inline-start: 20px;
+        padding-top: 20px;
+      }
+
+      #title {
+        align-items: center;
+        background-color: var(--google-grey-200);
+        display: flex;
+        font-size: x-small;
+        height: 32px;
+        justify-content: center;
+      }
+
     </style>
     <!-- TODO(crbug/1093185): Change close logic when CellularSetup embedded -->
     <cr-dialog id="dialog">
-      <div slot="title">$i18n{cellularSetupDialogTitle}</div>
+      <div slot="title">
+        <template is="dom-if"
+            if="[[shouldShowDialogTitle_(dialogTitle_)]]" restamp>
+          <div id="title">
+            [[dialogTitle_]]
+          </div>
+        </template>
+        <div id="header">
+          $i18n{cellularSetupDialogTitle}
+        </div>
+      </div>
       <div slot="body">
-        <cellular-setup delegate="[[delegate_]]"></cellular-setup>
+        <cellular-setup
+            flow-title="{{dialogTitle_}}"
+            delegate="[[delegate_]]">
+        </cellular-setup>
       </div>
     </cr-dialog>
   </template>

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

@@ -14,7 +14,13 @@ Polymer({
     /**
      * @private {!cellular_setup.CellularSetupDelegate}
      */
-    delegate_: Object
+    delegate_: Object,
+
+    /*** @private */
+    dialogTitle_: {
+      type: String,
+      notify: true,
+    },
   },
 
   /** @override */
@@ -31,8 +37,17 @@ Polymer({
     this.$.dialog.showModal();
   },
 
+  /** @private*/
   onExitCellularSetup_() {
     this.$.dialog.close();
-  }
+  },
 
+  /**
+   * @param {string} title
+   * @returns {boolean}
+   * @private
+   */
+  shouldShowDialogTitle_(title) {
+    return !!this.dialogTitle_;
+  },
 });

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

@@ -23,6 +23,7 @@
           if="[[isPSimSelected_(currentPageName_)]]" restamp>
         <psim-flow-ui
             button-state="{{buttonState_}}"
+            name-of-carrier-pending-setup="{{flowTitle}}"
             delegate="[[delegate]]"
             id="psim-flow-ui">
         </psim-flow-ui>
@@ -31,7 +32,7 @@
           if="[[isESimSelected_(currentPageName_)]]" restamp>
         <esim-flow-ui
             button-state="{{buttonState_}}"
-            delegate="[[delegate]]" 
+            delegate="[[delegate]]"
             id="esim-flow-ui">
         </esim-flow-ui>
       </template>

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

@@ -15,6 +15,11 @@ Polymer({
     /** @type {!cellular_setup.CellularSetupDelegate} */
     delegate: Object,
 
+    flowTitle: {
+      type: String,
+      notify: true,
+    },
+
     /**
      * Name of the currently displayed sub-page.
      * @private {!cellularSetup.CellularSetupPageName|null}
@@ -65,6 +70,7 @@ Polymer({
   /** @private */
   onPageChange_() {
     if (this.currentPage_) {
+      this.flowTitle = '';
       this.currentPage_.initSubflow();
     }
   },

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

@@ -29,6 +29,7 @@
             url(error_2x.png) 2x);
         background-position: center center;
         background-repeat: no-repeat;
+        background-size: contain;
         height: 100%;
         width: 100%;
       }

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

@@ -70,6 +70,16 @@ cr.define('cellularSetup', function() {
       /** @type {!cellular_setup.CellularSetupDelegate} */
       delegate: Object,
 
+      /**
+       * Carrier name; used in dialog title to show the current carrier
+       * name being setup
+       * @type {string}
+       */
+      nameOfCarrierPendingSetup: {
+        type: String,
+        notify: true,
+      },
+
       /**
        * @type {!cellularSetup.PSimUIState}
        * @private
@@ -112,25 +122,6 @@ cr.define('cellularSetup', function() {
         type: Object,
         value: null,
       },
-
-      /**
-       * Whether try again should be shown in the button bar.
-       * @private {boolean}
-       */
-      showTryAgainButton_: {type: Boolean, value: false},
-
-      /**
-       * Whether finish button should be shown in the button bar.
-       * @private {boolean}
-       */
-      showFinishButton_: {type: Boolean, value: false},
-
-      /**
-       * Whether cancel button should be shown in the button bar.
-       * @private {boolean}
-       */
-      showCancelButton_: {type: Boolean, value: false},
-
     },
 
     observers: [
@@ -302,6 +293,7 @@ cr.define('cellularSetup', function() {
         case PSimUIState.WAITING_FOR_USER_PAYMENT:
         case PSimUIState.ACTIVATION_SUCCESS:
           this.selectedPSimPageName_ = PSimPageName.PROVISIONING;
+          this.nameOfCarrierPendingSetup = 'TODO: network title';
           return;
         case PSimUIState.WAITING_FOR_ACTIVATION_TO_FINISH:
         case PSimUIState.TIMEOUT_FINISH_ACTIVATION:

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

@@ -70,10 +70,10 @@
         flex: 1;
         font-size: calc(15 / 13 * 100%);
         line-height: 1;
-        padding-bottom: 16px;
-        padding-inline-end: 20px;
-        padding-inline-start: 20px;
-        padding-top: 20px;
+        padding-bottom: var(--cr-dialog-title-slot-padding-bottom, 16px);
+        padding-inline-end:  var(--cr-dialog-title-slot-padding-end, 20px);
+        padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
+        padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
       }
 
       :host ::slotted([slot=button-container]) {