From 9417a3ab28134d1a977e221a5c97de45b47193d5 Mon Sep 17 00:00:00 2001 From: Andrew Hayward Date: Mon, 9 Oct 2017 06:48:41 -0400 Subject: [PATCH] Switching from native 'confirm' prompt to HTML dialog for reset prompt. (#221) Adds Google's `dialog-polyfill` as a dependency. --- package.json | 5 +- src/css/style.css | 129 +++++++++++++++++++ src/images/lightbeam_dialog_warningreset.png | Bin 0 -> 4746 bytes src/index.html | 18 +++ src/js/lightbeam.js | 22 +++- 5 files changed, 167 insertions(+), 7 deletions(-) create mode 100644 src/images/lightbeam_dialog_warningreset.png diff --git a/package.json b/package.json index d8b6c20..b2fa484 100644 --- 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 index 1ec19ff..bc7caa9 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..25e04701088696bfaf995496f03d6598c502ba57 GIT binary patch literal 4746 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 arZ>478%Z*iQ`r&!rD<#GKdDx?efuA;4kMue literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index e67d9cf..cbbd37d 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,7 @@ + @@ -130,5 +131,22 @@ + +
+

Reset Data

+ + + +
+

Pressing OK will delete all Lightbeam information including connection history, user preferences, block sites list, etc.

+

Your browser will be returned to the state of a fresh install of Lightbeam.

+
+ + + + + +
+ diff --git a/src/js/lightbeam.js b/src/js/lightbeam.js index fad6e0e..64b151e 100644 --- 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(); }); },