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
   }) {
+    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;
       }
+      const t0 = performance.now();
+      while (originalSections.length && performance.now() - t0 < 100) {
         insertSectionAfter(originalSections.shift());
+      }
       setGlobalProgress(total - originalSections.length, total);
-    setTimeout(initSection, 0, {
-      sections: originalSections,
-      total,
-      focusOn,
-      done
-    });
+      setTimeout(chunk);
+    }
   }
 
   function removeSection(section) {