From c374b6adc7456dc16e3042fa9f1d85eef1ae78d3 Mon Sep 17 00:00:00 2001
From: Ad5001 <mail@ad5001.eu>
Date: Tue, 17 Oct 2023 18:25:54 +0200
Subject: [PATCH] Minor UI changes + adding webpage to the title.

+ Dark theme support.
+ UI element to make it clearer whether the editing has been enabled.
---
 background.js      |  6 +++--
 manifest.json      |  8 +++----
 popup/control.html | 57 +++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/background.js b/background.js
index 5ea0e0c..580bfab 100644
--- a/background.js
+++ b/background.js
@@ -17,8 +17,8 @@
  * 
  **/
 
-const TITLE_EDITING = "Simple Content Editor (editing)"
-const TITLE_NOT_EDITING = "Simple Content Editor"
+const TITLE_EDITING = "Simple Webpage Content Editor (editing)"
+const TITLE_NOT_EDITING = "Simple Webpage Content Editor"
 
 const exportTabHTMLToLink = () => {
     let fullHTML  = document.body.parentNode.outerHTML
@@ -30,10 +30,12 @@ const exportTabHTMLToLink = () => {
 
 const enableEdition = () => {
     document.body.contentEditable = true
+    return true
 }
 
 const disableEdition = () => {
     document.body.contentEditable = false
+    return true
 }
 
 const queryEditionStatus = () => {
diff --git a/manifest.json b/manifest.json
index c1d4d30..c1d38c5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
     "description": "Simple local webpage content editing extension that allows in-browser edition and HTML export.",
     "manifest_version": 3,
-    "name": "Simple Content Editor",
+    "name": "Simple Webpage Content Editor",
     "version": "1.0",
     "author": "Ad5001",
     "developer": {
@@ -10,14 +10,14 @@
     },
     "browser_specific_settings": {
         "gecko": {
-            "id": "simplecontenteditor@ad5001.eu",
+            "id": "simplewebpagecontenteditor@ad5001.eu",
             "strict_min_version": "113.0"
         },
         "gecko_android": {
             "strict_min_version": "113.0"
         }
     },
-    "homepage_url": "https://apps.ad5001.eu/simplecontenteditor/",
+    "homepage_url": "https://apps.ad5001.eu/simplewebpagecontenteditor/",
 
     "background": {
         "scripts": ["background.js"]
@@ -25,7 +25,7 @@
     
     "action": {
         "default_icon": "icons/editor.svg",
-        "default_title": "Simple Content Editor",
+        "default_title": "Simple Webpage Content Editor",
         "default_popup": "popup/control.html",
         "theme_icons": [{
             "light": "icons/editor-photon-dark.svg",
diff --git a/popup/control.html b/popup/control.html
index 46ae1a9..5c6ba97 100644
--- a/popup/control.html
+++ b/popup/control.html
@@ -21,8 +21,17 @@
     <meta charset="UTF-8">
     <title>Simple Content Editor Control Popup</title>
     <style>
+        body {
+            width: 20ch;
+            --green: green;
+            --blue: #4185ff;
+            --red: #bb1111;
+            --gray-status: gray;
+            --green-status: #003706;
+        }
+        
         button {
-            margin: .3em;
+            margin-top: .5ch;
             border: none;
             border-radius: .5em;
             color: white;
@@ -30,7 +39,7 @@
             padding-right: 1em;
             padding-left: 1em;
             cursor: pointer;
-            width: 15ch;
+            width: 100%;
         }
         
         button:hover, button:focus {
@@ -40,30 +49,62 @@
         button:active {
             filter: brightness(1.4)
         }
+        
+        #status {
+            font-family: sans-serif;
+            line-height: 1em;
+        }
+        
+        #status::before {
+            display: inline-block;
+            vertical-align: middle;
+            content: " ";
+            margin-right: .6ch;
+            background: var(--gray-status);
+            width: .6em;
+            height: .6em;
+            border-radius: 100%;
+        }
 
         #start-editing {
-            background: green;
+            background: var(--green);
         }
 
         #save-html {
-            background: #4185ff;
+            background: var(--blue);
         }
 
         #stop-editing {
-            background: #bb1111;
+            background: var(--blue);
+        }
+        
+        .editing > #status::before {
+            background: var(--green-status);
         }
         
         .not-editing > #save-html,
         .not-editing > #stop-editing,
-        .editing > #start-editing {
+        .editing > #start-editing,
+        .not-editing > #status > #status-editing,
+        .editing > #status > #status-not-editing {
             display: none;
         }
+        
+        @media (prefers-color-scheme: dark) {
+            body {
+                --green-status: #30e60b;
+                --gray-status: lightgray;
+                background: #1c1b22;
+                color: white;
+            }
+        }
     </style>
     <script src="control.js"></script>
 </head>
 <body id="editing-controls" class="not-editing">
-    <button id="start-editing">Start Editing</button>
+    <p id="status">Status: <span id="status-not-editing">Not Editing</span><span id="status-editing">Editing</span></p>
+    <button id="start-editing">Start/Resume Editing</button>
     <button id="save-html">Save HTML</button><br>
-    <button id="stop-editing">Stop Editing</button>
+    <button id="stop-editing">Pause Editing</button>
 </body>
 </html>