diff --git a/package-lock.json b/package-lock.json index 707249f..775f5ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.5.1", "license": "Apache-2.0", "dependencies": { - "web-vitals": "^4.0.0" + "web-vitals": "4.2.3-soft-navs" }, "devDependencies": { "babel-eslint": "^10.1.0", @@ -1683,9 +1683,10 @@ "dev": true }, "node_modules/web-vitals": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.0.0.tgz", - "integrity": "sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q==" + "version": "4.2.3-soft-navs", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3-soft-navs.tgz", + "integrity": "sha512-mybP3tYExUArNd7nF65bE2ULAsKgTQXL7Bn/VlPBFSkaYLkMlAvEO82wgnyfShF1MU4m3c88tbr0qgkj49g83A==", + "license": "Apache-2.0" }, "node_modules/which": { "version": "1.3.1", @@ -3022,9 +3023,9 @@ "dev": true }, "web-vitals": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.0.0.tgz", - "integrity": "sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q==" + "version": "4.2.3-soft-navs", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3-soft-navs.tgz", + "integrity": "sha512-mybP3tYExUArNd7nF65bE2ULAsKgTQXL7Bn/VlPBFSkaYLkMlAvEO82wgnyfShF1MU4m3c88tbr0qgkj49g83A==" }, "which": { "version": "1.3.1", diff --git a/package.json b/package.json index 2090d10..cc809c7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "private": true, "scripts": { "lint": "npx eslint src --fix", - "build": "npm install; cp node_modules/web-vitals/dist/web-vitals.attribution.js src/browser_action/web-vitals.js" + "build": "npm install && cp node_modules/web-vitals/dist/web-vitals.attribution.js src/browser_action/web-vitals.js" }, "devDependencies": { "babel-eslint": "^10.1.0", @@ -21,6 +21,6 @@ "eslint-config-google": "^0.14.0" }, "dependencies": { - "web-vitals": "^4.0.0" + "web-vitals": "4.2.3-soft-navs" } } diff --git a/src/browser_action/vitals.js b/src/browser_action/vitals.js index 36e0cbc..827c12d 100644 --- a/src/browser_action/vitals.js +++ b/src/browser_action/vitals.js @@ -19,6 +19,7 @@ let latestCLS = {}; let enableLogging = localStorage.getItem('web-vitals-extension-debug')=='TRUE'; let enableUserTiming = localStorage.getItem('web-vitals-extension-user-timing')=='TRUE'; + let reportSoftNavs = (await chrome.storage.sync.get('reportSoftNavs')).reportSoftNavs ?? false; let tabLoadedInBackground; const COLOR_GOOD = '#0CCE6A'; @@ -514,15 +515,15 @@ // debounce the broadcast of the metric. latestCLS = metric; debouncedCLSBroadcast(); - }, { reportAllChanges: true }); + }, { reportAllChanges: true, reportSoftNavs }); - webVitals.onLCP(broadcastMetricsUpdates, { reportAllChanges: true }); - webVitals.onFID(broadcastMetricsUpdates, { reportAllChanges: true }); + webVitals.onLCP(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs }); + webVitals.onFID(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs }); webVitals.onINP((metric) => { broadcastMetricsUpdates(metric) - }, { reportAllChanges: true }); - webVitals.onFCP(broadcastMetricsUpdates, { reportAllChanges: true }); - webVitals.onTTFB(broadcastMetricsUpdates, { reportAllChanges: true }); + }, { reportAllChanges: true, reportSoftNavs: true }); + webVitals.onFCP(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs }); + webVitals.onTTFB(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs }); if (enableLogging) { onEachInteraction((metric) => { diff --git a/src/browser_action/web-vitals.js b/src/browser_action/web-vitals.js index 067b542..b2ff31b 100644 --- a/src/browser_action/web-vitals.js +++ b/src/browser_action/web-vitals.js @@ -1 +1 @@ -var t,e,n=function(){var t=self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0];if(t&&t.responseStart>0&&t.responseStart(e||100)-1)return n||a;if(n=n?a+">"+n:a,r.id)break;t=r.parentNode}}catch(t){}return n},o=-1,c=function(){return o},u=function(t){addEventListener("pageshow",(function(e){e.persisted&&(o=e.timeStamp,t(e))}),!0)},s=function(){var t=n();return t&&t.activationStart||0},f=function(t,e){var r=n(),i="navigate";c()>=0?i="back-forward-cache":r&&(document.prerendering||s()>0?i="prerender":document.wasDiscarded?i="restore":r.type&&(i=r.type.replace(/_/g,"-")));return{name:t,value:void 0===e?-1:e,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},d=function(t,e,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var r=new PerformanceObserver((function(t){Promise.resolve().then((function(){e(t.getEntries())}))}));return r.observe(Object.assign({type:t,buffered:!0},n||{})),r}}catch(t){}},l=function(t,e,n,r){var i,a;return function(o){e.value>=0&&(o||r)&&((a=e.value-(i||0))||void 0===i)&&(i=e.value,e.delta=a,e.rating=function(t,e){return t>e[1]?"poor":t>e[0]?"needs-improvement":"good"}(e.value,n),t(e))}},m=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},p=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},v=function(t){var e=!1;return function(){e||(t(),e=!0)}},g=-1,h=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(t){"hidden"===document.visibilityState&&g>-1&&(g="visibilitychange"===t.type?t.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},S=function(){return g<0&&(g=h(),y(),u((function(){setTimeout((function(){g=h(),y()}),0)}))),{get firstHiddenTime(){return g}}},b=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},L=[1800,3e3],C=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FCP"),a=d("paint",(function(t){t.forEach((function(t){"first-contentful-paint"===t.name&&(a.disconnect(),t.startTimer.value&&(r.value=i,r.entries=a,n())},c=d("layout-shift",o);c&&(n=l(t,r,M,e.reportAllChanges),p((function(){o(c.takeRecords()),n(!0)})),u((function(){i=0,r=f("CLS",0),n=l(t,r,M,e.reportAllChanges),m((function(){return n()}))})),setTimeout(n,0))})))}((function(e){var n=function(t){var e,n={};if(t.entries.length){var i=t.entries.reduce((function(t,e){return t&&t.value>e.value?t:e}));if(i&&i.sources&&i.sources.length){var o=(e=i.sources).find((function(t){return t.node&&1===t.node.nodeType}))||e[0];o&&(n={largestShiftTarget:a(o.node),largestShiftTime:i.startTime,largestShiftValue:i.value,largestShiftSource:o,largestShiftEntry:i,loadState:r(i.startTime)})}}return Object.assign(t,{attribution:n})}(e);t(n)}),e)},D=function(t,e){C((function(e){var i=function(t){var e={timeToFirstByte:0,firstByteToFCP:t.value,loadState:r(c())};if(t.entries.length){var i=n(),a=t.entries[t.entries.length-1];if(i){var o=i.activationStart||0,u=Math.max(0,i.responseStart-o);e={timeToFirstByte:u,firstByteToFCP:t.value-u,loadState:r(t.entries[0].startTime),navigationEntry:i,fcpEntry:a}}}return Object.assign(t,{attribution:e})}(e);t(i)}),e)},I=0,x=1/0,k=0,A=function(t){t.forEach((function(t){t.interactionId&&(x=Math.min(x,t.interactionId),k=Math.max(k,t.interactionId),I=k?(k-x)/7+1:0)}))},F=function(){"interactionCount"in performance||t||(t=d("event",A,{type:"event",buffered:!0,durationThreshold:0}))},P=[],B=new Map,O=0,R=function(){return(t?I:performance.interactionCount||0)-O},j=[],q=function(t){if(j.forEach((function(e){return e(t)})),t.interactionId||"first-input"===t.entryType){var e=P[P.length-1],n=B.get(t.interactionId);if(n||P.length<10||t.duration>e.latency){if(n)t.duration>n.latency?(n.entries=[t],n.latency=t.duration):t.duration===n.latency&&t.startTime===n.entries[0].startTime&&n.entries.push(t);else{var r={id:t.interactionId,latency:t.duration,entries:[t]};B.set(r.id,r),P.push(r)}P.sort((function(t,e){return e.latency-t.latency})),P.length>10&&P.splice(10).forEach((function(t){return B.delete(t.id)}))}}},H=function(t){var e=self.requestIdleCallback||self.setTimeout,n=-1;return t=v(t),"hidden"===document.visibilityState?t():(n=e(t),p(t)),n},N=[200,500],W=function(t,e){e=e||{},b((function(){var n;F();var r,i=f("INP"),a=function(t){t.forEach(q);var e,n=(e=Math.min(P.length-1,Math.floor(R()/50)),P[e]);n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())},o=d("event",a,{durationThreshold:null!==(n=e.durationThreshold)&&void 0!==n?n:40});r=l(t,i,N,e.reportAllChanges),o&&("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&o.observe({type:"first-input",buffered:!0}),p((function(){a(o.takeRecords()),r(!0)})),u((function(){O=0,P.length=0,B.clear(),i=f("INP"),r=l(t,i,N,e.reportAllChanges)})))}))},z=[],U=new Map,V=[],_=new WeakMap,G=new Map,J=-1,K=function(t){t.forEach((function(t){return z.push(t)}))},Q=function(){G.size>10&&G.forEach((function(t,e){B.has(e)||G.delete(e)})),V=V.slice(-50);var t=new Set(V.concat(P.map((function(t){return _.get(t.entries[0])}))));U.forEach((function(e,n){t.has(n)||U.delete(n)}));var e=new Set;U.forEach((function(t){tt(t.startTime,t.processingEnd).forEach((function(t){e.add(t)}))})),z=Array.from(e),J=-1};j.push((function(t){t.interactionId&&t.target&&!G.has(t.interactionId)&&G.set(t.interactionId,t.target)}),(function(t){for(var e,n=t.startTime+t.duration,r=V.length-1;r>=0;r--)if(e=V[r],Math.abs(n-e)<=8){var i=U.get(e);i.startTime=Math.min(t.startTime,i.startTime),i.processingStart=Math.min(t.processingStart,i.processingStart),i.processingEnd=Math.max(t.processingEnd,i.processingEnd),i.entries.push(t),n=e;break}n!==e&&(V.push(n),U.set(n,{startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,entries:[t]})),(t.interactionId||"first-input"===t.entryType)&&_.set(t,n)}),(function(){J<0&&(J=H(Q))}));var X,Y,Z,$,tt=function(t,e){for(var n,r=[],i=0;n=z[i];i++)if(!(n.startTime+n.duratione)break;r.push(n)}return r},et=function(t,n){e||(e=d("long-animation-frame",K)),W((function(e){H((function(){var n=function(t){var e=t.entries[0],n=_.get(e),i=U.get(n),o=e.processingStart,c=i.processingEnd,u=i.entries.sort((function(t,e){return t.processingStart-e.processingStart})),s=tt(e.startTime,c),f=t.entries.find((function(t){return t.target})),d=f&&f.target||G.get(e.interactionId),l=[e.startTime+e.duration,c].concat(s.map((function(t){return t.startTime+t.duration}))),m=Math.max.apply(Math,l),p={interactionTarget:a(d),interactionTargetElement:d,interactionType:e.name.startsWith("key")?"keyboard":"pointer",interactionTime:e.startTime,nextPaintTime:m,processedEventEntries:u,longAnimationFrameEntries:s,inputDelay:o-e.startTime,processingDuration:c-o,presentationDelay:Math.max(m-c,0),loadState:r(e.startTime)};return Object.assign(t,{attribution:p})}(e);t(n)}))}),n)},nt=[2500,4e3],rt={},it=function(t,e){!function(t,e){e=e||{},b((function(){var n,r=S(),i=f("LCP"),a=function(t){e.reportAllChanges||(t=t.slice(-1)),t.forEach((function(t){t.startTime=0&&Y1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){dt(t,e),i()},r=function(){i()},i=function(){removeEventListener("pointerup",n,st),removeEventListener("pointercancel",r,st)};addEventListener("pointerup",n,st),addEventListener("pointercancel",r,st)}(e,t):dt(e,t)}},pt=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,mt,st)}))},vt=[100,300],gt=function(t,e){e=e||{},b((function(){var n,r=S(),i=f("FID"),a=function(t){t.startTime0&&t.responseStart(n||100)-1)return e||r;if(e=e?r+">"+e:r,i.id)break;t=i.parentNode}}catch(t){}return e},o=function(t,n,e,i){var a,r;return function(o){n.value>=0&&(o||i)&&((r=n.value-(a||0))||void 0===a)&&(a=n.value,n.delta=r,n.rating=function(t,n){return t>n[1]?"poor":t>n[0]?"needs-improvement":"good"}(n.value,e),t(n))}},c=function(t){requestAnimationFrame((function(){return requestAnimationFrame((function(){return t()}))}))},s=-1,u=function(){return s},v=function(t){addEventListener("pageshow",(function(n){n.persisted&&(s=n.timeStamp,t(n))}),!0)},f=function(){var t=e();return t&&t.activationStart||0},d=function(t,n,i,a){var r,o=(null===(r=e())||void 0===r?void 0:r.navigationId)||"1",c=e(),s="navigate";i?s=i:u()>=0?s="back-forward-cache":c&&(document.prerendering||f()>0?s="prerender":document.wasDiscarded?s="restore":c.type&&(s=c.type.replace(/_/g,"-")));return{name:t,value:void 0===n?-1:n,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:s,navigationId:a||o}},l=function(t){return PerformanceObserver.supportedEntryTypes.includes("soft-navigation")&&t&&t.reportSoftNavs},g=function(t){if(t){var n=window.performance.getEntriesByType("soft-navigation").filter((function(n){return n.navigationId===t}));return n?n[0]:void 0}},m=function(t,n,e){var i=l(e);try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var a=new PerformanceObserver((function(t){Promise.resolve().then((function(){n(t.getEntries())}))}));return a.observe(Object.assign({type:t,buffered:!0,includeSoftNavigationObservations:i},e||{})),a}}catch(t){}},p=function(t){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&t()}))},h=function(t){var n=!1;return function(){n||(t(),n=!0)}},T=-1,I=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},y=function(t){"hidden"===document.visibilityState&&T>-1&&(T="visibilitychange"===t.type?t.timeStamp:0,S())},E=function(){addEventListener("visibilitychange",y,!0),addEventListener("prerenderingchange",y,!0)},S=function(){removeEventListener("visibilitychange",y,!0),removeEventListener("prerenderingchange",y,!0)},b=function(){return arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&(T=-1),T<0&&(T=I(),E(),v((function(){setTimeout((function(){T=I(),E()}),0)}))),{get firstHiddenTime(){return T}}},C=function(t){document.prerendering?addEventListener("prerenderingchange",(function(){return t()}),!0):t()},w=[1800,3e3],L=function(t,n){var i,a=l(n=n||{}),r=0,s=(null===(i=e())||void 0===i?void 0:i.navigationId)||"1";C((function(){var e,i=b(),u=d("FCP"),l=m("paint",(function(c){c.forEach((function(c){if("first-contentful-paint"===c.name){a?c.navigationId&&c.navigationId!==u.navigationId&&function(a,c){u=d("FCP",0,a,c),e=o(t,u,w,n.reportAllChanges),i=b(!0);var s=c?g(c):null;r=s&&s.startTime||0}("soft-navigation",c.navigationId):l.disconnect();var v=0;if(c.navigationId&&c.navigationId!==s){var m=g(c.navigationId),p=m&&m.startTime?m.startTime:0;v=Math.max(c.startTime-p,0)}else v=Math.max(c.startTime-f(),0);var h=a&&c.navigationId?g(c.navigationId):null,T=h&&h.startTime?h.startTime:0;(c.startTimer)&&(u.value=v,u.entries.push(c),u.navigationId=c.navigationId||"1",e(!0))}}))}),n);l&&(e=o(t,u,w,n.reportAllChanges),v((function(i){u=d("FCP",0,"back-forward-cache",u.navigationId),e=o(t,u,w,n.reportAllChanges),c((function(){u.value=performance.now()-i.timeStamp,e(!0)}))})))}))},M=[.1,.25],D=function(t,n){!function(t,n){var e=l(n=n||{}),i=!1,a=0;L(h((function(){var r,s=d("CLS",0),u=0,f=[],l=function(e,c){if(s=d("CLS",0,e,c),r=o(t,s,M,n.reportAllChanges),u=0,i=!1,"soft-navigation"===e){var v=g(c);a=v&&v.startTime||0}},h=function(t){t.forEach((function(t){if(e&&t.navigationId&&t.navigationId!==s.navigationId&&(u>s.value&&(s.value=u,s.entries=f),r(!0),l("soft-navigation",t.navigationId)),!t.hadRecentInput){var n=f[0],i=f[f.length-1];u&&t.startTime-i.startTime<1e3&&t.startTime-n.startTime<5e3?(u+=t.value,f.push(t)):(u=t.value,f=[t])}})),u>s.value&&(s.value=u,s.entries=f,r())},T=m("layout-shift",h,n);T&&(r=o(t,s,M,n.reportAllChanges),p((function(){h(T.takeRecords()),r(!0),i=!0})),v((function(){l("back-forward-cache",s.navigationId),c((function(){return r()}))})),e&&m("soft-navigation",(function(e){e.forEach((function(e){var c=e.navigationId,u=c?g(c):null;c&&c!==s.navigationId&&u&&(u.startTime||0)>a&&(i||r(!0),l("soft-navigation",e.navigationId),r=o(t,s,M,n.reportAllChanges))}))}),n),setTimeout(r,0))})))}((function(n){var e=function(t){var n,e={};if(t.entries.length){var a=t.entries.reduce((function(t,n){return t&&t.value>n.value?t:n}));if(a&&a.sources&&a.sources.length){var o=(n=a.sources).find((function(t){return t.node&&1===t.node.nodeType}))||n[0];o&&(e={largestShiftTarget:r(o.node),largestShiftTime:a.startTime,largestShiftValue:a.value,largestShiftSource:o,largestShiftEntry:a,loadState:i(a.startTime)})}}return Object.assign(t,{attribution:e})}(n);t(e)}),n)},k=function(t,n){L((function(n){var a=function(t){var n,a=(null===(n=e())||void 0===n?void 0:n.navigationId)||"1",r={timeToFirstByte:0,firstByteToFCP:t.value,loadState:i(u())};if(t.entries.length){var o,c=t.entries[t.entries.length-1],s=0;if(t.navigationId&&t.navigationId!==a)s=(o=g(t.navigationId))?o.startTime:0;else if(o=e()){var v=o.responseStart,f=o.activationStart||0;s=Math.max(0,v-f)}o&&(r={timeToFirstByte:s,firstByteToFCP:t.value-s,loadState:i(t.entries[0].startTime),navigationEntry:o,fcpEntry:c})}return Object.assign(t,{attribution:r})}(n);t(a)}),n)},x=0,A=1/0,F=0,P="",B=!1,O=function(t){var n;P||(P=(null===(n=e())||void 0===n?void 0:n.navigationId)||"1"),t.forEach((function(t){t.interactionId&&(B&&t.navigationId&&t.navigationId!==P&&(P=t.navigationId,x=0,A=1/0,F=0),A=Math.min(A,t.interactionId),F=Math.max(F,t.interactionId),x=F?(F-A)/7+1:0)}))},N=function(){return t?x:performance.interactionCount||0},R=function(n){"interactionCount"in performance||t||(t=m("event",O,{type:"event",buffered:!0,durationThreshold:0,includeSoftNavigationObservations:B=n||!1}))},j=[],q=new Map,H=0,W=function(){H=N(),j.length=0,q.clear()},z=function(){var t=Math.min(j.length-1,Math.floor((N()-H)/50));return j[t]},U=[],V=function(t){if(U.forEach((function(n){return n(t)})),t.interactionId||"first-input"===t.entryType){var n=j[j.length-1],e=q.get(t.interactionId);if(e||j.length<10||t.duration>n.latency){if(e)t.duration>e.latency?(e.entries=[t],e.latency=t.duration):t.duration===e.latency&&t.startTime===e.entries[0].startTime&&e.entries.push(t);else{var i={id:t.interactionId,latency:t.duration,entries:[t]};q.set(i.id,i),j.push(i)}j.sort((function(t,n){return n.latency-t.latency})),j.length>10&&j.splice(10).forEach((function(t){return q.delete(t.id)}))}}},_=function(t){var n=self.requestIdleCallback||self.setTimeout,e=-1;return t=h(t),"hidden"===document.visibilityState?t():(e=n(t),p(t)),e},G=[200,500],J=function(t,n){if("PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype){var e=l(n=n||{}),i=!1,a=0;C((function(){var r;R(e);var s,u=d("INP"),f=function(e,r){if(W(),u=d("INP",0,e,r),s=o(t,u,G,n.reportAllChanges),i=!1,"soft-navigation"===e){var c=g(r);a=c&&c.startTime?c.startTime:0}},l=function(t){_((function(){var e;t.forEach(V),(e=z())&&(e.latency!==u.value||n&&n.reportAllChanges)&&(u.value=e.latency,u.entries=e.entries),s()}))},h=m("event",l,{durationThreshold:null!==(r=n.durationThreshold)&&void 0!==r?r:40,opts:n});if(s=o(t,u,G,n.reportAllChanges),h){h.observe({type:"first-input",buffered:!0,includeSoftNavigationObservations:e}),p((function(){l(h.takeRecords()),s(!0)})),v((function(){W(),f("back-forward-cache",u.navigationId),c((function(){return s()}))}));e&&m("soft-navigation",(function(e){e.forEach((function(e){var r=g(e.navigationId),c=r&&r.startTime?r.startTime:0;e.navigationId&&e.navigationId!==u.navigationId&&c>a&&(!i&&u.value>0&&s(!0),f("soft-navigation",e.navigationId),s=o(t,u,G,n.reportAllChanges))}))}),n)}}))}},K=[],Q=[],X=0,Y=new WeakMap,Z=new Map,$=-1,tt=function(t){K=K.concat(t),nt()},nt=function(){$<0&&($=_(et))},et=function(){Z.size>10&&Z.forEach((function(t,n){q.has(n)||Z.delete(n)}));var t=j.map((function(t){return Y.get(t.entries[0])})),n=Q.length-50;Q=Q.filter((function(e,i){return i>=n||t.includes(e)}));for(var e=new Set,i=0;iX&&n>r||e.has(t)})),$=-1};U.push((function(t){t.interactionId&&t.target&&!Z.has(t.interactionId)&&Z.set(t.interactionId,t.target)}),(function(t){var n,e=t.startTime+t.duration;X=Math.max(X,t.processingEnd);for(var i=Q.length-1;i>=0;i--){var a=Q[i];if(Math.abs(e-a.renderTime)<=8){(n=a).startTime=Math.min(t.startTime,n.startTime),n.processingStart=Math.min(t.processingStart,n.processingStart),n.processingEnd=Math.max(t.processingEnd,n.processingEnd),n.entries.push(t);break}}n||(n={startTime:t.startTime,processingStart:t.processingStart,processingEnd:t.processingEnd,renderTime:e,entries:[t]},Q.push(n)),(t.interactionId||"first-input"===t.entryType)&&Y.set(t,n),nt()}));var it,at,rt,ot,ct=function(t,n){for(var e,i=[],a=0;e=K[a];a++)if(!(e.startTime+e.durationn)break;i.push(e)}return i},st=function(t,e){n||(n=m("long-animation-frame",tt)),J((function(n){var e=function(t){var n=t.entries[0],e=Y.get(n),a=n.processingStart,o=e.processingEnd,c=e.entries.sort((function(t,n){return t.processingStart-n.processingStart})),s=ct(n.startTime,o),u=t.entries.find((function(t){return t.target})),v=u&&u.target||Z.get(n.interactionId),f=[n.startTime+n.duration,o].concat(s.map((function(t){return t.startTime+t.duration}))),d=Math.max.apply(Math,f),l={interactionTarget:r(v),interactionTargetElement:v,interactionType:n.name.startsWith("key")?"keyboard":"pointer",interactionTime:n.startTime,nextPaintTime:d,processedEventEntries:c,longAnimationFrameEntries:s,inputDelay:a-n.startTime,processingDuration:o-a,presentationDelay:Math.max(d-o,0),loadState:i(n.startTime)};return Object.assign(t,{attribution:l})}(n);t(e)}),e)},ut=[2500,4e3],vt=function(t,n){!function(t,n){var i,a=!1,r=l(n=n||{}),s=0,u=(null===(i=e())||void 0===i?void 0:i.navigationId)||"1",h="";C((function(){var e,i=b(),l=d("LCP"),T=function(r,c){if(l=d("LCP",0,r,c),e=o(t,l,ut,n.reportAllChanges),a=!1,"soft-navigation"===r){i=b(!0);var u=g(c);s=u&&u.startTime?u.startTime:0}E()},I=function(t){t.forEach((function(t){if(t){r&&t.navigationId&&t.navigationId!==l.navigationId&&(a||e(!0),T("soft-navigation",t.navigationId));var n=0;if(t.navigationId&&t.navigationId!==u){var o=g(t.navigationId),c=o&&o.startTime?o.startTime:0;n=Math.max(t.startTime-c,0)}else n=Math.max(t.startTime-f(),0);t.startTimes&&(a||e(!0),T("soft-navigation",t.navigationId))}))}),n))}))}((function(n){var i=function(t){var n,i=(null===(n=e())||void 0===n?void 0:n.navigationId)||"1",a={timeToFirstByte:0,resourceLoadDelay:0,resourceLoadDuration:0,elementRenderDelay:t.value};if(t.entries.length){var o,c=0,s=0,u=0;if(t.navigationId&&t.navigationId!==i?c=u=(o=g(t.navigationId))?o.startTime:0:(c=(o=e())&&o.activationStart?o.activationStart:0,s=o&&o.responseStart?o.responseStart:0),o){var v=t.entries[t.entries.length-1],f=v.url&&performance.getEntriesByType("resource").filter((function(t){return t.name===v.url}))[0],d=Math.max(0,s-c),l=Math.max(d,f?(f.requestStart||f.startTime)-c:0),m=Math.max(l-u,f?f.responseEnd-c:0,0),p=Math.max(m-u,v?v.startTime-c:0,0);a={element:r(v.element),timeToFirstByte:d,resourceLoadDelay:l-d,resourceLoadDuration:m-l,elementRenderDelay:p-m,navigationEntry:o,lcpEntry:v},v.url&&(a.url=v.url),f&&(a.lcpResourceEntry=f)}}return Object.assign(t,{attribution:a})}(n);t(i)}),n)},ft=[800,1800],dt=function(t){document.prerendering?C((function(){return dt(t)})):"complete"!==document.readyState?addEventListener("load",(function(){return dt(t)}),!0):setTimeout(t,0)},lt=function(t,n){!function(t,n){var i=l(n=n||{}),a=d("TTFB"),r=o(t,a,ft,n.reportAllChanges);dt((function(){var c=e();if(c){var s=c.responseStart;a.value=Math.max(s-f(),0),a.entries=[c],r(!0),v((function(){a=d("TTFB",0,"back-forward-cache",a.navigationId),(r=o(t,a,ft,n.reportAllChanges))(!0)})),i&&m("soft-navigation",(function(e){e.forEach((function(e){e.navigationId&&((a=d("TTFB",0,"soft-navigation",e.navigationId)).entries=[e],(r=o(t,a,ft,n.reportAllChanges))(!0))}))}),n)}}))}((function(n){var e=function(t){var n={waitingDuration:0,cacheDuration:0,dnsDuration:0,connectionDuration:0,requestDuration:0};if(t.entries.length){var e=t.entries[0],i=e.activationStart||0,a=Math.max((e.workerStart||e.fetchStart)-i,0),r=Math.max(e.domainLookupStart-i||0,0),o=Math.max(e.connectStart-i||0,0),c=Math.max(e.connectEnd-i||0,0);n={waitingDuration:a,cacheDuration:r-a,dnsDuration:o-r,connectionDuration:c-o,requestDuration:t.value-c,navigationEntry:e}}return Object.assign(t,{attribution:n})}(n);t(e)}),n)},gt={passive:!0,capture:!0},mt=new Date,pt=function(t,n){it||(it=n,at=t,rt=new Date,It(removeEventListener),ht())},ht=function(){if(at>=0&&at1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,n){var e=function(){pt(t,n),a()},i=function(){a()},a=function(){removeEventListener("pointerup",e,gt),removeEventListener("pointercancel",i,gt)};addEventListener("pointerup",e,gt),addEventListener("pointercancel",i,gt)}(n,t):pt(n,t)}},It=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return t(n,Tt,gt)}))},yt=[100,300],Et=function(t,n){var i,a=l(n=n||{}),r=(null===(i=e())||void 0===i?void 0:i.navigationId)||"1";C((function(){var e,i=b(),c=d("FID"),s=function(s){s.forEach((function(s){var v,f;a?s.navigationId&&s.navigationId!==c.navigationId&&(v="soft-navigation",f=s.navigationId,i=b(!0),c=d("FID",0,v,f),e=o(t,c,yt,n.reportAllChanges)):u.disconnect(),s.startTime Only show overall status in badge (no animation of failing metrics) +
+
diff --git a/src/options/options.js b/src/options/options.js index 44f1c59..1360d6f 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -3,6 +3,7 @@ const optionsConsoleLoggingNode = document.getElementById('consoleLogging'); const optionsNoBadgeAnimation = document.getElementById('noBadgeAnimation'); const optionsUserTimingNode = document.getElementById('userTiming'); const optionsPreferPhoneFieldNode = document.getElementById('preferPhoneField'); +const optionsSoftNav = document.getElementById('reportSoftNavs'); const optionsSaveBtn = document.getElementById('save'); const optionsStatus = document.getElementById('status'); @@ -16,6 +17,7 @@ function saveOptions() { userTiming: optionsUserTimingNode.checked, preferPhoneField: optionsPreferPhoneFieldNode.checked, noBadgeAnimation: optionsNoBadgeAnimation.checked, + reportSoftNavs: optionsSoftNav.checked, }, () => { // Update status to let user know options were saved. optionsStatus.textContent = 'Options saved.'; @@ -36,12 +38,14 @@ function restoreOptions() { userTiming: false, preferPhoneField: false, noBadgeAnimation: false, - }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation}) => { + reportSoftNavs: false, + }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation, reportSoftNavs}) => { optionsOverlayNode.checked = enableOverlay; optionsConsoleLoggingNode.checked = debug; optionsUserTimingNode.checked = userTiming; optionsPreferPhoneFieldNode.checked = preferPhoneField; optionsNoBadgeAnimation.checked = noBadgeAnimation; + optionsSoftNav.checked = reportSoftNavs; }); } document.addEventListener('DOMContentLoaded', restoreOptions);