Blackboxed sources distinguished by icon in source tree (firefox-devt…

…ools#4441)
khal0988 · Nov 12, 2017 · d30c797 · d30c797
1 parent f0a656f
commit d30c797
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/src/components/PrimaryPanes/Sources.css b/src/components/PrimaryPanes/Sources.css
@@ -130,3 +130,35 @@
 .source-outline-tabs .tab:hover path {
   fill: var(--theme-body-color);
 }
+
+.sources-list .managed-tree .tree .node .blackBox svg {
+  width: 13px;
+  position: relative;
+  top: 2px;
+  margin-inline-end: 5px;
+}
+.sources-list .managed-tree .tree .node .blackBox path {
+  fill: var(--theme-textbox-box-shadow);
+}
+
+.sources-list .managed-tree .tree .node.focused .blackBox path {
+  fill: white;
+}
+
+.theme-dark
+.sources-list
+.managed-tree
+.tree
+.node:not(.focused)
+.blackBox
+svg {
+  fill: var(--theme-content-color3);
+}
+
+.theme-dark .sources-list .managed-tree .tree .node .blackBox circle {
+  fill: var(--theme-body-color);
+}
+
+.theme-dark .sources-list .managed-tree .tree .node.focused .blackBox circle {
+  fill: white;
+}
diff --git a/src/components/PrimaryPanes/SourcesTree.js b/src/components/PrimaryPanes/SourcesTree.js
@@ -12,7 +12,8 @@ import {
   getSelectedSource,
   getDebuggeeUrl,
   getExpandedState,
-  getProjectDirectoryRoot
+  getProjectDirectoryRoot,
+  getSources
 } from "../../selectors";
 import actions from "../../actions";
 
@@ -65,6 +66,7 @@ type State = {
 class SourcesTree extends Component<Props, State> {
   focusItem: Function;
   selectItem: Function;
+  getPath: Function;
   getIcon: Function;
   queueUpdate: Function;
   onContextMenu: Function;
@@ -80,6 +82,7 @@ class SourcesTree extends Component<Props, State> {
     );
     this.focusItem = this.focusItem.bind(this);
     this.selectItem = this.selectItem.bind(this);
+    this.getPath = this.getPath.bind(this);
     this.getIcon = this.getIcon.bind(this);
     this.onContextMenu = this.onContextMenu.bind(this);
     this.renderItem = this.renderItem.bind(this);
@@ -208,7 +211,17 @@ class SourcesTree extends Component<Props, State> {
     }
   }
 
-  getIcon(item, depth) {
+  getPath(item) {
+    const { sources } = this.props;
+    const blackBoxedPart =
+      item.contents.get &&
+      sources.get(item.contents.get("id")).get("isBlackBoxed")
+        ? "update"
+        : "";
+    return `${item.path}/${item.name}/${blackBoxedPart}`;
+  }
+
+  getIcon(sources, item, depth) {
     if (item.path === "/Webpack") {
       return <Svg name="webpack" />;
     }
@@ -218,6 +231,10 @@ class SourcesTree extends Component<Props, State> {
     }
 
     if (!nodeHasChildren(item)) {
+      const source = sources.get(item.contents.get("id"));
+      if (source.get("isBlackBoxed")) {
+        return <Svg name="blackBox" />;
+      }
       return <Svg name="file" />;
     }
 
@@ -272,8 +289,8 @@ class SourcesTree extends Component<Props, State> {
     ) : (
       <i className="no-arrow" />
     );
-
-    const icon = this.getIcon(item, depth);
+    const { sources } = this.props;
+    const icon = this.getIcon(sources, item, depth);
     let paddingDir = "paddingRight";
     if (document.body && document.body.parentElement) {
       paddingDir =
@@ -316,7 +333,7 @@ class SourcesTree extends Component<Props, State> {
       getParent: item => parentMap.get(item),
       getChildren: item => (nodeHasChildren(item) ? item.contents : []),
       getRoots: () => sourceTree.contents,
-      getPath: item => `${item.path}/${item.name}`,
+      getPath: this.getPath,
       itemHeight: 21,
       autoExpandDepth: expanded ? 0 : 1,
       autoExpandAll: false,
@@ -360,7 +377,8 @@ export default connect(
       selectedSource: getSelectedSource(state),
       debuggeeUrl: getDebuggeeUrl(state),
       expanded: getExpandedState(state),
-      projectRoot: getProjectDirectoryRoot(state)
+      projectRoot: getProjectDirectoryRoot(state),
+      sources: getSources(state)
     };
   },
   dispatch => bindActionCreators(actions, dispatch)