From 8d639b6140c8eb3c2d8290bb46ec737ace0a2273 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 12 Dec 2020 01:11:28 +0300
Subject: [PATCH] blank paint frame workaround for new Chrome

---
 edit.html               | 208 ++++++++++++++++++++--------------------
 edit/edit.js            |   1 +
 edit/sections-editor.js |   9 +-
 3 files changed, 111 insertions(+), 107 deletions(-)

diff --git a/edit.html b/edit.html
index 34889910..0ba1e57d 100644
--- a/edit.html
+++ b/edit.html
@@ -5,6 +5,15 @@
 
     <link href="global.css" rel="stylesheet">
 
+    <!-- IMPORTANT! Loading styles early so new Chrome doesn't paint a blank frame -->
+
+    <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/dialog/dialog.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/search/matchesonscrollbar.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/fold/foldgutter.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet">
+    <link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet">
+
     <style id="firefox-transitions-bug-suppressor">
       /* restrict to FF */
       @supports (-moz-appearance:none) {
@@ -18,6 +27,62 @@
 
     <link id="cm-theme" rel="stylesheet">
 
+    <script src="js/polyfill.js"></script>
+    <script src="js/toolbox.js"></script>
+    <script src="js/msg.js"></script>
+    <script src="js/prefs.js"></script>
+    <script src="js/dom.js"></script>
+    <script src="js/localization.js"></script>
+    <script src="content/style-injector.js"></script>
+    <script src="content/apply.js"></script>
+
+    <script src="edit/util.js"></script>
+    <script src="edit/editor.js"></script>
+    <script src="edit/preinit.js"></script>
+
+    <script src="vendor/codemirror/lib/codemirror.js"></script>
+    <script src="vendor/codemirror/mode/css/css.js"></script>
+    <script src="vendor/codemirror/mode/stylus/stylus.js"></script>
+    <script src="vendor/codemirror/addon/dialog/dialog.js"></script>
+    <script src="vendor/codemirror/addon/edit/closebrackets.js"></script>
+    <script src="vendor/codemirror/addon/scroll/annotatescrollbar.js"></script>
+    <script src="vendor/codemirror/addon/search/searchcursor.js"></script>
+    <script src="vendor/codemirror/addon/search/matchesonscrollbar.js"></script>
+    <script src="vendor/codemirror/addon/comment/comment.js"></script>
+    <script src="vendor/codemirror/addon/selection/active-line.js"></script>
+    <script src="vendor/codemirror/addon/edit/matchbrackets.js"></script>
+    <script src="vendor/codemirror/addon/fold/foldcode.js"></script>
+    <script src="vendor/codemirror/addon/fold/foldgutter.js"></script>
+    <script src="vendor/codemirror/addon/fold/brace-fold.js"></script>
+    <script src="vendor/codemirror/addon/fold/indent-fold.js"></script>
+    <script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
+    <script src="vendor/codemirror/addon/lint/lint.js"></script>
+    <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
+    <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="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/codemirror-themes.js"></script>
+    <script src="edit/codemirror-default.js"></script>
+    <script src="edit/codemirror-factory.js"></script>
+    <script src="edit/moz-section-finder.js"></script>
+    <script src="edit/moz-section-widget.js"></script>
+    <script src="edit/linter-manager.js"></script>
+    <script src="edit/live-preview.js"></script>
+    <script src="edit/colorpicker-helper.js"></script>
+
+    <script src="edit/source-editor.js"></script>
+    <script src="edit/sections-editor-section.js"></script>
+    <script src="edit/sections-editor.js"></script>
+    <script src="edit/edit.js"></script>
+
     <template data-id="appliesTo">
       <li class="applies-to-item">
         <div class="select-resizer">
@@ -185,68 +250,7 @@
       </table>
     </template>
 
-    <script src="js/polyfill.js"></script>
-    <script src="js/toolbox.js"></script>
-    <script src="js/msg.js"></script>
-    <script src="js/prefs.js"></script>
-    <script src="js/dom.js"></script>
-    <script src="js/localization.js"></script>
-    <script src="content/style-injector.js"></script>
-    <script src="content/apply.js"></script>
-
-    <script src="edit/util.js"></script>
-    <script src="edit/editor.js"></script>
-    <script src="edit/preinit.js"></script>
-
-    <script src="vendor/codemirror/lib/codemirror.js"></script>
-    <script src="vendor/codemirror/mode/css/css.js"></script>
-    <script src="vendor/codemirror/mode/stylus/stylus.js"></script>
-    <script src="vendor/codemirror/addon/dialog/dialog.js"></script>
-    <script src="vendor/codemirror/addon/edit/closebrackets.js"></script>
-    <script src="vendor/codemirror/addon/scroll/annotatescrollbar.js"></script>
-    <script src="vendor/codemirror/addon/search/searchcursor.js"></script>
-    <script src="vendor/codemirror/addon/search/matchesonscrollbar.js"></script>
-    <script src="vendor/codemirror/addon/comment/comment.js"></script>
-    <script src="vendor/codemirror/addon/selection/active-line.js"></script>
-    <script src="vendor/codemirror/addon/edit/matchbrackets.js"></script>
-    <script src="vendor/codemirror/addon/fold/foldcode.js"></script>
-    <script src="vendor/codemirror/addon/fold/foldgutter.js"></script>
-    <script src="vendor/codemirror/addon/fold/brace-fold.js"></script>
-    <script src="vendor/codemirror/addon/fold/indent-fold.js"></script>
-    <script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
-    <script src="vendor/codemirror/addon/lint/lint.js"></script>
-    <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
-    <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="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/codemirror-themes.js"></script>
-    <script src="edit/codemirror-default.js"></script>
-    <script src="edit/codemirror-factory.js"></script>
-    <script src="edit/moz-section-finder.js"></script>
-    <script src="edit/moz-section-widget.js"></script>
-    <script src="edit/linter-manager.js"></script>
-    <script src="edit/live-preview.js"></script>
-    <script src="edit/colorpicker-helper.js"></script>
-
-    <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
-    <link href="vendor/codemirror/addon/dialog/dialog.css" rel="stylesheet">
-    <link href="vendor/codemirror/addon/search/matchesonscrollbar.css" rel="stylesheet">
-    <link href="vendor/codemirror/addon/fold/foldgutter.css" rel="stylesheet">
-    <link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet">
-    <link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet">
-
-    <script src="edit/source-editor.js"></script>
-    <script src="edit/sections-editor-section.js"></script>
-    <script src="edit/sections-editor.js"></script>
-    <script src="edit/edit.js"></script>
+    <!-- IMPORTANT! Loading the main styles here so new Chrome doesn't paint a blank frame -->
 
     <link href="js/color/color-picker.css" rel="stylesheet">
     <link href="edit/codemirror-default.css" rel="stylesheet">
@@ -255,46 +259,6 @@
 
   <body id="stylus-edit">
 
-    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
-
-      <symbol id="svg-icon-external-link" viewBox="0 0 8 8">
-        <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
-      </symbol>
-
-      <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
-        <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
-      </symbol>
-
-      <symbol id="svg-icon-close" viewBox="0 0 12 16">
-        <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
-      </symbol>
-
-      <symbol id="svg-icon-v" viewBox="0 0 16 16">
-        <path d="M8,11.5L2.8,6.3l1.5-1.5L8,8.6l3.7-3.7l1.5,1.5L8,11.5z"/>
-      </symbol>
-
-      <symbol id="svg-icon-settings" viewBox="0 0 16 16">
-        <path d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
-      </symbol>
-
-      <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
-        <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
-      </symbol>
-
-      <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
-        <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
-      </symbol>
-
-      <symbol id="svg-icon-plus" viewBox="0 0 8 8">
-        <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
-      </symbol>
-
-      <symbol id="svg-icon-minus" viewBox="0 0 8 8">
-        <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
-      </symbol>
-
-    </svg>
-
     <div id="header">
       <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
       <section id="basic-info">
@@ -475,5 +439,45 @@
       <div class="contents"></div>
     </div>
 
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+
+      <symbol id="svg-icon-external-link" viewBox="0 0 8 8">
+        <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
+      </symbol>
+
+      <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
+        <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+      </symbol>
+
+      <symbol id="svg-icon-close" viewBox="0 0 12 16">
+        <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
+      </symbol>
+
+      <symbol id="svg-icon-v" viewBox="0 0 16 16">
+        <path d="M8,11.5L2.8,6.3l1.5-1.5L8,8.6l3.7-3.7l1.5,1.5L8,11.5z"/>
+      </symbol>
+
+      <symbol id="svg-icon-settings" viewBox="0 0 16 16">
+        <path d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
+      </symbol>
+
+      <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
+        <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+      </symbol>
+
+      <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
+        <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+      </symbol>
+
+      <symbol id="svg-icon-plus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
+      </symbol>
+
+      <symbol id="svg-icon-minus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
+      </symbol>
+
+    </svg>
+
   </body>
 </html>
diff --git a/edit/edit.js b/edit/edit.js
index d1faa08e..75b64ba9 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -48,6 +48,7 @@ define(require => {
     $('#preview-label').classList.toggle('hidden', !editor.style.id);
     $('#toc').onclick = e => editor.jumpToEditor([...$('#toc').children].indexOf(e.target));
 
+    await new Promise(requestAnimationFrame);
     (editor.isUsercss ? require('./source-editor') : require('./sections-editor'))();
     await editor.ready;
     editor.ready = true;
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index b4eb7573..23088756 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -97,7 +97,7 @@ define(require => function SectionsEditor() {
       dirty.clear('name');
       // FIXME: avoid recreating all editors?
       if (codeIsUpdated !== false) {
-        await initSections(newStyle.sections, {replace: true, pristine: true});
+        await initSections(newStyle.sections, {replace: true});
       }
       Object.assign(style, newStyle);
       updateHeader();
@@ -136,7 +136,7 @@ define(require => function SectionsEditor() {
     },
   });
 
-  editor.ready = initSections(style.sections, {pristine: true});
+  editor.ready = initSections(style.sections);
 
   /** @param {EditorSection} section */
   function fitToContent(section) {
@@ -153,7 +153,7 @@ define(require => function SectionsEditor() {
         return;
       }
       if (headerOffset == null) {
-        headerOffset = container.getBoundingClientRect().top;
+        headerOffset = container.getBoundingClientRect().top + scrollY | 0;
       }
       contentHeight += 9; // border & resize grip
       cm.off('update', resize);
@@ -490,7 +490,6 @@ define(require => function SectionsEditor() {
   async function initSections(src, {
     focusOn = 0,
     replace = false,
-    pristine = false,
   } = {}) {
     if (replace) {
       sections.forEach(s => s.remove(true));
@@ -523,7 +522,7 @@ define(require => function SectionsEditor() {
       if (si) forceRefresh = y < si.scrollY2 && (y += si.cms[i].parentHeight) > si.scrollY;
       insertSectionAfter(src[i], null, forceRefresh, si && si.cms[i]);
       setGlobalProgress(i, src.length);
-      if (pristine) dirty.clear();
+      dirty.clear();
       if (i === focusOn) sections[i].cm.focus();
     }
     if (!si) requestAnimationFrame(fitToAvailableSpace);