Fixes firefox-devtools#7656 - Remove absolute positioning in directory view of sources pane (firefox-devtools#7691)

Author: Regaddi

jest-test.config.js

@@ -26,7 +26,7 @@ module.exports = {
     "!**/*.mock.js",
     "!**/*.spec.js"
   ],
-  transformIgnorePatterns: ["node_modules/(?!devtools-)"],
+  transformIgnorePatterns: ["node_modules/(?!(devtools-|react-aria-))"],
   setupTestFrameworkScriptFile: "<rootDir>/src/test/tests-setup.js",
   setupFiles: ["<rootDir>/src/test/shim.js", "jest-localstorage-mock"],
   snapshotSerializers: [

src/components/PrimaryPanes/Sources.css

@@ -23,9 +23,6 @@
   white-space: nowrap;
   color: inherit;
   display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
@@ -62,7 +59,6 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: 100%;
 }
 
 .sources-list {
@@ -208,6 +204,10 @@
   height: 100%;
 }
 
+.source-outline-panel.has-root .thread-header {
+  margin-top: 4px;
+}
+
 .sources-list .managed-tree .tree .node .img.blackBox {
   mask: url(/images/blackBox.svg) no-repeat;
   mask-size: 100%;
@@ -236,7 +236,6 @@
   display: block;
 }
 
-.sources-list-custom-root .sources-list,
 .sources-list-custom-root .no-sources-message {
   position: absolute;
   top: 26px;

src/components/PrimaryPanes/SourcesTree.js

@@ -32,7 +32,6 @@ import actions from "../../actions";
 import AccessibleImage from "../shared/AccessibleImage";
 import SourcesTreeItem from "./SourcesTreeItem";
 import ManagedTree from "../shared/ManagedTree";
-import Svg from "../shared/Svg";
 
 // Utils
 import {
@@ -69,7 +68,6 @@ type Props = {
   expanded: Set<string>,
   selectSource: typeof actions.selectSource,
   setExpandedState: typeof actions.setExpandedState,
-  clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
   focusItem: typeof actions.focusItem,
   focused: TreeNode,
   workerCount: number
@@ -215,30 +213,6 @@ class SourcesTree extends Component<Props, State> {
     );
   }
 
-  renderProjectRootHeader() {
-    const { projectRoot } = this.props;
-
-    if (!projectRoot) {
-      return null;
-    }
-
-    const rootLabel = projectRoot.split("/").pop();
-
-    return (
-      <div key="root" className="sources-clear-root-container">
-        <button
-          className="sources-clear-root"
-          onClick={() => this.props.clearProjectDirectoryRoot()}
-          title={L10N.getStr("removeDirectoryRoot.label")}
-        >
-          <Svg name="home" />
-          <Svg name="breadcrumb" />
-          <span className="sources-clear-root-label">{rootLabel}</span>
-        </button>
-      </div>
-    );
-  }
-
   getRoots = () => {
     const { projectRoot } = this.props;
     const { sourceTree } = this.state;
@@ -248,7 +222,7 @@ class SourcesTree extends Component<Props, State> {
 
     // The "sourceTree.contents[0]" check ensures that there are contents
     // A custom root with no existing sources will be ignored
-    if (projectRoot) {
+    if (projectRoot && sourceContents) {
       if (sourceContents && sourceContents.name !== rootLabel) {
         return sourceContents.contents[0].contents;
       }
@@ -350,28 +324,14 @@ class SourcesTree extends Component<Props, State> {
   }
 
   render() {
-    const { projectRoot, worker } = this.props;
+    const { worker } = this.props;
 
     if (!features.windowlessWorkers && worker) {
       return null;
     }
 
-    if (this.isEmpty()) {
-      if (projectRoot) {
-        return this.renderPane(
-          this.renderProjectRootHeader(),
-          this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailableRoot"))
-        );
-      }
-
-      return this.renderPane(
-        this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailable"))
-      );
-    }
-
     return this.renderPane(
       this.renderThreadHeader(),
-      this.renderProjectRootHeader(),
       <div key="tree" className="sources-list" onKeyDown={this.onKeyDown}>
         {this.renderTree()}
       </div>
@@ -420,7 +380,6 @@ export default connect(
   {
     selectSource: actions.selectSource,
     setExpandedState: actions.setExpandedState,
-    clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot,
     focusItem: actions.focusItem
   }
 )(SourcesTree);

src/components/PrimaryPanes/index.js

@@ -27,6 +27,8 @@ import type { SourcesMapByThread } from "../../reducers/types";
 import type { SelectedPrimaryPaneTabType } from "../../selectors";
 import type { Thread } from "../../types";
 
+import Svg from "../shared/Svg";
+
 import "./Sources.css";
 
 type State = {
@@ -42,6 +44,7 @@ type Props = {
   setPrimaryPaneTab: typeof actions.setPrimaryPaneTab,
   setActiveSearch: typeof actions.setActiveSearch,
   closeActiveSearch: typeof actions.closeActiveSearch,
+  clearProjectDirectoryRoot: typeof actions.clearProjectDirectoryRoot,
   threads: Thread[]
 };
 
@@ -98,6 +101,30 @@ class PrimaryPanes extends Component<Props, State> {
     ];
   }
 
+  renderProjectRootHeader() {
+    const { projectRoot } = this.props;
+
+    if (!projectRoot) {
+      return null;
+    }
+
+    const rootLabel = projectRoot.split("/").pop();
+
+    return (
+      <div key="root" className="sources-clear-root-container">
+        <button
+          className="sources-clear-root"
+          onClick={() => this.props.clearProjectDirectoryRoot()}
+          title={L10N.getStr("removeDirectoryRoot.label")}
+        >
+          <Svg name="home" />
+          <Svg name="breadcrumb" />
+          <span className="sources-clear-root-label">{rootLabel}</span>
+        </button>
+      </div>
+    );
+  }
+
   renderThreadSources() {
     return this.props.threads.map(({ actor }) => (
       <SourcesTree thread={actor} key={actor} />
@@ -123,7 +150,10 @@ class PrimaryPanes extends Component<Props, State> {
           })}
           hasFocusableContent
         >
-          <div>{this.renderThreadSources()}</div>
+          <div>
+            {this.renderProjectRootHeader()}
+            {this.renderThreadSources()}
+          </div>
           <Outline
             alphabetizeOutline={this.state.alphabetizeOutline}
             onAlphabetizeClick={this.onAlphabetizeClick}
@@ -147,7 +177,8 @@ const connector = connect(
   {
     setPrimaryPaneTab: actions.setPrimaryPaneTab,
     setActiveSearch: actions.setActiveSearch,
-    closeActiveSearch: actions.closeActiveSearch
+    closeActiveSearch: actions.closeActiveSearch,
+    clearProjectDirectoryRoot: actions.clearProjectDirectoryRoot
   }
 );
 

src/components/PrimaryPanes/tests/PrimaryPanes.spec.js

@@ -0,0 +1,72 @@
+/* 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/>. */
+
+import React from "react";
+import { shallow } from "enzyme";
+import { showMenu } from "devtools-contextmenu";
+
+import { copyToTheClipboard } from "../../../utils/clipboard";
+import PrimaryPanes from "..";
+
+jest.mock("devtools-contextmenu", () => ({ showMenu: jest.fn() }));
+jest.mock("../../../utils/clipboard", () => ({
+  copyToTheClipboard: jest.fn()
+}));
+
+describe("PrimaryPanes", () => {
+  afterEach(() => {
+    copyToTheClipboard.mockClear();
+    showMenu.mockClear();
+  });
+
+  describe("with custom root", () => {
+    it("renders custom root source list", async () => {
+      const { component } = render({
+        projectRoot: "mdn.com"
+      });
+      expect(component).toMatchSnapshot();
+    });
+
+    it("calls clearProjectDirectoryRoot on click", async () => {
+      const { component, props } = render({
+        projectRoot: "mdn"
+      });
+      component.find(".sources-clear-root").simulate("click");
+      expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();
+    });
+
+    it("renders empty custom root source list", async () => {
+      const { component } = render({
+        projectRoot: "custom",
+        sources: {}
+      });
+      expect(component).toMatchSnapshot();
+    });
+  });
+});
+
+function generateDefaults(overrides) {
+  return {
+    horizontal: false,
+    projectRoot: "",
+    sourceSearchOn: false,
+    setPrimaryPaneTab: jest.fn(),
+    setActiveSearch: jest.fn(),
+    closeActiveSearch: jest.fn(),
+    clearProjectDirectoryRoot: jest.fn(),
+    threads: [],
+    ...overrides
+  };
+}
+
+function render(overrides = {}) {
+  const props = generateDefaults(overrides);
+  const component = shallow(<PrimaryPanes.WrappedComponent {...props} />);
+  const defaultState = component.state();
+  const instance = component.instance();
+
+  instance.shouldComponentUpdate = () => true;
+
+  return { component, props, defaultState, instance };
+}

src/components/PrimaryPanes/tests/SourcesTree.spec.js

@@ -198,31 +198,6 @@ describe("SourcesTree", () => {
     });
   });
 
-  describe("with custom root", () => {
-    it("renders custom root source list", async () => {
-      const { component } = render({
-        projectRoot: "mdn.com"
-      });
-      expect(component).toMatchSnapshot();
-    });
-
-    it("calls clearProjectDirectoryRoot on click", async () => {
-      const { component, props } = render({
-        projectRoot: "mdn"
-      });
-      component.find(".sources-clear-root").simulate("click");
-      expect(props.clearProjectDirectoryRoot).toHaveBeenCalled();
-    });
-
-    it("renders empty custom root source list", async () => {
-      const { component } = render({
-        projectRoot: "custom",
-        sources: {}
-      });
-      expect(component).toMatchSnapshot();
-    });
-  });
-
   describe("selectItem", () => {
     it("should select item with no children", async () => {
       const { instance, props } = render();