arc: Implement scrollable OptIn window content.

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

Index: chrome/browser/resources/chromeos/arc_support/background.js
diff --git a/chrome/browser/resources/chromeos/arc_support/background.js b/chrome/browser/resources/chromeos/arc_support/background.js
index 41a744e6ce24073c875994d60e9492e573faf54e..7fa29f27226d2baf7d96cd13cff1a5e7bc1efe93 100644
--- a/chrome/browser/resources/chromeos/arc_support/background.js
+++ b/chrome/browser/resources/chromeos/arc_support/background.js
@@ -66,6 +66,19 @@ var currentDeviceId = null;
 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.
  */
@@ -207,6 +220,8 @@ function onNativeMessage(message) {
     closeWindowInternally();
   } else if (message.action == 'showPage') {
     showPageWithStatus(message.page, message.status);
+  } else if (message.action == 'setWindowBounds') {
+    setWindowBounds();
   }
 }
 
@@ -255,6 +270,7 @@ function showPage(pageDivId) {
                   '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();
 }
@@ -307,10 +323,46 @@ 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?';
@@ -340,6 +392,10 @@ chrome.app.runtime.onLaunched.addListener(function() {
       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;
       }
 
@@ -457,6 +513,8 @@ chrome.app.runtime.onLaunched.addListener(function() {
     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() {
@@ -472,6 +530,7 @@ chrome.app.runtime.onLaunched.addListener(function() {
   };
 
   windowClosedInternally = false;
+
   var options = {
     'id': 'play_store_wnd',
     'resizable': false,
@@ -481,8 +540,8 @@ chrome.app.runtime.onLaunched.addListener(function() {
       color: '#ffffff'
     },
     'innerBounds': {
-      'width': 960,
-      'height': 688
+      'width': innerWidth,
+      'height': innerHeight
     }
   };
   chrome.app.window.create('main.html', options, onWindowCreated);