OOBE: Adapt ARC TOS for smaller screens

Bug: 1007902
TEST: locally with the first/secondary login vertical/horizontal
Change-Id: I12d82a6c46e391fe9fe9a2120d9680f281b59850
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1848700
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#705898}

chrome/browser/resources/chromeos/login/arc_terms_of_service.css

@@ -78,13 +78,8 @@ p {
   font-weight: 600;
 }
 
-#arc-tos-dialog {
-  height: 640px;
-}
-
 #arc-tos-container {
   box-shadow: 0 -2px 2px -2px rgba(0, 0, 0, 0.14);
-  padding: -4px 0 0 0;
 }
 
 #arc-tos-container::-webkit-scrollbar {
@@ -93,19 +88,18 @@ p {
 
 #arc-tos-view {
   display: block;
-  height: 10px;
+  height: 100%;
   margin: auto;
+  min-height: 40px;
   padding: 0;
-  width: 638px;
+  width: 100%;
 }
 
 #arc-tos-view-container {
   border: 1px solid #d9d9d9;
   box-sizing: border-box;
-  flex: auto;
   margin: 0;
   padding: 0;
-  width: 100%;
 }
 
 #arc-tos-back-button,

chrome/browser/resources/chromeos/login/arc_terms_of_service.html

@@ -18,7 +18,7 @@
       <div slot="subtitle" i18n-content="arcTermsOfServiceScreenDescription">
       </div>
       <div id="arc-tos-container" slot="footer" class="flex layout vertical">
-        <div id="arc-tos-view-container" class="arc-tos-content">
+        <div id="arc-tos-view-container" class="arc-tos-content flex">
           <webview id="arc-tos-view"></webview>
         </div>
         <div id="arc-policy-link" class="arc-tos-content">

chrome/browser/resources/chromeos/login/oobe_flex_layout.css

@@ -53,6 +53,10 @@
   align-items: flex-end;
 }
 
+.layout.stretch {
+  align-items: stretch;
+}
+
 /* alignment in main axis */
 
 .layout.start-justified {

chrome/browser/resources/chromeos/login/screen_arc_terms_of_service.css

@@ -2,13 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#arc-tos {
-  /* To prevent appearing visual gap at the bottom for the some languages. */
-  height: 640px;
-  min-height: unset;
-  padding: unset;
-}
-
 #arc-tos .popup-overlay {
   background: rgba(0, 0, 0, .5);
 }
@@ -33,7 +26,7 @@
   border: 1px solid #d9d9d9;
   display: block;
   height: 300px;
-  width: 622px;
+  width: 100%;
 }
 
 #arc-tos-overlay-webview-container.overlay-loading > webview,

chrome/browser/resources/chromeos/login/screen_arc_terms_of_service.html

 <link rel="stylesheet" href="chrome://resources/css/overlay.css">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="stylesheet" href="oobe_flex_layout.css">
 
 <div class="step right hidden arc-tos-loading" id="arc-tos"
     role="group" hidden>
@@ -7,9 +8,10 @@
 
   <div id="arc-tos-overlay" class="popup-overlay" hidden>
     <a href="#" id="arc-tos-overlay-start" class="arc-tos-invisible-link"></a>
-    <div id="arc-tos-overlay-container" class="oobe-popup not-resizable">
+    <div id="arc-tos-overlay-container" class="oobe-popup not-resizable flex
+        layout vertical stretch">
       <div id="arc-tos-overlay-close-top"
-          class="arc-tos-overlay-close-top arc-overlay-close-button">
+          class="arc-tos-overlay-close-top arc-overlay-close-button self-end">
       </div>
       <div id="arc-tos-overlay-webview-container">
         <webview id="arc-tos-overlay-webview"></webview>

chrome/browser/resources/chromeos/login/screen_arc_terms_of_service.js

@@ -156,9 +156,6 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       metrics.querySelector('#learn-more-link-metrics').onclick = function() {
         self.showLearnMoreOverlay(leanMoreStatisticsText);
       };
-      // For device owner set up, this may come after the page is loaded.
-      // Recaculate the ToS webview height.
-      this.updateTermViewHight_();
     },
 
     /**
@@ -296,50 +293,6 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       this.getElement_('arc-tos-view-container').style.visibility = visibility;
     },
 
-    /**
-     * Buttons in Oobe wizard's button strip.
-     * @type {array} Array of Buttons.
-     */
-    get buttons() {
-      var buttons = [];
-
-      var skipButton = this.ownerDocument.createElement('button');
-      skipButton.id = 'arc-tos-skip-button';
-      skipButton.disabled = this.classList.contains('arc-tos-loading');
-      skipButton.classList.add('preserve-disabled-state');
-      skipButton.textContent =
-          loadTimeData.getString('arcTermsOfServiceSkipButton');
-      skipButton.addEventListener('click', this.onSkip.bind(this));
-      buttons.push(skipButton);
-
-      var retryButton = this.ownerDocument.createElement('button');
-      retryButton.id = 'arc-tos-retry-button';
-      retryButton.textContent =
-          loadTimeData.getString('arcTermsOfServiceRetryButton');
-      retryButton.addEventListener('click', this.reloadPlayStoreToS.bind(this));
-      buttons.push(retryButton);
-
-      var nextButton = this.ownerDocument.createElement('button');
-      nextButton.id = 'arc-tos-next-button';
-      nextButton.disabled = this.classList.contains('arc-tos-loading');
-      nextButton.classList.add('preserve-disabled-state');
-      nextButton.textContent =
-          loadTimeData.getString('arcTermsOfServiceNextButton');
-      nextButton.addEventListener('click', this.onNext.bind(this));
-      buttons.push(nextButton);
-
-      var acceptButton = this.ownerDocument.createElement('button');
-      acceptButton.id = 'arc-tos-accept-button';
-      acceptButton.disabled = this.classList.contains('arc-tos-loading');
-      acceptButton.classList.add('preserve-disabled-state');
-      acceptButton.textContent =
-          loadTimeData.getString('arcTermsOfServiceAcceptButton');
-      acceptButton.addEventListener('click', this.onAccept.bind(this));
-      buttons.push(acceptButton);
-
-      return buttons;
-    },
-
     /**
      * Handles Next button click.
      */
@@ -351,7 +304,6 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       if (!isDemoModeSetup) {
         this.getElement_('arc-review-settings').hidden = false;
       }
-      this.getElement_('arc-tos-container').style.overflowY = 'auto';
       this.getElement_('arc-tos-container').scrollTop =
           this.getElement_('arc-tos-container').scrollHeight;
       this.getElement_('arc-tos-next-button').hidden = true;
@@ -578,31 +530,9 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       this.getElement_('arc-pai-service').hidden = true;
       this.getElement_('arc-google-service-confirmation').hidden = true;
       this.getElement_('arc-review-settings').hidden = true;
-      this.getElement_('arc-tos-container').style.overflow = 'hidden';
       this.getElement_('arc-tos-accept-button').hidden = true;
       this.getElement_('arc-tos-next-button').hidden = false;
       this.getElement_('arc-tos-next-button').focus();
-
-      this.updateTermViewHight_();
-    },
-
-    /**
-     * Updates ToS webview height.
-     *
-     * @private
-     */
-    updateTermViewHight_() {
-      var termsView = this.getElement_('arc-tos-view');
-      var termsViewContainer = this.getElement_('arc-tos-view-container');
-      var setTermsHeight = function() {
-        // Reset terms-view height in order to stabilize style computation.
-        // For some reason, child webview affects final result.
-        termsView.style.height = '0px';
-        var style = window.getComputedStyle(termsViewContainer, null);
-        var height = style.getPropertyValue('height');
-        termsView.style.height = height;
-      };
-      setTimeout(setTermsHeight, 0);
     },
 
     /**
@@ -643,10 +573,6 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       this.setLearnMoreHandlers_();
 
       this.hideOverlay();
-      // ToS content may be loaded before the page is shown. In that case,
-      // height of ToS webview is not correctly calculated. Recalculate the
-      // height here.
-      this.updateTermViewHight_();
       this.focusButton_();
 
       $('arc-tos-root').onBeforeShow();
@@ -682,7 +608,6 @@ login.createScreen('ArcTermsOfServiceScreen', 'arc-tos', function() {
       this.getElement_('arc-pai-service').hidden = true;
       this.getElement_('arc-google-service-confirmation').hidden = true;
       this.getElement_('arc-review-settings').hidden = true;
-      this.getElement_('arc-tos-container').style.overflowY = 'auto';
       this.getElement_('arc-tos-container').scrollTop =
           this.getElement_('arc-tos-container').scrollHeight;
       this.getElement_('arc-tos-next-button').hidden = false;