Allow clicking on source links in the MIR output

Author: shepmaster

ui/frontend/Output.tsx

@@ -9,6 +9,7 @@ import Execute from './Output/Execute';
 import Gist from './Output/Gist';
 import Section from './Output/Section';
 import SimplePane, { SimplePaneProps } from './Output/SimplePane';
+import PaneWithMir from './Output/PaneWithMir';
 import * as selectors from './selectors';
 
 const Tab: React.SFC<TabProps> = ({ kind, focus, label, onClick, tabProps }) => {
@@ -82,7 +83,7 @@ const Output: React.SFC = () => {
         {focus === Focus.MacroExpansion && <SimplePane {...macroExpansion} kind="macro-expansion" />}
         {focus === Focus.Asm && <PaneWithCode {...assembly} kind="asm" />}
         {focus === Focus.LlvmIr && <PaneWithCode {...llvmIr} kind="llvm-ir" />}
-        {focus === Focus.Mir && <PaneWithCode {...mir} kind="mir" />}
+        {focus === Focus.Mir && <PaneWithMir {...mir} kind="mir" />}
         {focus === Focus.Wasm && <PaneWithCode {...wasm} kind="wasm" />}
         {focus === Focus.Gist && <Gist />}
       </div>

ui/frontend/Output/PaneWithMir.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PrismCode } from 'react-prism';
+
+import Header from './Header';
+import SimplePane, { SimplePaneProps } from './SimplePane';
+
+interface PaneWithMirProps extends SimplePaneProps {
+  code?: string;
+}
+
+const PaneWithMir: React.SFC<PaneWithMirProps> = ({ code, ...rest }) => (
+  <SimplePane {...rest}>
+    <div className="output-result">
+      <Header label="Result" />
+      <pre>
+        <PrismCode className="language-rust_mir">
+          {code}
+        </PrismCode>
+      </pre>
+    </div>
+  </SimplePane>
+);
+
+export default PaneWithMir;

ui/frontend/highlighting.ts

@@ -48,6 +48,10 @@ export function configureRustErrors({
     'backtrace-enable': /Run with `RUST_BACKTRACE=1` environment variable to display a backtrace/i,
   };
 
+  Prism.languages.rust_mir = { // eslint-disable-line @typescript-eslint/camelcase
+    'mir-source': /src\/.*.rs:\d+:\d+: \d+:\d+/,
+  }
+
   Prism.hooks.add('wrap', env => {
     if (env.type === 'error-explanation') {
       const errorMatch = /E\d+/.exec(env.content);
@@ -104,6 +108,16 @@ export function configureRustErrors({
       env.attributes['data-line'] = line;
       env.attributes['data-col'] = '1';
     }
+    if (env.type === 'mir-source') {
+      const lineMatch = /(\d+):(\d+): (\d+):(\d+)/.exec(env.content);
+      const [_, startLine, startCol, endLine, endCol] = lineMatch;
+      env.tag = 'a';
+      env.attributes.href = '#';
+      env.attributes['data-start-line'] = startLine;
+      env.attributes['data-start-col'] = startCol;
+      env.attributes['data-end-line'] = endLine;
+      env.attributes['data-end-col'] = endCol;
+    }
   });
 
   Prism.hooks.add('after-highlight', env => {
@@ -141,5 +155,14 @@ export function configureRustErrors({
         reExecuteWithBacktrace();
       };
     });
+
+    const mirSourceLinks = env.element.querySelectorAll('.mir-source');
+    Array.from(mirSourceLinks).forEach((link: HTMLAnchorElement) => {
+      const { startLine, startCol } = link.dataset;
+      link.onclick = e => {
+        e.preventDefault();
+        gotoPosition(startLine, startCol);
+      };
+    });
   });
 }