Added feature to highlight elements

rohitasare7 · Dec 22, 2024 · 3ca64fc · 3ca64fc
2 parents 0c5bf14 + 91d0453
commit 3ca64fc
Show file tree

Hide file tree

Showing 11 changed files with 210 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist/install.zip
 dist/dist.zip
+extension/OS_Helper.zip
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.3853c14f.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.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>
diff --git a/dist/js/content-script.js b/dist/js/content-script.js
@@ -27,11 +27,11 @@ window.addEventListener('load', function () {
     const targetDiv = document.querySelector('.vloc-body.Theme3');
 
     if (targetDiv) {
-      injectStyles();
       targetDiv.classList.add('slds-grid--frame');
     }
   }
 
+  injectStyles();
   // Create the button and attach it to the DOM
   const button = createButton();
   attachButton(button);
@@ -195,9 +195,14 @@ function capitalizeFirstLetter(string) {
 // }
 
 function isLwcOmniScript(element) {
-  return element && element.tagName == "ARTICLE" && element.classList && Array.from(element.classList).includes("omniscript-article");
+  // Check for both LWC OmniScript article and standard runtime OmniScript
+  return (
+    (element && element.tagName == "ARTICLE" && element.classList && Array.from(element.classList).includes("omniscript-article")) ||
+    (element && element.tagName && element.tagName.toLowerCase().includes("forcegenerated-omni-script"))
+  );
 }
 
+
 function isOmniScript(element) {
   if (element && element.tagName == "IFRAME") {
     return !!getOmniScriptName(element);
@@ -206,8 +211,23 @@ function isOmniScript(element) {
 }
 
 function getOmniScriptName(element) {
-
   if (isLwcOmniScript(element)) {
+    // Handle standard runtime OmniScript
+    if (element.tagName.toLowerCase().includes("forcegenerated-omni-script")) {
+      const tagName = element.tagName.toLowerCase();
+      // Extract components from the tag name using regex
+      const regex = /forcegenerated-omni-script_-(.*?)___(.*?)___(.*?)___/;
+      const matches = tagName.match(regex);
+
+      if (matches && matches.length >= 4) {
+        const type = capitalizeFirstLetter(matches[1]);
+        const subType = matches[2].split('-').map(capitalizeFirstLetter).join('');
+        return `${type}_${subType}`;
+      }
+      return undefined;
+    }
+
+    // Existing LWC OmniScript handling
     const lwc = getParentLwc(element);
     let name = lwc.localName.replace(/^c-/gi, "");
     name = name.replace(/-([^-]*)$/, "");
@@ -218,25 +238,44 @@ function getOmniScriptName(element) {
     if (urlString.endsWith('#/')) urlString = urlString.substring(0, urlString.length - 2);
     const osType = getQueryParameter(urlString, 'OmniScriptType');
     const osSubType = getQueryParameter(urlString, 'OmniScriptSubType');
-    if (osType && osSubType) return osType + " / " + osSubType;
+    if (osType && osSubType) return osType + "_" + osSubType;
   }
 }
 
 function isFlexCard(element) {
-  return element && element.tagName.startsWith("C-CF-");
+  // Check for both LWC FlexCard and standard runtime FlexCard
+  return (
+    (element && element.tagName.startsWith("C-CF-")) ||
+    (element && element.tagName && element.tagName.toLowerCase().includes("forcegenerated-flex-card"))
+  );
 }
 
 function isCard(element) {
   return element && element.tagName === "DIV" && element.getAttribute("layout-name");
 }
 
 function getCardName(element) {
-  if (isCard(element)) return element.getAttribute("layout-name");
-  else if (isFlexCard(element)) {
+  if (isFlexCard(element)) {
+    // Handle standard runtime FlexCard
+    if (element.tagName.toLowerCase().includes("forcegenerated-flex-card")) {
+      const tagName = element.tagName.toLowerCase();
+      // Extract components from the tag name using regex
+      const regex = /forcegenerated-flex-card_-(.*?)___/;
+      const matches = tagName.match(regex);
+
+      if (matches && matches.length >= 2) {
+        // Convert kebab-case to PascalCase
+        return matches[1].split('-').map(capitalizeFirstLetter).join('');
+      }
+      return undefined;
+    }
+    // Existing LWC FlexCard handling
     let name = element.localName.replace(/^c-cf-/gi, "");
     name = name.replace(/-./g, x => x[1].toUpperCase());
     return name;
   }
+  // Existing Card handling
+  if (isCard(element)) return element.getAttribute("layout-name");
 }
 
 function getParentLwc(element) {
@@ -265,14 +304,26 @@ function getQueryParameter(urlString, attributeName) {
   }
 }
 
+function isStandardRuntimeComponent(element) {
+  return element && element.tagName && (
+    element.tagName.toLowerCase().includes("forcegenerated-omni-script") ||
+    element.tagName.toLowerCase().includes("forcegenerated-flex-card")
+  );
+}
+
 function findOmniStudioComponents(doc) {
   const all = doc.getElementsByTagName("*");
   const objectsMap = new Map();
+  const componentTracker = new Set(); // Track components by name to avoid duplicates
 
   for (let i = 0; i < all.length; i++) {
     const element = all[i];
+    if (!isVisible(element)) continue;
+
     let obj = null;
     let key = null;
+    let componentKey = null;
+    const tagName = element.tagName.toLowerCase();
 
     if (isCard(element) && isVisible(element)) {
       obj = {
@@ -321,20 +372,42 @@ function findOmniStudioComponents(doc) {
       key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`;
     } */
 
-    if (obj && !objectsMap.has(key)) {
-      objectsMap.set(key, obj);
-      objectsFound.push(obj);
+    if (obj) {
+      key = `${obj.type}-${obj.subtype}-${obj.name}-${obj.elementName}`.toLowerCase();
+      if (!objectsMap.has(key)) {
+        objectsMap.set(key, obj);
+        componentTracker.add(componentKey);
+      }
     }
   }
 
-  return objectsFound;
+  return Array.from(objectsMap.values());
 }
 
+const removeDuplicatesByName = (data) => {
+  const seenNames = new Map();
+
+  // Iterate through the data and prioritize "StandardRuntime" subtype
+  data.forEach((item) => {
+    const lowerCaseName = item.name.toLowerCase();
+    if (!seenNames.has(lowerCaseName) || item.subtype === "StandardRuntime") {
+      seenNames.set(lowerCaseName, item);
+    }
+  });
+
+  // Return the unique items as an array
+  return Array.from(seenNames.values());
+};
+
 function getOSCompList() {
-  objectsFound = [];
   try {
     console.log('inside getOSCompList');
-    findOmniStudioComponents(window.document);
+    // Get components directly from findOmniStudioComponents
+    const components = findOmniStudioComponents(window.document);
+    console.log('Found components --> ' + JSON.stringify(components));
+    const finalCompList = removeDuplicatesByName(components);
+    console.log('finalCompList --> ' + JSON.stringify(finalCompList));
+    return finalCompList;
   } catch (e) {
     console.log("Error occurred: " + e);
     objectsFound.push({

diff --git a/dist/js/index.3853c14f.js b/dist/js/index.3853c14f.js
diff --git a/dist/js/index.3853c14f.js.map b/dist/js/index.3853c14f.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>Home</title><script defer="defer" src="/js/chunk-vendors.c8257bd9.js"></script><script defer="defer" src="/js/index.3853c14f.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.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>