Merge pull request #6 from jwlilly:Target-size

Target-size

Author: jwlilly

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "android-accessibility-inspector",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "View and analyze the accessibility tree for Android apps",
   "license": "GPL-3.0-only",
   "author": {

release/app/package-lock.json

@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+.Toastify__toast {
+  background-color: oklch(var(--b2)) !important;
+  color: oklch(var(--bc)) !important;
+}
+
+.Toastify__toast-icon {
+  fill: oklch(var(--in)) !important;
+}
+
 .tree-view [role="treeitem"] {
   cursor: pointer;
 }

release/app/package.json

@@ -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;
 }
@@ -9586,6 +9646,15 @@ html:has(.drawer-open.drawer-open) {
   --tab-border-color: ${borderColor};
 }
 
+.Toastify__toast {
+  background-color: oklch(var(--b2)) !important;
+  color: oklch(var(--bc)) !important;
+}
+
+.Toastify__toast-icon {
+  fill: oklch(var(--in)) !important;
+}
+
 .tree-view [role="treeitem"] {
   cursor: pointer;
 }

src/input.scss

@@ -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}