mbeditor 0.12.8 → 0.13.0

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,9 +89,24 @@ 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) {
@@ -96,6 +118,34 @@ var ProblemsPanel = (function () {
     var _filter = React.useState('');
     var filter = _filter[0], setFilter = _filter[1];
 
+    // Which severities the list shows. Multi-select rather than a single
+    // dropdown: "errors and warnings, but not the convention noise" is the
+    // view people actually want, and a one-of-three picker can't express it.
+    // Persisted, because a filter you have to re-set every time you open the
+    // panel is one you stop using.
+    var _severities = React.useState(function () {
+      try {
+        var saved = JSON.parse(window.localStorage.getItem('mbeditorProblemsSeverities'));
+        if (saved && typeof saved === 'object') {
+          return { error: saved.error !== false, warning: saved.warning !== false, info: saved.info !== false };
+        }
+      } catch (e) { /* unparseable or storage blocked — fall through to the default */ }
+      return { error: true, warning: true, info: true };
+    });
+    var severities = _severities[0], setSeverities = _severities[1];
+
+    var toggleSeverity = function (kind) {
+      setSeverities(function (prev) {
+        var next = Object.assign({}, prev);
+        next[kind] = !next[kind];
+        // Turning the last one off would show an empty panel with no hint as
+        // to why, so the final active severity stays latched on.
+        if (!next.error && !next.warning && !next.info) return prev;
+        try { window.localStorage.setItem('mbeditorProblemsSeverities', JSON.stringify(next)); } catch (e) {}
+        return next;
+      });
+    };
+
     // Exceptions raised by the host app. Unlike markers these are not per-model
     // — a runtime failure isn't a property of a file you happen to have open —
     // so they live in their own section above the marker list.
@@ -128,6 +178,47 @@ 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); })
+        ["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);
@@ -158,18 +249,33 @@ 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();
-    var shown = needle
+    var allSeverities = severities.error && severities.warning && severities.info;
+    var shown = (needle || !allSeverities)
       ? problems.byFile.map(function (entry) {
           return {
             path: entry.path,
             markers: entry.markers.filter(function (item) {
+              if (!severities[SEVERITY_KIND[item.marker.severity] || 'info']) return false;
+              if (!needle) return true;
               return (item.marker.message + ' ' + item.code + ' ' + entry.path)
                 .toLowerCase().indexOf(needle) !== -1;
             })
@@ -192,13 +298,65 @@ var ProblemsPanel = (function () {
         { className: 'ide-problems-header' },
         React.createElement('i', { className: 'fas fa-bug' }),
         React.createElement('span', { className: 'ide-problems-title' }, 'Problems'),
+        // No prose summary: the severity chips below carry the same three
+        // counts, and restating them was the longest thing in the header.
         React.createElement(
-          'span',
-          { className: 'ide-problems-summary' },
-          problems.errors.length + ' error' + (problems.errors.length === 1 ? '' : 's') +
-            ', ' + problems.warnings.length + ' warning' + (problems.warnings.length === 1 ? '' : 's') +
-            ', ' + problems.infos.length + ' info' +
-            ' in open files'
+          'div',
+          { className: 'ide-problems-severity-filter' },
+          [
+            { kind: 'error', count: problems.errors.length },
+            { kind: 'warning', count: problems.warnings.length },
+            { kind: 'info', count: problems.infos.length }
+          ].map(function (s) {
+            var on = severities[s.kind];
+            return React.createElement(
+              'button',
+              {
+                key: s.kind,
+                type: 'button',
+                className: 'ide-problems-sev-chip ide-problems-sev-' + s.kind + (on ? ' is-on' : ''),
+                title: (on ? 'Hide' : 'Show') + ' ' + SEVERITY_LABEL[s.kind].toLowerCase() + 's',
+                'aria-pressed': on ? 'true' : 'false',
+                onClick: function () { toggleSeverity(s.kind); }
+              },
+              React.createElement('i', { className: 'fas ' + SEVERITY_ICON[s.kind] }),
+              React.createElement('span', null, s.count)
+            );
+          })
+        ),
+        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'
+              : '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',
@@ -215,6 +373,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)
+            : (workspace.files || []).length === 0
+              ? React.createElement('div', { className: 'ide-problems-empty' }, 'RuboCop found no offenses in the workspace')
+              : workspace.files.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' },
@@ -253,6 +453,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); }
                   },
@@ -263,7 +464,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')
@@ -291,6 +492,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

@@ -139,39 +139,45 @@ 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 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);
+    }, 120);
+    return function () { clearTimeout(timer); };
   }, [query, showFolders]);
 
   // ── Keyboard ─────────────────────────────────────────────────────────────

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