Merge pull request #32207 from albertopq/1205042-browser-tracking

Bug 1205042 - Tracking Protection FTE Popup r=mhenretty

apps/system/index.html

@@ -39,12 +39,14 @@
     <link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
     <link rel="stylesheet" type="text/css" href="style/fake-notification.css"/>
     <link rel="stylesheet" type="text/css" href="style/view_source.css"/>
+    <link rel="stylesheet" type="text/css" href="style/tracking_notice/tracking_notice.css"/>
 
     <script defer src="shared/elements/config.js"></script>
     <script defer src="shared/js/component_utils.js"></script>
     <!-- <script defer src="/shared/js/homescreens/confirm_dialog_helper.js"></script> -->
     <!-- <script defer src="/shared/elements/gaia_confirm/script.js"></script> -->
     <!-- <script defer src="/shared/elements/gaia_menu/script.js"></script> -->
+    <!-- <script defer src="/shared/elements/gaia_switch/script.js"></script> -->
     <script defer src="shared/elements/gaia_buttons/script.js"></script>
     <script defer src="shared/elements/gaia_checkbox/script.js"></script>
     <script defer src="shared/elements/gaia_progress/script.js"></script>
@@ -344,6 +346,10 @@
       <!-- XXX: Before we can make LockScreen as a iframe or app, we need this to split LockScreen and System part in this way (Bug 1057198) -->
       <div id="lockscreen-frame-placeholder"></div>
 
+      <!-- This overlay is used for dialogs that need to be in top of the statusbar, but below
+      other divs like the lockscreen or sleep-menu -->
+      <div id="fullscreen-dialog-overlay" data-z-index-level="fullscreen-dialog-overlay"></div>
+
       <div id="dialog-overlay" data-z-index-level="dialog-overlay">
         <!-- Unlock SIM Pin dialog -->
         <!-- Add the dialog via SystemDialog dynamically. -->

apps/system/js/system_dialog_manager.js

@@ -1,9 +1,10 @@
 /* -*- Mode: js; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
 /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
-/* global Service */
+/* global Service, TrackingNotice, LazyLoader */
 'use strict';
 
 (function(exports) {
+  const TRACKING_NOTICE_KEY = 'privacy.trackingprotection.shown';
   var DEBUG = false;
 
   /**
@@ -229,6 +230,7 @@
       self.addEventListener(type, this);
     }).bind(this));
     Service.request('registerHierarchy', this);
+    this._initTrackingNotice();
   };
 
   /**
@@ -318,6 +320,26 @@
     }
   };
 
+  SystemDialogManager.prototype._initTrackingNotice = function() {
+    var req = navigator.mozSettings.createLock().get(TRACKING_NOTICE_KEY);
+    req.onsuccess = () => {
+      var alreadyShown = req.result[TRACKING_NOTICE_KEY];
+      if (!alreadyShown) {
+        this._includeTrackingNotice();
+      }
+    };
+
+    req.onerror = () => {
+      this._includeTrackingNotice();
+    };
+  };
+
+  SystemDialogManager.prototype._includeTrackingNotice = function() {
+    LazyLoader.load('/js/tracking_notice.js').then(()  => {
+      this.trackingNotice = new TrackingNotice(SystemDialogManager);
+    });
+  };
+
   exports.SystemDialogManager = SystemDialogManager;
 
 }(window));

apps/system/js/tracking_notice.js

@@ -0,0 +1,152 @@
+/* global SystemDialog, LazyLoader, Service */
+'use strict';
+
+(function(exports) {
+
+  const LEARN_MORE_URL =
+    'https://support.mozilla.org/products/firefox-os/privacy-and-security';
+
+  /**
+   * @class TrackingNotice
+   * @param {options} object for attributes `onShow`, `onHide` callback.
+   * @extends SystemDialog
+   */
+  var TrackingNotice = function(controller) {
+    this.instanceID = 'tracking-notice';
+    this.controller = controller || {};
+    this.options = {};
+    this._settings = navigator.mozSettings;
+    this.renderDialog();
+    this.publish('created');
+  };
+
+  TrackingNotice.prototype = Object.create(SystemDialog.prototype);
+
+  TrackingNotice.prototype.customID = 'tracking-notice';
+
+  TrackingNotice.prototype.DEBUG = false;
+
+  TrackingNotice.prototype.name = 'TrackingNotice';
+
+  TrackingNotice.prototype.containerElement =
+    document.getElementById('fullscreen-dialog-overlay');
+
+  TrackingNotice.prototype.renderDialog = function() {
+    LazyLoader.load('shared/elements/gaia_switch/script.js', () => {
+      this.render();
+    });
+  };
+
+  TrackingNotice.prototype.view = function view() {
+    return `<section id="tracking-notice" data-z-index-level="system-dialog"
+              class='hidden dialog'>
+              <div class="panel">
+                <header><h1 data-l10n-id="tracking-notice-header"></h1></header>
+                <p class="copy">
+                  <span id="tracking-notice-copy"
+                  data-l10n-id="tracking-notice-description"></span>
+                  <a id="tracking-notice-learn-more"
+                    data-l10n-id="tracking-notice-learn-more">
+                  </a>
+                </p>
+                <div class="setting">
+                  <label data-l10n-id="tracking-protection"
+                  for="tracking-protection-toggle"></label>
+                  <gaia-switch id="tracking-protection-toggle">
+                  </gaia-switch>
+                  <p data-l10n-id="tracking-protection-setting-description"
+                  class="subtitle"></p>
+                </div>
+              </div>
+              <div class="confirm" id="tracking-notice-confirm">
+                <p class="copy" data-l10n-id="tracking-notice-confirm"></p>
+              </div>
+            </section>`;
+  };
+
+
+  TrackingNotice.prototype._registerEvents = function() {
+    var self = this;
+    self.confirm.addEventListener('click', function onConfirm() {
+      self.confirm.removeEventListener('click', onConfirm);
+      self.confirmNotice();
+    });
+    window.addEventListener('appopened', this);
+  };
+
+  TrackingNotice.prototype._fetchElements = function spl_initElements() {
+    this.element = document.querySelector('#' + this.instanceID);
+    this.confirm = this.element.querySelector('#tracking-notice-confirm');
+    this.setting = this.element.querySelector('gaia-switch');
+    this.learnMore = this.element.querySelector('#tracking-notice-learn-more');
+
+    this.learnMore.addEventListener('click', () => {
+      var self = this;
+      var activeApp = Service.query('AppWindowManager.getActiveWindow');
+      var element = activeApp.element;
+
+      this.hide();
+      activeApp.navigate(LEARN_MORE_URL);
+
+      // When the user clicks 'Learn More', go to that URL and display
+      // back the dialog when navigates to any other page.
+      element.addEventListener('_locationchange', function onLoadLearnMore() {
+        element.removeEventListener('_locationchange', onLoadLearnMore);
+        element.addEventListener('_locationchange', self);
+      });
+    });
+  };
+
+  TrackingNotice.prototype.show = function(data) {
+    this.element.classList.remove('hidden');
+    this.publish('show');
+  };
+
+  TrackingNotice.prototype.handleEvent = function(evt) {
+    switch (evt.type) {
+      case 'appopened':
+      case '_locationchange':
+        this.showIfNeeded(evt);
+      break;
+    }
+  };
+
+  TrackingNotice.prototype.showIfNeeded = function(evt) {
+    var app = evt.detail;
+    if (app.isSearch() || app.isBrowser()) {
+      this.show();
+    }
+    app.element.removeEventListener('_locationchange', this);
+  };
+
+  TrackingNotice.prototype.resize = function resize() {
+    var width = Service.query('LayoutManager.width');
+    this.containerElement.style.width = width + 'px';
+  };
+
+  TrackingNotice.prototype.confirmNotice = function() {
+    this._settings.createLock().set({
+      'privacy.trackingprotection.enabled': this.setting.checked,
+      'privacy.trackingprotection.shown': true
+    });
+    window.removeEventListener('appopened', this);
+    window.removeEventListener('_locationchange', this);
+    this.destroy();
+  };
+
+  TrackingNotice.prototype.hide = function() {
+    this.element.classList.add('hidden');
+    this.publish('hide');
+  };
+
+  TrackingNotice.prototype.destroy = function() {
+    if (this.element) {
+      this.hide();
+      this.containerElement.removeChild(this.element);
+    }
+    this.publish('destroyed');
+  };
+
+  exports.TrackingNotice = TrackingNotice;
+}(window));
+

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

@@ -609,6 +609,24 @@ copy-link=Copy Link
 
 okCharsLeft = OK ({{n}})
 
+#Tracking Protection Notice
+
+# LOCALIZATION NOTE (tracking-notice-header): This string is used as
+# title of the dialog that explains this new feature to new users.
+tracking-notice-header=New! Tracking Protection
+# LOCALIZATION NOTE (tracking-notice-description): This string is used as
+# introduction to the new feature. Link to the feature description in mdn.
+tracking-notice-description=This new feature protects your browsing activity against potential trackers.
+tracking-notice-learn-more=Learn More
+# LOCALIZATION NOTE (tracking-protection): Name of the new feature
+tracking-protection=Tracking Protection
+# LOCALIZATION NOTE (tracking-protection-setting-description): Shown below the
+# toggle that enables/disables the feature
+tracking-protection-setting-description=Enable this feature for all new windows.
+# LOCALIZATION NOTE (tracking-protection-confirm): Button that confirms that
+# the user understood the new feature
+tracking-notice-confirm=Got It!
+
 # Pinning the Web
 
 # LOCALIZATION NOTE (pinning-pin): This string is used as

apps/system/style/system/system.css

@@ -224,7 +224,8 @@ textarea,
 
 
 
-#system-overlay {
+#system-overlay,
+#fullscreen-dialog-overlay {
   width: 100%;
   height: 100%;
   position: absolute;

apps/system/style/themes/default/core.css

@@ -24,7 +24,8 @@
 #screen.fullscreen-layout-app.software-button-enabled [role="dialog"].generic-dialog,
 #screen.software-button-enabled > #dialog-screen,
 #screen.software-button-enabled > #downloadConfirmUI,
-#screen.software-button-enabled > #dialog-overlay {
+#screen.software-button-enabled > #dialog-overlay,
+#screen.software-button-enabled > #fullscreen-overlay {
   bottom: var(--software-home-button-height);
 }
 
@@ -39,7 +40,8 @@
   #screen.fullscreen-layout-app.software-button-enabled [role="dialog"].generic-dialog,
   #screen.software-button-enabled > #dialog-screen,
   #screen.software-button-enabled > #downloadConfirmUI,
-  #screen.software-button-enabled > #dialog-overlay {
+  #screen.software-button-enabled > #dialog-overlay,
+  #screen.software-button-enabled > #fullscreen-overlay {
     bottom: 0;
   }
 }