Adds a new checkbox for backup and restore in opt-in flow.

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 72 matching lines @@
  * @param {!Object} data Localized strings and relevant information.
  * @param {string} deviceId Current device id.
  */
 function initialize(data, deviceId) {
   currentDeviceId = deviceId;
   var doc = appWindow.contentWindow.document;
   var loadTimeData = appWindow.contentWindow.loadTimeData;
   loadTimeData.data = data;
   appWindow.contentWindow.i18nTemplate.process(doc, loadTimeData);
   var countryCode = data.countryCode.toLowerCase();
+  setBackupRestoreMode(data.textBackupRestore, true);

[khmel, 2016/06/28 23:09:54]

Remove true? Ideally we should register listener on this pref and update
checkbox. Please see UMA impl for example

[malaykeshav, 2016/06/29 01:29:06]

Done.
Not sure what you mean by UMA impl. I have used the metrics checkbox as a
reference.
https://cs.chromium.org/chromium/src/chrome/browser/resources/chromeos/arc_su...

[xiyuan, 2016/06/29 21:36:38]

khmel@ means is to observe the pref change:
https://cs.chromium.org/chromium/src/chrome/browser/chromeos/arc/arc_support_...

and update the UI accordingly.

 
   var scriptSetCountryCode = 'document.countryCode = \'' + countryCode + '\';';
   termsView.addContentScripts([
       { name: 'preProcess',
         matches: ['https://play.google.com/*'],
         js: { code: scriptSetCountryCode },
         run_at: 'document_start'
       },
       { name: 'postProcess',
         matches: ['https://play.google.com/*'],
         css: { files: ['playstore.css'] },
         js: { files: ['playstore.js'] },
         run_at: 'document_end'
       }]);
 
   // Applying localization changes page layout, update terms height.
   updateTermsHeight();
 }
 
 /**
+ * Handles the event when the user clicks on a learn more link. Opens the
+ * support page for the user.
+ * @param {Event} event
+ */
+var onLearnMore = function(event) {
+  var url = 'https://support.google.com/chromebook?p=playapps';

[khmel, 2016/06/28 23:09:54]

Do we want the same help for both?

[malaykeshav, 2016/06/29 01:29:06]

Yes. https://b.corp.google.com/u/0/issues/28704780#comment14

+  chrome.browser.openTab({'url': url}, function() {});
+  event.preventDefault();
+};
+
+/**
  * Sets current metrics mode.
  * @param {string} text Describes current metrics state.
  * @param {boolean} canEnable Defines if user is allowed to change this metrics
  *                            option.
  * @param {boolean} on Defines if metrics are active currently.
  */
 function setMetricsMode(text, canEnable, on) {
   var doc = appWindow.contentWindow.document;
   var enableMetrics = doc.getElementById('enable-metrics');
   enableMetrics.hidden = !canEnable;
   enableMetrics.checked = on;
 
   var onSettings = function(event) {
     chrome.browser.openTab({'url': 'chrome://settings'}, function() {});
     event.preventDefault();
   };
 
-  var onLearnMore = function(event) {
-    var url = 'https://support.google.com/chromebook?p=playapps';
-    chrome.browser.openTab({'url': url}, function() {});
-    event.preventDefault();
-  };
-
   doc.getElementById('text-metrics').innerHTML = text;
   doc.getElementById('settings-link').addEventListener('click', onSettings);
-  doc.getElementById('learn-more-link').addEventListener('click', onLearnMore);
+  doc.getElementById('learn-more-link-metrics').addEventListener('click',
+      onLearnMore);
 
   // Applying metrics mode changes page layout, update terms height.
   updateTermsHeight();
 }
 
 /**
+ * Sets current metrics mode.
+ * @param {string} text String used to display next to checkbox.
+ * @param {boolean=} isChecked Defines if backup and restore option is active

[khmel, 2016/06/28 23:09:54]

Not sure if '=' is needed.

[malaykeshav, 2016/06/29 01:29:06]

No longer required.

+ *     currently. By default the checkbox should be checked.
+ */
+function setBackupRestoreMode(text, isChecked) {
+  var doc = appWindow.contentWindow.document;
+  var enableBackupRestoreEl = doc.getElementById('enable-backup-restore');
+  enableBackupRestoreEl.checked = isChecked;
+  enableBackupRestoreEl.hidden = false;

[khmel, 2016/06/28 23:09:54]

You always set it visible. I think this is not required.

[malaykeshav, 2016/06/29 01:29:06]

Done

+
+  doc.getElementById('text-backup-restore').innerHTML = text;
+  doc.getElementById('learn-more-link-backup-restore').addEventListener('click',
+      onLearnMore);
+}
+
+/**
  * Updates terms view height manually because webview is not automatically
  * resized in case parent div element gets resized.
  */
 function updateTermsHeight() {
   var setTermsHeight = function() {
     var doc = appWindow.contentWindow.document;
     var termsContainer = doc.getElementById('terms-container');
     var style = window.getComputedStyle(termsContainer, null);
     var height = style.getPropertyValue('height');
     termsView.style.height = height;
@@ skipping 197 matching lines @@
     termsView.addEventListener('newwindow', function(event) {
       event.preventDefault();
       chrome.browser.openTab({'url': event.targetUrl}, function() {});
     });
 
     var onAgree = function() {
       var enableMetrics = doc.getElementById('enable-metrics');
       if (!enableMetrics.hidden && enableMetrics.checked) {
         sendNativeMessage('enableMetrics');
       }
+
+      var enableBackupRestore = doc.getElementById('enable-backup-restore');
+      if (enableBackupRestore.checked) {
+        sendNativeMessage('enableBackupRestore');
+      }
+
       sendNativeMessage('startLso');
     };
 
     var onCancel = function() {
       if (appWindow) {
         windowClosedInternally = false;
         appWindow.close();
         appWindow = null;
       }
     };
@@ skipping 42 matching lines @@
       type: 'chrome',
       color: '#ffffff'
     },
     'innerBounds': {
       'width': 960,
       'height': 688
     }
   };
   chrome.app.window.create('main.html', options, onWindowCreated);
 });