Bug 1518613 - [release 118] [sources] Fix sources tree not displaying when custom root (#7649). r=dwalsh
authorJason Laster <jlaster@mozilla.com>
Tue, 08 Jan 2019 15:46:14 -0500
changeset 510276 b9db02b31ccb269829b030ea3e4e37c3c75cec1f
parent 510275 41fb2e562f99f5bb884ba41ed97fbcd37f0d8a48
child 510277 7d59c4fbc838747197b4080c1f8d4cbd5db1d3c7
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1518613
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1518613 - [release 118] [sources] Fix sources tree not displaying when custom root (#7649). r=dwalsh
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/src/components/PrimaryPanes/index.js
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2224,16 +2224,20 @@ menuseparator {
   fill: var(--theme-body-color);
 }
 
 .source-outline-panel {
   flex: 1;
   overflow: auto;
 }
 
+.source-outline-panel.has-root > div {
+  height: 100%;
+}
+
 .sources-list .managed-tree .tree .node .img.blackBox {
   mask: url("resource://devtools/client/debugger/new/images/blackBox.svg") no-repeat;
   mask-size: 100%;
   background-color: var(--theme-highlight-blue);
   width: 13px;
   height: 13px;
   display: inline-block;
   margin-inline-end: 6px;
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/index.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/index.js
@@ -7,16 +7,17 @@
 import React, { Component } from "react";
 import classnames from "classnames";
 import { Tab, Tabs, TabList, TabPanels } from "react-aria-components/src/tabs";
 
 import actions from "../../actions";
 import {
   getRelativeSources,
   getActiveSearch,
+  getProjectDirectoryRoot,
   getSelectedPrimaryPaneTab,
   getThreads
 } from "../../selectors";
 import { features, prefs } from "../../utils/prefs";
 import { connect } from "../../utils/connect";
 import { formatKeyShortcut } from "../../utils/text";
 
 import Outline from "./Outline";
@@ -31,16 +32,17 @@ import "./Sources.css";
 type State = {
   alphabetizeOutline: boolean
 };
 
 type Props = {
   selectedTab: SelectedPrimaryPaneTabType,
   sources: SourcesMapByThread,
   horizontal: boolean,
+  projectRoot: string,
   sourceSearchOn: boolean,
   setPrimaryPaneTab: typeof actions.setPrimaryPaneTab,
   setActiveSearch: typeof actions.setActiveSearch,
   closeActiveSearch: typeof actions.closeActiveSearch,
   threads: Thread[]
 };
 
 class PrimaryPanes extends Component<Props, State> {
@@ -98,45 +100,51 @@ class PrimaryPanes extends Component<Pro
 
   renderThreadSources() {
     return this.props.threads.map(({ actor }) => (
       <SourcesTree thread={actor} key={actor} />
     ));
   }
 
   render() {
-    const { selectedTab } = this.props;
+    const { selectedTab, projectRoot } = this.props;
     const activeIndex = selectedTab === "sources" ? 0 : 1;
 
     return (
       <Tabs
         activeIndex={activeIndex}
         className="sources-panel"
         onActivateTab={this.onActivateTab}
       >
         <TabList className="source-outline-tabs">
           {this.renderOutlineTabs()}
         </TabList>
-        <TabPanels className="source-outline-panel" hasFocusableContent>
+        <TabPanels
+          className={classnames("source-outline-panel", {
+            "has-root": projectRoot
+          })}
+          hasFocusableContent
+        >
           <div>{this.renderThreadSources()}</div>
           <Outline
             alphabetizeOutline={this.state.alphabetizeOutline}
             onAlphabetizeClick={this.onAlphabetizeClick}
           />
         </TabPanels>
       </Tabs>
     );
   }
 }
 
 const mapStateToProps = state => ({
   selectedTab: getSelectedPrimaryPaneTab(state),
   sources: getRelativeSources(state),
   sourceSearchOn: getActiveSearch(state) === "source",
-  threads: getThreads(state)
+  threads: getThreads(state),
+  projectRoot: getProjectDirectoryRoot(state)
 });
 
 const connector = connect(
   mapStateToProps,
   {
     setPrimaryPaneTab: actions.setPrimaryPaneTab,
     setActiveSearch: actions.setActiveSearch,
     closeActiveSearch: actions.closeActiveSearch