Update extension for clarity-js v0.3.0 (#55)

* Adjusting config for clarity vnext * Unmask body if extension flag is specified * Update clarity-js to v0.3.0 and update popup UI
2019-03-04 15:38:04 -08:00 · 2019-03-04 15:38:04 -08:00 · 54d7b0f87d
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "clarity-tools",
-  "version": "0.2.11",
+  "version": "0.3.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -575,9 +575,9 @@
      }
    },
    "clarity-js": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/clarity-js/-/clarity-js-0.2.11.tgz",
-      "integrity": "sha512-tLOJ/ESH9905hsoQP2MzoHzwWHActdlvAAeoKNBDWOvIg/UAa6NsRkWrJh5cw8a0nExznVGkr/MQgBeeEStJqw=="
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/clarity-js/-/clarity-js-0.3.0.tgz",
+      "integrity": "sha512-VpgqjA5BKhuMMUpBQCjYix4FTwxoLzXsSeixQS57IhHfoq1NNpOwFIRspsHmOHmPnTsAGlSM0lKP+mrYfKHMKQ=="
    },
    "combine-source-map": {
      "version": "0.8.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "clarity-tools",
-  "version": "0.2.11",
+  "version": "0.3.0",
  "description": "A collection of tools to help visualize the data collected from clarity-js package",
  "author": "Microsoft Corp.",
  "license": "MIT",
@ -24,7 +24,7 @@
    "url": "https://github.com/Microsoft/clarity-tools/issues"
  },
  "dependencies": {
-    "clarity-js": "^0.2.11",
+    "clarity-js": "^0.3.0",
    "compare-versions": "^3.4.0",
    "material-ui": "0.17.4",
    "react": "^15.6.2",
--- a/src/extension/background.ts
+++ b/src/extension/background.ts
@ -78,7 +78,7 @@ function freeUpMemory(activeSession?: string) {

 function updateIcon(tabId) {
  chrome.storage.sync.get({
-    clarity: {showText: false, showImages: false, enabled: true}
+    clarity: { showText: false, cssRules: false, enabled: true }
  }, function(items : any) {
    var icon = items.clarity.enabled ? "icon.png" : "icon-disabled.png";
    var title = items.clarity.enabled ? "Clarity" : "Clarity: Disabled";
--- a/src/extension/instrument.ts
+++ b/src/extension/instrument.ts
@ -7,16 +7,17 @@ const INSERT_RULE_EVENT_NAME = "INSERT_RULE";
 chrome.runtime.sendMessage({ status: true }, function (response) {
  if (response.active) {
    chrome.storage.sync.get({
-      clarity: { showText: false, showImages: true, showLinks: true, enabled: true }
+      clarity: { showText: false, cssRules: false, enabled: true }
    }, function (items: any) {
      if (items.clarity.enabled) {
        prepareEnvironment();
+        if (items.clarity.showText) {
+          unmaskBody();
+        }
        ClarityJs.start({
-          showText: items.clarity.showText,
-          showLinks: items.clarity.showLinks,
-          showImages: items.clarity.showImages,
          uploadHandler: upload,
-          instrument: true
+          instrument: true,
+          cssRules: items.clarity.cssRules
        });
      }
    });
@ -46,6 +47,13 @@ function prepareEnvironment() {
  document.body.appendChild(script);
 }

+function unmaskBody() {
+  let script = document.createElement("script");
+  let scriptCode = getPageUnmaskBodyCode();
+  script.innerHTML = scriptCode;
+  document.body.appendChild(script);
+}
+

 function upload(payload, onSuccess, onFailure) {
  chrome.runtime.sendMessage({ payload: payload }, function (response) {
@ -87,3 +95,10 @@ function getPageScriptCode() {
  };
  return `(${closureFn.toString()})();`;
 }
+
+function getPageUnmaskBodyCode() {
+  let closureFn = function () {
+      document.body.setAttribute("data-clarity-unmask", "true");
+  };
+  return `(${closureFn.toString()})();`;
+}
--- a/src/extension/manifest.json
+++ b/src/extension/manifest.json
@ -3,7 +3,7 @@
  "name": "Clarity",
  "short_name": "Clarity",
  "description": "Get insights about how customers use your website.",
-  "version": "0.2.11",
+  "version": "0.3.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Clarity",
--- a/src/extension/popup.html
+++ b/src/extension/popup.html
@ -95,17 +95,10 @@
            </div>
        </div>
        <div class="option">
-            Show Links
+            CSS Rules
            <div class="toggleswitch">
-                <input type="checkbox" name="toggleswitch" class="toggleswitch-checkbox" id="showLinks">
-                <label class="toggleswitch-label" for="showLinks"></label>
-            </div>
-        </div>
-        <div class="option">
-            Show Images
-            <div class="toggleswitch">
-                <input type="checkbox" name="toggleswitch" class="toggleswitch-checkbox" id="showImages">
-                <label class="toggleswitch-label" for="showImages"></label>
+                <input type="checkbox" name="toggleswitch" class="toggleswitch-checkbox" id="cssRules">
+                <label class="toggleswitch-label" for="cssRules"></label>
            </div>
        </div>
    </div>
--- a/src/extension/popup.ts
+++ b/src/extension/popup.ts
@ -1,9 +1,8 @@
 (function() {
    // Initialize
-    var state = { "showText" : false, "showLinks": true, "showImages" : true, "enabled" : true }; 
+    var state = { "showText" : false, "cssRules": false, "enabled" : true }; 
    var showText = (<HTMLInputElement>document.getElementById("showText"));
-    var showLinks = (<HTMLInputElement>document.getElementById("showLinks"));
-    var showImages = (<HTMLInputElement>document.getElementById("showImages"));
+    var cssRules = (<HTMLInputElement>document.getElementById("cssRules"));
    var enabled = (<HTMLInputElement>document.getElementById("enabled"));
    var replaySession = (<HTMLAnchorElement>document.getElementById("replaySession"));
    var menu = (<HTMLElement>document.getElementById("menu"));
@ -16,8 +15,7 @@

    // Listen for changes
    showText.addEventListener("click", toggle);
-    showLinks.addEventListener("click", toggle);
-    showImages.addEventListener("click", toggle);
+    cssRules.addEventListener("click", toggle);
    enabled.addEventListener("click", toggle);
    replaySession.addEventListener("click", replay);

@ -33,11 +31,8 @@
            case "showText":
                state.showText = !state.showText;
                break;
-            case "showLinks":
-                state.showLinks = !state.showLinks;
-                break;
-            case "showImages":
-                state.showImages = !state.showImages;
+            case "cssRules":
+                state.cssRules = !state.cssRules;
                break;
            case "enabled":
                state.enabled = !state.enabled;
@ -52,8 +47,7 @@

    function redraw(state) {
        showText.checked = state.showText;
-        showLinks.checked = state.showLinks;
-        showImages.checked = state.showImages;
+        cssRules.checked = state.cssRules;
        enabled.checked = state.enabled;
        menu.style.display = state.enabled ? "block" : "none";
    }
--- a/src/visualization/parsers/layout.ts
+++ b/src/visualization/parsers/layout.ts
@ -166,6 +166,10 @@ export class Layout implements IParser {
                        node.appendChild(textNode);
                    }
                }
+                // If we have value for this node
+                if ("value" in state) {
+                    (node as any).value = state.value;
+                }
                this.layouts[state.index] = this.domInsert(node, parent, next);
                break;
        }
@ -213,6 +217,10 @@ export class Layout implements IParser {
            if (state.tag === "*TXT*" && (<ITextLayoutState>(state as ILayoutState)).content) {
                node.nodeValue = (<ITextLayoutState>(state as ILayoutState)).content;
            }
+            // If we have value for this node
+            if ("value" in state) {
+                (node as any).value = state.value;
+            }
            // Check if this element can be scrolled
            if (state.layout && (state.layout.scrollX || state.layout.scrollY)) {
                node.scrollLeft = state.layout.scrollX;