Minor UI enhacements

rohitasare7 · Dec 22, 2024 · 4892919 · 4892919
1 parent 3ca64fc
commit 4892919
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 25 deletions.
diff --git a/dist/app.html b/dist/app.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.709bfd7e.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
diff --git a/dist/css/chunk-common.28654670.css → dist/css/chunk-common.709bfd7e.css b/dist/css/chunk-common.28654670.css → dist/css/chunk-common.709bfd7e.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>Home</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/index.4dc2d7f8.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/index.14054b0c.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>Home</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/index.4e2eb843.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.709bfd7e.css" rel="stylesheet"><link href="/css/index.14054b0c.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
diff --git a/dist/js/content-script.js b/dist/js/content-script.js
@@ -426,26 +426,57 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   console.log('inside event --> ' + JSON.stringify(message));
   if (message.msg === 'HIGHLIGHT_ELEMENT') {
     console.log('inside HIGHLIGHT_ELEMENT');
-    const response = highlightElement(message.elementName);
+    const response = highlightElement(message.elementName, message.popupText);
     sendResponse(response);
-  } else if (message.msg === 'REMOVE_HIGHLIGHT') {
+  }
+  else if (message.msg === 'REMOVE_HIGHLIGHT') {
     const response = removeHighlight(message.elementName);
     sendResponse(response);
   }
   return false; // Not doing any async work
 });
 
 // Method to highlight the child element
-function highlightElement(selector) {
+function highlightElement(selector, elementName) {
   const parentElement = document.querySelector(selector); // Parent element
   if (parentElement) {
     // Select the first child div
     const childDiv = parentElement.querySelector('div');
     if (childDiv) {
+      const originalPosition = childDiv.style.position || null;
+      childDiv.setAttribute('osh-data-original-position', originalPosition);
+
       childDiv.style.border = '3px solid #007bff'; // Apply border instead of outline
       childDiv.style.padding = '2px'; // Optionally add padding to make it stand out more
       childDiv.style.borderRadius = '5px'; // Optional: rounded corners for a softer look
       childDiv.style.boxShadow = '0 4px 15px rgba(0, 123, 255, 0.5)'; // Subtle glow effect
+
+      // Create a tooltip element
+      const tooltip = document.createElement('div');
+      tooltip.classList.add('highlight-tooltip');
+      tooltip.innerText = elementName;
+
+      // Apply tooltip styles
+      tooltip.style.position = 'absolute';
+      tooltip.style.backgroundColor = '#007bff';
+      tooltip.style.color = 'white';
+      tooltip.style.padding = '5px 10px';
+      tooltip.style.borderRadius = '.5rem';
+      tooltip.style.fontSize = '12px';
+      tooltip.style.zIndex = '9999';
+      tooltip.style.boxShadow = '0 4px 15px rgba(0, 123, 255, 0.5)';
+
+      // Position the tooltip relative to the childDiv without modifying its position
+      const rect = childDiv.getBoundingClientRect();
+      tooltip.style.top = `${rect.top - 30}px`; // Position above the element
+      tooltip.style.left = `${rect.left}px`;
+
+      // Append the tooltip to the document body
+      document.body.appendChild(tooltip);
+
+      // Store the tooltip reference for removal later
+      childDiv._tooltipElement = tooltip;
+
       return { success: true, message: 'Child element highlighted.' };
     } else {
       return { success: false, message: 'Child div not found.' };
@@ -465,6 +496,14 @@ function removeHighlight(selector) {
       childDiv.style.padding = ''; // Remove padding if added
       childDiv.style.borderRadius = ''; // Remove border radius if added
       childDiv.style.boxShadow = ''; // Remove box shadow if added
+      // Remove the tooltip if it exists
+      if (childDiv._tooltipElement) {
+        const tooltip = childDiv._tooltipElement; // Retrieve the stored tooltip reference
+        if (tooltip.parentNode) {
+          tooltip.parentNode.removeChild(tooltip); // Remove tooltip from the DOM
+        }
+        delete childDiv._tooltipElement; // Clean up reference to avoid memory leaks
+      }
       return { success: true, message: 'Highlight removed.' };
     } else {
       return { success: false, message: 'Child div not found.' };

diff --git a/dist/js/index.4dc2d7f8.js b/dist/js/index.4dc2d7f8.js
diff --git a/dist/js/index.4dc2d7f8.js.map b/dist/js/index.4dc2d7f8.js.map
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.28654670.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>App</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/app.14ebf52e.js"></script><link href="/css/chunk-vendors.201e2f5c.css" rel="stylesheet"><link href="/css/chunk-common.709bfd7e.css" rel="stylesheet"><link href="/css/app.6c7584f0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="secondaryApp"></div></body></html>