Changed style and position of search-for-element button to more closely matchin Chrome ( based on user testing)

src/devtools/views/ButtonIcon.js

@@ -172,9 +172,8 @@ const PATH_RELOAD = `
 `;
 
 const PATH_SEARCH = `
-  M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46
-  4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87
-  0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z
+  M8.5,22H3.7l-1.4-1.5V3.8l1.3-1.5h17.2l1,1.5v4.9h-1.3V4.3l-0.4-0.6H4.2L3.6,4.3V20l0.7,0.7h4.2V22z
+  M23,13.9l-4.6,3.6l4.6,4.6l-1.1,1.1l-4.7-4.4l-3.3,4.4l-3.2-12.3L23,13.9z
 `;
 
 const PATH_UNDO = `

src/devtools/views/Components/OwnersStack.js

@@ -50,14 +50,6 @@ export default function OwnerStack() {
 
   return (
     <div className={styles.OwnerStack}>
-      <Button
-        className={styles.IconButton}
-        onClick={resetOwnerStack}
-        title="Back to tree view"
-      >
-        <ButtonIcon type="close" />
-      </Button>
-      <div className={styles.VRule} />
       <div className={styles.Bar} ref={elementsBarRef}>
         {isOverflowing && (
           <ElementsDropdown
@@ -76,6 +68,14 @@ export default function OwnerStack() {
           ))
         )}
       </div>
+      <div className={styles.VRule} />
+      <Button
+        className={styles.IconButton}
+        onClick={resetOwnerStack}
+        title="Back to tree view"
+      >
+        <ButtonIcon type="close" />
+      </Button>
     </div>
   );
 }

src/devtools/views/Components/SearchInput.css

@@ -18,6 +18,7 @@
 .InputIcon {
   pointer-events: none;
   z-index: 2;
+  color: var(--color-dim);
 }
 
 .IndexLabel {

src/devtools/views/Components/SearchInput.js

@@ -127,7 +127,6 @@ export default function SearchInput(props: Props) {
       >
         <ButtonIcon type="close" />
       </Button>
-      <div className={styles.RightVRule} />
     </div>
   );
 }

src/devtools/views/Components/Tree.css

@@ -29,3 +29,10 @@
   font-size: var(--font-size-monospace-normal);
   line-height: var(--line-height-data);
 }
+
+.VRule {
+  height: 20px;
+  width: 1px;
+  margin: 0 0.5rem;
+  background-color: var(--color-border);
+}

src/devtools/views/Components/Tree.js

@@ -290,8 +290,9 @@ export default function Tree(props: Props) {
   return (
     <div className={styles.Tree} ref={treeRef}>
       <div className={styles.SearchInput}>
-        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
         <InspectHostNodesToggle />
+        <div className={styles.VRule} />
+        {ownerStack.length > 0 ? <OwnersStack /> : <SearchInput />}
       </div>
       <div
         className={styles.AutoSizerWrapper}