Replace function SVG with unicode character in Outline pane (firefox-devtools#5293)

Author: iansu

assets/images/Svg.js

@@ -18,7 +18,6 @@ const svg = {
   domain: require("./domain.svg"),
   file: require("./file.svg"),
   folder: require("./folder.svg"),
-  function: require("./function.svg"),
   globe: require("./globe.svg"),
   javascript: require("./javascript.svg"),
   jquery: require("./jquery.svg"),

assets/images/function.svg

@@ -43,6 +43,11 @@
   white-space: nowrap;
 }
 
+.outline-list__element-icon {
+  padding-right: 0.4rem;
+  padding-left: 1rem;
+}
+
 .outline-list__element:hover {
   background: var(--theme-toolbar-background-hover);
 }

src/components/PrimaryPanes/Outline.css

@@ -9,7 +9,6 @@ import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import actions from "../../actions";
 import { getSelectedSource, getSymbols } from "../../selectors";
-import Svg from "../shared/Svg";
 
 import "./Outline.css";
 import PreviewFunction from "../shared/PreviewFunction";
@@ -55,7 +54,7 @@ export class Outline extends Component<Props> {
         className="outline-list__element"
         onClick={() => this.selectItem(location)}
       >
-        <Svg name="function" />
+        <span className="outline-list__element-icon">λ</span>
         <PreviewFunction func={{ name, parameterNames }} />
       </li>
     );

src/components/PrimaryPanes/Outline.js

@@ -12,9 +12,11 @@ exports[`Outline should render a list of functions when properties change 1`] =
       key="my_example_function1:21:undefined"
       onClick={[Function]}
     >
-      <Svg
-        name="function"
-      />
+      <span
+        className="outline-list__element-icon"
+      >
+        λ
+      </span>
       <PreviewFunction
         func={
           Object {
@@ -29,9 +31,11 @@ exports[`Outline should render a list of functions when properties change 1`] =
       key="my_example_function2:22:undefined"
       onClick={[Function]}
     >
-      <Svg
-        name="function"
-      />
+      <span
+        className="outline-list__element-icon"
+      >
+        λ
+      </span>
       <PreviewFunction
         func={
           Object {
@@ -57,9 +61,11 @@ exports[`Outline should render ignore anonimous functions 1`] = `
       key="my_example_function1:21:undefined"
       onClick={[Function]}
     >
-      <Svg
-        name="function"
-      />
+      <span
+        className="outline-list__element-icon"
+      >
+        λ
+      </span>
       <PreviewFunction
         func={
           Object {

src/components/tests/__snapshots__/Outline.spec.js.snap

@@ -962,7 +962,7 @@ const selectors = {
   fileMatch: ".managed-tree .result",
   popup: ".popover",
   tooltip: ".tooltip",
-  outlineItem: i => `.outline-list__element:nth-child(${i})`,
+  outlineItem: i => `.outline-list__element:nth-child(${i}) .function-signature`,
   outlineItems: ".outline-list__element"
 };
 

src/test/mochitest/head.js

@@ -3743,7 +3743,7 @@ eslint-plugin-jest@^21.5.0:
   version "21.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.7.0.tgz#651f1c6ce999af3ac59ab8bf8a376d742fd0fc23"
 
-[email protected]:
+eslint-plugin-mozilla@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-mozilla/-/eslint-plugin-mozilla-0.7.0.tgz#679bbdc16e669d5213373578d7c5764e21234188"
   dependencies: