Switch from Inline SVGs to images (firefox-devtools#7697)

images/Svg.js

@@ -6,73 +6,9 @@ const React = require("react");
 import InlineSVG from "svg-inline-react";
 
 const svg = {
-  "angle-brackets": require("./angle-brackets.svg"),
-  angular: require("./angular.svg"),
-  arrow: require("./arrow.svg"),
-  babel: require("./babel.svg"),
-  backbone: require("./backbone.svg"),
-  blackBox: require("./blackBox.svg"),
-  breadcrumb: require("./breadcrumbs-divider.svg"),
   breakpoint: require("./breakpoint.svg"),
-  "column-breakpoint": require("./column-breakpoint.svg"),
   "column-marker": require("./column-marker.svg"),
-  "case-match": require("./case-match.svg"),
-  choo: require("./choo.svg"),
-  close: require("./close.svg"),
-  coffeescript: require(`./coffeescript.svg`),
-  dojo: require("./dojo.svg"),
-  domain: require("./domain.svg"),
-  extension: require("./extension.svg"),
-  file: require("./file.svg"),
-  folder: require("./folder.svg"),
-  globe: require("./globe.svg"),
-  home: require("./home.svg"),
-  javascript: require("./javascript.svg"),
-  jquery: require("./jquery.svg"),
-  underscore: require("./underscore.svg"),
-  lodash: require("./lodash.svg"),
-  ember: require("./ember.svg"),
-  vuejs: require("./vuejs.svg"),
-  "magnifying-glass": require("./magnifying-glass.svg"),
-  "arrow-up": require("./arrow-up.svg"),
-  "arrow-down": require("./arrow-down.svg"),
-  pause: require("./pause.svg"),
-  "pause-exceptions": require("./pause-exceptions.svg"),
-  plus: require("./plus.svg"),
-  preact: require("./preact.svg"),
-  aframe: require("./aframe.svg"),
-  prettyPrint: require("./prettyPrint.svg"),
-  react: require("./react.svg"),
-  "regex-match": require("./regex-match.svg"),
-  redux: require("./redux.svg"),
-  immutable: require("./immutable.svg"),
-  resume: require("./resume.svg"),
-  settings: require("./settings.svg"),
-  stepIn: require("./stepIn.svg"),
-  stepOut: require("./stepOut.svg"),
-  stepOver: require("./stepOver.svg"),
-  subSettings: require("./subSettings.svg"),
-  tab: require("./tab.svg"),
-  toggleBreakpoints: require("./toggle-breakpoints.svg"),
-  togglePanes: require("./toggle-panes.svg"),
-  typescript: require("./typescript.svg"),
-  "whole-word-match": require("./whole-word-match.svg"),
-  worker: require("./worker.svg"),
-  "sad-face": require("devtools-mc-assets/assets/devtools/client/themes/images/sad-face.svg"),
-  refresh: require("devtools-mc-assets/assets/devtools/client/themes/images/reload.svg"),
-  webpack: require("./webpack.svg"),
-  node: require("./node.svg"),
-  express: require("./express.svg"),
-  pug: require("./pug.svg"),
-  extjs: require("./sencha-extjs.svg"),
-  mobx: require("./mobx.svg"),
-  marko: require("./marko.svg"),
-  nextjs: require("./nextjs.svg"),
-  showSources: require("./showSources.svg"),
-  showOutline: require("./showOutline.svg"),
-  nuxtjs: require("./nuxtjs.svg"),
-  rxjs: require("./rxjs.svg"),
-  loader: require('./loader.svg')
+  "magnifying-glass": require("./magnifying-glass.svg")
 };
 
 type SvgType = {

src/components/Editor/Footer.js

@@ -6,7 +6,6 @@
 import React, { PureComponent } from "react";
 import { connect } from "../../utils/connect";
 import classnames from "classnames";
-import Svg from "../shared/Svg";
 import actions from "../../actions";
 import {
   getSelectedSource,
@@ -76,7 +75,7 @@ class SourceFooter extends PureComponent<Props, State> {
     if (isLoading(selectedSource) && selectedSource.isPrettyPrinted) {
       return (
         <div className="loader" key="pretty-loader">
-          <Svg name="loader" />
+          <AccessibleImage className="loader" />
         </div>
       );
     }

src/components/Editor/Preview/Popup.js

@@ -26,7 +26,7 @@ import { getAllPopupObjectProperties } from "../../../selectors";
 import Popover from "../../shared/Popover";
 import PreviewFunction from "../../shared/PreviewFunction";
 
-import Svg from "../../shared/Svg";
+import AccessibleImage from "../../shared/AccessibleImage";
 import { createObjectClient } from "../../../client/firefox";
 
 import "./Popup.css";
@@ -198,23 +198,12 @@ export class Popup extends Component<Props, State> {
 
     return (
       <div className="header-container">
-        <Svg name="react" className="logo" />
+        <AccessibleImage className="logo react" />
         <h3>{reactHeader}</h3>
       </div>
     );
   }
 
-  renderImmutable(immutable: Object) {
-    const immutableHeader = immutable.type || "Immutable";
-
-    return (
-      <div className="header-container">
-        <Svg name="immutable" className="logo" />
-        <h3>{immutableHeader}</h3>
-      </div>
-    );
-  }
-
   renderObjectPreview() {
     const root = this.getRoot();
 

src/components/Editor/SearchBar.css

@@ -92,11 +92,11 @@
   padding: 0;
   width: 16px;
 }
-
-.search-bottom-bar .search-modifiers button svg {
-  fill: var(--theme-comment);
-  height: 16px;
+.search-bottom-bar .search-modifiers .img {
   width: 16px;
+  height: 16px;
+  vertical-align: bottom;
+  background-color: var(--theme-comment);
 }
 
 .search-bottom-bar .search-modifiers button:hover {
@@ -107,11 +107,11 @@
   background: var(--theme-selection-background);
 }
 
-.search-bottom-bar .search-modifiers button.active svg {
-  fill: var(--theme-selection-background);
+.search-bottom-bar .search-modifiers button.active .img {
+  background-color: var(--theme-selection-background);
 }
 
-.theme-dark .search-bottom-bar .search-modifiers button.active svg {
+.theme-dark .search-bottom-bar .search-modifiers button.active .img {
   fill: white;
 }
 

src/components/Editor/SearchBar.js

@@ -8,7 +8,7 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { connect } from "../../utils/connect";
 import { CloseButton } from "../shared/Button";
-import Svg from "../shared/Svg";
+import AccessibleImage from "../shared/AccessibleImage";
 import actions from "../../actions";
 import {
   getActiveSearch,
@@ -270,7 +270,7 @@ class SearchBar extends Component<Props, State> {
           }}
           title={tooltip}
         >
-          <Svg name={svgName} />
+          <AccessibleImage className={svgName} />
         </button>
       );
     }

src/components/PrimaryPanes/Sources.css

@@ -36,19 +36,19 @@
   height: 13px;
 }
 
-.theme-dark .sources-clear-root svg {
+.theme-dark .sources-clear-root {
   fill: var(--theme-body-color);
 }
 
 .sources-clear-root .home {
   opacity: 0.5;
 }
 
-.sources-clear-root .breadcrumb svg {
+.sources-clear-root .breadcrumb {
   width: 5px;
-  top: 2px;
-  position: absolute;
-  margin-right: 5px;
+  margin: 0 2px 0 6px;
+  vertical-align: bottom;
+  background: var(--theme-body-color-alt);
 }
 
 .sources-clear-root-label {
@@ -80,11 +80,11 @@
   width: 100%;
 }
 
-.sources-list .tree .img.arrow {
-  margin-right: 5px;
+.sources-list .img {
+  margin-inline-end: 5px;
 }
 
-.sources-list .tree .focused .img:not(.vue):not(.angular),
+.sources-list .tree .focused .img:not(.vue):not(.angular):not(.webpack):not(.dojo):not(.ember):not(.aframe):not(.marko):not(.mobx):not(.nextjs):not(.nuxtjs):not(.preact):not(.pug):not(.rxjs):not(.sencha-extjs),
 .sources-list .managed-tree .tree .node.focused .img.blackBox {
   background: #ffffff;
 }

src/components/PrimaryPanes/SourcesTreeItem.js

@@ -11,7 +11,6 @@ import { showMenu } from "devtools-contextmenu";
 
 import SourceIcon from "../shared/SourceIcon";
 import AccessibleImage from "../shared/AccessibleImage";
-import Svg from "../shared/Svg";
 
 import {
   getGeneratedSourceByURL,
@@ -63,9 +62,9 @@ class SourceTreeItem extends Component<Props, State> {
     const { debuggeeUrl, projectRoot, source } = this.props;
 
     if (item.path === "webpack://") {
-      return <Svg name="webpack" />;
+      return <AccessibleImage className="webpack" />;
     } else if (item.path === "ng://") {
-      return <Svg name="angular" />;
+      return <AccessibleImage className="angular" />;
     } else if (item.path.startsWith("moz-extension://") && depth === 0) {
       return <AccessibleImage className="extension" />;
     }

src/components/PrimaryPanes/index.js

@@ -22,13 +22,12 @@ import { formatKeyShortcut } from "../../utils/text";
 
 import Outline from "./Outline";
 import SourcesTree from "./SourcesTree";
+import AccessibleImage from "../shared/AccessibleImage";
 
 import type { SourcesMapByThread } from "../../reducers/types";
 import type { SelectedPrimaryPaneTabType } from "../../selectors";
 import type { Thread } from "../../types";
 
-import Svg from "../shared/Svg";
-
 import "./Sources.css";
 
 type State = {
@@ -117,8 +116,8 @@ class PrimaryPanes extends Component<Props, State> {
           onClick={() => this.props.clearProjectDirectoryRoot()}
           title={L10N.getStr("removeDirectoryRoot.label")}
         >
-          <Svg name="home" />
-          <Svg name="breadcrumb" />
+          <AccessibleImage className="home" />
+          <AccessibleImage className="breadcrumb" />
           <span className="sources-clear-root-label">{rootLabel}</span>
         </button>
       </div>

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

@@ -42,11 +42,11 @@ exports[`PrimaryPanes with custom root renders custom root source list 1`] = `
           onClick={[Function]}
           title="Remove directory root"
         >
-          <Svg
-            name="home"
+          <AccessibleImage
+            className="home"
           />
-          <Svg
-            name="breadcrumb"
+          <AccessibleImage
+            className="breadcrumb"
           />
           <span
             className="sources-clear-root-label"
@@ -106,11 +106,11 @@ exports[`PrimaryPanes with custom root renders empty custom root source list 1`]
           onClick={[Function]}
           title="Remove directory root"
         >
-          <Svg
-            name="home"
+          <AccessibleImage
+            className="home"
           />
-          <Svg
-            name="breadcrumb"
+          <AccessibleImage
+            className="breadcrumb"
           />
           <span
             className="sources-clear-root-label"

src/components/PrimaryPanes/tests/__snapshots__/SourcesTreeItem.spec.js.snap

@@ -861,8 +861,8 @@ Object {
     <AccessibleImage
       className="arrow"
     />
-    <Svg
-      name="angular"
+    <AccessibleImage
+      className="angular"
     />
     <span
       className="label"
@@ -955,8 +955,8 @@ Object {
           <AccessibleImage
             className="arrow"
           />
-          <Svg
-            name="angular"
+          <AccessibleImage
+            className="angular"
           />
           <span
             className="label"
@@ -1408,8 +1408,8 @@ Object {
     <AccessibleImage
       className="arrow"
     />
-    <Svg
-      name="webpack"
+    <AccessibleImage
+      className="webpack"
     />
     <span
       className="label"
@@ -1502,8 +1502,8 @@ Object {
           <AccessibleImage
             className="arrow"
           />
-          <Svg
-            name="webpack"
+          <AccessibleImage
+            className="webpack"
           />
           <span
             className="label"

src/components/ProjectSearch.js

@@ -23,7 +23,6 @@ import {
   getTextSearchQuery
 } from "../selectors";
 
-import Svg from "./shared/Svg";
 import ManagedTree from "./shared/ManagedTree";
 import SearchInput from "./shared/SearchInput";
 import AccessibleImage from "./shared/AccessibleImage";
@@ -220,7 +219,7 @@ export class ProjectSearch extends Component<Props, State> {
         className={classnames("file-result", { focused })}
         key={file.sourceId}
       >
-        <Svg name="arrow" className={classnames({ expanded })} />
+        <AccessibleImage className={classnames("arrow", { expanded })} />
         <AccessibleImage className="file" />
         <span className="file-path">{getRelativePath(file.filepath)}</span>
         <span className="matches-summary">{matches}</span>

src/components/SecondaryPanes/Frames/Frame.js

@@ -7,8 +7,8 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import classNames from "classnames";
-import Svg from "../../shared/Svg";
 
+import AccessibleImage from "../../shared/AccessibleImage";
 import { formatDisplayName } from "../../../utils/pause/frames";
 import { getFilename, getFileURL } from "../../../utils/source";
 import FrameMenu from "./FrameMenu";
@@ -38,7 +38,9 @@ function FrameLocation({ frame, displayFullUrl = false }: FrameLocationProps) {
     return (
       <span className="location">
         {frame.library}
-        <Svg name={frame.library.toLowerCase()} className="annotation-logo" />
+        <AccessibleImage
+          className={`annotation-logo ${frame.library.toLowerCase()}`}
+        />
       </span>
     );
   }

src/components/SecondaryPanes/Frames/Frames.css

@@ -103,6 +103,7 @@
 }
 
 .annotation-logo {
+  mask-size: 100%;
   display: inline-block;
   width: 12px;
 }