mbeditor 0.13.1 → 0.14.0

data/app/assets/javascripts/mbeditor/components/ModelGraph.js

@@ -527,12 +527,8 @@ var ModelGraph = (function () {
     var searchOpen = _searchOpen[0], setSearchOpen = _searchOpen[1];
     var _highlight = React.useState(0);
     var highlight = _highlight[0], setHighlight = _highlight[1];
-    var _focused = React.useState(null);
-    var focused = _focused[0], setFocused = _focused[1];
     var _hovered = React.useState(null);
     var hovered = _hovered[0], setHovered = _hovered[1];
-    var _pointer = React.useState({ x: 0, y: 0 });
-    var pointer = _pointer[0], setPointer = _pointer[1];
     var dragRef = React.useRef(null);
     var svgRef = React.useRef(null);
 
@@ -586,17 +582,56 @@ var ModelGraph = (function () {
       if (sceneRef.current) sceneRef.current.classList.remove('mg-focus-mode');
     }, []);
 
+    // The edge <g> elements touching each model, indexed once per scene
+    // instead of a querySelectorAll('[data-from=...],[data-to=...]') on every
+    // mouseenter — that scan walked the whole scene continuously as the
+    // pointer crossed a dense diagram. sceneChildrenRef is kept current just
+    // below sceneChildren's own memo, so a stale index is rebuilt exactly
+    // when the scene actually does.
+    var sceneChildrenRef = React.useRef(null);
+    var edgeIndexRef = React.useRef({ scene: null, map: {} });
+    var edgesFor = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (!scene) return [];
+      if (edgeIndexRef.current.scene !== sceneChildrenRef.current) {
+        var map = {};
+        Array.prototype.forEach.call(scene.querySelectorAll('[data-from]'), function (el) {
+          var from = el.getAttribute('data-from'), to = el.getAttribute('data-to');
+          (map[from] = map[from] || []).push(el);
+          if (to !== from) (map[to] = map[to] || []).push(el);
+        });
+        edgeIndexRef.current = { scene: sceneChildrenRef.current, map: map };
+      }
+      return edgeIndexRef.current.map[name] || [];
+    }, []);
+
+    // getBoundingClientRect forces a synchronous layout, and hovering has just
+    // written classes onto a <g> holding thousands of elements, so the layout
+    // it forces is the whole scene: measured at 10 ms a tick on a 420-model
+    // graph, against 0.9 ms when the style is clean. The pane's own rect moves
+    // only when the window or the panel layout does, so read it once a frame.
+    var rectRef = React.useRef(null);
+    var paneRect = React.useCallback(function () {
+      var el = svgRef.current;
+      if (!el) return null;
+      if (!rectRef.current) {
+        rectRef.current = el.getBoundingClientRect();
+        window.requestAnimationFrame(function () { rectRef.current = null; });
+      }
+      return rectRef.current;
+    }, []);
+
     var moveHoverCard = React.useCallback(function (ev) {
       var card = hoverCardRef.current;
       var el = svgRef.current;
       if (!card || !el) return;
-      var rect = el.getBoundingClientRect();
+      var rect = paneRect();
       var x = ev.clientX - rect.left;
       var y = ev.clientY - rect.top;
       // Flip before the card would run off the pane rather than after.
       card.style.left = (x > rect.width - 300 ? x - 290 : x + 18) + 'px';
       card.style.top = Math.min(y + 18, Math.max(0, rect.height - 240)) + 'px';
-    }, []);
+    }, [paneRect]);
 
     var enterModel = React.useCallback(function (name, ev) {
       if (dragRef.current) return;   // panning, not inspecting
@@ -604,19 +639,38 @@ var ModelGraph = (function () {
       var scene = sceneRef.current;
       if (scene) {
         scene.classList.add('mg-focus-mode');
-        var sel = '[data-from="' + name + '"],[data-to="' + name + '"]';
-        litRef.current = Array.prototype.slice.call(scene.querySelectorAll(sel));
+        litRef.current = edgesFor(name);
         litRef.current.forEach(function (el) { el.classList.add('mg-lit'); });
       }
       setModelHover(name);
       moveHoverCard(ev);
-    }, [clearLit, moveHoverCard]);
+    }, [clearLit, moveHoverCard, edgesFor]);
 
     var leaveModel = React.useCallback(function () {
       clearLit();
       setModelHover(null);
     }, [clearLit]);
 
+    // Position is written straight onto the tooltip's DOM node, the way
+    // moveHoverCard does for the model card — routing every mousemove over an
+    // edge through React state re-ran the whole component body per pointer
+    // tick. edgePosRef holds the latest point for the tooltip's own initial
+    // inline style (read once on the render its `hovered` turns true), without
+    // itself triggering a render.
+    var edgeTooltipRef = React.useRef(null);
+    var edgePosRef = React.useRef({ x: 0, y: 0 });
+    var moveEdgeTooltip = React.useCallback(function (ev) {
+      var rect = paneRect();
+      if (!rect) return;
+      var x = ev.clientX - rect.left;
+      var y = ev.clientY - rect.top;
+      edgePosRef.current = { x: x, y: y };
+      var card = edgeTooltipRef.current;
+      if (!card) return;
+      card.style.left = (x > rect.width - 260 ? x - 240 : x + 14) + 'px';
+      card.style.top = (y + 14) + 'px';
+    }, [paneRect]);
+
     // Frame the whole graph on load. Without this the view starts at the
     // top-left of a canvas much larger than the pane and the diagram looks
     // empty until you go looking for it.
@@ -652,6 +706,19 @@ var ModelGraph = (function () {
 
     React.useEffect(function () { fitToPane(); }, [fitToPane]);
 
+    // `focused` used to be React state read inside sceneChildren's className,
+    // but centring a model is also how a click and a search pick land, and
+    // that made every centre rebuild all ~3,500 SVG elements and their event
+    // closures. Applied to the mounted DOM instead, the same way
+    // enterModel/litRef apply the hover highlight above.
+    var focusedRef = React.useRef(null);
+    var applyFocus = React.useCallback(function (name) {
+      var scene = sceneRef.current;
+      if (focusedRef.current) focusedRef.current.classList.remove('mg-focused');
+      focusedRef.current = scene ? scene.querySelector('[data-model="' + name + '"]') : null;
+      if (focusedRef.current) focusedRef.current.classList.add('mg-focused');
+    }, []);
+
     // Bring one model to the middle of the pane at the current zoom, and mark
     // it so it's findable in a dense graph once it gets there.
     var centreOn = React.useCallback(function (name) {
@@ -660,7 +727,7 @@ var ModelGraph = (function () {
       if (!el || !pos) return;
       var rect = el.getBoundingClientRect();
       var h = nodeHeight(pos.model);
-      setFocused(name);
+      applyFocus(name);
       setView(function (v) {
         // Close half the distance to actual size, so a model found while
         // fitted (often ~0.3) lands readable. Never zooms out: if you were
@@ -672,7 +739,7 @@ var ModelGraph = (function () {
           y: rect.height / 2 - (pos.y + h / 2) * k
         };
       });
-    }, [placed]);
+    }, [placed, applyFocus]);
 
     // Same mounting problem as the wheel listener: the fit effect can run
     // before the SVG exists and not again afterwards. Kept current so the
@@ -707,22 +774,6 @@ var ModelGraph = (function () {
       svgRef.current = el;
       if (!el) return;
 
-      // getBoundingClientRect forces a synchronous layout, and we had just
-      // written a new transform onto a <g> holding thousands of elements — so
-      // reading it per wheel tick made the browser re-lay-out the entire scene
-      // before the handler could continue. Measured at 27 ms a tick on a
-      // 300-model graph. The pane's own rect only changes when the window or
-      // the panel layout does, so cache it and refresh once per frame.
-      var rectRef = { current: null };
-      var invalidateRect = function () { rectRef.current = null; };
-      var paneRect = function () {
-        if (!rectRef.current) {
-          rectRef.current = el.getBoundingClientRect();
-          window.requestAnimationFrame(invalidateRect);
-        }
-        return rectRef.current;
-      };
-
       var onWheel = function (e) {
         e.preventDefault();
         var rect = paneRect();
@@ -739,7 +790,7 @@ var ModelGraph = (function () {
 
       // After layout, so the pane has a measurable size to fit into.
       window.requestAnimationFrame(function () { fitRef.current(); });
-    }, []);
+    }, [paneRect]);
 
     // Memoised so hovering a model does not rebuild every box and edge.
     // The highlight itself is applied by toggling DOM classes; only the
@@ -790,10 +841,7 @@ var ModelGraph = (function () {
                   if (line) line.classList.add('mg-edge-hovered');
                   setHovered({ index: i, edge: e });
                 },
-                onMouseMove: function (ev) {
-                  var rect = svgRef.current.getBoundingClientRect();
-                  setPointer({ x: ev.clientX - rect.left, y: ev.clientY - rect.top });
-                },
+                onMouseMove: moveEdgeTooltip,
                 onMouseLeave: function (ev) {
                   var line = ev.currentTarget.nextElementSibling;
                   if (line) line.classList.remove('mg-edge-hovered');
@@ -818,7 +866,8 @@ var ModelGraph = (function () {
               'g',
               {
                 key: m.name,
-                className: 'mg-node' + (focused === m.name ? ' mg-focused' : ''),
+                'data-model': m.name,
+                className: 'mg-node',
                 transform: 'translate(' + pos.x + ',' + pos.y + ')',
                 onMouseEnter: function (ev) { enterModel(m.name, ev); },
                 onMouseMove: function (ev) { moveHoverCard(ev); },
@@ -887,7 +936,12 @@ var ModelGraph = (function () {
             );
           })
       ];
-    }, [placed, graph, focused]);
+    }, [placed, graph]);
+    // Kept current so edgesFor (declared earlier, used from enterModel) can
+    // detect a scene rebuild without itself listing sceneChildren as a
+    // dependency — that would rebuild enterModel, and everything closing
+    // over it, on every scene rebuild too.
+    sceneChildrenRef.current = sceneChildren;
 
     if (loading) {
       return React.createElement('div', { className: 'ide-model-graph-empty' }, 'Building the model graph…');
@@ -1058,12 +1112,15 @@ var ModelGraph = (function () {
       hovered && React.createElement(
         'div',
         {
+          ref: edgeTooltipRef,
           className: 'mg-tooltip',
           // Offset from the cursor, and flipped left near the right edge so
-          // the tooltip never runs off the pane.
+          // the tooltip never runs off the pane. Only the initial placement is
+          // computed here — moveEdgeTooltip writes the DOM node directly as
+          // the pointer moves, so this style is live for one frame at most.
           style: {
-            left: pointer.x + (svgRef.current && pointer.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
-            top: (pointer.y + 14) + 'px'
+            left: edgePosRef.current.x + (svgRef.current && edgePosRef.current.x > svgRef.current.clientWidth - 260 ? -240 : 14) + 'px',
+            top: (edgePosRef.current.y + 14) + 'px'
           }
         },
         React.createElement('div', { className: 'mg-tooltip-title' },

data/app/assets/javascripts/mbeditor/components/ProblemsPanel.js

@@ -44,6 +44,32 @@ var ProblemsPanel = (function () {
     return text.length > CODE_PREVIEW_LIMIT ? text.slice(0, CODE_PREVIEW_LIMIT) + '…' : text;
   }
 
+  // VS Code-style file group header: chevron, file-type icon, basename, then
+  // the containing directory in a dimmer colour. `path` is workspace-relative.
+  function fileGroupName(path) {
+    var slash = path.lastIndexOf('/');
+    return {
+      base: slash === -1 ? path : path.slice(slash + 1),
+      dir: slash === -1 ? '' : path.slice(0, slash)
+    };
+  }
+
+  function renderFileGroupHeader(path, count) {
+    var parts = fileGroupName(path);
+    return React.createElement(
+      'div',
+      { className: 'ide-problems-file-name' },
+      React.createElement('i', { className: 'fas fa-chevron-down', 'aria-hidden': 'true' }),
+      React.createElement('i', {
+        className: (window.getFileIcon ? window.getFileIcon(parts.base) : 'far fa-file-code'),
+        'aria-hidden': 'true'
+      }),
+      React.createElement('span', null, parts.base),
+      parts.dir && React.createElement('span', { className: 'ide-problems-dir' }, parts.dir),
+      React.createElement('span', { className: 'ide-problems-file-count' }, count)
+    );
+  }
+
   // Reading markers means walking every model, so callers that only want the
   // counts share this one pass. Exposed on the component for the status bar.
   function collect() {
@@ -111,6 +137,9 @@ var ProblemsPanel = (function () {
 
   var Panel = function ProblemsPanelComponent(_ref) {
     var onClose = _ref.onClose;
+    // Height is owned by MbeditorApp: the gutter that drags it lives between
+    // the editor card and this drawer, not inside it.
+    var height = _ref.height;
     var onOpenFile = _ref.onOpenFile;
     // Called after `-a` has rewritten files on disk, so the app can re-read
     // every open tab. Nothing else would: the write came from a subprocess,
@@ -226,34 +255,6 @@ var ProblemsPanel = (function () {
       });
     };
 
-    var MIN_HEIGHT = 120;
-    var _height = React.useState(function () {
-      var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
-      return (saved && saved >= MIN_HEIGHT) ? saved : 240;
-    });
-    var height = _height[0], setHeight = _height[1];
-    var heightRef = React.useRef(height);
-    heightRef.current = height;
-
-    // Same delta-based resize as the log drawer.
-    var onResizeMouseDown = function (e) {
-      e.preventDefault();
-      var startY = e.clientY;
-      var startHeight = heightRef.current;
-      var onMove = function (ev) {
-        var vh = window.innerHeight || document.documentElement.clientHeight || 0;
-        var maxH = vh > 0 ? Math.round(vh * 0.85) : Infinity;
-        setHeight(Math.min(maxH, Math.max(MIN_HEIGHT, startHeight + (startY - ev.clientY))));
-      };
-      var onUp = function () {
-        document.removeEventListener('mousemove', onMove);
-        document.removeEventListener('mouseup', onUp);
-        window.localStorage.setItem('mbeditorProblemsHeight', String(heightRef.current));
-      };
-      document.addEventListener('mousemove', onMove);
-      document.addEventListener('mouseup', onUp);
-    };
-
     React.useEffect(function () {
       if (!window.monaco || !window.monaco.editor) return;
       // Debounced for the same reason the status-bar tally is: markers change
@@ -314,16 +315,11 @@ var ProblemsPanel = (function () {
     return React.createElement(
       'div',
       { className: 'ide-problems-drawer', style: { height: height + 'px' } },
-      React.createElement('div', {
-        className: 'ide-problems-resize',
-        title: 'Drag to resize',
-        onMouseDown: onResizeMouseDown
-      }),
       React.createElement(
         'div',
         { className: 'ide-problems-header' },
-        React.createElement('i', { className: 'fas fa-bug' }),
         React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        React.createElement('span', { className: 'ide-problems-total-pill' }, total + wsCounts.error + wsCounts.warning + wsCounts.info),
         // No prose summary: the severity chips below carry the same three
         // counts, and restating them was the longest thing in the header.
         React.createElement(
@@ -340,7 +336,7 @@ var ProblemsPanel = (function () {
               {
                 key: s.kind,
                 type: 'button',
-                className: 'ide-problems-sev-chip ide-problems-sev-' + s.kind + (on ? ' is-on' : ''),
+                className: 'ide-problems-sev-chip' + (on ? ' is-on' : ''),
                 title: (on ? 'Hide' : 'Show') + ' ' + SEVERITY_LABEL[s.kind].toLowerCase() + 's',
                 'aria-pressed': on ? 'true' : 'false',
                 onClick: function () { toggleSeverity(s.kind); }
@@ -350,19 +346,25 @@ var ProblemsPanel = (function () {
             );
           })
         ),
+        React.createElement('input', {
+          className: 'ide-problems-filter',
+          type: 'text',
+          placeholder: 'Filter…',
+          value: filter,
+          onChange: function (e) { setFilter(e.target.value); }
+        }),
         React.createElement(
           'div',
           { className: 'ide-problems-actions' },
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !!running,
             title: 'Run rubocop over the whole workspace',
             onClick: function () { runRubocop('check'); }
           },
-            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' }),
-            React.createElement('span', null, ' RuboCop')),
+            React.createElement('i', { className: running === 'check' ? 'fas fa-spinner fa-spin' : 'fas fa-play' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             // Nothing to correct until a run says so, and rerunning `-a` on a
             // clean tree is a slow no-op.
             disabled: !!running || !workspace || !workspace.correctable,
@@ -373,28 +375,19 @@ var ProblemsPanel = (function () {
                 : 'Run RuboCop first',
             onClick: function () { runRubocop('autocorrect'); }
           },
-            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' }),
-            React.createElement('span', null, ' Fix')),
+            React.createElement('i', { className: running === 'autocorrect' ? 'fas fa-spinner fa-spin' : 'fas fa-magic' })),
           React.createElement('button', {
-            type: 'button', className: 'ide-problems-btn',
+            type: 'button', className: 'ide-icon-btn',
             disabled: !workspace || !(workspace.files || []).length,
             title: workspace && (workspace.files || []).length
               ? 'Open all ' + workspace.files.length + ' file(s) with offenses'
               : 'Run RuboCop first',
             onClick: openAllOffending
           },
-            React.createElement('i', { className: 'fas fa-folder-open' }),
-            React.createElement('span', null, ' Open all'))
+            React.createElement('i', { className: 'fas fa-folder-open' }))
         ),
-        React.createElement('input', {
-          className: 'ide-problems-filter',
-          type: 'text',
-          placeholder: 'Filter…',
-          value: filter,
-          onChange: function (e) { setFilter(e.target.value); }
-        }),
         React.createElement('button', {
-          type: 'button', className: 'ide-problems-btn',
+          type: 'button', className: 'ide-icon-btn',
           title: 'Close', onClick: onClose
         }, React.createElement('i', { className: 'fas fa-times' }))
       ),
@@ -412,13 +405,7 @@ var ProblemsPanel = (function () {
                   return React.createElement(
                     'div',
                     { className: 'ide-problems-file', key: 'ws:' + file.path },
-                    React.createElement(
-                      'div',
-                      { className: 'ide-problems-file-name' },
-                      React.createElement('i', { className: 'fas fa-gavel', 'aria-hidden': 'true' }),
-                      ' ' + file.path,
-                      React.createElement('span', { className: 'ide-problems-file-count' }, file.offenses.length)
-                    ),
+                    renderFileGroupHeader(file.path, file.offenses.length),
                     file.offenses.map(function (o, i) {
                       var kind = COP_SEVERITY_KIND[o.severity] || 'info';
                       return React.createElement(
@@ -502,12 +489,7 @@ var ProblemsPanel = (function () {
                 return React.createElement(
                   'div',
                   { className: 'ide-problems-file', key: entry.path },
-                  React.createElement(
-                    'div',
-                    { className: 'ide-problems-file-name' },
-                    entry.path,
-                    React.createElement('span', { className: 'ide-problems-file-count' }, entry.markers.length)
-                  ),
+                  renderFileGroupHeader(entry.path, entry.markers.length),
                   entry.markers.map(function (item, index) {
                     var marker = item.marker;
                     var kind = SEVERITY_KIND[marker.severity] || 'info';

data/app/assets/javascripts/mbeditor/components/QuickOpenDialog.js

@@ -65,10 +65,19 @@ function recentRanks() {
 // in — a typo'd or transposed query hits nothing literally, so an exact match
 // can never be demoted by loosening the index search.
 var FUZZY_ONLY = 4;
+
+// CamelCase -> snake_case, so a query like "ThemeController" ranks against
+// "theme_controller.rb" the same way "theme_controller" would. A no-op
+// (beyond lowercasing) for queries with no lower-to-upper transition, so
+// non-CamelCase ranking is unchanged.
+function toSnakeCase(q) {
+  return (q || '').replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
+}
+
 function getMatchRelevance(result, q) {
   if (!q) return FUZZY_ONLY;
   var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
-  var lq = q.toLowerCase();
+  var lq = toSnakeCase(q);
   if (name === lq)            return 0;
   if (name.slice(0, lq.length) === lq) return 1;
   if (name.indexOf(lq) >= 0)  return 2;
@@ -194,7 +203,17 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     // path in the workspace ran on every keystroke, between the keypress and
     // the character appearing.
     var timer = setTimeout(function () {
-      var filtered = rankResults(SearchService.searchFiles(query), query, showFolders);
+      var hits = SearchService.searchFiles(query);
+      // CamelCase query, e.g. "ThemeController": also search its snake_case
+      // form so it finds theme_controller.rb, whose index terms are snake_case.
+      var snake = toSnakeCase(query);
+      if (snake !== query.toLowerCase()) {
+        var seen = new Set(hits.map(function (r) { return r.path; }));
+        SearchService.searchFiles(snake).forEach(function (r) {
+          if (!seen.has(r.path)) { seen.add(r.path); hits.push(r); }
+        });
+      }
+      var filtered = rankResults(hits, query, showFolders);
       setResults(filtered.slice(0, 200));
       setSelectedIndex(0);
     }, 120);
@@ -291,7 +310,7 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     return React.createElement(
       'div',
       { className: 'quick-open-section' },
-      React.createElement('div', { className: 'quick-open-section-header' },
+      React.createElement('div', { className: 'quick-open-section-header quick-open-section-header-muted' },
         React.createElement('i', { className: 'fas fa-history', style: { marginRight: '6px', fontSize: '10px' } }),
         'Recent Searches'
       ),
@@ -303,6 +322,8 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     var recentFiles = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
       ? TabManager.getRecentFiles() : [];
     if (recentFiles.length === 0) return null;
+    // No section header here (unlike Favourites/Recent Searches) — VS Code
+    // marks each row inline with a trailing "recently opened" label instead.
     var rows = recentFiles.map(function (entry) {
       var path = entry.path;
       var name = entry.name || (path.split('/').pop());
@@ -320,16 +341,13 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
           React.createElement('div', { className: 'quick-open-result-name' }, name),
           React.createElement('div', { className: 'quick-open-result-path' }, path)
         ),
+        React.createElement('span', { className: 'quick-open-recent-label' }, 'recently opened'),
         renderStarBtn(path)
       );
     });
     return React.createElement(
       'div',
       { className: 'quick-open-section' },
-      React.createElement('div', { className: 'quick-open-section-header' },
-        React.createElement('i', { className: 'fas fa-clock', style: { marginRight: '6px', fontSize: '10px' } }),
-        'Recently Opened'
-      ),
       rows
     );
   }
@@ -349,7 +367,7 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
           ref: inputRef,
           type: 'text',
           className: 'quick-open-input',
-          placeholder: 'Search files by name (Ctrl+P)…',
+          placeholder: 'Search files by name',
           value: query,
           onChange: function (e) { setQuery(e.target.value); },
           onKeyDown: handleKeyDown