lightbeam/data/dialog.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* jshint moz: true */
/* Dialog / Popup ===================================== */

// dialog names (used as dialog identifiers)
const dialogNames = {
  "promptToShare": "promptToShareData",
  "resetData": "resetData",
  "blockSites": "blockSites",
  "hideSites": "hideSites",
  "startUploadData": "startUploadData",
  "stopUploadData": "stopUploadData",
  "privateBrowsing": "privateBrowsing",
  "saveOldData": "saveOldData"
};

const allDialogs = {
  'Reset Data Confirmation': confirmResetDataDialog,
  'Block Sites Confirmation': confirmBlockSitesDialog,
  'Hide Sites Confirmation': confirmHideSitesDialog,
  'Upload Data Confirmation': askForDataSharingConfirmationDialog,
  'Stop Uploading Data Confirmation': stopSharingDialog,
  'Private Browsing Notification': informUserOfUnsafeWindowsDialog,
};

// options: name, title, message, type, dnsPrompt(Do Not Show), imageUrl
function dialog(options, callback) {
  createDialog(options, callback);
}

function createDialog(options, callback) {
  var modal = picoModal({
    content: createDialogContent(options),
    closeButton: false,
    overlayClose: false,
    overlayStyles: {
      backgroundColor: "#000",
      opacity: 0.75
    }
  });

  addDialogEventHandlers(modal, options, function (userResponse) {
    callback(userResponse);
  });
}

function createDialogContent(options) {
  return dialogTitleBar(options) +
    dialogMessage(options) +
    dialogControls(options);
}

function dialogTitleBar(options) {
  return "<div class='dialog-title'>" + (options.title || "&nbsp;") + "</div>";
}

function dialogMessage(options) {
  return "<div class='dialog-content'>" +
    (options.imageUrl ? "<div class='dialog-sign'><img src='" + options.imageUrl + "' /></div>" : "") +
    "<div class='dialog-message'>" + (options.message || "&nbsp;") + "</div>" +
    "</div>";
}

function dialogControls(options) {
  var doNotShowAgainPrompt = "<div class='dialog-dns'><input type='checkbox' /> Do not show this again.</div>";
  // control buttons
  var controlButtons = "<div class='dialog-btns'>";
  var okButton = "<a class='pico-close dialog-ok'>OK</a>";
  var cancelButton = "<a class='pico-close dialog-cancel'>Cancel</a>";
  // check dialog type
  // alert dialog only needs a single button - "OK"
  // else we show both "OK" and "Cancel" buttons
  if (options.type == "alert") {
    controlButtons += "<a class='pico-close dialog-ok'>OK</a>";

  } else {
    if (navigator.appVersion.indexOf("Win") > -1) { // runs on Windows
      controlButtons += okButton + cancelButton;
    } else { // runs on OS other than Windows
      controlButtons += cancelButton + okButton;
    }
  }
  controlButtons += "</div>";

  return "<div class='dialog-controls'>" +
    (options.dnsPrompt ? doNotShowAgainPrompt : "") +
    controlButtons +
    "</div>";
}

function addDialogEventHandlers(modal, options, callback) {
  var dialogContainer = modal.modalElem;
  // OK button click event handler
  var okButton = dialogContainer.querySelector(".pico-close.dialog-ok");
  okButton.addEventListener("click", function () {
    if (dialogContainer.querySelector(".dialog-dns input") && dialogContainer.querySelector(".dialog-dns input").checked) { // Do Not Show
    }
    modal.close();
    callback(true);
  });
  // Cancel button click event handler
  var cancelButton = dialogContainer.querySelector(".pico-close.dialog-cancel");
  if (cancelButton) {
    cancelButton.addEventListener("click", function () {
      if (options.name == dialogNames.promptToShare) {
        if (dialogContainer.querySelector(".dialog-dns input").checked) {}
      }
      modal.close();
      callback(false);
    });
  }

  var keyDownHandler = function (event) {
    // disable Tab
    if (event.keyCode == "9") {
      event.preventDefault();
    }
    // press Esc to close the dialog (functions the same as clicking Cancel)
    if (event.keyCode == "27") { // Esc key pressed
      modal.close();
      callback(false);
    }
  };
  document.addEventListener("keydown", keyDownHandler);

  modal.onClose(function () {
    document.removeEventListener("keydown", keyDownHandler);
  });

  // for Upload Data dialog
  if (dialogContainer.querySelector(".toggle-pp")) {
    dialogContainer.querySelector(".toggle-pp").addEventListener("click", function (event) {
      dialogContainer.querySelector(".pico-content .privacy-policy").classList.toggle("collapsed");
    });
  }

  restrictTabWithinDialog(modal);
}

function restrictTabWithinDialog(modal) {
  var dialogContainer = modal.modalElem;
  assignTabIndices(modal);
  dialogContainer.addEventListener("keypress", function (event) {
    event.stopPropagation();
    var focusedElm = document.activeElement;
    // Tab key is pressed
    if (event.keyCode == "9") {
      var currentTabIndex = parseInt(focusedElm.getAttribute("tabIndex"));
      var nextElem = dialogContainer.querySelector("[tabIndex='" + (currentTabIndex + 1) + "']");
      if (nextElem) {
        nextElem.focus();
      } else {
        dialogContainer.querySelector("[tabIndex='0']").focus();
      }
    }
    // when the focused element is the OK or Cancel button and Enter key is pressed
    // mimic mouse clicking on button
    if (event.keyCode == "13" && focusedElm.mozMatchesSelector(".pico-content .dialog-btns a")) {
      focusedElm.click();
    }
  });
}

function assignTabIndices(modal) {
  var dialogContainer = modal.modalElem;
  var allElemsInDialog = dialogContainer.querySelectorAll("*");
  var tabIndex = 0;
  toArray(allElemsInDialog).forEach(function (elem, i) {
    if (elem.nodeName.toLowerCase() == "a" || elem.nodeName.toLowerCase() == "input") {
      elem.setAttribute("tabIndex", tabIndex);
      tabIndex++;
    }
  });
  dialogContainer.querySelector("[tabIndex='0']").focus();
}

function askForDataSharingConfirmationDialog(callback) {
  dialog({
      "name": dialogNames.startUploadData,
      "title": "Upload Data",
      "message": '<p>You are about to start uploading data to the Lightbeam server. Your data will continue to be uploaded periodically until you turn off sharing. For more information about the data we upload, how we take steps to minimize risk of re-identification, and what Mozilla\'s privacy policies are, please read the  <a class="toggle-pp">the Lightbeam Privacy Policy</a>.</p>' +
      // Lightbeam Privacy Policy.
      '<div class="privacy-policy"> <header><b>Lightbeam Privacy Notice</b></header> <p> We care about your privacy. Lightbeam is a browser add-on that collects and helps you visualize third party requests on any site you visit. If you choose to send Lightbeam data to Mozilla (that’s us), our <a href="#mozillaprivacypolicy">privacy policy</a> describes how we handle that data. </p> <header><b>Things you should know</b></header> <ul class="bullet-form"> <li> After you install Lightbeam, the add-on collects data to help you visualize third party requests when you visit sites. <ul> <li>When you visit a site and that site contacts a third party, Lightbeam collects the following type of data: Domains of the visited sites and third parties, the existence of cookies, and a rough timestamp of when the site was visited. To see a complete list, please visit <a href="https://github.com/mozilla/lightbeam/blob/master/doc/data_format.v1.2.md">here.</a></li> </ul> </li> <li> By default, data collected by Lightbeam remains in your browser and is not sent to us. </li> <li> You can choose to contribute your Lightbeam data to us. Data from Lightbeam can help us and others to understand third party relationships on the web and promote further research in the field of online tracking and privacy. <ul> <li>If you choose to contribute, your browser will send us your Lightbeam data (you can see a list of the kind of data involved <a href="https://github.com/mozilla/lightbeam/blob/master/doc/data_format.v1.2.md">here.</a>). We will post your data along with data from others in an aggregated and open database in a manner we believe minimizes the risk of re-identification. Opening this data can help users and researchers make more informed decisions based on the collective information. </li> <li> Uninstalling Lightbeam prevents collection of any further Lightbeam data.</li><li> Click "Reset data" at any time to delete the data stored locally in your browser. </li> </ul> </li> </ul> <header><b>Mozilla Privacy Policy &ndash; Learn More</b></header> <p>Your privacy is an important factor that Mozilla (that\'s us) considers in the development of each of our products and services. We are committed to being transparent and open and want you to know how we receive information about you, and what we do with that information once we have it.</p> <header><b>What do we mean by "personal information?"</b></header> <p> For us, "personal information" means information which identifies you, like your name or email address. </p> <p> Any information that falls outside of this is "non-personal information." </p> <p> If we store your personal information with information that is non-personal, we will consider the combination as personal information. If we remove all personal information from a set of data then the remaining is non-personal information. </p> <header><b>How do we learn information about you? </b></header> <p> We learn information about you when: </p> <ul> <li> you give it to us directly (e.g., when you choose to send us crash reports from Firefox); we collect it automatically through our products and services (e.g., when we check whether your version of Firefox is up to date); </li> <li> we collect it automatically through our products and services (e.g., when we check whether your version of Firefox is up to date); </li> <li> someone else tells us information about you (e.g., Thunderbird works with your email providers to set up your account); or </li> <li> when we try and understand more about you based on information you\'ve given to us (e.g., when we use your IP address to customize language for some of our services). </li> </ul> <br/><header><b>What do we do with your information once we have it? </b></header> <p>When you give us personal information, we will use it in the ways for which you\'ve given us permission. Generally, we use your information to help us provide and improve our products and services for you.</p> <header><b>When do we share your information with others?</b></header> <ul> <li>When we have gotten your permission to share i
      // Lightbeam Privacy Policy ends
      '<br />' +
        '<p>By clicking OK, you are agreeing to the data practices in our privacy notice.</p>',
      "imageUrl": "image/lightbeam_popup_warningsharing.png"
    },
    callback);
}

function stopSharingDialog(callback) {
  dialog({
      "name": dialogNames.stopUploadData,
      "title": "Stop Uploading Data",
      "message": '<p>You are about to stop sharing data with the Lightbeam server.</p>' +
        '<p>By clicking OK you will no longer be uploading data.</p>',
      "imageUrl": "image/lightbeam_popup_stopsharing2.png"
    },
    function (confirmed) {
      callback(confirmed);
    }
  );
}

function informUserOfUnsafeWindowsDialog() {
  dialog({
      "type": "alert",
      "name": dialogNames.privateBrowsing,
      "dnsPrompt": true,
      "title": "Private Browsing",
      "message": "<p>You have one or more private browsing windows open.</p>" +
        "<p>Connections made in private browsing windows will be visualized in Lightbeam but that data is neither stored locally nor will it ever be shared, even if sharing is enabled. </p>" +
        "<p> Information gathered in private browsing mode will be deleted whenever Lightbeam is restarted, and is not collected at all when Lightbeam is not open..</p>",
      "imageUrl": "image/lightbeam_popup_privacy.png"
    },
    function (confirmed) {}
  );
}


function confirmBlockSitesDialog(callback) {
  dialog({
      "name": dialogNames.blockSites,
      "title": "Block Sites",
      "message": "<p><b>Warning:</b></p> " +
        "<p>Blocking sites will prevent any and all content from being loaded from selected domains, for example: [example.com, example.net] and all of their subdomains [mail.example.com, news.example.net etc.]. </p>" +
        "<p>This can prevent some sites from working and degrade your internet experience. Please use this feature carefully. </p>",
      "imageUrl": "image/lightbeam_popup_blocked.png"
    },
    callback
  );
}

function confirmHideSitesDialog(callback) {
  dialog({
      "name": dialogNames.hideSites,
      "dnsPrompt": true,
      "title": "Hide Sites",
      "message": "<p>These sites will not be shown in Lightbeam visualizations, including List View, unless you specifically toggle them back on with the Show Hidden Sites button.</p>" +
        "<p>You can use this to ignore trusted sites from the data.</p>",
      "imageUrl": "image/lightbeam_popup_hidden.png"
    },
    callback
  );
}

function confirmResetDataDialog(callback) {
  dialog({
    "name": dialogNames.resetData,
    "title": "Reset Data",
    "message": "<p>Pressing OK will delete all Lightbeam information including connection history, user preferences, block sites list etc.</p>" +
      "<p>Your browser will be returned to the state of a fresh install of Lightbeam.</p>",
    "imageUrl": "image/lightbeam_popup_warningreset.png"
  }, callback);
}