refactor settings sections

jiacai2050 · Mar 12, 2023 · 654109b · 654109b
1 parent 71b2873
commit 654109b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 26 deletions.
diff --git a/Makefile b/Makefile
@@ -1,14 +1,17 @@
 CHROME_DST = ~/text-saver-chrome.zip
 FIREFOX_DST = ~/text-saver-firefox.zip
 
-build:
+build: buildc buildf
+
+buildc:
 	rm -f $(CHROME_DST)
 	zip -r $(CHROME_DST) option.html *.js libs/* manifest.json imgs/logo.png
 
 buildf:
 	rm -f $(FIREFOX_DST)
 	node build.mjs
 	zip -r $(FIREFOX_DST) option.html *.js libs/* manifest.json imgs/logo.png
+	git checkout -- manifest.json
 
 lint:
 	find . -type f -maxdepth 1 | grep -v org | grep -v Makefile | xargs npx prettier@2.7.1 --write
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Text Saver",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Save texts anytime, anywhere",
   "homepage_url": "https://github.com/jiacai2050/text-saver",
   "author": "liujiacai@yandex.com",

diff --git a/module.js b/module.js
@@ -19,7 +19,6 @@ export class Options {
   async clear() {
     return await this.storage.clear(null);
   }
-  // Mainly for testing
   async dump() {
     return await this.storage.get(null);
   }

diff --git a/option.html b/option.html
@@ -24,9 +24,6 @@ <h2>Save texts anytime, anywhere</h2>
         <button type="button" class="btn btn-primary btn-sm" id="btn-export">
           Export
         </button>
-        <button type="button" class="btn btn-danger btn-sm" id="btn-clear">
-          Clear ALL
-        </button>
       </div>
       <table class="table table-hover table-responsive">
         <thead>
@@ -40,18 +37,42 @@ <h2>Save texts anytime, anywhere</h2>
       </table>
 
       <div class="card">
-        <h5 class="card-header">Options</h5>
+        <h5 class="card-header">Settings</h5>
         <div class="card-body">
-          <div class="form-group">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              value=""
-              id="cb-notification"
-            />
-            <label class="form-check-label" for="cb-notification">
-              Enable notification after save text
+          <div class="form-group row">
+            <label for="input-size" class="col-sm-2 col-form-label"
+              >Storage Size
             </label>
+            <div class="col-sm-10">
+              <input class="form-control" readonly id="input-size" />
+            </div>
+          </div>
+
+          <div class="form-group row">
+            <label for="input-notification" class="col-sm-2"
+              >Enable notification</label
+            >
+            <div>
+              <div class="form-check">
+                <input
+                  type="checkbox"
+                  class="form-control"
+                  id="input-notification"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group row">
+            <div class="col-sm-10">
+              <button
+                type="button"
+                class="btn btn-danger btn-sm"
+                id="btn-clear"
+              >
+                Clear ALL texts
+              </button>
+            </div>
           </div>
         </div>
       </div>

diff --git a/option.js b/option.js
@@ -18,6 +18,16 @@ async function textStats() {
   return await chrome.storage.local.getBytesInUse(null);
 }
 
+function humanSize(size) {
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let i = 0;
+  while (i < units.length - 1 && size >= 1024) {
+    size /= 1024;
+    i += 1;
+  }
+  return `${size.toFixed(2)} ${units[i]}`;
+}
+
 async function refresh() {
   let rows = [];
   for (const [id, { text, url, createdAt }] of Object.entries(
@@ -31,7 +41,7 @@ async function refresh() {
   for (const row of rows) {
     let [id, text, url, createdAt] = row;
     table.push(`<tr>
-<td id="text-${id}">${text}</td>
+<td id="text-${id}"></td>
 <td>${new Date(createdAt).toLocaleString()}</td>
 <td>
 <div class="btn-group" role="group">
@@ -48,6 +58,8 @@ async function refresh() {
 
   for (const row of rows) {
     let [id, text] = row;
+    // use `textContent` to prevent XSS
+    document.getElementById(`text-${id}`).textContent = text;
     document.getElementById(`btn-delete-${id}`).onclick = async function () {
       if (confirm('Are you sure?')) {
         await removeTexts(id);
@@ -71,7 +83,7 @@ window.onload = async function () {
   let opt = new Options(chrome.storage.sync);
 
   document.getElementById('btn-clear').onclick = async function () {
-    if (confirm('Are you sure to clear all texts?')) {
+    if (confirm('Are you sure to clear all saved texts?')) {
       await clearTexts();
       await refresh();
     }
@@ -97,15 +109,12 @@ window.onload = async function () {
   };
 
   // console.log(await opt.dump());
-  const cbNotification = document.getElementById('cb-notification');
-  cbNotification.checked = await opt.getNotification();
-  cbNotification.onclick = async function () {
-    opt.setNotification(cbNotification.checked);
+  document.getElementById('input-size').value = humanSize(await textStats());
+  const inputNotification = document.getElementById('input-notification');
+  inputNotification.checked = await opt.getNotification();
+  inputNotification.onclick = async function () {
+    opt.setNotification(inputNotification.checked);
   };
 
-  // document.getElementById('btn-reset-default').onclick = async function () {
-  //   opt.clear();
-  // };
-
   await refresh();
 };