Bug 1949058 - [devtools] Update Debugger source tree settings icon to avoid overlapping r=devtools-reviewers,nchevobbe

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

devtools/client/debugger/src/components/PrimaryPanes/Sources.css

@@ -53,9 +53,21 @@
 
 .sources-list .debugger-settings-menu-button {
   position: absolute;
-  top: 5px;
-  right: 5px;
+  top: 1px;
+  right: 0px;
   z-index: 5;
+
+  background: var(--theme-toolbar-background);
+  min-width: unset;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--theme-splitter-color);
+  border-top-width: 0;
+}
+
+.sources-list.sources-list-has-overflow:not(.sources-list-custom-root)
+  .debugger-settings-menu-button {
+  right: 15px;
 }
 
 .sources-list .sources-clear-root-container {

devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js

@@ -51,7 +51,13 @@ class SourcesTree extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      hasOverflow: undefined,
+    };
+
+    // Monitor resize to check if the source tree shows a scrollbar.
+    this.onResize = this.onResize.bind(this);
+    this.resizeObserver = new ResizeObserver(this.onResize);
   }
 
   static get propTypes() {
@@ -71,6 +77,33 @@ class SourcesTree extends Component {
     };
   }
 
+  onResize() {
+    const tree = this.refs.tree;
+    if (!tree) {
+      return;
+    }
+
+    // "treeRef" is created via createRef() in the Tree component.
+    const treeEl = tree.treeRef.current;
+    const hasOverflow = treeEl.scrollHeight > treeEl.clientHeight;
+    if (hasOverflow !== this.state.hasOverflow) {
+      this.setState({ hasOverflow });
+    }
+  }
+
+  componentDidUpdate() {
+    this.onResize();
+  }
+
+  componentDidMount() {
+    this.resizeObserver.observe(this.refs.pane);
+    this.onResize();
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver.disconnect();
+  }
+
   selectSourceItem = item => {
     this.props.selectSource(item.source, item.sourceActor);
   };
@@ -275,6 +308,7 @@ class SourcesTree extends Component {
         return this.props.expanded.has(this.getKey(item));
       },
       onActivate: this.onActivate,
+      ref: "tree",
       renderItem: this.renderItem,
       preventBlur: true,
     };
@@ -362,8 +396,10 @@ class SourcesTree extends Component {
     return div(
       {
         key: "pane",
+        ref: "pane",
         className: classnames("sources-list", {
           "sources-list-custom-root": !!projectRoot,
+          "sources-list-has-overflow": this.state.hasOverflow,
         }),
       },
       this.renderSettingsButton(),