Use addons icons for extensions (#5924)

* Provide special item in source tree for addons/extensions

* Update extensions text for the SourcesTree

Author: darkwing

assets/images/Svg.js

@@ -22,6 +22,7 @@ const 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"),

assets/images/extension.svg

@@ -655,6 +655,10 @@ addWatchExpressionText=Add watch expression
 # variables view popup.
 addWatchExpressionButton=Watch
 
+# LOCALIZATION NOTE (extensionsText): The text that is displayed to represent
+# "moz-extension" directories in the source tree
+extensionsText=Extensions
+
 # LOCALIZATION NOTE (emptyVariablesText): The text that is displayed in the
 # variables pane when there are no variables to display.
 emptyVariablesText=No variables to display

assets/panel/debugger.properties

@@ -188,9 +188,10 @@ class SourcesTree extends Component<Props, State> {
 
     if (item.path === "webpack://") {
       return <Svg name="webpack" />;
-    }
-    if (item.path === "ng://") {
+    } else if (item.path === "ng://") {
       return <Svg name="angular" />;
+    } else if (item.path === "moz-extension://") {
+      return <img className="extension" />;
     }
 
     if (depth === 0 && projectRoot === "") {
@@ -308,7 +309,8 @@ class SourcesTree extends Component<Props, State> {
   renderItemName(name) {
     const hosts = {
       "ng://": "Angular",
-      "webpack://": "Webpack"
+      "webpack://": "Webpack",
+      "moz-extension://": L10N.getStr("extensionsText")
     };
 
     return hosts[name] || name;

src/components/PrimaryPanes/SourcesTree.js

@@ -13,14 +13,16 @@
 .folder,
 .domain,
 .source-icon,
-.file {
+.file,
+.extension {
   background-color: var(--theme-comment);
 }
 
 .worker,
 .file,
 .folder,
-.source-icon {
+.source-icon,
+.extension {
   position: relative;
   top: 2px;
 }
@@ -47,6 +49,12 @@ img.source-icon {
   height: 15px;
 }
 
+img.extension {
+  width: 13px;
+  height: 13px;
+  margin-inline-start: 2px;
+}
+
 img.result-item-icon {
   height: 18px;
   width: 18px;
@@ -80,6 +88,10 @@ img.typescript {
   mask: url(/images/typescript.svg) no-repeat;
 }
 
+img.extension {
+  mask: url(/images/extension.svg) no-repeat;
+}
+
 img.file {
   mask: url(/images/file.svg) no-repeat;
   width: 13px;
@@ -89,7 +101,8 @@ img.file {
 img.domain,
 img.folder,
 img.file,
-img.source-icon {
+img.source-icon,
+img.extension {
   mask-size: 100%;
   margin-inline-end: 5px;
   display: inline-block;