1 files changed, 176 insertions, 0 deletions
diff --git a/devtools/client/debugger/src/components/shared/SourceIcon.css b/devtools/client/debugger/src/components/shared/SourceIcon.css
new file mode 100644
index 0000000000..0b9bf3e79e
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/SourceIcon.css
@@ -0,0 +1,176 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+/**
+ * Variant of AccessibleImage used in sources list and tabs.
+ * Define the different source type / framework / library icons here.
+ */
+
+.source-icon {
+  margin-inline-end: 4px;
+}
+
+/* Icons for frameworks and libs */
+
+.img.aframe {
+  background-image: url(chrome://devtools/content/debugger/images/sources/aframe.svg);
+  background-color: transparent !important;
+}
+
+.img.angular {
+  background-image: url(chrome://devtools/content/debugger/images/sources/angular.svg);
+  background-color: transparent !important;
+}
+
+.img.babel {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/babel.svg);
+}
+
+.img.backbone {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/backbone.svg);
+}
+
+.img.choo {
+  background-image: url(chrome://devtools/content/debugger/images/sources/choo.svg);
+  background-color: transparent !important;
+}
+
+.img.coffeescript {
+  background-image: url(chrome://devtools/content/debugger/images/sources/coffeescript.svg);
+  background-color: transparent !important;
+  fill: var(--theme-icon-color);
+  -moz-context-properties: fill;
+}
+
+.img.dojo {
+  background-image: url(chrome://devtools/content/debugger/images/sources/dojo.svg);
+  background-color: transparent !important;
+}
+
+.img.ember {
+  background-image: url(chrome://devtools/content/debugger/images/sources/ember.svg);
+  background-color: transparent !important;
+}
+
+.img.express {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/express.svg);
+}
+
+.img.extension {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg);
+}
+
+.img.immutable {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/immutable.svg);
+}
+
+.img.javascript {
+  background-image: url(chrome://devtools/content/debugger/images/sources/javascript.svg);
+  background-size: 14px 14px;
+  background-color: transparent !important;
+  fill: var(--theme-icon-color);
+  -moz-context-properties: fill;
+}
+
+.img.override::after {
+  content: "";
+  display: block;
+  height: 5px;
+  width: 5px;
+  background-color: var(--purple-30);
+  border-radius: 100%;
+  outline: 1px solid 	var(--theme-sidebar-background);
+  translate: 12px 10px;
+}
+
+.node.focused .img.override::after {
+  outline-color: var(--theme-selection-background);
+}
+
+.img.jquery {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/jquery.svg);
+}
+
+.img.lodash {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/lodash.svg);
+}
+
+.img.marko {
+  background-image: url(chrome://devtools/content/debugger/images/sources/marko.svg);
+  background-color: transparent !important;
+}
+
+.img.mobx {
+  background-image: url(chrome://devtools/content/debugger/images/sources/mobx.svg);
+  background-color: transparent !important;
+}
+
+.img.nextjs {
+  background-image: url(chrome://devtools/content/debugger/images/sources/nextjs.svg);
+  background-color: transparent !important;
+}
+
+.img.node {
+  background-image: url(chrome://devtools/content/debugger/images/sources/node.svg);
+  background-color: transparent !important;
+}
+
+.img.nuxtjs {
+  background-image: url(chrome://devtools/content/debugger/images/sources/nuxtjs.svg);
+  background-color: transparent !important;
+}
+
+.img.preact {
+  background-image: url(chrome://devtools/content/debugger/images/sources/preact.svg);
+  background-color: transparent !important;
+}
+
+.img.pug {
+  background-image: url(chrome://devtools/content/debugger/images/sources/pug.svg);
+  background-color: transparent !important;
+}
+
+.img.react {
+  background-image: url(chrome://devtools/content/debugger/images/sources/react.svg);
+  background-color: transparent !important;
+  fill: var(--theme-highlight-bluegrey);
+  -moz-context-properties: fill;
+}
+
+.img.redux {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/redux.svg);
+}
+
+.img.rxjs {
+  background-image: url(chrome://devtools/content/debugger/images/sources/rxjs.svg);
+  background-color: transparent !important;
+}
+
+.img.sencha-extjs {
+  background-image: url(chrome://devtools/content/debugger/images/sources/sencha-extjs.svg);
+  background-color: transparent !important;
+}
+
+.img.typescript {
+  background-image: url(chrome://devtools/content/debugger/images/sources/typescript.svg);
+  background-color: transparent !important;
+  fill: var(--theme-icon-color);
+  -moz-context-properties: fill;
+}
+
+.img.underscore {
+  mask-image: url(chrome://devtools/content/debugger/images/sources/underscore.svg);
+}
+
+/* We use both 'Vue' and 'VueJS' when identifying frameworks */
+.img.vue,
+.img.vuejs {
+  background-image: url(chrome://devtools/content/debugger/images/sources/vuejs.svg);
+  background-color: transparent !important;
+}
+
+.img.webpack {
+  background-image: url(chrome://devtools/content/debugger/images/sources/webpack.svg);
+  background-color: transparent !important;
+}