From 90a71c0afcd682a567ec69f8e7a280ccb040318d Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 20 Feb 2022 18:34:51 +0300
Subject: [PATCH] deflicker name element in new usercss

---
 edit.html    |  3 +--
 edit/base.js | 18 ++++++++++++------
 edit/edit.js |  6 +-----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/edit.html b/edit.html
index 5da81492..8b935318 100644
--- a/edit.html
+++ b/edit.html
@@ -18,6 +18,7 @@
     <script src="content/apply.js"></script>
 
     <script src="js/sections-util.js"></script>
+    <script src="js/storage-util.js"></script>
     <script src="edit/codemirror-themes.js"></script> <!-- must precede base.js -->
     <script src="edit/base.js"></script>
 
@@ -42,13 +43,11 @@
     <script src="vendor/codemirror/addon/hint/css-hint.js"></script>
     <script src="vendor/codemirror/keymap/sublime.js"></script>
     <script src="vendor-overwrites/codemirror-addon/match-highlighter.js"></script>
-    <script src="vendor/lz-string-unsafe/lz-string-unsafe.min.js"></script>
 
     <script src="js/color/color-converter.js"></script>
     <script src="js/color/color-mimicry.js"></script>
     <script src="js/color/color-picker.js"></script>
     <script src="js/color/color-view.js"></script>
-    <script src="js/storage-util.js"></script>
     <script src="js/worker-util.js"></script>
 
     <script src="edit/util.js"></script>
diff --git a/edit/base.js b/edit/base.js
index c9cca9e3..778c9d51 100644
--- a/edit/base.js
+++ b/edit/base.js
@@ -3,6 +3,7 @@
 /* global CODEMIRROR_THEMES */
 /* global CodeMirror */
 /* global MozDocMapper */// sections-util.js
+/* global chromeSync */// storage-util.js
 /* global initBeautifyButton */// beautify.js
 /* global prefs */
 /* global t */// localization.js
@@ -77,8 +78,9 @@ const baseInit = (() => {
 
   async function loadStyle() {
     const params = new URLSearchParams(location.search);
-    const id = Number(params.get('id'));
+    let id = Number(params.get('id'));
     const style = id && await API.styles.get(id) || {
+      id: id = null, // resetting the non-existent id
       name: params.get('domain') ||
         tryURL(params.get('url-prefix')).hostname ||
         '',
@@ -88,14 +90,18 @@ const baseInit = (() => {
       ],
     };
     // switching the mode here to show the correct page ASAP, usually before DOMContentLoaded
-    editor.isUsercss = Boolean(style.usercssData || !style.id && prefs.get('newStyleAsUsercss'));
-    editor.style = style;
+    const isUC = Boolean(style.usercssData || !id && prefs.get('newStyleAsUsercss'));
+    Object.assign(editor, /** @namespace Editor */ {
+      style,
+      isUsercss: isUC,
+      template: isUC && !id && chromeSync.getLZValue(chromeSync.LZ_KEY.usercssTemplate), // promise
+    });
     editor.updateClass();
     editor.updateTitle(false);
-    $.rootCL.add(editor.isUsercss ? 'usercss' : 'sectioned');
-    sessionStore.justEditedStyleId = style.id || '';
+    $.rootCL.add(isUC ? 'usercss' : 'sectioned');
+    sessionStore.justEditedStyleId = id || '';
     // no such style so let's clear the invalid URL parameters
-    if (!style.id) history.replaceState({}, '', location.pathname);
+    if (!id) history.replaceState({}, '', location.pathname);
   }
 
   /** Preloads the theme so CodeMirror can use the correct metrics in its first render */
diff --git a/edit/edit.js b/edit/edit.js
index 7d33a37f..20905727 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -4,7 +4,6 @@
 /* global SectionsEditor */
 /* global SourceEditor */
 /* global baseInit */
-/* global chromeSync */// storage-util.js
 /* global clipString createHotkeyInput helpPopup */// util.js
 /* global closeCurrentTab deepEqual sessionStore tryJSONparse */// toolbox.js
 /* global cmFactory */
@@ -19,10 +18,7 @@
 document.body.appendChild(t.template.body);
 
 baseInit.ready.then(async () => {
-  [editor.template] = await Promise.all([
-    editor.isUsercss && !editor.style.id && chromeSync.getLZValue(chromeSync.LZ_KEY.usercssTemplate),
-    waitForSheet(),
-  ]);
+  [editor.template] = await Promise.all([editor.template, waitForSheet()]);
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
   await editor.ready;
   editor.ready = true;