Merge pull request mozilla-b2g#7106 from sriramkrish85/roaming_changes

Bug 823450 - Data Connection warning dialog

apps/settings/index.html

@@ -709,6 +709,8 @@ <h2 data-l10n-id="dataConnectivity"> Data Connectivity </h2>
           <small id="dataConnection-desc"></small>
           <a data-l10n-id="dataConnection">Data Connection</a>
         </li>
+        <li id="dataConnection-expl" class="explanation" hidden>
+        </li>
         <li>
           <label>
             <input type="checkbox" data-type="switch" name="ril.data.roaming_enabled"/>

apps/settings/js/carrier.js

@@ -3,6 +3,13 @@
 
 'use strict';
 
+/**
+ * gDataConnect is defined here because the child window created for displaying
+ * data Connection warning requests needs to access its method via window.opener
+ */
+
+var gDataConnect = {};
+
 // handle carrier settings
 var Carrier = (function newCarrier(window, document, undefined) {
   var APN_FILE = '/shared/resources/apn.json';
@@ -176,30 +183,80 @@ var Carrier = (function newCarrier(window, document, undefined) {
   document.getElementById('preferredNetworkType').onchange =
     restartDataConnection;
 
-  // 'Data Roaming' message
+  // 'Data Roaming' message and data connection messaging
   var settings = Settings.mozSettings;
   if (settings) {
     var _ = window.navigator.mozL10n.get;
     var dataRoamingSetting = 'ril.data.roaming_enabled';
+    var dataConnectionSetting = 'ril.data.enabled';
+    var dataConnectionSettingWarning = 'ril.data.enabled.warning';
+
+    gDataConnect.setDataConnectionState = function(state) {
+      var cset = {};
+      cset[dataConnectionSetting] = !!state;
+      settings.createLock().set(cset);
+    };
+    gDataConnect.setDataConnectionWarningState = function(state) {
+      var cset = {};
+      cset[dataConnectionSettingWarning] = !!state;
+      settings.createLock().set(cset);
+    };
 
     var displayDataRoamingMessage = function(enabled) {
       var messageID = 'dataRoaming-' + (enabled ? 'enabled' : 'disabled');
       document.getElementById('dataRoaming-expl').textContent = _(messageID);
-    }
+    };
+
+    var displayDataConnectionMessage = function(enabled) {
+      var warningDisabled = true;
+      var req = settings.createLock().get(dataConnectionSettingWarning);
+      req.onsuccess = function() {
+        warningDisabled = req.result &&
+            req.result[dataConnectionSettingWarning];
+        if (enabled && warningDisabled) {
+          document.getElementById('dataConnection-expl').hidden = false;
+          document.getElementById('dataConnection-expl').textContent =
+              _('dataConnection-warning-message');
+        } else if (enabled) {
+          document.getElementById('dataConnection-expl').hidden = true;
+          var protocol = window.location.protocol;
+          var host = window.location.host;
+          window.open(protocol + '//' + host + '/ondataconnect.html',
+                      'dataconnect_screen', 'attention');
+        } else {
+          document.getElementById('dataConnection-expl').hidden = true;
+        }
+      };
+    };
 
     // register an observer to monitor setting changes
     settings.addObserver(dataRoamingSetting, function(event) {
       displayDataRoamingMessage(event.settingValue);
     });
 
+    settings.addObserver(dataConnectionSetting, function(event) {
+      displayDataConnectionMessage(event.settingValue);
+    });
+
     // get the initial setting value
     var req = settings.createLock().get(dataRoamingSetting);
     req.onsuccess = function roaming_getStatusSuccess() {
       var enabled = req.result && req.result[dataRoamingSetting];
       displayDataRoamingMessage(enabled);
     };
+
+    var dataConnectionSettingRequest =
+        settings.createLock().get(dataConnectionSetting);
+    dataConnectionSettingRequest.onsuccess =
+        function connection_getStatusSuccess() {
+      var enabled = dataConnectionSettingRequest.result &&
+          dataConnectionSettingRequest.result[dataConnectionSetting];
+      displayDataConnectionMessage(enabled);
+    };
+
   } else {
     document.getElementById('dataRoaming-expl').hidden = true;
+    document.getElementById('dataConnection-expl').hidden = true;
   }
 
   // network operator selection: auto/manual

apps/settings/js/ondataconnect.js

@@ -0,0 +1,36 @@
+/* -*- Mode: js; js-indent-level: 2; indent-tabs-mode: nil -*- */
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+'use strict';
+
+onLocalized(function() {
+  var turnOnButton = document.getElementById('button-ok');
+  var notNowButton = document.getElementById('button-canncel');
+  turnOnButton.addEventListener('click', function(e) {
+    var warningDisabled = true;
+    window.opener.gDataConnect.setDataConnectionWarningState(warningDisabled);
+    window.close();
+  });
+  notNowButton.addEventListener('click', function(e) {
+    var warningDisabled = false;
+    window.opener.gDataConnect.setDataConnectionWarningState(warningDisabled);
+    window.opener.gDataConnect.setDataConnectionState(false);
+    window.close();
+  });
+});
+
+
+/**
+ * Fire a callback when as soon as all l10n resources are ready and the UI has
+ * been translated.
+ * Note: this could be exposed as `navigator.mozL10n.onload'...
+ */
+
+function onLocalized(callback) {
+  if (navigator.mozL10n.readyState == 'complete' ||
+    navigator.mozL10n.readyState == 'interactive') {
+    callback();
+  } else {
+    window.addEventListener('localized', callback);
+  }
+}

apps/settings/locales/settings.en-US.properties

@@ -134,6 +134,10 @@ autoConfigure=Auto-configure
 httpProxyHost=HTTP proxy host
 httpProxyPort=HTTP proxy port
 custom=(custom settings)
+dataConnection-warning-head=Turn ON data connection?
+dataConnection-warning-message=Applications will automatically fetch data via data connection when required. Additional data charges may apply.
+dataConnection-warning-cancel=Not now
+dataConnection-warning-ok=Turn ON
 
 # Connectivity :: Bluetooth
 bluetooth = Bluetooth
@@ -528,4 +532,3 @@ user-guide=User guide
 # Device :: SIM toolkit
 stkAppsNotAvailable=SIM card applications not available.
 simToolkit=SIM toolkit
-

apps/settings/ondataconnect.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>Data Connection Warning</title>
+  <meta name="description" content="Prompts user to take action, first time data connection is enabled">
+
+  <!-- Common style -->
+  <link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+
+  <!-- Specific style -->
+  <link rel="stylesheet" type="text/css" href="style/ondataconnect.css"/>
+
+  <!-- Localization -->
+  <link rel="resource" type="application/l10n" href="locales/locales.ini"/>
+  <script type="application/javascript" src="shared/js/l10n.js"></script>
+
+  <!-- Specific code -->
+  <script type="application/javascript" defer src="js/ondataconnect.js"></script>
+
+</head>
+
+<body role="application">
+
+  <form role="dialog" data-type="confirm" id="pair-view">
+    <section>
+      <h1 class="heading" data-l10n-id="dataConnection-warning-head">Turn ON data connection?</h1>
+      <p class="message" data-l10n-id="dataConnection-warning-message">Applications will automatically fetch data via data connection when required. Additional data charges may apply.</p>
+    </section>
+    <menu>
+      <button id="button-canncel" data-l10n-id="dataConnection-warning-cancel">Not now</button>
+      <button id="button-ok" class="recommend" data-l10n-id="dataConnection-warning-ok">Turn ON</button>
+    </menu>
+  </form>
+
+</body>
+</html>

apps/settings/style/ondataconnect.css

@@ -0,0 +1,18 @@
+form[role="dialog"] h1.heading {
+  background: -moz-image-rect(url(images/icons_sprite.png), 0, 120, 30, 90) no-repeat scroll 0 50% transparent;
+  border: 0;
+  font-size: 1.1rem;
+  line-height: 30px;
+  font-weight: bold;
+  text-indent: 30px;
+  white-space: nowrap;
+}
+
+form[role="dialog"] p.message {
+  border: 5px solid #fff;
+  border-left: 0;
+  border-right: 0;
+  font-size: 1.1rem;
+  margin: 10px 0;
+  padding: 10px 0;
+}