Ensure the source tree highlights the correct item, regardless of pretty or original print (firefox-devtools#5455)

Author: darkwing

src/components/PrimaryPanes/SourcesTree.js

@@ -42,6 +42,8 @@ import {
   getExtension
 } from "../../utils/sources-tree";
 
+import { getRawSourceURL } from "../../utils/source";
+
 import { copyToTheClipboard } from "../../utils/clipboard";
 import { features } from "../../utils/prefs";
 
@@ -92,13 +94,7 @@ class SourcesTree extends Component<Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
-    const {
-      projectRoot,
-      debuggeeUrl,
-      sources,
-      shownSource,
-      selectedSource
-    } = this.props;
+    const { projectRoot, debuggeeUrl, sources, shownSource } = this.props;
 
     const { uncollapsedTree, sourceTree } = this.state;
 
@@ -127,16 +123,16 @@ class SourcesTree extends Component<Props, State> {
       return this.setState({ listItems });
     }
 
-    if (
-      nextProps.selectedSource &&
-      nextProps.selectedSource != selectedSource
-    ) {
-      const highlightItems = getDirectories(
-        nextProps.selectedSource.get("url"),
-        sourceTree
-      );
+    if (nextProps.selectedSource) {
+      const highlightUrl = nextProps.selectedSource.get("url");
 
-      return this.setState({ highlightItems });
+      if (highlightUrl) {
+        const highlightItems = getDirectories(
+          getRawSourceURL(highlightUrl),
+          sourceTree
+        );
+        return this.setState({ highlightItems });
+      }
     }
 
     // NOTE: do not run this every time a source is clicked,