mbeditor 0.12.9 → 0.13.1

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

@@ -682,6 +682,13 @@ var ModelGraph = (function () {
     var centreRef = React.useRef(centreOn);
     centreRef.current = centreOn;
 
+    // Same reason as centreRef: MbeditorApp passes a fresh closure on every one
+    // of its renders, and listing onOpenModel in the scene memo's deps rebuilt
+    // all ~10,000 SVG elements each time — once per keystroke, whenever this
+    // tab happened to be open.
+    var openModelRef = React.useRef(onOpenModel);
+    openModelRef.current = onOpenModel;
+
     var fitRef = React.useRef(fitToPane);
     fitRef.current = fitToPane;
 
@@ -762,7 +769,6 @@ var ModelGraph = (function () {
             var b = placed.positions[e.to];
             if (!a || !b || e.from === e.to) return null;
             var d = edgePath(a, b);
-            var isHovered = hovered && hovered.index === i;
             return React.createElement(
               'g',
               // Tagged so a node hover can find its own edges with one DOM query
@@ -774,16 +780,29 @@ var ModelGraph = (function () {
               React.createElement('path', {
                 d: d,
                 className: 'mg-edge-hit',
-                onMouseEnter: function () { setHovered({ index: i, edge: e }); },
+                // The lit class goes on the DOM node directly, the way
+                // enterModel/litRef do. `hovered` is React state read from
+                // inside this memo, and it is deliberately not a dep — putting
+                // it there would rebuild the whole scene on every edge hover —
+                // so a className derived from it never updated at all.
+                onMouseEnter: function (ev) {
+                  var line = ev.currentTarget.nextElementSibling;
+                  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 });
                 },
-                onMouseLeave: function () { setHovered(null); }
+                onMouseLeave: function (ev) {
+                  var line = ev.currentTarget.nextElementSibling;
+                  if (line) line.classList.remove('mg-edge-hovered');
+                  setHovered(null);
+                }
               }),
               React.createElement('path', {
                 d: d,
-                className: 'mg-edge ' + (MACRO_CLASS[e.macro] || '') + (isHovered ? ' mg-edge-hovered' : ''),
+                className: 'mg-edge ' + (MACRO_CLASS[e.macro] || ''),
                 markerEnd: 'url(#mg-arrow)'
               })
             );
@@ -831,7 +850,7 @@ var ModelGraph = (function () {
                   onClick: function (ev) {
                     ev.stopPropagation();
                     if (dragRef.current && dragRef.current.moved) return;
-                    if (onOpenModel) onOpenModel(m);
+                    if (openModelRef.current) openModelRef.current(m);
                   }
                 },
                 React.createElement('title', null, 'Open the full schema for ' + m.name),
@@ -868,7 +887,7 @@ var ModelGraph = (function () {
             );
           })
       ];
-    }, [placed, graph, focused, onOpenModel]);
+    }, [placed, graph, focused]);
 
     if (loading) {
       return React.createElement('div', { className: 'ide-model-graph-empty' }, 'Building the model graph…');

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

@@ -23,6 +23,13 @@ var ProblemsPanel = (function () {
     info: 'fa-info-circle'
   };
   var SEVERITY_LABEL = { error: 'Error', warning: 'Warning', info: 'Info' };
+  // RuboCop's own severity names (the /rubocop JSON carries strings, not the
+  // numeric Monaco severities the markers use).
+  var COP_SEVERITY_KIND = {
+    fatal: 'error', error: 'error', warning: 'warning',
+    convention: 'info', refactor: 'info', info: 'info'
+  };
+
   // Long enough to recognise the statement, short enough not to push the
   // location off the end of the row.
   var CODE_PREVIEW_LIMIT = 120;
@@ -82,14 +89,33 @@ var ProblemsPanel = (function () {
 
   // The status bar deliberately tallies only errors and warnings: a count that
   // included every convention offense would be a number nobody acts on.
+  //
+  // Same scope as collect(), none of its work: the full walk sorts every marker
+  // and reads a source line per marker to build previews the caller then throws
+  // away, and it runs on every marker change — for a JS file, every keystroke.
   function counts() {
-    var all = collect();
-    return { errors: all.errors.length, warnings: all.warnings.length };
+    var monaco = window.monaco;
+    if (!monaco || !monaco.editor) return { errors: 0, warnings: 0 };
+
+    var errors = 0;
+    var warnings = 0;
+    monaco.editor.getModels().forEach(function (model) {
+      if (!model._mbeditorPath || model.isDisposed()) return;
+      monaco.editor.getModelMarkers({ resource: model.uri }).forEach(function (m) {
+        if (m.severity === SEVERITY_ERROR) errors += 1;
+        else if (m.severity === SEVERITY_WARNING) warnings += 1;
+      });
+    });
+    return { errors: errors, warnings: warnings };
   }
 
   var Panel = function ProblemsPanelComponent(_ref) {
     var onClose = _ref.onClose;
     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,
+    // not from the editor, so the buffers and their markers are stale.
+    var onFilesRewritten = _ref.onFilesRewritten;
 
     var _problems = React.useState(collect);
     var problems = _problems[0], setProblems = _problems[1];
@@ -156,6 +182,50 @@ var ProblemsPanel = (function () {
       if (FileService.clearExceptions) FileService.clearExceptions()["catch"](function () {});
     };
 
+    // Whole-workspace rubocop. Separate from `problems` above: markers only
+    // exist for models Monaco has loaded, so this is the only view that can
+    // see a file nobody has opened.
+    var _workspace = React.useState(null);
+    var workspace = _workspace[0], setWorkspace = _workspace[1];
+    var _running = React.useState(null);
+    var running = _running[0], setRunning = _running[1];
+
+    var runRubocop = function (mode) {
+      if (running) return;
+      setRunning(mode);
+      FileService.runRubocop(mode)
+        .then(function (data) {
+          setWorkspace(data);
+          if (mode === 'autocorrect' && data && data.ok && onFilesRewritten) onFilesRewritten();
+        })
+        ["catch"](function (e) {
+          var res = e && e.response && e.response.data;
+          setWorkspace(res || { ok: false, error: (e && e.message) || 'RuboCop failed', files: [] });
+        })
+        .then(function () { setRunning(null); });
+    };
+
+    // The workspace list is a snapshot of one run against one working tree.
+    // After a checkout it describes files that may no longer have those
+    // offenses — or no longer exist — so it is dropped rather than left to
+    // look current.
+    React.useEffect(function () {
+      var onBranchChanged = function () { setWorkspace(null); };
+      window.addEventListener('mbeditor:branch-changed', onBranchChanged);
+      return function () { window.removeEventListener('mbeditor:branch-changed', onBranchChanged); };
+    }, []);
+
+    var openAllOffending = function () {
+      if (!workspace || !onOpenFile) return;
+      var files = workspace.files || [];
+      // Each open is a Monaco model plus a tab; a default-config run over a
+      // real app returns hundreds, which would wedge the editor silently.
+      if (files.length > 20 && !window.confirm('Open ' + files.length + ' files?')) return;
+      files.forEach(function (f) {
+        onOpenFile(f.path, (f.offenses[0] && f.offenses[0].line) || 1, 1);
+      });
+    };
+
     var MIN_HEIGHT = 120;
     var _height = React.useState(function () {
       var saved = parseInt(window.localStorage.getItem('mbeditorProblemsHeight'), 10);
@@ -186,10 +256,22 @@ var ProblemsPanel = (function () {
 
     React.useEffect(function () {
       if (!window.monaco || !window.monaco.editor) return;
-      var refresh = function () { setProblems(collect()); };
+      // Debounced for the same reason the status-bar tally is: markers change
+      // on every keystroke in a JS file, and collect() walks every model.
+      var timer = null;
+      var refresh = function () {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(function () {
+          timer = null;
+          setProblems(collect());
+        }, 250);
+      };
       var sub = window.monaco.editor.onDidChangeMarkers(refresh);
-      refresh();
-      return function () { sub.dispose(); };
+      setProblems(collect());
+      return function () {
+        if (timer) clearTimeout(timer);
+        sub.dispose();
+      };
     }, []);
 
     var needle = filter.trim().toLowerCase();
@@ -208,6 +290,25 @@ var ProblemsPanel = (function () {
         }).filter(function (entry) { return entry.markers.length > 0; })
       : problems.byFile;
 
+    // The workspace run and the marker set are different scopes, but they render
+    // in one panel under one set of severity chips. Counting only the markers
+    // made the header disagree with its own body: click RuboCop, get 400
+    // offenses listed under chips reading 0 / 0 / 0, and hiding "warning" left
+    // every workspace warning on screen. The chips describe what the panel is
+    // showing, so they have to cover both — and the filter has to reach both.
+    var wsFiles = (workspace && workspace.files) || [];
+    var wsCounts = { error: 0, warning: 0, info: 0 };
+    var wsShown = [];
+    wsFiles.forEach(function (file) {
+      var kept = [];
+      file.offenses.forEach(function (o) {
+        var kind = COP_SEVERITY_KIND[o.severity] || 'info';
+        wsCounts[kind] += 1;
+        if (severities[kind]) kept.push(o);
+      });
+      if (kept.length) wsShown.push({ path: file.path, offenses: kept });
+    });
+
     var total = problems.errors.length + problems.warnings.length + problems.infos.length;
 
     return React.createElement(
@@ -229,9 +330,9 @@ var ProblemsPanel = (function () {
           'div',
           { className: 'ide-problems-severity-filter' },
           [
-            { kind: 'error', count: problems.errors.length },
-            { kind: 'warning', count: problems.warnings.length },
-            { kind: 'info', count: problems.infos.length }
+            { kind: 'error', count: problems.errors.length + wsCounts.error },
+            { kind: 'warning', count: problems.warnings.length + wsCounts.warning },
+            { kind: 'info', count: problems.infos.length + wsCounts.info }
           ].map(function (s) {
             var on = severities[s.kind];
             return React.createElement(
@@ -249,6 +350,42 @@ var ProblemsPanel = (function () {
             );
           })
         ),
+        React.createElement(
+          'div',
+          { className: 'ide-problems-actions' },
+          React.createElement('button', {
+            type: 'button', className: 'ide-problems-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('button', {
+            type: 'button', className: 'ide-problems-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,
+            title: workspace && workspace.correctable
+              ? 'Safe-autocorrect ' + workspace.correctable + ' offense(s) and rerun'
+              : workspace
+                ? 'Nothing left that safe autocorrect can fix'
+                : '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('button', {
+            type: 'button', className: 'ide-problems-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('input', {
           className: 'ide-problems-filter',
           type: 'text',
@@ -264,6 +401,48 @@ var ProblemsPanel = (function () {
       React.createElement(
         'div',
         { className: 'ide-problems-body' },
+        workspace && React.createElement(
+          'div',
+          { className: 'ide-problems-workspace' },
+          workspace.error
+            ? React.createElement('div', { className: 'ide-problems-empty' }, 'RuboCop: ' + workspace.error)
+            : wsFiles.length === 0
+              ? React.createElement('div', { className: 'ide-problems-empty' }, 'RuboCop found no offenses in the workspace')
+              : wsShown.map(function (file) {
+                  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)
+                    ),
+                    file.offenses.map(function (o, i) {
+                      var kind = COP_SEVERITY_KIND[o.severity] || 'info';
+                      return React.createElement(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'ide-problems-item ide-problems-item-' + kind,
+                          key: 'ws:' + file.path + ':' + i,
+                          title: o.message + '\n' + file.path + ':' + o.line,
+                          'aria-label': SEVERITY_LABEL[kind] + ': ' + o.message + ', ' + file.path + ' line ' + o.line,
+                          onClick: function () { if (onOpenFile) onOpenFile(file.path, o.line, o.column); }
+                        },
+                        React.createElement('i', {
+                          className: 'fas ' + SEVERITY_ICON[kind] + ' ide-problems-icon', 'aria-hidden': 'true'
+                        }),
+                        React.createElement('span', { className: 'ide-problems-msg' }, o.message),
+                        React.createElement('span', { className: 'ide-problems-source' }, o.copName),
+                        o.correctable && React.createElement('span', { className: 'ide-problems-source' }, 'fixable'),
+                        React.createElement('span', { className: 'ide-problems-loc' }, '[' + o.line + ', ' + o.column + ']')
+                      );
+                    })
+                  );
+                })
+        ),
         exceptions.length > 0 && React.createElement(
           'div',
           { className: 'ide-problems-file ide-problems-exceptions' },
@@ -302,6 +481,7 @@ var ProblemsPanel = (function () {
                     type: 'button',
                     className: 'ide-problems-item ide-problems-frame',
                     key: ex.id + ':' + i,
+                    title: 'Open ' + f.file + ':' + f.line,
                     'aria-label': 'Open ' + f.file + ' line ' + f.line,
                     onClick: function () { if (onOpenFile) onOpenFile(f.file, f.line, 1); }
                   },
@@ -312,7 +492,7 @@ var ProblemsPanel = (function () {
             );
           })
         ),
-        total === 0 && exceptions.length > 0
+        total === 0 && (exceptions.length > 0 || workspace)
           ? null
           : total === 0
           ? React.createElement('div', { className: 'ide-problems-empty' }, 'No problems in the open files')
@@ -340,6 +520,10 @@ var ProblemsPanel = (function () {
                         type: 'button',
                         className: 'ide-problems-item ide-problems-item-' + kind,
                         key: entry.path + ':' + marker.startLineNumber + ':' + index,
+                        // The message ellipsises in a short panel, so the full
+                        // text is on hover as well as on the label.
+                        title: marker.message + '\n' + entry.path + ':' + marker.startLineNumber +
+                          (item.code ? ' — ' + item.code : ''),
                         'aria-label': SEVERITY_LABEL[kind] + ': ' + marker.message +
                           ', ' + entry.path + ' line ' + marker.startLineNumber +
                           (item.code ? ', source: ' + item.code : ''),

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

@@ -23,6 +23,100 @@ function saveFavourites(list) {
   try { localStorage.setItem(FAVS_KEY, JSON.stringify(list)); } catch (e) {}
 }
 
+// ── Ranking ────────────────────────────────────────────────────────────────
+// Module scope, not component scope, so `rankResults` can be exercised without
+// rendering — see script/check-quick-open-ranking.mjs.
+
+// Priority tier for a file path: lower = shown first.
+// Order: controller > model > helper > concern > view > job > other > noise
+function getFilePriority(path) {
+  var p = (path || '').toLowerCase();
+  if (p.indexOf('/controllers/') >= 0) return 1;
+  if (p.indexOf('/models/')      >= 0) return 2;
+  if (p.indexOf('/helpers/')     >= 0) return 3;
+  if (p.indexOf('/concerns/')    >= 0) return 4;
+  if (p.indexOf('/views/')       >= 0) return 5;
+  if (p.indexOf('/jobs/')        >= 0) return 6;
+  // Deprioritise: migrations, schema, compiled assets, vendor, lock files
+  if (p.indexOf('/migrate/')  >= 0 || p.indexOf('schema.rb') >= 0) return 90;
+  if (p.indexOf('/public/')   >= 0 || p.indexOf('/vendor/')   >= 0) return 91;
+  if (p.slice(-7)  === '.min.js' || p.slice(-8) === '.min.css' ||
+      p.slice(-4)  === '.map'    || p.slice(-5) === '.lock')        return 92;
+  return 50;
+}
+
+// Recently opened files, most recent first, as a path -> rank lookup. Built
+// once per query rather than per comparison, since the sort calls this for
+// every pair.
+function recentRanks() {
+  var ranks = {};
+  var recent = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
+    ? TabManager.getRecentFiles() : [];
+  recent.forEach(function (entry, index) {
+    var path = typeof entry === 'string' ? entry : (entry && entry.path);
+    if (path && !(path in ranks)) ranks[path] = index;
+  });
+  return ranks;
+}
+
+// Match relevance within a priority tier:
+//   exact basename > basename prefix > basename substring > path substring > fuzzy-only.
+// FUZZY_ONLY is the bucket everything MiniSearch matched approximately lands
+// 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;
+function getMatchRelevance(result, q) {
+  if (!q) return FUZZY_ONLY;
+  var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
+  var lq = q.toLowerCase();
+  if (name === lq)            return 0;
+  if (name.slice(0, lq.length) === lq) return 1;
+  if (name.indexOf(lq) >= 0)  return 2;
+  if ((result.path || '').toLowerCase().indexOf(lq) >= 0) return 3;
+  return FUZZY_ONLY;
+}
+
+// Filter SearchService hits by type and order them for display.
+// Precedence:
+//   1. files before folders — a folder is never what Ctrl+P is for, and as a
+//      tier below match quality an exactly-named folder used to outrank every
+//      file that matched
+//   2. match quality (see getMatchRelevance), so a worse match can never jump
+//      the queue however recently it was opened
+//   3. MiniSearch's own score, but only within the fuzzy-only bucket: nothing
+//      there matched literally, so edit distance is the only signal for which
+//      near-miss the user meant
+//   4. how recently the file was opened, most recent first
+//   5. the static file-type tier (controller > model > … > noise)
+//
+// Recency sits above the type tier deliberately: when two files match a query
+// equally well, the one you were just working in is almost always the one you
+// meant, and that beats a guess made from the directory name. Files never
+// opened all tie here and fall through to the type tier, which is what orders
+// the bulk of a cold result list.
+//
+// JS sort is stable in modern engines, so MiniSearch's own relevance order
+// remains the final tiebreaker.
+function rankResults(res, query, showFolders) {
+  var filtered = showFolders ? res.slice() : res.filter(function (r) { return r.type !== 'dir'; });
+  var ranks = recentRanks();
+  var NEVER_OPENED = Infinity;
+  filtered.sort(function (a, b) {
+    var aDir = a.type === 'dir' ? 1 : 0;
+    var bDir = b.type === 'dir' ? 1 : 0;
+    if (aDir !== bDir) return aDir - bDir;
+    var aRelevance = getMatchRelevance(a, query);
+    var bRelevance = getMatchRelevance(b, query);
+    if (aRelevance !== bRelevance) return aRelevance - bRelevance;
+    if (aRelevance === FUZZY_ONLY && a.score !== b.score) return (b.score || 0) - (a.score || 0);
+    var aRecent = a.path in ranks ? ranks[a.path] : NEVER_OPENED;
+    var bRecent = b.path in ranks ? ranks[b.path] : NEVER_OPENED;
+    if (aRecent !== bRecent) return aRecent - bRecent;
+    return getFilePriority(a.path) - getFilePriority(b.path);
+  });
+  return filtered;
+}
+
 // ── Component ──────────────────────────────────────────────────────────────
 
 var QuickOpenDialog = function QuickOpenDialog(_ref) {
@@ -76,49 +170,6 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
     if (inputRef.current) inputRef.current.focus();
   };
 
-  // Priority tier for a file path: lower = shown first.
-  // Order: controller > model > helper > concern > view > job > other > noise
-  function getFilePriority(path) {
-    var p = (path || '').toLowerCase();
-    if (p.indexOf('/controllers/') >= 0) return 1;
-    if (p.indexOf('/models/')      >= 0) return 2;
-    if (p.indexOf('/helpers/')     >= 0) return 3;
-    if (p.indexOf('/concerns/')    >= 0) return 4;
-    if (p.indexOf('/views/')       >= 0) return 5;
-    if (p.indexOf('/jobs/')        >= 0) return 6;
-    // Deprioritise: migrations, schema, compiled assets, vendor, lock files
-    if (p.indexOf('/migrate/')  >= 0 || p.indexOf('schema.rb') >= 0) return 90;
-    if (p.indexOf('/public/')   >= 0 || p.indexOf('/vendor/')   >= 0) return 91;
-    if (p.slice(-7)  === '.min.js' || p.slice(-8) === '.min.css' ||
-        p.slice(-4)  === '.map'    || p.slice(-5) === '.lock')        return 92;
-    return 50;
-  }
-
-  // Recently opened files, most recent first, as a path -> rank lookup. Built
-  // once per query rather than per comparison, since the sort calls this for
-  // every pair.
-  function recentRanks() {
-    var ranks = {};
-    var recent = (typeof TabManager !== 'undefined' && TabManager.getRecentFiles)
-      ? TabManager.getRecentFiles() : [];
-    recent.forEach(function (entry, index) {
-      var path = typeof entry === 'string' ? entry : (entry && entry.path);
-      if (path && !(path in ranks)) ranks[path] = index;
-    });
-    return ranks;
-  }
-
-  // Match relevance within a priority tier: exact basename > prefix > substring > other.
-  function getMatchRelevance(result, q) {
-    if (!q) return 3;
-    var name = (result.name || (result.path || '').split('/').pop() || '').toLowerCase();
-    var lq = q.toLowerCase();
-    if (name === lq)            return 0;
-    if (name.slice(0, lq.length) === lq) return 1;
-    if (name.indexOf(lq) >= 0)  return 2;
-    return 3;
-  }
-
   var getQuickOpenIcon = function getQuickOpenIcon(path, name, type) {
     if (type === 'dir') {
       return React.createElement('i', { className: 'fas fa-folder quick-open-result-icon quick-open-folder-icon', 'aria-hidden': 'true' });
@@ -139,39 +190,15 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
       setSelectedIndex(0);
       return;
     }
-    var res = SearchService.searchFiles(query);
-    // Filter by type: always include files; include dirs only when showFolders is on
-    var filtered = showFolders ? res : res.filter(function(r) { return r.type !== 'dir'; });
-    // Sort, in order of precedence:
-    //   1. match quality — exact basename > prefix > substring > other, so a
-    //      worse match can never jump the queue however recently it was opened
-    //   2. how recently the file was opened, most recent first
-    //   3. the static file-type tier (controller > model > … > noise)
-    //
-    // Recency sits above the type tier deliberately: when two files match a
-    // query equally well, the one you were just working in is almost always
-    // the one you meant, and that beats a guess made from the directory name.
-    // Files never opened all tie here and fall through to the type tier, which
-    // is what orders the bulk of a cold result list.
-    //
-    // Directories keep their +100 penalty inside the type tier so files still
-    // come first. JS sort is stable in modern engines, so MiniSearch's own
-    // relevance order remains the final tiebreaker.
-    var ranks = recentRanks();
-    var NEVER_OPENED = Infinity;
-    filtered.sort(function(a, b) {
-      var aRelevance = getMatchRelevance(a, query);
-      var bRelevance = getMatchRelevance(b, query);
-      if (aRelevance !== bRelevance) return aRelevance - bRelevance;
-      var aRecent = a.path in ranks ? ranks[a.path] : NEVER_OPENED;
-      var bRecent = b.path in ranks ? ranks[b.path] : NEVER_OPENED;
-      if (aRecent !== bRecent) return aRecent - bRecent;
-      var aPriority = getFilePriority(a.path) + (a.type === 'dir' ? 100 : 0);
-      var bPriority = getFilePriority(b.path) + (b.type === 'dir' ? 100 : 0);
-      return aPriority - bPriority;
-    });
-    setResults(filtered.slice(0, 200));
-    setSelectedIndex(0);
+    // Debounced: a MiniSearch query plus a linear pass and a sort over every
+    // 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);
+      setResults(filtered.slice(0, 200));
+      setSelectedIndex(0);
+    }, 120);
+    return function () { clearTimeout(timer); };
   }, [query, showFolders]);
 
   // ── Keyboard ─────────────────────────────────────────────────────────────
@@ -389,7 +416,7 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
               }),
               results.length === 0 && React.createElement(
                 'div',
-                { style: { padding: '12px 16px', color: '#666', fontSize: '12px' } },
+                { style: { padding: '14px 18px', color: '#666', fontSize: '14px' } },
                 'No matching files.'
               )
             )
@@ -398,4 +425,5 @@ var QuickOpenDialog = function QuickOpenDialog(_ref) {
   );
 };
 
+QuickOpenDialog.rankResults = rankResults;
 window.QuickOpenDialog = QuickOpenDialog;

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

@@ -22,6 +22,7 @@ var TabBar = function TabBar(_ref) {
   var onCloseSaved = _ref.onCloseSaved;
   var onCloseAll = _ref.onCloseAll;
   var onNewFile = _ref.onNewFile;
+  var markers = _ref.markers || {};
   var tabDisplayMode = _ref.tabDisplayMode || 'scroll';
 
   var containerRef = useRef(null);
@@ -51,7 +52,7 @@ var TabBar = function TabBar(_ref) {
   var setDropTargetSide = _useState8[1];
 
   var getTabMarkerClass = function getTabMarkerClass(tab) {
-    var tabMarkers = tab.markers || [];
+    var tabMarkers = markers[tab.id] || [];
     if (!tabMarkers.length) return '';
 
     var hasError = tabMarkers.some(function (marker) {
@@ -79,7 +80,10 @@ var TabBar = function TabBar(_ref) {
         activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
       }
     }
-  }, [activeId, tabs]);
+  // tabs.length, not tabs: the array is fresh on every content change, so
+  // depending on it fired a smooth scroll per keystroke. Only opening, closing
+  // or switching a tab can move the active one out of view.
+  }, [activeId, tabs.length]);
 
   // Close context menu on outside click (bubble phase so onMouseDown on the menu can stop it)
   useEffect(function () {
@@ -189,6 +193,11 @@ var TabBar = function TabBar(_ref) {
           'div',
           {
             className: 'tab-close',
+            // No role="button" here: the host app's Pico CSS skins
+            // [role=button] with a primary background and form padding, which
+            // turns this into a blue square. It is a plain div with a tooltip,
+            // as it was — Ctrl+W is the keyboard path.
+            title: 'Close ' + tab.name + (tab.dirty ? ' (unsaved changes)' : ''),
             onClick: function (e) {
               e.stopPropagation();
               onClose(tab.id);