[Outline] clicking class selects source in editor (#5356)

Author: nyrosmith

src/components/PrimaryPanes/Outline.css

@@ -44,6 +44,10 @@
   color: var(--blue-55);
 }
 
+.outline-list h2:hover {
+  background: var(--theme-toolbar-background-hover);
+}
+
 .theme-dark .outline-list h2 {
   color: var(--theme-highlight-blue);
 }

src/components/PrimaryPanes/Outline.js

@@ -67,11 +67,14 @@ export class Outline extends Component<Props> {
 
     const classFunc = functions.find(func => func.name === klass);
     const classFunctions = functions.filter(func => func.klass === klass);
+    const classInfo = this.props.symbols.classes.find(c => c.name === klass);
 
     const heading = classFunc ? (
       <h2>{this.renderFunction(classFunc)}</h2>
     ) : (
-      <h2>
+      <h2
+        onClick={classInfo ? () => this.selectItem(classInfo.location) : null}
+      >
         <span className="keyword">class</span> {klass}
       </h2>
     );

src/workers/parser/getSymbols.js

@@ -16,6 +16,12 @@ import type { NodePath, Node, Location as BabelLocation } from "babel-traverse";
 
 let symbolDeclarations = new Map();
 
+export type ClassDeclaration = {|
+  name: string,
+  location: BabelLocation,
+  parent?: ClassDeclaration
+|};
+
 export type SymbolDeclaration = {|
   name: string,
   expression?: string,
@@ -33,6 +39,7 @@ export type FunctionDeclaration = SymbolDeclaration & {|
 |};
 
 export type SymbolDeclarations = {
+  classes: Array<ClassDeclaration>,
   functions: Array<SymbolDeclaration>,
   variables: Array<SymbolDeclaration>,
   memberExpressions: Array<SymbolDeclaration>,