arc: Implement scrollable OptIn window content.

chrome/browser/resources/chromeos/arc_support/background.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * UI Pages. Note the order must be in sync with the ArcAuthService::UIPage
  * enum.
  * @type {Array<string>}
  */
 var UI_PAGES = ['none',
@@ skipping 48 matching lines @@
  */
 var currentDeviceId = null;
 
 /**
  * Indicates that terms were accepted by user.
  * @type {boolean}
  */
 var termsAccepted = false;
 
 /**
+ * Host window inner default width.
+ * @type {int}
+ */
+var innerWidth = 960;

[xiyuan, 2016/07/12 21:50:21]

Looks like |innerWidth| and |innerHeight| are constants. We should make them
looks like a JS const,

i.e.

/**
 * ...
 * @const {number}
 */
var INNER_WIDTH = 960;

[khmel, 2016/07/12 22:05:10]

Good point, thanks.

+
+/**
+ * Host window inner default height.
+ * @type {int}
+ */
+var innerHeight = 688;
+
+
+/**
  * Closes current window in response to request from native code. This does not
  * issue 'cancelAuthCode' message to native code.
  */
 function closeWindowInternally() {
   windowClosedInternally = true;
   appWindow.close();
   appWindow = null;
 }
 
 /**
@@ skipping 121 matching lines @@
   }
 
   if (message.action == 'initialize') {
     initialize(message.data, message.deviceId);
   } else if (message.action == 'setMetricsMode') {
     setMetricsMode(message.text, message.canEnable, message.on);
   } else if (message.action == 'closeUI') {
     closeWindowInternally();
   } else if (message.action == 'showPage') {
     showPageWithStatus(message.page, message.status);
+  } else if (message.action == 'setWindowBounds') {
+    setWindowBounds();
   }
 }
 
 /**
  * Connects to ArcSupportHost.
  */
 function connectPort() {
   var hostName = 'com.google.arc_support';
   port = chrome.runtime.connectNative(hostName);
   port.onMessage.addListener(onNativeMessage);
@@ skipping 28 matching lines @@
     pages[i].hidden = pages[i].id != pageDivId;
   }
 
   if (pageDivId == 'lso-loading') {
     lsoView.src = 'https://accounts.google.com/o/oauth2/v2/auth?client_id=' +
                   '1070009224336-sdh77n7uot3oc99ais00jmuft6sk2fg9.apps.' +
                   'googleusercontent.com&response_type=code&redirect_uri=oob&' +
                   'scope=https://www.google.com/accounts/OAuthLogin&' +
                   'device_type=arc_plus_plus&device_id=' + currentDeviceId +
                   '&hl=' + navigator.language;
+    console.log(lsoView.src);

[xiyuan, 2016/07/12 21:50:21]

Can we remove this?

[khmel, 2016/07/12 22:05:10]

Yep, forgot to upload this.
DONE

   }
   appWindow.show();
 }
 
 /**
  * Sets error message.
  * @param {string} error message.
  */
 function setErrorMessage(error) {
   if (!appWindow) {
@@ skipping 32 matching lines @@
   showPage(UI_PAGES[pageId]);
 }
 
 /**
  * Loads initial Play Store terms.
  */
 function loadInitialTerms() {
   termsView.src = 'https://play.google.com/about/play-terms.html';
 }
 
+function setWindowBounds() {
+  if (!appWindow) {
+    return;
+  }
+
+  var decorationWidht = appWindow.outerBounds.width -

[xiyuan, 2016/07/12 21:50:21]

decorationWidht -> decorationWidth

[khmel, 2016/07/12 22:05:10]

Done.

+      appWindow.innerBounds.width;
+  var decorationHeight = appWindow.outerBounds.height -
+      appWindow.innerBounds.height;
+
+  var outerWidth = innerWidth + decorationWidht;
+  var outerHeight = innerHeight + decorationHeight;
+  if (outerWidth > screen.availWidth) {
+    outerWidth = screen.availWidth;
+  }
+  if (outerHeight > screen.availHeight) {
+    outerHeight = screen.availHeight;
+  }
+  if (appWindow.outerBounds.width == outerWidth &&
+      appWindow.outerBounds.height == outerHeight) {
+    return;
+  }
+
+  appWindow.outerBounds.width = outerWidth;
+  appWindow.outerBounds.height = outerHeight;
+  appWindow.outerBounds.left = Math.ceil((screen.availWidth - outerWidth) / 2);
+  appWindow.outerBounds.top =
+    Math.ceil((screen.availHeight - outerHeight) / 2);
+}
+
 chrome.app.runtime.onLaunched.addListener(function() {
   var onAppContentLoad = function() {
     var doc = appWindow.contentWindow.document;
     lsoView = doc.getElementById('arc-support');
+    lsoView.addContentScripts([
+        { name: 'postProcess',
+          matches: ['https://accounts.google.com/*'],
+          css: { files: ['lso.css'] },

[khmel, 2016/07/12 21:15:37]

To make scroll bars in one style.

[xiyuan, 2016/07/12 21:50:21]

Acknowledged.

+          run_at: 'document_end'
+        }]);
 
     var isApprovalResponse = function(url) {
       var resultUrlPrefix = 'https://accounts.google.com/o/oauth2/approval?';
       return url.substring(0, resultUrlPrefix.length) == resultUrlPrefix;
     };
 
     var lsoError = false;
     var onLsoViewRequestResponseStarted = function(details) {
       if (isApprovalResponse(details.url)) {
         showPage('arc-loading');
       }
       lsoError = false;
     };
 
     var onLsoViewErrorOccurred = function(details) {
       setErrorMessage(appWindow.contentWindow.loadTimeData.getString(
           'serverError'));
       showPage('error');
       lsoError = true;
     };
 
     var onLsoViewContentLoad = function() {
       if (lsoError) {
         return;
       }
 
       if (!isApprovalResponse(lsoView.src)) {
         // Show LSO page when its content is ready.
         showPage('lso');
+        // We have fixed width for LSO page in css file in order to prevent
+        // unwanted webview resize animation when it is shown first time. Now
+        // it safe to make it up to window width.
+        lsoView.style.width = '100%';

[khmel, 2016/07/12 21:15:37]

Again workaround for webview 'animation'. Fixed width does not work well when
screen size goes below default layout.

[xiyuan, 2016/07/12 21:50:21]

Acknowledged.

         return;
       }
 
       lsoView.executeScript({code: 'document.title;'}, function(results) {
         var authCodePrefix = 'Success code=';
         if (results && results.length == 1 && typeof results[0] == 'string' &&
             results[0].substring(0, authCodePrefix.length) == authCodePrefix) {
           var authCode = results[0].substring(authCodePrefix.length);
           sendNativeMessage('setAuthCode', {code: authCode});
         } else {
@@ skipping 97 matching lines @@
     doc.getElementById('button-send-feedback')
         .addEventListener('click', onSendFeedback);
 
     connectPort();
   };
 
   var onWindowCreated = function(createdWindow) {
     appWindow = createdWindow;
     appWindow.contentWindow.onload = onAppContentLoad;
     createdWindow.onClosed.addListener(onWindowClosed);
+
+    setWindowBounds();

[khmel, 2016/07/12 21:15:37]

Chrome keeps window previous position. We need reset bounds if current screen
resolutions allows us to do.

[xiyuan, 2016/07/12 21:50:21]

Acknowledged.

   };
 
   var onWindowClosed = function() {
     if (termsReloadTimeout) {
       clearTimeout(termsReloadTimeout);
       termsReloadTimeout = null;
     }
 
     if (windowClosedInternally) {
       return;
     }
     sendNativeMessage('cancelAuthCode');
   };
 
   windowClosedInternally = false;
+
   var options = {
     'id': 'play_store_wnd',
     'resizable': false,
     'hidden': true,
     'frame': {
       type: 'chrome',
       color: '#ffffff'
     },
     'innerBounds': {
-      'width': 960,
-      'height': 688
+      'width': innerWidth,
+      'height': innerHeight
     }
   };
   chrome.app.window.create('main.html', options, onWindowCreated);
 });