Switching from native 'confirm' prompt to HTML dialog for reset promp…

…t. (#221) Adds Google's `dialog-polyfill` as a dependency.
mozilla · Oct 9, 2017 · 9417a3a · 9417a3a
1 parent 89c3eb4
commit 9417a3a
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "build": "npm install && npm run updatesubmodule && npm run createlib && cd src && web-ext build --overwrite-dest",
     "updatesubmodule": "git submodule init && git submodule update",
     "createlib": "cd src && rm -rf ext-libs/ && mkdir ext-libs && npm run movelibcontents",
-    "movelibcontents": "cp node_modules/dexie/dist/dexie.js src/ext-libs && cp node_modules/d3/build/d3.min.js src/ext-libs && node node_modules/json/lib/json.js  -f shavar-prod-lists/disconnect-entitylist.json > src/ext-libs/disconnect-entitylist.json",
+    "movelibcontents": "cp node_modules/dexie/dist/dexie.js src/ext-libs && cp node_modules/d3/build/d3.min.js src/ext-libs && cp node_modules/dialog-polyfill/dialog-polyfill.js src/ext-libs && node node_modules/json/lib/json.js -f shavar-prod-lists/disconnect-entitylist.json > src/ext-libs/disconnect-entitylist.json",
     "lint": "npm-run-all lint:*",
     "lint:eslint": "eslint --ext=.js,.json .",
     "lint:webext": "web-ext -s js lint",
@@ -29,7 +29,8 @@
   "homepage": "https://github.com/mozilla/lightbeam-we/blob/master/README.md",
   "dependencies": {
     "d3": "4.9.1",
-    "dexie": "^2.0.0-beta"
+    "dexie": "^2.0.0-beta",
+    "dialog-polyfill": "^0.4.9"
   },
   "devDependencies": {
     "chai": "^3.5.0",

diff --git a/src/css/style.css b/src/css/style.css
@@ -32,6 +32,8 @@
   --button-active-border-color: #6fc3e5;
   --primary-text-color: #eaeaea;
   --secondary-text-color: #73a4b8;
+  --dialog-header-color: #4cc7e6;
+  --dialog-button-color: #4cc7e6;
 }
 
 *::before, *::after, * {
@@ -107,6 +109,133 @@ button::before, a.thumbs-up::before {
   margin-right: 10px;
 }
 
+dialog {
+  display: block;
+  position: fixed;
+  transform: translate(0, -50%);
+  top: 50%;
+  left: 2em;
+  right: 2em;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  max-width: 40em;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  padding: 1em;
+  background: white;
+  color: black;
+  border: none;
+  border-radius: 0.5em;
+  box-shadow: 0.5em 0.5em 0 rgba(0,0,0,0.5);
+  overflow: hidden;
+}
+
+dialog:not([open]) {
+  display: none;
+}
+
+dialog::backdrop, dialog + .backdrop {
+  background: rgba(0,0,0,0.25);
+}
+
+dialog + .backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+dialog .dialog-wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: auto;
+}
+
+dialog .dialog-title {
+  background: var(--dialog-header-color);
+  color: #FFF;
+  margin: -1em -1em 0;
+  padding: 1em;
+  font-size: 1em;
+  text-transform: uppercase;
+  grid-column: 1 / 5;
+  grid-row: 1;
+}
+
+dialog .dialog-icon {
+  grid-column: 1;
+  grid-row: 2;
+  width: 100%;
+  display: block;
+}
+
+dialog .dialog-content {
+  grid-column: 1 / 5;
+  grid-row: 2;
+}
+
+dialog .dialog-icon + .dialog-content {
+  grid-column: 2 / 5;
+}
+
+dialog .dialog-options {
+  text-align: right;
+  display: block;
+  margin: 0;
+  padding: 0;
+  grid-column: 1 / 5;
+  grid-row: 3;
+}
+
+dialog .dialog-options button {
+  background: var(--dialog-button-color);
+  display: inline-block;
+  width: auto;
+  min-width: 6em;
+  box-shadow: none;
+  margin: 0;
+  padding: 0.5em 1em;
+  font-size: inherit;
+  text-align: center;
+}
+
+dialog .dialog-options button::before {
+  display: none;
+}
+
+dialog .dialog-options button::-moz-focus-inner {
+  padding: 0;
+  border: none;
+}
+
+dialog .dialog-options button:focus {
+  outline: dotted 1px grey;
+}
+
+@media (max-width: 44em) {
+  dialog .dialog-icon {
+    display: none;
+  }
+
+  dialog .dialog-content,
+  dialog .dialog-icon + .dialog-content {
+    grid-column: 1 / 5;
+  }
+}
+
+._dialog_overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .active {
   background-color: var(--button-active-color);
   border-top: 2px solid var(--button-active-border-color);

diff --git a/src/images/lightbeam_dialog_warningreset.png b/src/images/lightbeam_dialog_warningreset.png
diff --git a/src/index.html b/src/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <script src="js/storeChild.js" type="text/javascript"></script>
     <script src="ext-libs/d3.min.js"></script>
+    <script src="ext-libs/dialog-polyfill.js"></script>
     <script src="js/viz.js" type="text/javascript"></script>
     <script src="js/lightbeam.js" type="text/javascript"></script>
   </head>
@@ -130,5 +131,22 @@ <h2 class="hide">Hide</h2>
         </div>
       </footer>
     </main>
+    <dialog id="reset-data-dialog" aria-labelledby="reset-data-dialog-title">
+      <form method="dialog" class="dialog-wrapper">
+        <h1 id="reset-data-dialog-title" class="dialog-title">Reset Data</h1>
+
+        <img class="dialog-icon" src="images/lightbeam_dialog_warningreset.png" alt="">
+
+        <div class="dialog-content">
+          <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>
+        </div>
+
+        <menu class="dialog-options">
+          <button type="submit" value="" autofocus>Cancel</button>
+          <button type="submit" value="confirm">OK</button>
+        </menu>
+      </form>
+    </dialog>
   </body>
 </html>
diff --git a/src/js/lightbeam.js b/src/js/lightbeam.js
@@ -254,14 +254,26 @@ const lightbeam = {
 
   resetData() {
     const resetData = document.getElementById('reset-data-button');
-    resetData.addEventListener('click', async () => {
-      const msgBegin = 'Pressing OK will delete all Lightbeam data. ';
-      const msgEnd = 'Are you sure?';
-      const confirmation = confirm(`${msgBegin + msgEnd}`);
-      if (confirmation) {
+    const dialog = document.getElementById('reset-data-dialog');
+    window.dialogPolyfill && window.dialogPolyfill.registerDialog(dialog);
+
+    resetData.addEventListener('click', () => {
+      dialog.showModal();
+    });
+
+    dialog.addEventListener('cancel', () => {
+      delete dialog.returnValue;
+    });
+
+    dialog.addEventListener('close', async () => {
+      if (dialog.returnValue === 'confirm') {
         await storeChild.reset();
         window.location.reload();
       }
+
+      // This is a little naive, because the dialog might not have been
+      // triggered by the reset button. But it's better than nothing.
+      resetData.focus();
     });
   },