arc: Use overlay to show links from ToS.

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 348 matching lines @@
 /**
  * Shows requested page and hide others. Show appWindow if it was hidden before.
  * 'none' hides all views.
  * @param {string} pageDivId id of divider of the page to show.
  */
 function showPage(pageDivId) {
   if (!appWindow) {
     return;
   }
 
-  hideLearnMoreOverlay();
+  hideOverlay();
   var doc = appWindow.contentWindow.document;
   var pages = doc.getElementsByClassName('section');
   var sendFeedbackElement = doc.getElementById('button-send-feedback');
   if (pageDivId == 'error-with-feedback') {
     // Only show feedback button if the pageDivId is 'error-with-feedback'.
     sendFeedbackElement.hidden = false;
     pageDivId = 'error';
   } else {
     sendFeedbackElement.hidden = true;
   }
@@ skipping 22 matching lines @@
 function setErrorMessage(error) {
   if (!appWindow) {
     return;
   }
   var doc = appWindow.contentWindow.document;
   var messageElement = doc.getElementById('error-message');
   messageElement.innerText = 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.

 }
 
 /**
- * Hides learn more overlay dialog.
+ * Opens overlay dialog and shows external URL there.
+ * @param {string} url Target URL to open in overlay dialog.
  */
-function hideLearnMoreOverlay() {
+function showURLOverlay(url) {
   var doc = appWindow.contentWindow.document;
-  var learnMoreContainer = doc.getElementById('learn-more-container');
-  learnMoreContainer.hidden = true;
+  var overlayWebview = doc.getElementById('overlay-url');
+  overlayWebview.src = url;
+  showOverlay('overlay-url');
 }
 
 /**
+ * Hides overlay dialog.
+ */
+function hideOverlay() {
+  var doc = appWindow.contentWindow.document;
+  var overlayContainer = doc.getElementById('overlay-container');
+  overlayContainer.hidden = true;
+}
+
+/**
  * Shows requested page.
  * @param {int} pageId Index of the page to show. Must be in the array range of
  * UI_PAGES.
  * @param {string} status associated with page string status, error message for
  *                        example.
  */
 function showPageWithStatus(pageId, status) {
   if (!appWindow) {
     return;
   }
@@ skipping 150 matching lines @@
     };
 
     termsView.request.onBeforeRequest.addListener(onTermsViewBeforeRequest,
                                                   requestFilter);
     termsView.request.onErrorOccurred.addListener(onTermsViewErrorOccurred,
                                                   requestFilter);
     termsView.addEventListener('contentload', onTermsViewContentLoad);
 
 
     // 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() {
       termsAccepted = true;
 
       sendNativeMessage('onAgreed', {
         isMetricsEnabled: metricsCheckbox.isChecked(),
         isBackupRestoreEnabled: backupRestoreCheckbox.isChecked(),
         isLocationServiceEnabled: locationServiceCheckbox.isChecked()
       });
@@ skipping 17 matching lines @@
 
     var onSendFeedback = function() {
       sendNativeMessage('onSendFeedbackClicked');
     };
 
     doc.getElementById('button-agree').addEventListener('click', onAgree);
     doc.getElementById('button-cancel').addEventListener('click', onCancel);
     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();
   };
 
   var onWindowCreated = function(createdWindow) {
     appWindow = createdWindow;
     appWindow.contentWindow.onload = onAppContentLoad;
     appWindow.onClosed.addListener(onWindowClosed);
 
     setWindowBounds();
@@ skipping 20 matching lines @@
       type: 'chrome',
       color: '#ffffff'
     },
     'innerBounds': {
       'width': INNER_WIDTH,
       'height': INNER_HEIGHT
     }
   };
   chrome.app.window.create('main.html', options, onWindowCreated);
 });