v14.0.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

src/GleapHelper.js

@@ -12,12 +12,12 @@ export const resizeImage = (base64Str, maxWidth = 400, maxHeight = 400) => {
       var MAX_HEIGHT = maxHeight;
 
       // Adjust max width / height based on image props
-      if (maxWidth > img.width / 4) {
-        MAX_WIDTH = img.width / 4;
+      if (maxWidth > img.width / 1.5) {
+        MAX_WIDTH = img.width / 1.5;
       }
 
-      if (maxHeight > img.height / 4) {
-        MAX_HEIGHT = img.height / 4;
+      if (maxHeight > img.height / 1.5) {
+        MAX_HEIGHT = img.height / 1.5;
       }
 
       var width = img.width;
@@ -38,7 +38,7 @@ export const resizeImage = (base64Str, maxWidth = 400, maxHeight = 400) => {
       canvas.height = height;
       var ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0, width, height);
-      
+
       if (isJPEG) {
         resolve(canvas.toDataURL("image/jpeg", 0.7));
       } else {
@@ -79,21 +79,31 @@ export const truncateString = (str, num) => {
   } else {
     return str;
   }
-}
+};
 
 const removeSubDomain = (v) => {
   try {
-    var parts = v.split('.');
+    var parts = v.split(".");
     var is2ndLevelDomain = false;
     const secondLevel = parts[parts.length - 2];
-    if (secondLevel === "co" || secondLevel === "com" || secondLevel === "gv" || secondLevel === "ac" || secondLevel === "edu" || secondLevel === "gov" || secondLevel === "mil" || secondLevel === "net" || secondLevel === "org") {
+    if (
+      secondLevel === "co" ||
+      secondLevel === "com" ||
+      secondLevel === "gv" ||
+      secondLevel === "ac" ||
+      secondLevel === "edu" ||
+      secondLevel === "gov" ||
+      secondLevel === "mil" ||
+      secondLevel === "net" ||
+      secondLevel === "org"
+    ) {
       is2ndLevelDomain = true;
     }
     parts = parts.slice(is2ndLevelDomain ? -3 : -2);
-    return parts.join('.');
-  } catch (exp) { }
+    return parts.join(".");
+  } catch (exp) {}
   return v;
-}
+};
 
 export const loadFromGleapCache = (key) => {
   try {
@@ -102,7 +112,7 @@ export const loadFromGleapCache = (key) => {
       const config = JSON.parse(cachedData);
       return config;
     }
-  } catch (exp) { }
+  } catch (exp) {}
   return null;
 };
 
@@ -111,7 +121,7 @@ export const saveToGleapCache = (key, data) => {
   if (data) {
     try {
       localStorage.setItem(k, JSON.stringify(data));
-    } catch (exp) { }
+    } catch (exp) {}
   } else {
     localStorage.removeItem(k);
   }
@@ -122,36 +132,40 @@ export const setGleapCookie = (name, value, days) => {
     var expires = "";
     if (days) {
       var date = new Date();
-      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
       expires = "; expires=" + date.toUTCString();
     }
     const host = removeSubDomain(window.location.host.split(":")[0]);
-    document.cookie = name + "=" + (value || "") + expires + "; path=/; domain=" + host;
-  } catch (exp) { }
-}
+    document.cookie =
+      name + "=" + (value || "") + expires + "; path=/; domain=" + host;
+  } catch (exp) {}
+};
 
 export const getGleapCookie = (name) => {
   try {
     var nameEQ = name + "=";
-    var ca = document.cookie.split(';');
+    var ca = document.cookie.split(";");
     for (var i = 0; i < ca.length; i++) {
       var c = ca[i];
-      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      while (c.charAt(0) == " ") c = c.substring(1, c.length);
       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
     }
-  } catch (exp) { }
+  } catch (exp) {}
   return null;
-}
+};
 
 export const eraseGleapCookie = (name) => {
   try {
     const host = removeSubDomain(window.location.host.split(":")[0]);
-    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Domain=' + host;
-  } catch (exp) { }
-}
+    document.cookie =
+      name + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Domain=" + host;
+  } catch (exp) {}
+};
 
 export const getDOMElementDescription = (element, html = true) => {
-  var innerText = truncateString(element.innerText || '', 40).replace(/(\r\n|\n|\r)/gm, "").replace(/ +(?= )/g, '');
+  var innerText = truncateString(element.innerText || "", 40)
+    .replace(/(\r\n|\n|\r)/gm, "")
+    .replace(/ +(?= )/g, "");
   var elementId = "";
   var elementClass = "";
   if (typeof element.getAttribute !== "undefined") {
@@ -164,7 +178,7 @@ export const getDOMElementDescription = (element, html = true) => {
       elementClass = ` class="${elemClass}"`;
     }
   }
-  const elementTag = (element.tagName || '').toLowerCase();
+  const elementTag = (element.tagName || "").toLowerCase();
 
   var htmlPre = "<";
   var htmlPost = ">";
@@ -174,7 +188,7 @@ export const getDOMElementDescription = (element, html = true) => {
   }
 
   return `${htmlPre}${elementTag}${elementId}${elementClass}${htmlPost}${innerText}${htmlPre}/${elementTag}${htmlPost}`;
-}
+};
 
 export const runFunctionWhenDomIsReady = (callback) => {
   if (
@@ -188,4 +202,4 @@ export const runFunctionWhenDomIsReady = (callback) => {
       callback();
     });
   }
-}
+};

src/ScreenCapture.js

@@ -351,13 +351,13 @@ const handleAdoptedStyleSheets = (doc, clone, shadowNodeId) => {
   }
 };
 
-const deepClone = (host) => {
+const deepClone = async (host) => {
   let shadowNodeId = 1;
 
   const cloneNode = async (node, parent, shadowRoot) => {
-    const walkTree = (nextn, nextp, innerShadowRoot) => {
+    const walkTree = async (nextn, nextp, innerShadowRoot) => {
       while (nextn) {
-        cloneNode(nextn, nextp, innerShadowRoot);
+        await cloneNode(nextn, nextp, innerShadowRoot);
         nextn = nextn.nextSibling;
       }
     };
@@ -372,8 +372,8 @@ const deepClone = (host) => {
       if (node instanceof HTMLCanvasElement) {
         try {
           const boundingRect = node.getBoundingClientRect();
-          const resizedImage = await resizeImage(node.toDataURL(), 900, 900);
-          
+          const resizedImage = await resizeImage(node.toDataURL(), 1400, 1400);
+
           clone.setAttribute("bb-canvas-data", resizedImage);
           clone.setAttribute("bb-canvas-height", boundingRect.height);
           clone.setAttribute("bb-canvas-width", boundingRect.width);
@@ -432,19 +432,19 @@ const deepClone = (host) => {
     if (node.shadowRoot) {
       var rootShadowNodeId = shadowNodeId;
       shadowNodeId++;
-      walkTree(node.shadowRoot.firstChild, clone, rootShadowNodeId);
+      await walkTree(node.shadowRoot.firstChild, clone, rootShadowNodeId);
       handleAdoptedStyleSheets(node.shadowRoot, clone, rootShadowNodeId);
 
       if (typeof clone.setAttribute !== "undefined") {
         clone.setAttribute("bb-shadow-parent", rootShadowNodeId);
       }
     }
 
-    walkTree(node.firstChild, clone);
+    await walkTree(node.firstChild, clone);
   };
 
   const fragment = document.createDocumentFragment();
-  cloneNode(host, fragment);
+  await cloneNode(host, fragment);
 
   // Work on adopted stylesheets.
   var clonedHead = fragment.querySelector("head");
@@ -457,13 +457,13 @@ const deepClone = (host) => {
 };
 
 const prepareScreenshotData = (remote) => {
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     const styleTags = window.document.querySelectorAll("style, link");
     for (var i = 0; i < styleTags.length; ++i) {
       styleTags[i].setAttribute("bb-styleid", i);
     }
 
-    const clone = deepClone(window.document.documentElement);
+    const clone = await deepClone(window.document.documentElement);
 
     // Fix for web imports (depracted).
     const linkImportElems = clone.querySelectorAll("link[rel=import]");