checkpoint-cli 0.1.6 → 0.1.8

package/dist/index.js

@@ -208,6 +208,263 @@ 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 getVisibleText(node){
+    try{
+      if(!node||!node.textContent) return '';
+      return shortText(String(node.textContent).replace(/\\s+/g,' ').trim()).toLowerCase();
+    }catch(e){}
+    return '';
+  }
+
+  function getNavSignature(){
+    try{
+      var candidates=[];
+      var activeSelectors=[
+        '[aria-current=\"page\"]',
+        '[aria-selected=\"true\"]',
+        '[data-state=\"active\"]',
+        '.active',
+        '.is-active',
+        '.selected'
+      ];
+      for(var i=0;i<activeSelectors.length;i++){
+        var nodes=document.querySelectorAll(activeSelectors[i]);
+        for(var j=0;j<nodes.length&&candidates.length<8;j++){
+          var text=getVisibleText(nodes[j]);
+          if(text) candidates.push(text);
+        }
+      }
+      if(candidates.length===0){
+        var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
+        var fallbackText=getVisibleText(heading);
+        if(fallbackText) candidates.push(fallbackText);
+      }
+      if(candidates.length===0) return '';
+      return candidates.slice(0,4).join('|');
+    }catch(e){}
+    return '';
+  }
+
+  function getHeadingSignature(){
+    try{
+      var heading=document.querySelector('main h1, [role=\"main\"] h1, h1, h2');
+      return getVisibleText(heading);
+    }catch(e){}
+    return '';
+  }
+
+  function getViewContext(){
+    return {
+      nav_signature:getNavSignature()||undefined,
+      heading_signature:getHeadingSignature()||undefined
+    };
+  }
+
+  function viewContextMatches(expected){
+    if(!expected||typeof expected!=='object') return true;
+    var current=getViewContext();
+    if(expected.nav_signature&&current.nav_signature&&expected.nav_signature!==current.nav_signature){
+      return false;
+    }
+    if(expected.heading_signature&&current.heading_signature&&expected.heading_signature!==current.heading_signature){
+      return false;
+    }
+    return true;
+  }
+
+  function isScrollable(el){
+    if(!el||el.nodeType!==1||!window.getComputedStyle) return false;
+    try{
+      var style=window.getComputedStyle(el);
+      var overflowY=String(style.overflowY||'').toLowerCase();
+      var overflowX=String(style.overflowX||'').toLowerCase();
+      var canScrollY=(overflowY==='auto'||overflowY==='scroll'||overflowY==='overlay')&&(el.scrollHeight-el.clientHeight>1);
+      var canScrollX=(overflowX==='auto'||overflowX==='scroll'||overflowX==='overlay')&&(el.scrollWidth-el.clientWidth>1);
+      return !!(canScrollX||canScrollY);
+    }catch(e){}
+    return false;
+  }
+
+  function getNearestScrollContainer(el){
+    if(!el) return null;
+    var current=el.parentElement;
+    var depth=0;
+    while(current&&depth<10){
+      if(current===document.body||current===document.documentElement) return null;
+      if(isScrollable(current)) return current;
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getScrollContext(el,clientX,clientY){
+    var container=getNearestScrollContainer(el);
+    if(!container) return null;
+    var rect=container.getBoundingClientRect?container.getBoundingClientRect():null;
+    if(!rect) return null;
+    var safeW=Math.max(1,rect.width||1);
+    var safeH=Math.max(1,rect.height||1);
+    return {
+      container_selector_chain:getSelectorChain(container),
+      container_fingerprint:getDomFingerprint(container),
+      container_x_percent:clampPercent(((clientX-rect.left)/safeW)*100),
+      container_y_percent:clampPercent(((clientY-rect.top)/safeH)*100)
+    };
+  }
+
+  function getPointFromScrollContext(scrollContext){
+    if(!scrollContext||typeof scrollContext!=='object') return null;
+    var container=null;
+    if(Array.isArray(scrollContext.container_selector_chain)){
+      for(var i=0;i<scrollContext.container_selector_chain.length;i++){
+        var candidate=scrollContext.container_selector_chain[i];
+        if(!candidate||typeof candidate.selector!=='string') continue;
+        var nodes=querySelectorAllSafe(document,candidate.selector);
+        var match=pickBestElement(nodes,{coord_fallback:null},getMetrics(),null);
+        if(match&&match.element){
+          container=match.element;
+          break;
+        }
+      }
+    }
+    if(!container&&scrollContext.container_fingerprint){
+      var fp=resolveFromFingerprint(scrollContext.container_fingerprint,{coord_fallback:null},getMetrics(),document);
+      container=fp&&fp.element?fp.element:null;
+    }
+    if(!container||!container.getBoundingClientRect) return null;
+    var rect=container.getBoundingClientRect();
+    var relX=typeof scrollContext.container_x_percent==='number'?clampPercent(scrollContext.container_x_percent)/100:0.5;
+    var relY=typeof scrollContext.container_y_percent==='number'?clampPercent(scrollContext.container_y_percent)/100:0.5;
+    return {
+      clientX:rect.left+(rect.width*relX),
+      clientY:rect.top+(rect.height*relY)
+    };
+  }
+
   function buildCoordFallback(clientX,clientY,metrics){
     var safeViewW=metrics.viewWidth||1;
     var safeViewH=metrics.viewHeight||1;
@@ -253,6 +510,9 @@ function trackingScript() {
         parent:textParent
       },
       container_hint:getContainerHint(el),
+      transient_context:getTransientContext(el),
+      view_context:getViewContext(),
+      scroll_context:getScrollContext(el,clientX,clientY),
       coord_fallback:fallback
     };
   }
@@ -328,13 +588,16 @@ function trackingScript() {
   }
 
   function pickBestElement(nodes,payload,metrics,fingerprintPath){
-    if(!nodes||nodes.length===0) return null;
+    if(!nodes||nodes.length===0) return { element:null, ambiguous:false, bestScore:Infinity };
     var target=getTargetDocPoint(payload,metrics);
     var best=null;
     var bestScore=Infinity;
+    var secondScore=Infinity;
+    var matchCount=0;
     for(var i=0;i<nodes.length;i++){
       var node=nodes[i];
       if(!node||node.nodeType!==1) continue;
+      matchCount++;
       var anchorPoint=getAnchorClientPoint(node,payload);
       var docX=anchorPoint.clientX+metrics.scrollX;
       var docY=anchorPoint.clientY+metrics.scrollY;
@@ -348,29 +611,51 @@ function trackingScript() {
         score+=siblingPathDistance(node,fingerprintPath)*40;
       }
       if(score<bestScore){
+        secondScore=bestScore;
         best=node;
         bestScore=score;
+      }else if(score<secondScore){
+        secondScore=score;
       }
     }
-    return best;
+    if(!best) return { element:null, ambiguous:false, bestScore:Infinity };
+    var ambiguous=false;
+    if(matchCount>1){
+      if(!target){
+        ambiguous=true;
+      }else if((secondScore-bestScore)<18){
+        ambiguous=true;
+      }
+    }
+    return { element:best, ambiguous:ambiguous, bestScore:bestScore };
+  }
+
+  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){
-    if(!fingerprint) return null;
+  function resolveFromFingerprint(fingerprint,payload,metrics,scope){
+    if(!fingerprint) return { element:null, ambiguous:false, bestScore:Infinity };
+    var searchScope=scope||document;
     if(fingerprint.id){
-      var byId=document.getElementById(fingerprint.id);
-      if(byId) return byId;
+      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 { element:byId, ambiguous:false, bestScore:0 };
     }
     var tag=fingerprint.tag||'*';
     var selector=tag;
     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 +669,142 @@ 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);
+        var rootMatch=pickBestElement(nodes,payload,metrics,transient.root_fingerprint&&transient.root_fingerprint.sibling_path);
+        root=rootMatch.element;
+        if(root) return root;
+      }
+    }
+    root=resolveFromFingerprint(transient.root_fingerprint,payload,metrics,document).element;
+    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'};
+    if(!viewContextMatches(payload.view_context)){
+      return {
+        coordFallback:payload.coord_fallback||null,
+        strategy:'context_mismatch',
+        matchedSelector:null,
+        status:'context_mismatch'
+      };
+    }
     var element=null;
     var strategy='none';
     var matchedSelector=null;
     var metrics=getMetrics();
-    if(Array.isArray(payload.selector_chain)){
+    var ambiguous=false;
+    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&&found.element){
+          element=found.element;
+          ambiguous=!!found.ambiguous;
+          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 containerMatch=pickBestElement(containerNodesInRoot,payload,metrics,null);
+      if(!containerMatch.element){
+        var containerNodes=querySelectorAllSafe(document,payload.container_hint.selector);
+        containerMatch=pickBestElement(containerNodes,payload,metrics,null);
+      }
+      if(containerMatch.element){
+        element=containerMatch.element;
+        ambiguous=!!containerMatch.ambiguous;
+        strategy='container';
+        matchedSelector=payload.container_hint.selector;
+      }
     }
     if(!element){
-      var fpEl=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics);
-      if(fpEl){
-        element=fpEl;
+      var fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,transientRoot||undefined);
+      if(!fpMatch.element){
+        fpMatch=resolveFromFingerprint(payload.dom_fingerprint,payload,metrics,document);
+      }
+      if(fpMatch.element){
+        element=fpMatch.element;
+        ambiguous=!!fpMatch.ambiguous;
         strategy='fingerprint';
       }
     }
-    if(!element) return {coordFallback:null,strategy:'none',matchedSelector:null};
+    if(!element&&payload.scroll_context){
+      var fromContainer=getPointFromScrollContext(payload.scroll_context);
+      if(fromContainer){
+        return {
+          coordFallback:buildCoordFallback(fromContainer.clientX,fromContainer.clientY,metrics),
+          strategy:'scroll_container',
+          matchedSelector:null,
+          status:'resolved'
+        };
+      }
+    }
+    if(!element) return {coordFallback:null,strategy:'fallback',matchedSelector:null,status:'fallback_only'};
+    if(ambiguous){
+      return {
+        coordFallback:payload.coord_fallback||null,
+        strategy:'ambiguous',
+        matchedSelector:matchedSelector,
+        status:'ambiguous'
+      };
+    }
+    var target=getTargetDocPoint(payload,metrics);
+    if(target){
+      var anchorPoint=getAnchorClientPoint(element,payload);
+      var distX=(anchorPoint.clientX+metrics.scrollX)-target.x;
+      var distY=(anchorPoint.clientY+metrics.scrollY)-target.y;
+      var dist=Math.sqrt(distX*distX+distY*distY);
+      if(dist>220){
+        return {
+          coordFallback:payload.coord_fallback||null,
+          strategy:'ambiguous',
+          matchedSelector:matchedSelector,
+          status:'ambiguous'
+        };
+      }
+    }
     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){
@@ -522,18 +893,71 @@ function trackingScript() {
       scrollTick=true;
       requestAnimationFrame(function(){
         reportScroll();
+        reportDomMutation('scroll');
         scrollTick=false;
       });
     }
   }
+
+  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();};
   window.addEventListener('popstate',reportNav);
   window.addEventListener('hashchange',reportNav);
   window.addEventListener('scroll',onScroll,{passive:true});
+  document.addEventListener('scroll',onScroll,true);
   window.addEventListener('resize',reportScroll);
   window.addEventListener('message',function(e){
     try{
@@ -549,23 +973,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.8",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",