Bug 1624508 - Use the pretty icon instead of framework items when both match r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D67971

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/shared/SourceIcon.js

@@ -10,7 +10,7 @@ import { connect } from "../../utils/connect";
 
 import AccessibleImage from "./AccessibleImage";
 
-import { getSourceClassnames } from "../../utils/source";
+import { getSourceClassnames, isPretty } from "../../utils/source";
 import { getFramework } from "../../utils/tabs";
 import { getSymbols, getTabs } from "../../selectors";
 
@@ -37,9 +37,15 @@ type Props = {
 class SourceIcon extends PureComponent<Props> {
   render() {
     const { modifier, source, symbols, framework } = this.props;
-    let iconClass = framework
-      ? framework.toLowerCase()
-      : getSourceClassnames(source, symbols);
+    let iconClass = "";
+
+    if (isPretty(source)) {
+      iconClass = "prettyPrint";
+    } else {
+      iconClass = framework
+        ? framework.toLowerCase()
+        : getSourceClassnames(source, symbols);
+    }
 
     if (modifier) {
       const modified = modifier(iconClass);