checkpoint-cli 0.1.6 → 0.1.7

package/dist/index.js

@@ -208,6 +208,129 @@ function trackingScript() {
     };
   }
 
+  function parseZIndex(value){
+    var n=parseInt(String(value||''),10);
+    return isNaN(n)?0:n;
+  }
+
+  function detectTransientKind(el){
+    if(!el||!el.tagName) return 'unknown';
+    try{
+      var role=(el.getAttribute&&el.getAttribute('role')||'').toLowerCase();
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      var id=(el.id||'').toLowerCase();
+      var label=(role+' '+classes+' '+id).trim();
+      if(role==='dialog'||el.getAttribute('aria-modal')==='true'||label.indexOf('modal')>=0||label.indexOf('dialog')>=0){
+        return 'dialog';
+      }
+      if(label.indexOf('drawer')>=0||label.indexOf('sheet')>=0||label.indexOf('sidebar')>=0){
+        return 'drawer';
+      }
+      if(label.indexOf('popover')>=0) return 'popover';
+      if(role==='menu'||label.indexOf('menu')>=0||label.indexOf('dropdown')>=0) return 'menu';
+      if(role==='tooltip'||label.indexOf('tooltip')>=0) return 'tooltip';
+    }catch(e){}
+    return 'unknown';
+  }
+
+  function isTransientRootCandidate(el){
+    if(!el||!el.tagName) return false;
+    try{
+      var role=(el.getAttribute&&el.getAttribute('role')||'').toLowerCase();
+      var ariaModal=(el.getAttribute&&el.getAttribute('aria-modal')||'').toLowerCase();
+      var dataState=(el.getAttribute&&el.getAttribute('data-state')||'').toLowerCase();
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      var id=(el.id||'').toLowerCase();
+      var style=window.getComputedStyle?window.getComputedStyle(el):null;
+      var position=style?style.position:'';
+      var zIndex=parseZIndex(style?style.zIndex:0);
+      if(role==='dialog'||role==='menu'||role==='tooltip') return true;
+      if(ariaModal==='true') return true;
+      if(dataState==='open'&&(classes.indexOf('modal')>=0||classes.indexOf('popover')>=0||classes.indexOf('drawer')>=0)) return true;
+      if(classes.indexOf('modal')>=0||classes.indexOf('dialog')>=0||classes.indexOf('drawer')>=0||classes.indexOf('popover')>=0||classes.indexOf('tooltip')>=0||classes.indexOf('dropdown')>=0) return true;
+      if(id.indexOf('modal')>=0||id.indexOf('dialog')>=0||id.indexOf('drawer')>=0||id.indexOf('popover')>=0) return true;
+      if((position==='fixed'||position==='sticky')&&zIndex>=100) return true;
+    }catch(e){}
+    return false;
+  }
+
+  function isLikelyPortaled(el){
+    if(!el||!el.parentElement) return false;
+    try{
+      var root=el;
+      var steps=0;
+      while(root&&root.parentElement&&steps<8){
+        root=root.parentElement;
+        steps++;
+      }
+      if(!root||!root.parentElement) return false;
+      if(root===document.body) return true;
+      if(el.parentElement===document.body) return true;
+      if(el.parentElement&&el.parentElement.id&&String(el.parentElement.id).toLowerCase().indexOf('portal')>=0) return true;
+      var classes=(el.className&&typeof el.className==='string'?el.className:'').toLowerCase();
+      if(classes.indexOf('portal')>=0) return true;
+    }catch(e){}
+    return false;
+  }
+
+  function getOpenerCandidates(){
+    var out=[];
+    var seen={};
+    var selectors=[
+      '[aria-haspopup=\"dialog\"]',
+      '[aria-controls]',
+      '[data-modal-trigger]',
+      '[data-dialog-trigger]',
+      'button',
+      '[role=\"button\"]',
+      'a'
+    ];
+    for(var s=0;s<selectors.length;s++){
+      var selector=selectors[s];
+      try{
+        var nodes=document.querySelectorAll(selector);
+        for(var i=0;i<nodes.length&&out.length<8;i++){
+          var node=nodes[i];
+          if(!node||node.nodeType!==1) continue;
+          var sel=elementSelector(node);
+          if(!sel||seen[sel]) continue;
+          seen[sel]=true;
+          var score=0.3;
+          var label=(node.getAttribute&&node.getAttribute('aria-label')||'').toLowerCase();
+          var text=shortText(node.textContent).toLowerCase();
+          if(label.indexOf('setting')>=0||text.indexOf('setting')>=0) score=0.9;
+          else if(label.indexOf('open')>=0||text.indexOf('open')>=0) score=0.7;
+          out.push({selector:sel,score:score});
+        }
+      }catch(e){}
+    }
+    out.sort(function(a,b){ return b.score-a.score; });
+    return out.slice(0,6);
+  }
+
+  function getTransientContext(el){
+    if(!el||typeof el.closest!=='function') return null;
+    var current=el;
+    var depth=0;
+    while(current&&current.nodeType===1&&depth<8){
+      if(isTransientRootCandidate(current)){
+        var style=window.getComputedStyle?window.getComputedStyle(current):null;
+        return {
+          kind:detectTransientKind(current),
+          root_selector_chain:getSelectorChain(current),
+          root_fingerprint:getDomFingerprint(current),
+          is_portaled:isLikelyPortaled(current),
+          z_index:parseZIndex(style?style.zIndex:0),
+          is_fixed:style?style.position==='fixed':false,
+          opener_candidates:getOpenerCandidates()
+        };
+      }
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
   function buildCoordFallback(clientX,clientY,metrics){
     var safeViewW=metrics.viewWidth||1;
     var safeViewH=metrics.viewHeight||1;
@@ -253,6 +376,7 @@ function trackingScript() {
         parent:textParent
       },
       container_hint:getContainerHint(el),
+      transient_context:getTransientContext(el),
       coord_fallback:fallback
     };
   }
@@ -355,10 +479,23 @@ function trackingScript() {
     return best;
   }
 
-  function resolveFromFingerprint(fingerprint,payload,metrics){
+  function querySelectorAllSafe(scope,selector){
+    if(!scope||!selector) return [];
+    try{
+      var nodeList=scope.querySelectorAll(selector);
+      return nodeList?Array.prototype.slice.call(nodeList):[];
+    }catch(e){}
+    return [];
+  }
+
+  function resolveFromFingerprint(fingerprint,payload,metrics,scope){
     if(!fingerprint) return null;
+    var searchScope=scope||document;
     if(fingerprint.id){
-      var byId=document.getElementById(fingerprint.id);
+      var byId=searchScope.getElementById?searchScope.getElementById(fingerprint.id):null;
+      if(!byId&&searchScope.querySelector){
+        try{ byId=searchScope.querySelector('#'+cssEscape(fingerprint.id)); }catch(e){}
+      }
       if(byId) return byId;
     }
     var tag=fingerprint.tag||'*';
@@ -366,11 +503,8 @@ function trackingScript() {
     if(Array.isArray(fingerprint.classes)&&fingerprint.classes.length>0){
       selector+= '.'+fingerprint.classes.map(cssEscape).join('.');
     }
-    try{
-      var nodes=document.querySelectorAll(selector);
-      return pickBestElement(nodes,payload,metrics,fingerprint.sibling_path);
-    }catch(e){}
-    return null;
+    var nodes=querySelectorAllSafe(searchScope,selector);
+    return pickBestElement(nodes,payload,metrics,fingerprint.sibling_path);
   }
 
   function isStrongContainerHint(hint){
@@ -384,56 +518,95 @@ function trackingScript() {
     return false;
   }
 
+  function resolveTransientRoot(payload,metrics){
+    var transient=payload&&payload.transient_context;
+    if(!transient||typeof transient!=='object') return null;
+    var root=null;
+    if(Array.isArray(transient.root_selector_chain)){
+      for(var i=0;i<transient.root_selector_chain.length;i++){
+        var candidate=transient.root_selector_chain[i];
+        if(!candidate||typeof candidate.selector!=='string') continue;
+        var nodes=querySelectorAllSafe(document,candidate.selector);
+        root=pickBestElement(nodes,payload,metrics,transient.root_fingerprint&&transient.root_fingerprint.sibling_path);
+        if(root) return root;
+      }
+    }
+    root=resolveFromFingerprint(transient.root_fingerprint,payload,metrics,document);
+    return root;
+  }
+
   function resolveAnchor(payload){
-    if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null};
+    if(!payload||typeof payload!=='object') return {coordFallback:null,strategy:'none',matchedSelector:null,status:'none'};
     var element=null;
     var strategy='none';
     var matchedSelector=null;
     var metrics=getMetrics();
-    if(Array.isArray(payload.selector_chain)){
+    var transientRoot=null;
+    var hasTransientContext=!!(payload.transient_context&&typeof payload.transient_context==='object');
+    if(hasTransientContext){
+      transientRoot=resolveTransientRoot(payload,metrics);
+      if(!transientRoot){
+        return {coordFallback:null,strategy:'transient_missing',matchedSelector:null,status:'transient_missing'};
+      }
+    }
+
+    function trySelectorChain(scope,scopeTag){
+      if(!Array.isArray(payload.selector_chain)) return false;
       for(var i=0;i<payload.selector_chain.length;i++){
         var candidate=payload.selector_chain[i];
         if(!candidate||typeof candidate.selector!=='string') continue;
-        try{
-          var nodes=document.querySelectorAll(candidate.selector);
-          var found=pickBestElement(nodes,payload,metrics,null);
-          if(found){
-            element=found;
-            strategy='selector';
-            matchedSelector=candidate.selector;
-            break;
-          }
-        }catch(e){}
+        var nodes=querySelectorAllSafe(scope,candidate.selector);
+        var found=pickBestElement(nodes,payload,metrics,null);
+        if(found){
+          element=found;
+          strategy='selector';
+          matchedSelector=(scopeTag?scopeTag+': ':'')+candidate.selector;
+          return true;
+        }
       }
+      return false;
     }
+
+    if(transientRoot){
+      trySelectorChain(transientRoot,'transient_root');
+    }
+    if(!element){
+      trySelectorChain(document,'document');
+    }
+
     if(
       !element&&
       payload.container_hint&&
       typeof payload.container_hint.selector==='string'&&
       isStrongContainerHint(payload.container_hint)
     ){
-      try{
-        var containerNodes=document.querySelectorAll(payload.container_hint.selector);
-        var containerEl=pickBestElement(containerNodes,payload,metrics,null);
-        if(containerEl){
-          element=containerEl;
-          strategy='container';
-          matchedSelector=payload.container_hint.selector;
-        }
-      }catch(e){}
+      var containerNodesInRoot=transientRoot?querySelectorAllSafe(transientRoot,payload.container_hint.selector):[];
+      var containerEl=pickBestElement(containerNodesInRoot,payload,metrics,null);
+      if(!containerEl){
+        var containerNodes=querySelectorAllSafe(document,payload.container_hint.selector);
+        containerEl=pickBestElement(containerNodes,payload,metrics,null);
+      }
+      if(containerEl){
+        element=containerEl;
+        strategy='container';
+        matchedSelector=payload.container_hint.selector;
+      }
     }
     if(!element){
-      var fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics);
+      var fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,transientRoot||undefined);
+      if(!fpEl){
+        fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,document);
+      }
       if(fpEl){
         element=fpEl;
         strategy='fingerprint';
       }
     }
-    if(!element) return {coordFallback:null,strategy:'none',matchedSelector:null};
+    if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
     var point=getAnchorClientPoint(element,payload);
     var clientX=point.clientX;
     var clientY=point.clientY;
-    return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector};
+    return {coordFallback:buildCoordFallback(clientX,clientY,metrics),strategy:strategy,matchedSelector:matchedSelector,status:'resolved'};
   }
 
   function setPickMode(enabled){
@@ -526,8 +699,59 @@ function trackingScript() {
       });
     }
   }
+
+  var mutationTick=false;
+  function reportDomMutation(reason){
+    try{
+      window.parent.postMessage({
+        type:'checkpoint:domMutation',
+        reason:reason||'mutation',
+        path:location.pathname+location.search+location.hash
+      },'*');
+    }catch(e){}
+  }
+
+  function onMutation(){
+    if(mutationTick) return;
+    mutationTick=true;
+    requestAnimationFrame(function(){
+      mutationTick=false;
+      reportScroll();
+      reportDomMutation('mutation');
+    });
+  }
+
+  function setupMutationObserver(){
+    try{
+      if(!window.MutationObserver||!document.documentElement) return;
+      var observer=new MutationObserver(function(mutations){
+        for(var i=0;i<mutations.length;i++){
+          var m=mutations[i];
+          if(m.type==='childList'){
+            if((m.addedNodes&&m.addedNodes.length>0)||(m.removedNodes&&m.removedNodes.length>0)){
+              onMutation();
+              return;
+            }
+          }
+          if(m.type==='attributes'){
+            onMutation();
+            return;
+          }
+        }
+      });
+      observer.observe(document.documentElement,{
+        childList:true,
+        subtree:true,
+        attributes:true,
+        attributeFilter:['class','style','aria-hidden','aria-modal','data-state','open']
+      });
+      window.addEventListener('beforeunload',function(){ try{observer.disconnect();}catch(e){}; });
+    }catch(e){}
+  }
+
   reportNav();
   reportScroll();
+  setupMutationObserver();
   var _ps=history.pushState,_rs=history.replaceState;
   history.pushState=function(){_ps.apply(this,arguments);reportNav();};
   history.replaceState=function(){_rs.apply(this,arguments);reportNav();};
@@ -549,23 +773,14 @@ function trackingScript() {
           var item=e.data.items[i];
           if(!item||typeof item.id!=='string') continue;
           var result=resolveAnchor(item.anchorPayload);
-          if(result.coordFallback){
-            positions.push({
-              id:item.id,
-              found:true,
-              strategy:result.strategy,
-              matchedSelector:result.matchedSelector,
-              coordFallback:result.coordFallback
-            });
-          } else {
-            positions.push({
-              id:item.id,
-              found:false,
-              strategy:'fallback',
-              matchedSelector:null,
-              coordFallback:null
-            });
-          }
+          positions.push({
+            id:item.id,
+            found:!!result.coordFallback,
+            status:result.status||'none',
+            strategy:result.strategy,
+            matchedSelector:result.matchedSelector,
+            coordFallback:result.coordFallback||null
+          });
         }
         window.parent.postMessage({
           type:'checkpoint:anchorsResolved',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checkpoint-cli",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",