From edb33e9214201558ac65503622ea5e1c17af8cb7 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 21:57:41 +0530
Subject: [PATCH 01/26] feat: use MUI button

---
 src/components/organisms/BrowserWindow.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index daf95fee..cd050f7f 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSocketStore } from '../../context/socket';
+import { Button } from '@mui/material';
 import Canvas from "../atoms/canvas";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { Highlighter } from "../atoms/Highlighter";
@@ -240,9 +241,9 @@ export const BrowserWindow = () => {
                         <div>
                             <h2>Select Attribute</h2>
                             {attributeOptions.map((option) => (
-                                <button key={option.value} onClick={() => handleAttributeSelection(option.value)}>
+                                <Button key={option.value} onClick={() => handleAttributeSelection(option.value)}>
                                     {option.label}
-                                </button>
+                                </Button>
                             ))}
                         </div>
 

From e8031d94e84f53017ace76b51859075298aaf59b Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 21:59:16 +0530
Subject: [PATCH 02/26] feat: set variant to contained

---
 src/components/organisms/BrowserWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index cd050f7f..0fb1a2e4 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -241,7 +241,7 @@ export const BrowserWindow = () => {
                         <div>
                             <h2>Select Attribute</h2>
                             {attributeOptions.map((option) => (
-                                <Button key={option.value} onClick={() => handleAttributeSelection(option.value)}>
+                                <Button variant="contained" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
                                     {option.label}
                                 </Button>
                             ))}

From 82fa646a668c97f43406753b337597afbf906e9a Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:01:56 +0530
Subject: [PATCH 03/26] feat: set height to 30%

---
 src/components/atoms/GenericModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/atoms/GenericModal.tsx b/src/components/atoms/GenericModal.tsx
index 63aa6900..3ff0049e 100644
--- a/src/components/atoms/GenericModal.tsx
+++ b/src/components/atoms/GenericModal.tsx
@@ -37,7 +37,7 @@ const defaultModalStyle = {
   bgcolor: 'background.paper',
   boxShadow: 24,
   p: 4,
-  height: '60%',
+  height: '30%',
   display: 'block',
   overflow: 'scroll',
   padding: '5px 25px 10px 25px',

From 59f0d5a241b408c292fb6b8459a59ed9a170a1b4 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:02:20 +0530
Subject: [PATCH 04/26] feat: set overflow to hidden

---
 src/components/atoms/GenericModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/atoms/GenericModal.tsx b/src/components/atoms/GenericModal.tsx
index 3ff0049e..549d2f42 100644
--- a/src/components/atoms/GenericModal.tsx
+++ b/src/components/atoms/GenericModal.tsx
@@ -39,7 +39,7 @@ const defaultModalStyle = {
   p: 4,
   height: '30%',
   display: 'block',
-  overflow: 'scroll',
+  overflow: 'hidden',
   padding: '5px 25px 10px 25px',
   zIndex: 3147483647,
 };

From 46c5561208e54e943637b69b3f9528d2b6dc094e Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:07:32 +0530
Subject: [PATCH 05/26] feat: make button size medium

---
 src/components/organisms/BrowserWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 0fb1a2e4..d04b3065 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -241,7 +241,7 @@ export const BrowserWindow = () => {
                         <div>
                             <h2>Select Attribute</h2>
                             {attributeOptions.map((option) => (
-                                <Button variant="contained" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
+                                <Button variant="contained" size="medium" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
                                     {option.label}
                                 </Button>
                             ))}

From 963564d73870ace252efc5d50732ea1c40a6495a Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:07:58 +0530
Subject: [PATCH 06/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index d04b3065..40730684 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -246,7 +246,6 @@ export const BrowserWindow = () => {
                                 </Button>
                             ))}
                         </div>
-
                     </GenericModal>
                 ) : null
             }

From 0e69d09a8e52bbb0964f5127a22dd1aad4ea06a6 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:10:24 +0530
Subject: [PATCH 07/26] feat: display element info in getAttributeOptions

---
 src/components/organisms/BrowserWindow.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 40730684..47738ad3 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -21,23 +21,26 @@ interface AttributeOption {
     value: string;
 }
 
-const getAttributeOptions = (tagName: string): AttributeOption[] => {
+const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null): AttributeOption[] => {
+    if (!elementInfo) return [];
+
     switch (tagName.toLowerCase()) {
         case 'a':
             return [
-                { label: 'Text', value: 'innerText' },
-                { label: 'URL', value: 'href' }
+                { label: `Text: ${elementInfo.innerText || 'N/A'}`, value: 'innerText' },
+                { label: `URL: ${elementInfo.url || 'N/A'}`, value: 'href' }
             ];
         case 'img':
             return [
-                { label: 'Alt Text', value: 'alt' },
-                { label: 'Source URL', value: 'src' }
+                { label: `Alt Text: ${elementInfo.innerText || 'N/A'}`, value: 'alt' },
+                { label: `Source URL: ${elementInfo.imageUrl || 'N/A'}`, value: 'src' }
             ];
         default:
-            return [{ label: 'Text', value: 'innerText' }];
+            return [{ label: `Text: ${elementInfo.innerText || 'N/A'}`, value: 'innerText' }];
     }
 };
 
+
 export const BrowserWindow = () => {
     const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
     const [screenShot, setScreenShot] = useState<string>("");

From 2b30863aeaf3a28f6446a9875c20f6ade54e6fe2 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:10:40 +0530
Subject: [PATCH 08/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 47738ad3..ae5cc2f3 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -23,7 +23,6 @@ interface AttributeOption {
 
 const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null): AttributeOption[] => {
     if (!elementInfo) return [];
-
     switch (tagName.toLowerCase()) {
         case 'a':
             return [

From 186d4822821411b5433b579fa1a549803181eaf4 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:12:24 +0530
Subject: [PATCH 09/26] feat: pass highlighterData.elementInfo during
 handleClick

---
 src/components/organisms/BrowserWindow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index ae5cc2f3..77a027da 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -121,7 +121,7 @@ export const BrowserWindow = () => {
                 clickY <= highlightRect.bottom
             ) {
                 if (getText === true) {
-                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '');
+                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
                     if (options.length > 1) {
                         setAttributeOptions(options);
                         setSelectedElement({
@@ -141,7 +141,7 @@ export const BrowserWindow = () => {
                 if (getList === true && !listSelector) {
                     setListSelector(highlighterData.selector);
                 } else if (getList === true && listSelector) {
-                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '');
+                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
                     if (options.length > 1) {
                         setAttributeOptions(options);
                         setSelectedElement({

From abf00d61813d4cf580cc70a0f13a6137b6796098 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:16:30 +0530
Subject: [PATCH 10/26] feat: set button variant to outlined

---
 src/components/organisms/BrowserWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 77a027da..68a16653 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -243,7 +243,7 @@ export const BrowserWindow = () => {
                         <div>
                             <h2>Select Attribute</h2>
                             {attributeOptions.map((option) => (
-                                <Button variant="contained" size="medium" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
+                                <Button variant="outlined" size="medium" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
                                     {option.label}
                                 </Button>
                             ))}

From 27207cf9f00122b7c7910d405d4a5772b2e6e171 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:22:16 +0530
Subject: [PATCH 11/26] feat: style buttons vertically

---
 src/components/organisms/BrowserWindow.tsx | 42 +++++++++++++---------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 68a16653..c7b64d59 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -234,23 +234,31 @@ export const BrowserWindow = () => {
     return (
         <div onClick={handleClick}>
             {
-                getText === true || getList === true ? (
-                    <GenericModal
-                        isOpen={showAttributeModal}
-                        onClose={() => { }}
-                        canBeClosed={false}
-                    >
-                        <div>
-                            <h2>Select Attribute</h2>
-                            {attributeOptions.map((option) => (
-                                <Button variant="outlined" size="medium" key={option.value} onClick={() => handleAttributeSelection(option.value)}>
-                                    {option.label}
-                                </Button>
-                            ))}
-                        </div>
-                    </GenericModal>
-                ) : null
-            }
+    getText === true || getList === true ? (
+        <GenericModal
+            isOpen={showAttributeModal}
+            onClose={() => { }}
+            canBeClosed={false}
+        >
+            <div>
+                <h2>Select Attribute</h2>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                    {attributeOptions.map((option) => (
+                        <Button
+                            variant="outlined"
+                            size="medium"
+                            key={option.value}
+                            onClick={() => handleAttributeSelection(option.value)}
+                        >
+                            {option.label}
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        </GenericModal>
+    ) : null
+}
+
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}

From 15cdbf3c986c7bc4a86cabcaecc2116ee2e0e493 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:22:32 +0530
Subject: [PATCH 12/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 48 +++++++++++-----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index c7b64d59..6d6fdec9 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -234,30 +234,30 @@ export const BrowserWindow = () => {
     return (
         <div onClick={handleClick}>
             {
-    getText === true || getList === true ? (
-        <GenericModal
-            isOpen={showAttributeModal}
-            onClose={() => { }}
-            canBeClosed={false}
-        >
-            <div>
-                <h2>Select Attribute</h2>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                    {attributeOptions.map((option) => (
-                        <Button
-                            variant="outlined"
-                            size="medium"
-                            key={option.value}
-                            onClick={() => handleAttributeSelection(option.value)}
-                        >
-                            {option.label}
-                        </Button>
-                    ))}
-                </div>
-            </div>
-        </GenericModal>
-    ) : null
-}
+                getText === true || getList === true ? (
+                    <GenericModal
+                        isOpen={showAttributeModal}
+                        onClose={() => { }}
+                        canBeClosed={false}
+                    >
+                        <div>
+                            <h2>Select Attribute</h2>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                {attributeOptions.map((option) => (
+                                    <Button
+                                        variant="outlined"
+                                        size="medium"
+                                        key={option.value}
+                                        onClick={() => handleAttributeSelection(option.value)}
+                                    >
+                                        {option.label}
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+                    </GenericModal>
+                ) : null
+            }
 
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter

From f8e6c107ed9d9efe851c1dd62f794914f92247e4 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:25:59 +0530
Subject: [PATCH 13/26] feat: justify button text by flex-start

---
 src/components/organisms/BrowserWindow.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 6d6fdec9..2ec11d86 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -249,6 +249,7 @@ export const BrowserWindow = () => {
                                         size="medium"
                                         key={option.value}
                                         onClick={() => handleAttributeSelection(option.value)}
+                                        style={{ justifyContent: 'flex-start' }}
                                     >
                                         {option.label}
                                     </Button>

From fe32002227ea4197a18b42feb608624012de5b00 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:28:01 +0530
Subject: [PATCH 14/26] feat: trim text inside button

---
 src/components/organisms/BrowserWindow.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 2ec11d86..1d1b9d0e 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -249,7 +249,9 @@ export const BrowserWindow = () => {
                                         size="medium"
                                         key={option.value}
                                         onClick={() => handleAttributeSelection(option.value)}
-                                        style={{ justifyContent: 'flex-start' }}
+                                        style={{ justifyContent: 'flex-start', whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis' }}
                                     >
                                         {option.label}
                                     </Button>

From 947a3d734b78507379cbbe5fd4448e3599be0f5f Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:28:15 +0530
Subject: [PATCH 15/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 1d1b9d0e..37906b6c 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -249,9 +249,11 @@ export const BrowserWindow = () => {
                                         size="medium"
                                         key={option.value}
                                         onClick={() => handleAttributeSelection(option.value)}
-                                        style={{ justifyContent: 'flex-start', whiteSpace: 'nowrap',
+                                        style={{
+                                            justifyContent: 'flex-start', whiteSpace: 'nowrap',
                                             overflow: 'hidden',
-                                            textOverflow: 'ellipsis' }}
+                                            textOverflow: 'ellipsis'
+                                        }}
                                     >
                                         {option.label}
                                     </Button>

From 0078b869df040e784ba0e217c0718f30d777bdbf Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:32:04 +0530
Subject: [PATCH 16/26] feat: use span to properly truncate text inside button

---
 src/components/organisms/BrowserWindow.tsx | 68 +++++++++++++---------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 37906b6c..a849446b 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -234,35 +234,45 @@ export const BrowserWindow = () => {
     return (
         <div onClick={handleClick}>
             {
-                getText === true || getList === true ? (
-                    <GenericModal
-                        isOpen={showAttributeModal}
-                        onClose={() => { }}
-                        canBeClosed={false}
-                    >
-                        <div>
-                            <h2>Select Attribute</h2>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                                {attributeOptions.map((option) => (
-                                    <Button
-                                        variant="outlined"
-                                        size="medium"
-                                        key={option.value}
-                                        onClick={() => handleAttributeSelection(option.value)}
-                                        style={{
-                                            justifyContent: 'flex-start', whiteSpace: 'nowrap',
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis'
-                                        }}
-                                    >
-                                        {option.label}
-                                    </Button>
-                                ))}
-                            </div>
-                        </div>
-                    </GenericModal>
-                ) : null
-            }
+    getText === true || getList === true ? (
+        <GenericModal
+            isOpen={showAttributeModal}
+            onClose={() => { }}
+            canBeClosed={false}
+        >
+            <div>
+                <h2>Select Attribute</h2>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                    {attributeOptions.map((option) => (
+                        <Button
+                            variant="outlined"
+                            size="medium"
+                            key={option.value}
+                            onClick={() => handleAttributeSelection(option.value)}
+                            style={{
+                                justifyContent: 'flex-start',
+                                maxWidth: '200px',  
+                                overflow: 'hidden',
+                                padding: '5px 10px',
+                            }}
+                        >
+                            <span style={{
+                                display: 'block',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                maxWidth: '100%'  
+                            }}>
+                                {option.label}
+                            </span>
+                        </Button>
+                    ))}
+                </div>
+            </div>
+        </GenericModal>
+    ) : null
+}
+
 
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter

From 92c0cc258bd8eba6484b7f48d78639806ab7e587 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:32:20 +0530
Subject: [PATCH 17/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 76 +++++++++++-----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index a849446b..d4aa0b15 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -234,44 +234,44 @@ export const BrowserWindow = () => {
     return (
         <div onClick={handleClick}>
             {
-    getText === true || getList === true ? (
-        <GenericModal
-            isOpen={showAttributeModal}
-            onClose={() => { }}
-            canBeClosed={false}
-        >
-            <div>
-                <h2>Select Attribute</h2>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                    {attributeOptions.map((option) => (
-                        <Button
-                            variant="outlined"
-                            size="medium"
-                            key={option.value}
-                            onClick={() => handleAttributeSelection(option.value)}
-                            style={{
-                                justifyContent: 'flex-start',
-                                maxWidth: '200px',  
-                                overflow: 'hidden',
-                                padding: '5px 10px',
-                            }}
-                        >
-                            <span style={{
-                                display: 'block',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                maxWidth: '100%'  
-                            }}>
-                                {option.label}
-                            </span>
-                        </Button>
-                    ))}
-                </div>
-            </div>
-        </GenericModal>
-    ) : null
-}
+                getText === true || getList === true ? (
+                    <GenericModal
+                        isOpen={showAttributeModal}
+                        onClose={() => { }}
+                        canBeClosed={false}
+                    >
+                        <div>
+                            <h2>Select Attribute</h2>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                {attributeOptions.map((option) => (
+                                    <Button
+                                        variant="outlined"
+                                        size="medium"
+                                        key={option.value}
+                                        onClick={() => handleAttributeSelection(option.value)}
+                                        style={{
+                                            justifyContent: 'flex-start',
+                                            maxWidth: '200px',
+                                            overflow: 'hidden',
+                                            padding: '5px 10px',
+                                        }}
+                                    >
+                                        <span style={{
+                                            display: 'block',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            maxWidth: '100%'
+                                        }}>
+                                            {option.label}
+                                        </span>
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+                    </GenericModal>
+                ) : null
+            }
 
 
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?

From 6ccd64f550ea99c833fea03368651220d7cbf2ea Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:37:32 +0530
Subject: [PATCH 18/26] fix: -rm whitespace

---
 src/components/organisms/BrowserWindow.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index d4aa0b15..70cd1607 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -251,7 +251,7 @@ export const BrowserWindow = () => {
                                         onClick={() => handleAttributeSelection(option.value)}
                                         style={{
                                             justifyContent: 'flex-start',
-                                            maxWidth: '200px',
+                                            maxWidth: '80%',
                                             overflow: 'hidden',
                                             padding: '5px 10px',
                                         }}
@@ -272,8 +272,6 @@ export const BrowserWindow = () => {
                     </GenericModal>
                 ) : null
             }
-
-
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}

From d6f067e2a61d1132be63e48d42da02a07fa3afce Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:42:54 +0530
Subject: [PATCH 19/26] feat: margin between heading & buttons

---
 src/components/organisms/BrowserWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 70cd1607..d4c9d543 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -242,7 +242,7 @@ export const BrowserWindow = () => {
                     >
                         <div>
                             <h2>Select Attribute</h2>
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginTop: '30px' }}>
                                 {attributeOptions.map((option) => (
                                     <Button
                                         variant="outlined"

From 7338dcce0e30f5a6cc75930e4262052e2352383c Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 22:51:10 +0530
Subject: [PATCH 20/26] fix: remove || NA

---
 src/components/organisms/BrowserWindow.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index d4c9d543..208ea36b 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -26,16 +26,16 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
     switch (tagName.toLowerCase()) {
         case 'a':
             return [
-                { label: `Text: ${elementInfo.innerText || 'N/A'}`, value: 'innerText' },
-                { label: `URL: ${elementInfo.url || 'N/A'}`, value: 'href' }
+                { label: `Text: ${elementInfo.innerText}`, value: 'innerText' },
+                { label: `URL: ${elementInfo.url}`, value: 'href' }
             ];
         case 'img':
             return [
-                { label: `Alt Text: ${elementInfo.innerText || 'N/A'}`, value: 'alt' },
-                { label: `Source URL: ${elementInfo.imageUrl || 'N/A'}`, value: 'src' }
+                { label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' },
+                { label: `Source URL: ${elementInfo.imageUrl}`, value: 'src' }
             ];
         default:
-            return [{ label: `Text: ${elementInfo.innerText || 'N/A'}`, value: 'innerText' }];
+            return [{ label: `Text: ${elementInfo.innerText}`, value: 'innerText' }];
     }
 };
 

From 489096095fa356deee88a9bb71c9159642670e23 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:11:51 +0530
Subject: [PATCH 21/26] feat: check if alt text present in img tag

---
 src/components/organisms/BrowserWindow.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 208ea36b..07114501 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -30,10 +30,14 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
                 { label: `URL: ${elementInfo.url}`, value: 'href' }
             ];
         case 'img':
-            return [
-                { label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' },
-                { label: `Source URL: ${elementInfo.imageUrl}`, value: 'src' }
-            ];
+            const options: AttributeOption[] = [];
+            if (elementInfo.innerText) {
+                options.push({ label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' });
+            }
+            if (elementInfo.imageUrl) {
+                options.push({ label: `Source URL: ${elementInfo.imageUrl}`, value: 'src' });
+            }
+            return options;
         default:
             return [{ label: `Text: ${elementInfo.innerText}`, value: 'innerText' }];
     }

From 61ba50d0e0283d5dcf9dc790ef98dded55a921e1 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:12:11 +0530
Subject: [PATCH 22/26] feat: rename Source to Image

---
 src/components/organisms/BrowserWindow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 07114501..295cf57b 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -35,7 +35,7 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
                 options.push({ label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' });
             }
             if (elementInfo.imageUrl) {
-                options.push({ label: `Source URL: ${elementInfo.imageUrl}`, value: 'src' });
+                options.push({ label: `Image URL: ${elementInfo.imageUrl}`, value: 'src' });
             }
             return options;
         default:

From 9d75dd156d82b9ffca23bc6e0463e7b89c869a1e Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:34:30 +0530
Subject: [PATCH 23/26] feat: handle a & img tags attribute options

---
 src/components/organisms/BrowserWindow.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 295cf57b..12a7b32c 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -25,19 +25,23 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
     if (!elementInfo) return [];
     switch (tagName.toLowerCase()) {
         case 'a':
-            return [
-                { label: `Text: ${elementInfo.innerText}`, value: 'innerText' },
-                { label: `URL: ${elementInfo.url}`, value: 'href' }
-            ];
-        case 'img':
-            const options: AttributeOption[] = [];
+            const anchorOptions: AttributeOption[] = [];
             if (elementInfo.innerText) {
-                options.push({ label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' });
+                anchorOptions.push({ label: `Text: ${elementInfo.innerText}`, value: 'innerText' });
+            }
+            if (elementInfo.url) {
+                anchorOptions.push({ label: `URL: ${elementInfo.url}`, value: 'href' });
+            }
+            return anchorOptions;
+        case 'img':
+            const imgOptions: AttributeOption[] = [];
+            if (elementInfo.innerText) {
+                imgOptions.push({ label: `Alt Text: ${elementInfo.innerText}`, value: 'alt' });
             }
             if (elementInfo.imageUrl) {
-                options.push({ label: `Image URL: ${elementInfo.imageUrl}`, value: 'src' });
+                imgOptions.push({ label: `Image URL: ${elementInfo.imageUrl}`, value: 'src' });
             }
-            return options;
+            return imgOptions;
         default:
             return [{ label: `Text: ${elementInfo.innerText}`, value: 'innerText' }];
     }

From a5db763295e524fe627c9f8332daa58adbe04066 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:38:00 +0530
Subject: [PATCH 24/26] feat: handle a & img tags attribute click selection

---
 src/components/organisms/BrowserWindow.tsx | 56 +++++++++++++---------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 12a7b32c..eaf58760 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -120,7 +120,7 @@ export const BrowserWindow = () => {
             const canvasRect = canvasRef.current.getBoundingClientRect();
             const clickX = e.clientX - canvasRect.left;
             const clickY = e.clientY - canvasRect.top;
-
+    
             const highlightRect = highlighterData.rect;
             if (
                 clickX >= highlightRect.left &&
@@ -128,36 +128,38 @@ export const BrowserWindow = () => {
                 clickY >= highlightRect.top &&
                 clickY <= highlightRect.bottom
             ) {
+                const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
+                
                 if (getText === true) {
-                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
-                    if (options.length > 1) {
+                    if (options.length === 1) {
+                        // Directly use the available attribute if only one option is present
+                        const attribute = options[0].value;
+                        const data = attribute === 'href' ? highlighterData.elementInfo?.url || '' :
+                                      attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
+                                      highlighterData.elementInfo?.innerText || '';
+                        
+                        addTextStep('', data, {
+                            selector: highlighterData.selector,
+                            tag: highlighterData.elementInfo?.tagName,
+                            attribute
+                        });
+                    } else {
+                        // Show the modal if there are multiple options
                         setAttributeOptions(options);
                         setSelectedElement({
                             selector: highlighterData.selector,
                             info: highlighterData.elementInfo
                         });
                         setShowAttributeModal(true);
-                    } else {
-                        addTextStep('', highlighterData.elementInfo?.innerText || '', {
-                            selector: highlighterData.selector,
-                            tag: highlighterData.elementInfo?.tagName,
-                            attribute: 'innerText'
-                        });
                     }
                 }
-
+    
                 if (getList === true && !listSelector) {
                     setListSelector(highlighterData.selector);
                 } else if (getList === true && listSelector) {
-                    const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
-                    if (options.length > 1) {
-                        setAttributeOptions(options);
-                        setSelectedElement({
-                            selector: highlighterData.selector,
-                            info: highlighterData.elementInfo
-                        });
-                        setShowAttributeModal(true);
-                    } else {
+                    if (options.length === 1) {
+                        // Handle directly without showing the modal
+                        const attribute = options[0].value;
                         const newField: TextStep = {
                             id: Date.now(),
                             type: 'text',
@@ -166,10 +168,10 @@ export const BrowserWindow = () => {
                             selectorObj: {
                                 selector: highlighterData.selector,
                                 tag: highlighterData.elementInfo?.tagName,
-                                attribute: 'innerText'
+                                attribute
                             }
                         };
-
+    
                         setFields(prevFields => {
                             const updatedFields = {
                                 ...prevFields,
@@ -177,16 +179,24 @@ export const BrowserWindow = () => {
                             };
                             return updatedFields;
                         });
-
+    
                         if (listSelector) {
                             addListStep(listSelector, { ...fields, [newField.label]: newField });
                         }
+                    } else {
+                        // Show the modal if there are multiple options
+                        setAttributeOptions(options);
+                        setSelectedElement({
+                            selector: highlighterData.selector,
+                            info: highlighterData.elementInfo
+                        });
+                        setShowAttributeModal(true);
                     }
-
                 }
             }
         }
     };
+    
 
     const handleAttributeSelection = (attribute: string) => {
         if (selectedElement) {

From dde5509ea513eee9c407e874239f53bd5d572298 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:38:33 +0530
Subject: [PATCH 25/26] chore: lint

---
 src/components/organisms/BrowserWindow.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index eaf58760..d11d5855 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -120,7 +120,7 @@ export const BrowserWindow = () => {
             const canvasRect = canvasRef.current.getBoundingClientRect();
             const clickX = e.clientX - canvasRect.left;
             const clickY = e.clientY - canvasRect.top;
-    
+
             const highlightRect = highlighterData.rect;
             if (
                 clickX >= highlightRect.left &&
@@ -129,15 +129,15 @@ export const BrowserWindow = () => {
                 clickY <= highlightRect.bottom
             ) {
                 const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '', highlighterData.elementInfo);
-                
+
                 if (getText === true) {
                     if (options.length === 1) {
                         // Directly use the available attribute if only one option is present
                         const attribute = options[0].value;
                         const data = attribute === 'href' ? highlighterData.elementInfo?.url || '' :
-                                      attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
-                                      highlighterData.elementInfo?.innerText || '';
-                        
+                            attribute === 'src' ? highlighterData.elementInfo?.imageUrl || '' :
+                                highlighterData.elementInfo?.innerText || '';
+
                         addTextStep('', data, {
                             selector: highlighterData.selector,
                             tag: highlighterData.elementInfo?.tagName,
@@ -153,7 +153,7 @@ export const BrowserWindow = () => {
                         setShowAttributeModal(true);
                     }
                 }
-    
+
                 if (getList === true && !listSelector) {
                     setListSelector(highlighterData.selector);
                 } else if (getList === true && listSelector) {
@@ -171,7 +171,7 @@ export const BrowserWindow = () => {
                                 attribute
                             }
                         };
-    
+
                         setFields(prevFields => {
                             const updatedFields = {
                                 ...prevFields,
@@ -179,7 +179,7 @@ export const BrowserWindow = () => {
                             };
                             return updatedFields;
                         });
-    
+
                         if (listSelector) {
                             addListStep(listSelector, { ...fields, [newField.label]: newField });
                         }
@@ -196,7 +196,7 @@ export const BrowserWindow = () => {
             }
         }
     };
-    
+
 
     const handleAttributeSelection = (attribute: string) => {
         if (selectedElement) {

From 6b8cd3c67eff30b466898ff5e2a72b8e26accfd6 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 21 Aug 2024 23:39:12 +0530
Subject: [PATCH 26/26] fix: whitespace

---
 src/components/organisms/BrowserWindow.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index d11d5855..6a8cd800 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -47,7 +47,6 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
     }
 };
 
-
 export const BrowserWindow = () => {
     const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
     const [screenShot, setScreenShot] = useState<string>("");
@@ -197,7 +196,6 @@ export const BrowserWindow = () => {
         }
     };
 
-
     const handleAttributeSelection = (attribute: string) => {
         if (selectedElement) {
             let data = '';