clarity-js 0.6.39 → 0.6.41

package/build/clarity.module.js

@@ -88,7 +88,8 @@ var config$1 = {
     report: null,
     upload: null,
     fallback: null,
-    upgrade: null
+    upgrade: null,
+    action: null
 };
 
 function api(method) {
@@ -111,7 +112,7 @@ function stop$B() {
     startTime = 0;
 }
 
-var version$1 = "0.6.39";
+var version$1 = "0.6.41";
 
 // tslint:disable: no-bitwise
 function hash (input) {
@@ -138,9 +139,9 @@ var buffer = null;
 var update$2 = false;
 function start$E() {
     update$2 = false;
-    reset$o();
+    reset$p();
 }
-function reset$o() {
+function reset$p() {
     // Baseline state holds the previous values - if it is updated in the current payload,
     // reset the state to current value after sending the previous state
     if (update$2) {
@@ -208,14 +209,14 @@ function compute$c() {
     }
 }
 function stop$A() {
-    reset$o();
+    reset$p();
 }
 
 var baseline = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get state () { return state$9; },
     start: start$E,
-    reset: reset$o,
+    reset: reset$p,
     track: track$7,
     activity: activity,
     visibility: visibility,
@@ -285,7 +286,7 @@ function max(metric, value) {
 function compute$b() {
     encode$1(0 /* Event.Metric */);
 }
-function reset$n() {
+function reset$o() {
     updates$3 = {};
 }
 
@@ -304,7 +305,7 @@ function start$C() {
     interval = 60000 /* Setting.PingInterval */;
     last = 0;
 }
-function reset$m() {
+function reset$n() {
     if (timeout$6) {
         clearTimeout(timeout$6);
     }
@@ -332,7 +333,7 @@ var ping$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     get data () { return data$h; },
     start: start$C,
-    reset: reset$m,
+    reset: reset$n,
     stop: stop$y
 });
 
@@ -363,7 +364,7 @@ function track$6(event, time) {
 function compute$a() {
     encode$1(36 /* Event.Summary */);
 }
-function reset$l() {
+function reset$m() {
     data$g = {};
 }
 
@@ -374,7 +375,7 @@ var summary = /*#__PURE__*/Object.freeze({
     stop: stop$x,
     track: track$6,
     compute: compute$a,
-    reset: reset$l
+    reset: reset$m
 });
 
 var data$f = null;
@@ -416,7 +417,7 @@ var upgrade$1 = /*#__PURE__*/Object.freeze({
 
 var data$e = null;
 function start$z() {
-    reset$k();
+    reset$l();
 }
 function set(variable, value) {
     var values = typeof value === "string" /* Constant.String */ ? [value] : value;
@@ -447,11 +448,11 @@ function log$2(variable, value) {
 function compute$9() {
     encode$1(34 /* Event.Variable */);
 }
-function reset$k() {
+function reset$l() {
     data$e = {};
 }
 function stop$v() {
-    reset$k();
+    reset$l();
 }
 
 var variable = /*#__PURE__*/Object.freeze({
@@ -461,7 +462,7 @@ var variable = /*#__PURE__*/Object.freeze({
     set: set,
     identify: identify,
     compute: compute$9,
-    reset: reset$k,
+    reset: reset$l,
     stop: stop$v
 });
 
@@ -701,7 +702,7 @@ function redact(value) {
                 // Check if unicode regex is supported, otherwise fallback to calling mask function on this token
                 if (unicodeRegex && currencyRegex !== null) {
                     // Do not redact information if the token contains a currency symbol
-                    token = token.match(currencyRegex) ? token : token.replace(letterRegex, "\u2022" /* Data.Constant.Letter */).replace(digitRegex, "\u2022" /* Data.Constant.Digit */);
+                    token = token.match(currencyRegex) ? token : token.replace(letterRegex, "\u25AA" /* Data.Constant.Letter */).replace(digitRegex, "\u25AB" /* Data.Constant.Digit */);
                 }
                 else {
                     token = mask(token);
@@ -739,12 +740,15 @@ function check$4(id, target, input) {
     }
 }
 
-var TAGS = ["DIV", "TR", "P", "LI", "UL", "A", "BUTTON"];
-function selector (input, beta) {
-    if (beta === void 0) { beta = false; }
+var excludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat" /* Constant.ExcludeClassNames */.split("," /* Constant.Comma */);
+var selectorMap = {};
+function reset$k() {
+    selectorMap = {};
+}
+function get$1(input, type) {
     var a = input.attributes;
-    var prefix = input.prefix ? input.prefix[beta ? 1 /* Selector.Beta */ : 0 /* Selector.Stable */] : null;
-    var suffix = beta || ((a && !("class" /* Constant.Class */ in a)) || TAGS.indexOf(input.tag) >= 0) ? ":nth-of-type(".concat(input.position, ")") : "" /* Constant.Empty */;
+    var prefix = input.prefix ? input.prefix[type] : null;
+    var suffix = type === 0 /* Selector.Alpha */ ? "".concat("~" /* Constant.Tilde */).concat(input.position - 1) : ":nth-of-type(".concat(input.position, ")");
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -759,23 +763,33 @@ function selector (input, beta) {
             if (prefix === null) {
                 return "" /* Constant.Empty */;
             }
-            prefix = "".concat(prefix, ">");
+            prefix = "".concat(prefix).concat(">" /* Constant.Separator */);
             input.tag = input.tag.indexOf("svg:" /* Constant.SvgPrefix */) === 0 ? input.tag.substr("svg:" /* Constant.SvgPrefix */.length) : input.tag;
             var selector = "".concat(prefix).concat(input.tag).concat(suffix);
-            var classes = "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/) : null;
-            if (beta) {
-                // In beta mode, update selector to use "id" field when available. There are two exceptions:
-                // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
-                // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-                var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
-                classes = input.tag !== "BODY" /* Constant.BodyTag */ && classes ? classes.filter(function (c) { return !hasDigits(c); }) : [];
-                selector = classes.length > 0 ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
-                selector = id && hasDigits(id) === false ? "".concat(getDomPrefix(prefix), "#").concat(id) : selector;
-            }
-            else {
-                // Otherwise, fallback to stable mode, where we include class names as part of the selector
-                selector = classes ? "".concat(prefix).concat(input.tag, ".").concat(classes.join(".")).concat(suffix) : selector;
+            var id = "id" /* Constant.Id */ in a && a["id" /* Constant.Id */].length > 0 ? a["id" /* Constant.Id */] : null;
+            var classes = input.tag !== "BODY" /* Constant.BodyTag */ && "class" /* Constant.Class */ in a && a["class" /* Constant.Class */].length > 0 ? a["class" /* Constant.Class */].trim().split(/\s+/).filter(function (c) { return filter(c); }).join("." /* Constant.Period */) : null;
+            if (classes && classes.length > 0) {
+                if (type === 0 /* Selector.Alpha */) {
+                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
+                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
+                    var key = "".concat(getDomPath(prefix)).concat(input.tag).concat("." /* Constant.Dot */).concat(classes);
+                    if (!(key in selectorMap)) {
+                        selectorMap[key] = [];
+                    }
+                    if (selectorMap[key].indexOf(input.id) < 0) {
+                        selectorMap[key].push(input.id);
+                    }
+                    selector = "".concat(key).concat("~" /* Constant.Tilde */).concat(selectorMap[key].indexOf(input.id));
+                }
+                else {
+                    // In Beta mode, we continue to look at query selectors in context of the full page
+                    selector = "".concat(prefix).concat(input.tag, ".").concat(classes).concat(suffix);
+                }
             }
+            // Update selector to use "id" field when available. There are two exceptions:
+            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
+            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
+            selector = id && filter(id) ? "".concat(getDomPrefix(prefix)).concat("#" /* Constant.Hash */).concat(id) : selector;
             return selector;
     }
 }
@@ -784,22 +798,42 @@ function getDomPrefix(prefix) {
     var iframeDomStart = prefix.lastIndexOf("".concat("iframe:" /* Constant.IFramePrefix */).concat("HTML" /* Constant.HTML */));
     var domStart = Math.max(shadowDomStart, iframeDomStart);
     if (domStart < 0) {
-        return "";
+        return "" /* Constant.Empty */;
+    }
+    return prefix.substring(0, prefix.indexOf(">" /* Constant.Separator */, domStart) + 1);
+}
+function getDomPath(input) {
+    var parts = input.split(">" /* Constant.Separator */);
+    for (var i = 0; i < parts.length; i++) {
+        var tIndex = parts[i].indexOf("~" /* Constant.Tilde */);
+        var dIndex = parts[i].indexOf("." /* Constant.Dot */);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
     }
-    var domEnd = prefix.indexOf(">", domStart) + 1;
-    return prefix.substr(0, domEnd);
+    return parts.join(">" /* Constant.Separator */);
 }
-// Check if the given input string has digits or not
-function hasDigits(value) {
+// Check if the given input string has digits or excluded class names
+function filter(value) {
+    if (!value) {
+        return false;
+    } // Do not process empty strings
+    if (excludeClassNames.some(function (x) { return value.toLowerCase().indexOf(x) >= 0; })) {
+        return false;
+    }
     for (var i = 0; i < value.length; i++) {
         var c = value.charCodeAt(i);
         if (c >= 48 /* Character.Zero */ && c <= 57 /* Character.Nine */) {
-            return true;
+            return false;
         }
     }
-    return false;
+    return true;
 }
 
+var selector = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    reset: reset$k,
+    get: get$1
+});
+
 // Track the start time to be able to compute duration at the end of the task
 var idleTimeout = 5000;
 var tracker = {};
@@ -1119,7 +1153,7 @@ function encode$4 (type, timer, ts) {
                                     }
                                     tokens.push(suspend ? "*M" /* Constant.SuspendMutationTag */ : data[key]);
                                     if (box && box.length === 2) {
-                                        tokens.push("".concat("#" /* Constant.Box */).concat(str$1(box[0]), ".").concat(str$1(box[1])));
+                                        tokens.push("".concat("#" /* Constant.Hash */).concat(str$1(box[0]), ".").concat(str$1(box[1])));
                                     }
                                     break;
                                 case "attributes":
@@ -2373,6 +2407,7 @@ function reset$7() {
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
     fraudMap = new WeakMap();
+    reset$k();
 }
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
 // later whenever there are new additions or modifications to DOM (mutations)
@@ -2549,14 +2584,11 @@ function privacy(node, value, parent) {
             metadata.privacy = 2 /* Privacy.Text */;
             break;
         case tag === "*T" /* Constant.TextTag */:
-            // If it's a text node belonging to a STYLE or TITLE tag or one of SCRUB_EXCEPTIONS, then capture content
+            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
             var pTag = parent && parent.data ? parent.data.tag : "" /* Constant.Empty */;
-            var pSelector_1 = parent && parent.selector ? parent.selector[0 /* Selector.Stable */] : "" /* Constant.Empty */;
-            metadata.privacy = pTag === "STYLE" /* Constant.StyleTag */ || pTag === "TITLE" /* Constant.TitleTag */ || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
-            break;
-        case "type" /* Constant.Type */ in attributes:
-            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
-            metadata.privacy = inspect(attributes["type" /* Constant.Type */], maskInput, metadata);
+            var pSelector_1 = parent && parent.selector ? parent.selector[1 /* Selector.Default */] : "" /* Constant.Empty */;
+            var tags = ["STYLE" /* Constant.StyleTag */, "TITLE" /* Constant.TitleTag */, "svg:style" /* Constant.SvgStyle */];
+            metadata.privacy = tags.includes(pTag) || override.some(function (x) { return pSelector_1.indexOf(x) >= 0; }) ? 0 /* Privacy.None */ : current;
             break;
         case tag === "INPUT" /* Constant.InputTag */ && current === 0 /* Privacy.None */:
             // If even default privacy setting is to not mask, we still scan through input fields for any sensitive information
@@ -2564,11 +2596,13 @@ function privacy(node, value, parent) {
             Object.keys(attributes).forEach(function (x) { return field_1 += attributes[x].toLowerCase(); });
             metadata.privacy = inspect(field_1, maskInput, metadata);
             break;
-        case current === 1 /* Privacy.Sensitive */ && tag === "INPUT" /* Constant.InputTag */:
+        case tag === "INPUT" /* Constant.InputTag */ && current === 1 /* Privacy.Sensitive */:
             // Look through class names to aggressively mask content
             metadata.privacy = inspect(attributes["class" /* Constant.Class */], maskText, metadata);
-            // If it's a button or an input option, make an exception to disable masking
-            metadata.privacy = maskDisable.indexOf(attributes["type" /* Constant.Type */]) >= 0 ? 0 /* Privacy.None */ : current;
+            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
+            metadata.privacy = inspect(attributes["type" /* Constant.Type */], maskInput, metadata);
+            // If it's a button or an input option, make an exception to disable masking in sensitive mode
+            metadata.privacy = maskDisable.indexOf(attributes["type" /* Constant.Type */]) >= 0 ? 0 /* Privacy.None */ : metadata.privacy;
             break;
         case current === 1 /* Privacy.Sensitive */:
             // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
@@ -2615,10 +2649,11 @@ function updateSelector(value) {
     var prefix = parent ? parent.selector : null;
     var d = value.data;
     var p = position(parent, value);
-    var s = { tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
-    value.selector = [selector(s), selector(s, true)];
+    var s = { id: value.id, tag: d.tag, prefix: prefix, position: p, attributes: d.attributes };
+    value.selector = [get$1(s, 0 /* Selector.Alpha */), get$1(s, 1 /* Selector.Beta */)];
     value.hash = value.selector.map(function (x) { return x ? hash(x) : null; });
     value.hash.forEach(function (h) { return hashMap[h] = value.id; });
+    // Match fragment configuration against both alpha and beta hash
     if (value.hash.some(function (h) { return fragments.indexOf(h) !== -1; })) {
         value.fragment = value.id;
     }
@@ -3162,7 +3197,7 @@ function queue(tokens, transmit) {
         // We enrich the data going out with the existing upload. In these cases, call to upload comes with 'transmit' set to false.
         if (transmit && timeout === null) {
             if (type !== 25 /* Event.Ping */) {
-                reset$m();
+                reset$n();
             }
             timeout = setTimeout(upload, gap);
             queuedTime = now;
@@ -3352,8 +3387,8 @@ function delay() {
     return typeof config$1.upload === "string" /* Constant.String */ ? Math.max(Math.min(gap, 30000 /* Setting.MaxUploadDelay */), 100 /* Setting.MinUploadDelay */) : config$1.delay;
 }
 function response(payload) {
-    var key = payload && payload.length > 0 ? payload.split(" ")[0] : "" /* Constant.Empty */;
-    switch (key) {
+    var parts = payload && payload.length > 0 ? payload.split(" ") : ["" /* Constant.Empty */];
+    switch (parts[0]) {
         case "END" /* Constant.End */:
             // Clear out session storage and end the session so we can start fresh the next time
             trigger(6 /* Check.Server */);
@@ -3362,6 +3397,12 @@ function response(payload) {
             // Upgrade current session to send back playback information
             upgrade("Auto" /* Constant.Auto */);
             break;
+        case "ACTION" /* Constant.Action */:
+            // Invoke action callback, if configured and has a valid value
+            if (config$1.action && parts.length > 1) {
+                config$1.action(parts[1]);
+            }
+            break;
     }
 }
 
@@ -3617,7 +3658,7 @@ function encode$1 (event) {
                 tokens.push(b.data.activityTime);
                 queue(tokens, false);
             }
-            reset$o();
+            reset$p();
             break;
         case 25 /* Event.Ping */:
             tokens.push(data$h.gap);
@@ -3650,7 +3691,7 @@ function encode$1 (event) {
                     tokens.push(v);
                     tokens.push(data$e[v]);
                 }
-                reset$k();
+                reset$l();
                 queue(tokens, false);
             }
             break;
@@ -3665,7 +3706,7 @@ function encode$1 (event) {
                     // However, for data over the wire, we round it off to milliseconds precision.
                     tokens.push(Math.round(updates$3[m]));
                 }
-                reset$n();
+                reset$o();
                 queue(tokens, false);
             }
             break;
@@ -3691,7 +3732,7 @@ function encode$1 (event) {
                     tokens.push(key);
                     tokens.push([].concat.apply([], data$g[e]));
                 }
-                reset$l();
+                reset$m();
                 queue(tokens, false);
             }
             break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.39",
+  "version": "0.6.41",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

package/src/core/config.ts

@@ -15,7 +15,8 @@ let config: Config = {
     report: null,
     upload: null,
     fallback: null,
-    upgrade: null
+    upgrade: null,
+    action: null
 };
 
 export default config;

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.39";
+let version = "0.6.41";
 export default version;

package/src/data/upload.ts

@@ -242,8 +242,8 @@ function delay(): number {
 }
 
 function response(payload: string): void {
-    let key = payload && payload.length > 0 ? payload.split(" ")[0] : Constant.Empty;
-    switch (key) {
+    let parts = payload && payload.length > 0 ? payload.split(" ") : [Constant.Empty];
+    switch (parts[0]) {
         case Constant.End:
             // Clear out session storage and end the session so we can start fresh the next time
             limit.trigger(Check.Server);
@@ -252,5 +252,9 @@ function response(payload: string): void {
             // Upgrade current session to send back playback information
             clarity.upgrade(Constant.Auto);
             break;
+        case Constant.Action:
+            // Invoke action callback, if configured and has a valid value
+            if (config.action && parts.length > 1) { config.action(parts[1]); }
+            break;
     }
 }

package/src/index.ts

@@ -1,6 +1,6 @@
 import * as clarity from "./clarity";
 import hash from "./core/hash";
-import selector from "./layout/selector";
+import * as selector from "./layout/selector";
 import { get, getNode, lookup } from "./layout/dom";
 
 const helper = { hash, selector, get, getNode, lookup }

package/src/layout/dom.ts

@@ -5,7 +5,7 @@ import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as internal from "@src/diagnostic/internal";
 import * as region from "@src/layout/region";
-import selector from "@src/layout/selector";
+import * as selector from "@src/layout/selector";
 import * as mutation from "@src/layout/mutation";
 import * as extract from "@src/data/extract";
 let index: number = 1;
@@ -50,6 +50,7 @@ function reset(): void {
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
     fraudMap = new WeakMap();
+    selector.reset();
 }
 
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
@@ -236,14 +237,11 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
             metadata.privacy = Privacy.Text;
             break;
         case tag === Constant.TextTag:
-            // If it's a text node belonging to a STYLE or TITLE tag or one of SCRUB_EXCEPTIONS, then capture content
+            // If it's a text node belonging to a STYLE or TITLE tag or one of scrub exceptions, then capture content
             let pTag = parent && parent.data ? parent.data.tag : Constant.Empty;
-            let pSelector = parent && parent.selector ? parent.selector[Selector.Stable] : Constant.Empty;
-            metadata.privacy = pTag === Constant.StyleTag || pTag === Constant.TitleTag || override.some(x => pSelector.indexOf(x) >= 0) ? Privacy.None : current; 
-            break;
-        case Constant.Type in attributes:
-            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
-            metadata.privacy  = inspect(attributes[Constant.Type], maskInput, metadata);
+            let pSelector = parent && parent.selector ? parent.selector[Selector.Default] : Constant.Empty;
+            let tags : string[] = [Constant.StyleTag, Constant.TitleTag, Constant.SvgStyle];
+            metadata.privacy = tags.includes(pTag) || override.some(x => pSelector.indexOf(x) >= 0) ? Privacy.None : current;
             break;
         case tag === Constant.InputTag && current === Privacy.None:
             // If even default privacy setting is to not mask, we still scan through input fields for any sensitive information
@@ -251,11 +249,13 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
             Object.keys(attributes).forEach(x => field += attributes[x].toLowerCase());
             metadata.privacy = inspect(field, maskInput, metadata);
             break;
-        case current === Privacy.Sensitive && tag === Constant.InputTag:
+        case tag === Constant.InputTag && current === Privacy.Sensitive:
             // Look through class names to aggressively mask content
             metadata.privacy = inspect(attributes[Constant.Class], maskText, metadata);
-            // If it's a button or an input option, make an exception to disable masking
-            metadata.privacy = maskDisable.indexOf(attributes[Constant.Type]) >= 0 ? Privacy.None : current;
+            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
+            metadata.privacy  = inspect(attributes[Constant.Type], maskInput, metadata);
+            // If it's a button or an input option, make an exception to disable masking in sensitive mode
+            metadata.privacy = maskDisable.indexOf(attributes[Constant.Type]) >= 0 ? Privacy.None : metadata.privacy;
             break;
         case current === Privacy.Sensitive:
             // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
@@ -298,10 +298,11 @@ function updateSelector(value: NodeValue): void {
     let prefix = parent ? parent.selector : null;
     let d = value.data;
     let p = position(parent, value);
-    let s: SelectorInput = { tag: d.tag, prefix, position: p, attributes: d.attributes };
-    value.selector = [selector(s), selector(s, true)];
+    let s: SelectorInput = { id: value.id, tag: d.tag, prefix, position: p, attributes: d.attributes };
+    value.selector = [selector.get(s, Selector.Alpha), selector.get(s, Selector.Beta)];
     value.hash = value.selector.map(x => x ? hash(x) : null) as [string, string];
     value.hash.forEach(h => hashMap[h] = value.id);
+    // Match fragment configuration against both alpha and beta hash
     if (value.hash.some(h => extract.fragments.indexOf(h) !== -1)) {
         value.fragment = value.id;
     }

package/src/layout/encode.ts

@@ -62,7 +62,7 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
                                     if (value.parent && active) { tokens.push(value.parent); }
                                     if (value.previous && active) { tokens.push(value.previous); }
                                     tokens.push(suspend ? Constant.SuspendMutationTag : data[key]);
-                                    if (box && box.length === 2) { tokens.push(`${Constant.Box}${str(box[0])}.${str(box[1])}`); }
+                                    if (box && box.length === 2) { tokens.push(`${Constant.Hash}${str(box[0])}.${str(box[1])}`); }
                                     break;
                                 case "attributes":
                                     for (let attr in data[key]) {

package/src/layout/selector.ts

@@ -1,12 +1,17 @@
 import { Character } from "../../types/data";
 import { Constant, Selector, SelectorInput } from "../../types/layout";
 
-const TAGS = ["DIV", "TR", "P", "LI", "UL", "A", "BUTTON"];
+const excludeClassNames = Constant.ExcludeClassNames.split(Constant.Comma);
+let selectorMap: { [selector: string]: number[] } = {};
 
-export default function(input: SelectorInput, beta: boolean = false): string {
+export function reset(): void {
+    selectorMap = {};
+}
+
+export function get(input: SelectorInput, type: Selector): string {
     let a = input.attributes;
-    let prefix = input.prefix ? input.prefix[beta ? Selector.Beta : Selector.Stable] : null;
-    let suffix = beta || ((a && !(Constant.Class in a)) || TAGS.indexOf(input.tag) >= 0) ? `:nth-of-type(${input.position})` : Constant.Empty;
+    let prefix = input.prefix ? input.prefix[type] : null;
+    let suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position-1}` : `:nth-of-type(${input.position})`;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -19,22 +24,28 @@ export default function(input: SelectorInput, beta: boolean = false): string {
             return Constant.HTML;
         default:
             if (prefix === null) { return Constant.Empty; }
-            prefix = `${prefix}>`;
+            prefix = `${prefix}${Constant.Separator}`;
             input.tag = input.tag.indexOf(Constant.SvgPrefix) === 0 ? input.tag.substr(Constant.SvgPrefix.length) : input.tag;
             let selector = `${prefix}${input.tag}${suffix}`;
-            let classes = Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/) : null;
-            if (beta) {
-                // In beta mode, update selector to use "id" field when available. There are two exceptions:
-                // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
-                // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-                let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
-                classes = input.tag !== Constant.BodyTag && classes ? classes.filter(c => !hasDigits(c)) : [];
-                selector = classes.length > 0 ? `${prefix}${input.tag}.${classes.join(".")}${suffix}` : selector;
-                selector = id && hasDigits(id) === false ? `${getDomPrefix(prefix)}#${id}` : selector;
-            } else {
-                // Otherwise, fallback to stable mode, where we include class names as part of the selector
-                selector = classes ? `${prefix}${input.tag}.${classes.join(".")}${suffix}` : selector;
-            } 
+            let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
+            let classes = input.tag !== Constant.BodyTag && Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/).filter(c => filter(c)).join(Constant.Period) : null;
+            if (classes && classes.length > 0) {
+                if (type === Selector.Alpha) {
+                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
+                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
+                    let key = `${getDomPath(prefix)}${input.tag}${Constant.Dot}${classes}`;
+                    if (!(key in selectorMap)) { selectorMap[key] = []; }
+                    if (selectorMap[key].indexOf(input.id) < 0) { selectorMap[key].push(input.id); }
+                    selector = `${key}${Constant.Tilde}${selectorMap[key].indexOf(input.id)}`;
+                } else {
+                    // In Beta mode, we continue to look at query selectors in context of the full page
+                    selector = `${prefix}${input.tag}.${classes}${suffix}`
+                }
+            }
+            // Update selector to use "id" field when available. There are two exceptions:
+            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
+            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
+            selector = id && filter(id) ? `${getDomPrefix(prefix)}${Constant.Hash}${id}` : selector;
             return selector;
     }
 }
@@ -44,19 +55,28 @@ function getDomPrefix(prefix: string): string {
   const iframeDomStart = prefix.lastIndexOf(`${Constant.IFramePrefix}${Constant.HTML}`);
   const domStart = Math.max(shadowDomStart, iframeDomStart);
   
-  if (domStart < 0) {
-    return "";
-  }
+  if (domStart < 0) { return Constant.Empty; }
 
-  const domEnd = prefix.indexOf(">", domStart) + 1;
-  return prefix.substr(0, domEnd);
+  return prefix.substring(0, prefix.indexOf(Constant.Separator, domStart) + 1);
+}
+
+function getDomPath(input: string): string {
+    let parts = input.split(Constant.Separator);
+    for (let i = 0; i < parts.length; i++) {
+        let tIndex = parts[i].indexOf(Constant.Tilde);
+        let dIndex = parts[i].indexOf(Constant.Dot);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
+    }
+    return parts.join(Constant.Separator);
 }
 
-// Check if the given input string has digits or not
-function hasDigits(value: string): boolean {
+// Check if the given input string has digits or excluded class names
+function filter(value: string): boolean {
+    if (!value) { return false; } // Do not process empty strings
+    if (excludeClassNames.some(x => value.toLowerCase().indexOf(x) >= 0)) { return false; }
     for (let i = 0; i < value.length; i++) {
         let c = value.charCodeAt(i);
-        if (c >= Character.Zero && c <= Character.Nine) { return true };
+        if (c >= Character.Zero && c <= Character.Nine) { return false };
     }
-    return false;
+    return true;
 }