arc: Use overlay to show links from ToS.

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 9b3e7887bbd2695cc6a2f7e252e1a31c710cce36..ce3c5eb2fe12a67e13669bd9734e1b93696e1850 100644
--- a/chrome/browser/resources/chromeos/arc_support/background.js
+++ b/chrome/browser/resources/chromeos/arc_support/background.js
@@ -366,7 +366,7 @@ function showPage(pageDivId) {
     return;
   }
 
-  hideLearnMoreOverlay();
+  hideOverlay();
   var doc = appWindow.contentWindow.document;
   var pages = doc.getElementsByClassName('section');
   var sendFeedbackElement = doc.getElementById('button-send-feedback');
@@ -409,24 +409,47 @@ function setErrorMessage(error) {
 }
 
 /**
+ * Shows overlay dialog and required content.
+ * @param {string} overlayClass Defines which content to show, 'overlay-url' for
+ *                              webview based content and 'overlay-text' for
+ *                              simple text view.
+ */
+function showOverlay(overlayClass) {
+  var doc = appWindow.contentWindow.document;
+  var overlayContainer = doc.getElementById('overlay-container');
+  overlayContainer.className = 'overlay ' + overlayClass;
+  overlayContainer.hidden = false;
+}
+
+/**
  * Sets learn more content text and shows it as overlay dialog.
  * @param {string} content HTML formatted text to show.
  */
 function showLearnMoreOverlay(content) {
   var doc = appWindow.contentWindow.document;
-  var learnMoreContainer = doc.getElementById('learn-more-container');
   var learnMoreContent = doc.getElementById('learn-more-content');
   learnMoreContent.innerHTML = content;
-  learnMoreContainer.hidden = false;
+  showOverlay('overlay-text');

[xiyuan, 2016/10/18 21:26:07]

Do we need to worry about the text content being shown when the overlay is used
again for an url? That is, what if user triggers showLearnMoreOverlay then
showURLOverlay, would the |learnMoreContent| be shown together with the webview?

We probably should either add css rules to make sure that only one of the <span>
and <webview> is visible or explicitly show/hide them.

[khmel, 2016/10/18 22:18:12]

I added css rule as:

.overlay-text webview {
  display: none;
}

.overlay-url span {
  display: none;
}

I also re-tested this by clicking text and web links in random order and it
seems everything works as expected.

[xiyuan, 2016/10/18 22:21:50]

You are right. Mis-read that.

+}
+
+/**
+ * Opens overlay dialog and shows external URL there.
+ * @param {string} url Target URL to open in overlay dialog.
+ */
+function showURLOverlay(url) {
+  var doc = appWindow.contentWindow.document;
+  var overlayWebview = doc.getElementById('overlay-url');
+  overlayWebview.src = url;
+  showOverlay('overlay-url');
 }
 
 /**
- * Hides learn more overlay dialog.
+ * Hides overlay dialog.
  */
-function hideLearnMoreOverlay() {
+function hideOverlay() {
   var doc = appWindow.contentWindow.document;
-  var learnMoreContainer = doc.getElementById('learn-more-container');
-  learnMoreContainer.hidden = true;
+  var overlayContainer = doc.getElementById('overlay-container');
+  overlayContainer.hidden = true;
 }
 
 /**
@@ -600,10 +623,10 @@ chrome.app.runtime.onLaunched.addListener(function() {
 
 
     // webview is not allowed to open links in the new window. Hook these events
-    // and open links in context of main page.
+    // and open links in overlay dialog.
     termsView.addEventListener('newwindow', function(event) {
       event.preventDefault();
-      chrome.browser.openTab({'url': event.targetUrl}, function() {});
+      showURLOverlay(event.targetUrl);
     });
 
     var onAgree = function() {
@@ -641,13 +664,12 @@ chrome.app.runtime.onLaunched.addListener(function() {
     doc.getElementById('button-retry').addEventListener('click', onRetry);
     doc.getElementById('button-send-feedback')
         .addEventListener('click', onSendFeedback);
-    doc.getElementById('learn-more-close').addEventListener(
-        'click', hideLearnMoreOverlay);
+    doc.getElementById('overlay-close').addEventListener('click', hideOverlay);
 
-    var overlay = doc.getElementById('learn-more-container');
+    var overlay = doc.getElementById('overlay-container');
     appWindow.contentWindow.cr.ui.overlay.setupOverlay(overlay);
     appWindow.contentWindow.cr.ui.overlay.globalInitialization();
-    overlay.addEventListener('cancelOverlay', hideLearnMoreOverlay);
+    overlay.addEventListener('cancelOverlay', hideOverlay);
 
     connectPort();
   };