Add: refresh on view

background/style-manager.js

@@ -44,7 +44,6 @@ const styleManager = (() => {
       }
       let id;
       port.onMessage.addListener(data => {
-        console.log(data);
         if (!id) {
           id = data.id;
         }

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>

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);
+});

edit/sections-editor.js

@@ -547,24 +547,32 @@ function createSectionsEditor(style) {
     focusOn = 0,
     done
   }) {
-    if (!originalSections.length) {
+    let renderIndex = sections.length;
-      setGlobalProgress();
+    container.classList.add('hidden');
-      if (focusOn !== false) {
+    chunk();
-        sections[focusOn].cm.focus();
+
+    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) {
+      const t0 = performance.now();
-        done();
+      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) {