Fixing webview icon issue

Finishing up target size indication

Author: jwlilly

src/renderer/index.scss

@@ -8405,6 +8405,42 @@ html:has(.drawer-open.drawer-open) {
   top: 5px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
+.left-\[5px\] {
+  left: 5px;
+}
+
+.left-\[10px\] {
+  left: 10px;
+}
+
+.left-\[15px\] {
+  left: 15px;
+}
+
+.left-\[16px\] {
+  left: 16px;
+}
+
+.left-\[12px\] {
+  left: 12px;
+}
+
+.left-\[8px\] {
+  left: 8px;
+}
+
+.left-\[6px\] {
+  left: 6px;
+}
+
+.left-\[4px\] {
+  left: 4px;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -8507,6 +8543,10 @@ html:has(.drawer-open.drawer-open) {
   display: flex;
 }
 
+.\!flex {
+  display: flex !important;
+}
+
 .inline-flex {
   display: inline-flex;
 }
@@ -8631,6 +8671,18 @@ html:has(.drawer-open.drawer-open) {
   height: 100vh;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .max-h-\[calc\(100vh-150px\)\] {
   max-height: calc(100vh - 150px);
 }
@@ -9155,6 +9207,14 @@ html:has(.drawer-open.drawer-open) {
   stroke: #fff;
 }
 
+.stroke-1 {
+  stroke-width: 1;
+}
+
+.stroke-2 {
+  stroke-width: 2;
+}
+
 .p-2 {
   padding: 0.5rem;
 }

src/renderer/views/basic-tree-view.tsx

@@ -8,7 +8,11 @@ import TreeView, {
 } from 'react-accessible-treeview';
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/16/solid';
 import { useCallback, useEffect, useState } from 'react';
-import { GlobeAltIcon } from '@heroicons/react/24/outline';
+import {
+  GlobeAltIcon,
+  MagnifyingGlassIcon,
+  ViewfinderCircleIcon,
+} from '@heroicons/react/24/outline';
 import { IFlatMetadata } from 'react-accessible-treeview/dist/TreeView/utils';
 
 function ArrowIcon({ isOpen, ...props }: any) {
@@ -25,6 +29,8 @@ const BasicTreeView = function BasicTreeView({
   onViewHovered,
   selectedView,
   searchTerm,
+  showTargetSize,
+  overlappingViews,
 }: any) {
   const [key, setKey] = useState(0);
   const [expandedIds, setExpandedIds] = useState(
@@ -171,13 +177,19 @@ const BasicTreeView = function BasicTreeView({
               })
                 ? 'search-term'
                 : ''
-            }`}
+            } ${element.name.includes('WebView') && 'webview'}`}
           >
-            <span className="indicator-item badge badge-warning badge-sm top-[5px]" />
+            <span
+              aria-hidden="true"
+              title="search term found"
+              className="indicator-item badge badge-warning badge-sm top-[5px]"
+            >
+              <MagnifyingGlassIcon className="h-4 text-warning-content stroke-2" />
+            </span>
             <div
               // eslint-disable-next-line react/jsx-props-no-spreading
               {...getNodeProps({})}
-              className={`${!isBranch ? 'ml-1' : ''} pl-[10px] my-1 ${element.name.includes('WebView') && 'webview'}`}
+              className={`${!isBranch ? 'ml-1' : ''} pl-[10px] my-1`}
               onMouseOver={() => {
                 viewHovered(element);
               }}
@@ -193,6 +205,20 @@ const BasicTreeView = function BasicTreeView({
                 aria-label="search term found"
                 className="search-term-label"
               />
+
+              {showTargetSize &&
+              overlappingViews.find((item: any) => {
+                return item.id === element.id;
+              }) ? (
+                <span
+                  role="img"
+                  aria-label="possible target size overlap"
+                  title="possible target size overlap"
+                  className="indicator indicator-item badge badge-error badge-sm top-[5px] left-[4px] !flex"
+                >
+                  <ViewfinderCircleIcon className="h-4 text-error-content stroke-2" />
+                </span>
+              ) : null}
               {isBranch && (
                 <ArrowIcon
                   isOpen={isExpanded}

src/renderer/views/main-view.tsx

@@ -6,10 +6,11 @@ import {
   INode,
   ITreeViewOnSelectProps,
 } from 'react-accessible-treeview';
-import { Navbar } from 'react-daisyui';
+import { Button, Navbar } from 'react-daisyui';
 import {
   DevicePhoneMobileIcon,
   MagnifyingGlassIcon,
+  ViewfinderCircleIcon,
 } from '@heroicons/react/24/outline';
 import { IDevice } from 'adb-ts/lib/util';
 import { ToastContainer, toast } from 'react-toastify';
@@ -33,6 +34,7 @@ function MainView(): React.JSX.Element {
   const [screencap, setScreencap] = useState<string | null>(null);
   const [deviceExpanded, setDeviceExpanded] = useState(false);
   const [searchExpanded, setSearchExpanded] = useState(false);
+  const [showTargetSize, setShowTargetSize] = useState(true);
   const [logMessages, setLogMessages] = useState<
     { time: string; type: string; message: string; id: number }[]
   >([]);
@@ -130,8 +132,13 @@ function MainView(): React.JSX.Element {
       return clickable;
     });
     centers.forEach((item1, index) => {
-      centers.slice(index + 1).forEach(item2 => {
-        if (Math.sqrt(Math.pow(item2.center.left - item1.center.left, 2) + Math.pow(item2.center.top - item1.center.top, 2)) < 24) {
+      centers.slice(index + 1).forEach((item2) => {
+        if (
+          Math.sqrt(
+            (item2.center.left - item1.center.left) ** 2 +
+              (item2.center.top - item1.center.top) ** 2,
+          ) < 24
+        ) {
           overlaps.push(item1.element);
           overlaps.push(item2.element);
         }
@@ -216,6 +223,10 @@ function MainView(): React.JSX.Element {
     });
   };
 
+  const toggleTargetSize = () => {
+    setShowTargetSize(!showTargetSize);
+  };
+
   return (
     <div className="flex w-screen h-screen flex-column bg-base-200">
       <Navbar
@@ -229,6 +240,18 @@ function MainView(): React.JSX.Element {
             onScreencapReceived={screencapReceived}
             onDisconnected={onDisconnected}
           />
+          <Button
+            className={`ml-2 ${showTargetSize ? 'btn-primary' : 'btn-accent'} btn-outline`}
+            aria-pressed={showTargetSize}
+            active={showTargetSize}
+            onClick={toggleTargetSize}
+            aria-label="show target size issues"
+          >
+            <ViewfinderCircleIcon
+              className="h-[24px]"
+              title="show target size issues"
+            />
+          </Button>
         </Navbar.Start>
         <Navbar.Center>
           <h1 className="text-xl">
@@ -317,6 +340,7 @@ function MainView(): React.JSX.Element {
             dataTree={viewHierarchy}
             onViewSelected={onHoveredViewSelected}
             overlappingViews={overlappingViews}
+            showTargetSize={showTargetSize}
           />
         </div>
         <Splitter
@@ -336,6 +360,8 @@ function MainView(): React.JSX.Element {
               onViewHovered={viewHovered}
               selectedView={selectedView}
               searchTerm={searchTerm}
+              showTargetSize={showTargetSize}
+              overlappingViews={overlappingViews}
             />
           </div>
           <Splitter

src/renderer/views/screenshot.tsx

@@ -15,6 +15,7 @@ const Screenshot = function Screenshot({
   dataTree,
   onViewSelected,
   overlappingViews,
+  showTargetSize,
 }: any) {
   const [screencapHeight, setScreencapHeight] = useState(0);
   const [screencapWidth, setScreencapWidth] = useState(0);
@@ -154,22 +155,25 @@ const Screenshot = function Screenshot({
               onClick={svgClick}
             >
               <image href={`data:image/png;base64,${screencap}`} />
-              {overlappingViews.map((overlappingView: any) => (
-                <circle
-                  r={((screencapWidth / width) * 10).toFixed(0)}
-                  cx={
-                    (overlappingView.metadata.x2 +
-                      overlappingView.metadata.x1) /
-                    2
-                  }
-                  cy={
-                    (overlappingView.metadata.y2 +
-                      overlappingView.metadata.y1) /
-                    2
-                  }
-                  fill="rgba(255, 0, 0, 0.3)"
-                />
-              ))}
+              {showTargetSize
+                ? overlappingViews.map((overlappingView: any) => (
+                    <circle
+                      r={((screencapWidth / width) * 10).toFixed(0)}
+                      cx={
+                        (overlappingView.metadata.x2 +
+                          overlappingView.metadata.x1) /
+                        2
+                      }
+                      cy={
+                        (overlappingView.metadata.y2 +
+                          overlappingView.metadata.y1) /
+                        2
+                      }
+                      fill="rgba(255, 0, 0, 0.3)"
+                    />
+                  ))
+                : null}
+
               {hoverCoord.x !== 0 ||
               hoverCoord.y !== 0 ||
               hoverCoord.width !== 0 ||