quoid · quoid · Sep 16, 2020 · Sep 15, 2020 · Sep 15, 2020 · Sep 15, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## v2.1.2 (2020-09-16)
+- fixed a bug that caused discard & save buttons to remain active after loading a new script
+- update styling code
+- improve web demo experience
+
 ## v2.1.1 (2020-09-14)
 - fixed an issue that caused extension to crash when text preceded opening userscript tag - #69 #68 #58
 - improve sidebar tag filtering

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Userscripts Safari
 
-An open-source userscript editor for Safari
+An open-source userscript editor for Safari - https://quoid.github.io/userscripts/
 
 ![Userscripts Safari](/etc/screenshot.png)
 

diff --git a/extension/Userscripts Extension/index.html b/extension/Userscripts Extension/index.html
diff --git a/extension/Userscripts.xcodeproj/project.pbxproj b/extension/Userscripts.xcodeproj/project.pbxproj
@@ -409,7 +409,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Userscripts Extension/Userscripts Extension.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = J74Q8V8V8N;
 				ENABLE_HARDENED_RUNTIME = YES;
 				INFOPLIST_FILE = "Userscripts Extension/Info.plist";
@@ -418,7 +418,7 @@
 					"@executable_path/../Frameworks",
 					"@executable_path/../../../../Frameworks",
 				);
-				MARKETING_VERSION = 2.1.1;
+				MARKETING_VERSION = 2.1.2;
 				PRODUCT_BUNDLE_IDENTIFIER = "com.userscripts.macos.Userscripts-Extension";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;
@@ -432,7 +432,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Userscripts Extension/Userscripts Extension.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = J74Q8V8V8N;
 				ENABLE_HARDENED_RUNTIME = YES;
 				INFOPLIST_FILE = "Userscripts Extension/Info.plist";
@@ -441,7 +441,7 @@
 					"@executable_path/../Frameworks",
 					"@executable_path/../../../../Frameworks",
 				);
-				MARKETING_VERSION = 2.1.1;
+				MARKETING_VERSION = 2.1.2;
 				PRODUCT_BUNDLE_IDENTIFIER = "com.userscripts.macos.Userscripts-Extension";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;
@@ -458,15 +458,15 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = J74Q8V8V8N;
 				ENABLE_HARDENED_RUNTIME = YES;
 				INFOPLIST_FILE = Userscripts/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/../Frameworks",
 				);
-				MARKETING_VERSION = 2.1.1;
+				MARKETING_VERSION = 2.1.2;
 				PRODUCT_BUNDLE_IDENTIFIER = com.userscripts.macos;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_VERSION = 5.0;
@@ -482,15 +482,15 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = J74Q8V8V8N;
 				ENABLE_HARDENED_RUNTIME = YES;
 				INFOPLIST_FILE = Userscripts/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/../Frameworks",
 				);
-				MARKETING_VERSION = 2.1.1;
+				MARKETING_VERSION = 2.1.2;
 				PRODUCT_BUNDLE_IDENTIFIER = com.userscripts.macos;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_VERSION = 5.0;

diff --git a/index.html b/index.html
diff --git a/src/index.html b/src/index.html
@@ -18,8 +18,10 @@
     </head>
     <body class="init scripts-loading editor-loading">
         <noscript>Please enable Javascript to use this app</noscript>
+        {% if demo %}
+        <div class="demo">App optimized for Safari - other browser support limited</div>
+        {% endif %}
         <div id="notify"></div>
-        <div id="progress"></div>
         <div id="wrapper">
             {% include "sidebar.html" %}
             {% include "editor.html" %}

diff --git a/src/js/dev.js b/src/js/dev.js
@@ -195,7 +195,7 @@ const ___settings = {
     showInvisibles: "true",
     tabSize: "4",
     verbose: "true",
-    version: "2.1.1"
+    version: "2.1.2"
 };
 
 const ___parse = {

diff --git a/src/js/main.js b/src/js/main.js
@@ -562,6 +562,8 @@ const ___e = {
             // enable the save button for temp scripts
             this.buttonSave.removeAttribute("disabled");
         } else {
+            // ensure discard and save button are disabled after loading
+            this.toggleButtonState("disable");
             status = ___a.getString("lastModified") + " " + lastModified;
         }
         this.setStatus(status);
@@ -696,6 +698,11 @@ const ___s = {
     buttonSettingsHide: document.getElementById("settingsHide"),
     filterBar: document.querySelector("#filter input"),
     scriptsContainer: document.getElementById("scripts"),
+    scrollOptions: { // options description: https://stackoverflow.com/a/48635751
+        behavior: "auto",
+        block: "nearest",
+        inline: "start"
+    },
     settingsOverlay: document.getElementById("settings"),
     createNewScript: function(type) {
         // check if editor has unsaved changed OR there's an unsaved temp script
@@ -731,7 +738,7 @@ const ___s = {
         el.classList.add("temp");
         loc.insertAdjacentElement("afterend", el);
         this.updateScriptCount();
-        el.scrollIntoViewIfNeeded();
+        el.scrollIntoView(this.scrollOptions);
         ___a.log(`Created temporary script, ${filename}`, "darkorchid");
         ___e.loadScript(loadData);
     },
@@ -907,7 +914,7 @@ const ___s = {
             document.querySelector(".active").classList.remove("active");
         }
         el.classList.add("active");
-        el.scrollIntoViewIfNeeded();
+        el.scrollIntoView(this.scrollOptions);
     },
     scriptToggle: function(e) {
         // prevent default checkbox behaviour, checking happens programatically
@@ -948,7 +955,7 @@ const ___s = {
         });
         // scroll to activ script
         if (document.querySelector(".active")) {
-            document.querySelector(".active").scrollIntoViewIfNeeded();
+            document.querySelector(".active").scrollIntoView(this.scrollOptions);
         }
     },
     updateScriptCount: function() {

diff --git a/src/macros/toggle.css b/src/macros/toggle.css
@@ -11,9 +11,8 @@
 
 .toggle input[type=checkbox] {
     display: block;
-    height: 0;
+    position: absolute;
     visibility: hidden;
-    width: 0;
 }
 
 .toggle span {

diff --git a/src/partials/editor.css b/src/partials/editor.css
@@ -9,8 +9,10 @@
 
 #code {
     display: flex;
-    flex: 1;
+    flex-basis: calc(100% - 112px); /* .editor-header @ 56px .editor-footer @ 56px */
+    flex-grow: 1;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .editor-header {

diff --git a/src/partials/sidebar.css b/src/partials/sidebar.css
@@ -106,7 +106,7 @@
 
 #scripts {
     border-top: 1px solid var(--border-dark);
-    flex: 1;
+    flex-basis: calc(100vh - 162px); /* .sidebar-header @ 106px and .sidebar-footer @ 56px */
     overflow-y: auto;
     position: relative;
 }
@@ -141,7 +141,7 @@
 }
 
 .script-header .title {
-    flex: 1;
+    flex-grow: 1;
     font: var(--fs3);
     letter-spacing: var(--ls3);
     padding-right: 8px;
@@ -228,13 +228,25 @@ body.saving #sidebar .script {
 }
 
 /* show disabled css scripts */
-#scripts.show-css.show-disabled .script:not([data-type="css"].disabled),
+/* #scripts.show-css.show-disabled .script:not([data-type="css"].disabled), */
+#scripts.show-css.show-disabled .script[data-type="css"].enabled,
+#scripts.show-css.show-disabled .script[data-type="js"].enabled,
+#scripts.show-css.show-disabled .script[data-type="js"].disabled,
 /* show enabled css scripts */
-#scripts.show-css.show-enabled .script:not([data-type="css"].enabled),
+/* #scripts.show-css.show-enabled .script:not([data-type="css"].enabled), */
+#scripts.show-css.show-enabled .script[data-type="css"].disabled,
+#scripts.show-css.show-enabled .script[data-type="js"].disabled,
+#scripts.show-css.show-enabled .script[data-type="js"].enabled,
 /* show disabled js scripts */
-#scripts.show-js.show-disabled .script:not([data-type="js"].disabled),
+/* #scripts.show-js.show-disabled .script:not([data-type="js"].disabled), */
+#scripts.show-js.show-disabled .script[data-type="js"].enabled,
+#scripts.show-js.show-disabled .script[data-type="css"].enabled,
+#scripts.show-js.show-disabled .script[data-type="css"].disabled,
 /* show enabled js scripts */
-#scripts.show-js.show-enabled .script:not([data-type="js"].enabled) {
+/* #scripts.show-js.show-enabled .script:not([data-type="js"].enabled), */
+#scripts.show-js.show-enabled .script[data-type="js"].disabled,
+#scripts.show-js.show-enabled .script[data-type="css"].disabled,
+#scripts.show-js.show-enabled .script[data-type="css"].enabled {
     display: none;
 }
 

diff --git a/src/partials/sidebar.html b/src/partials/sidebar.html
@@ -16,7 +16,7 @@
             </ul>
         </div>
         <div id="filter">
-            <input type="search" placeholder="init" data-localize="filter">
+            <input type="search" placeholder="init" data-localize="filter" spellcheck="false" autocomplete="off">
             {{ icon("loupe", "filterLoupe") }}
         </div>
     </div>

diff --git a/src/stylesheets/_main.css b/src/stylesheets/_main.css
@@ -20,7 +20,7 @@
 
 /* z-indexes */
 noscript { z-index: 99; }
-#notify { z-index: 99;}
+#notify, .warn { z-index: 99;}
 #appLoader { z-index: 98; }
 #settings { z-index: 97; }
 #progress {z-index: 96; }

diff --git a/src/stylesheets/global.css b/src/stylesheets/global.css
@@ -20,7 +20,7 @@ body {
 
 #wrapper {
     display: flex;
-    flex: 1;
+    overflow: hidden;
 }
 
 a {
@@ -58,6 +58,7 @@ body:not(.init) #appLoader {
     white-space: nowrap;
 }
 
+.demo,
 #notify,
 noscript {
     background-color: var(--color-red);
@@ -67,38 +68,14 @@ noscript {
     width: 100%;
 }
 
-#notify {
-    display: none;
+.demo {
+    font-size: 11.5px;
+    line-height: 1;
+    padding: 4px;
 }
 
-#progress {
+#notify {
     display: none;
-    background-color: var(--border-dark);
-    height: 3px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
-#progress::before {
-    animation: fill 3.5s infinite;
-    background-color: var(--link-color);
-    content: "";
-    height: 3px;
-    left: 0;
-    margin-left: 0;
-    position: absolute;
-    top: 0;
-    width: 0;
-}
-
-@keyframes fill {
-    0% {width: 0; margin-left: 0;}
-    50% {width: 100%;}
-    55% {margin-left: 100%;}
-    95% {margin-left: 0;}
-    100% {width: 0;}
 }
 
 .link {