[DevTools] Inlcude Activity list in Components tab

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/Components/Components.css

@@ -15,11 +15,16 @@
 }
 
 .TreeWrapper {
-  flex: 0 0 var(--horizontal-resize-percentage);
+  border-top: 1px solid var(--color-border);
+  flex: 1 1 65%;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: auto;
 }
 
 .InspectedElementWrapper {
-  flex: 1 1 35%;
+  flex: 0 0 calc(100% - var(--horizontal-resize-tree-percentage));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -42,6 +47,11 @@
   width: 5px;
   height: 100%;
   cursor: ew-resize;
+  /*
+   * The tree in the Components tab has no inherent padding. Make sure these are 
+   * grabbable by elevating the element.
+   */
+  z-index: 1;
 }
 
 @container devtools (width < 600px) {
@@ -50,20 +60,46 @@
   }
 
   .TreeWrapper {
-    flex: 0 0 var(--vertical-resize-percentage);
+    border-top: 1px solid var(--color-border);
+    flex: 1 1 50%;
+    overflow: hidden;
   }
 
   .InspectedElementWrapper {
-    flex: 1 1 50%;
+    flex: 0 0 calc(100% - var(--vertical-resize-tree-percentage));
   }
 
-  .ResizeBar {
+  .TreeWrapper + .ResizeBarWrapper .ResizeBar {
     top: 1px;
     left: 0;
     width: 100%;
     height: 5px;
     cursor: ns-resize;
   }
+
+  .ToggleInspectedElement[data-orientation="horizontal"] {
+    display: none;
+  }
+}
+
+@container devtools (width >= 600px) {
+  .ToggleInspectedElement[data-orientation="vertical"] {
+    display: none;
+  }
+}
+
+.ActivityList {
+  flex: 0 0 var(--horizontal-resize-activity-list-percentage);;
+  border-right: 1px solid var(--color-border);
+  overflow: auto;
+}
+
+.TreeView {
+  flex: 1 1 35%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
 }
 
 .Loading {