From fd5eeb4b812b48fb19859d391bfc9658f265113a Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Thu, 11 Oct 2018 19:00:05 +0800
Subject: [PATCH] Add: refresh on view

---
 background/style-manager.js |  1 -
 edit.html                   |  1 +
 edit/refresh-on-view.js     | 27 ++++++++++++++++++++++++++
 edit/sections-editor.js     | 38 ++++++++++++++++++++++---------------
 4 files changed, 51 insertions(+), 16 deletions(-)
 create mode 100644 edit/refresh-on-view.js

diff --git a/background/style-manager.js b/background/style-manager.js
index b5132ee9..f3e47619 100644
--- a/background/style-manager.js
+++ b/background/style-manager.js
@@ -44,7 +44,6 @@ const styleManager = (() => {
       }
       let id;
       port.onMessage.addListener(data => {
-        console.log(data);
         if (!id) {
           id = data.id;
         }
diff --git a/edit.html b/edit.html
index e02a6b4f..b5b183c2 100644
--- a/edit.html
+++ b/edit.html
@@ -93,6 +93,7 @@
     <script src="edit/colorpicker-helper.js"></script>
     <script src="edit/beautify.js"></script>
     <script src="edit/show-keymap-help.js"></script>
+    <script src="edit/refresh-on-view.js"></script>
 
     <script src="edit/source-editor.js"></script>
     <script src="edit/sections-editor.js"></script>
diff --git a/edit/refresh-on-view.js b/edit/refresh-on-view.js
new file mode 100644
index 00000000..0fa123d6
--- /dev/null
+++ b/edit/refresh-on-view.js
@@ -0,0 +1,27 @@
+/* global CodeMirror */
+/*
+Initialization of the multi-sections editor is slow if there are many editors
+e.g. https://github.com/openstyles/stylus/issues/178. So we only refresh the
+editor when they were scroll into view.
+*/
+'use strict';
+
+CodeMirror.defineExtension('refreshOnView', function () {
+  const cm = this;
+  if (typeof IntersectionObserver === 'undefined') {
+    // uh
+    cm.refresh();
+    return;
+  }
+  const wrapper = cm.display.wrapper;
+  const observer = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        // wrapper.style.visibility = 'visible';
+        cm.refresh();
+        observer.disconnect();
+      }
+    }
+  });
+  observer.observe(wrapper);
+});
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index b107361f..8d0e7ff7 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -547,24 +547,32 @@ function createSectionsEditor(style) {
     focusOn = 0,
     done
   }) {
-    if (!originalSections.length) {
-      setGlobalProgress();
-      if (focusOn !== false) {
-        sections[focusOn].cm.focus();
+    let renderIndex = sections.length;
+    container.classList.add('hidden');
+    chunk();
+
+    function chunk() {
+      if (!originalSections.length) {
+        setGlobalProgress();
+        if (focusOn !== false) {
+          sections[focusOn].cm.focus();
+        }
+        container.classList.remove('hidden');
+        for (; renderIndex < sections.length; renderIndex++) {
+          sections[renderIndex].cm.refreshOnView();
+        }
+        if (done) {
+          done();
+        }
+        return;
       }
-      if (done) {
-        done();
+      const t0 = performance.now();
+      while (originalSections.length && performance.now() - t0 < 100) {
+        insertSectionAfter(originalSections.shift());
       }
-      return;
+      setGlobalProgress(total - originalSections.length, total);
+      setTimeout(chunk);
     }
-    insertSectionAfter(originalSections.shift());
-    setGlobalProgress(total - originalSections.length, total);
-    setTimeout(initSection, 0, {
-      sections: originalSections,
-      total,
-      focusOn,
-      done
-    });
   }
 
   function removeSection(section) {