simdeck 0.1.4 → 0.1.5

package/client/dist/chrome-devtools-ui/panels/timeline/overlays/overlays.js

@@ -0,0 +1 @@
+import*as e from"../../../core/common/common.js";import*as t from"../../../core/i18n/i18n.js";import*as n from"../../../core/platform/platform.js";import*as s from"../../../models/trace/trace.js";import*as i from"../../../ui/visual_logging/visual_logging.js";import*as r from"../utils/utils.js";import*as o from"./components/components.js";const a={fieldMetricMarkerLocal:"{PH1} - Local",fieldMetricMarkerField:"{PH1} - Field ({PH2})",urlOption:"URL",originOption:"Origin"},l=t.i18n.registerUIStrings("panels/timeline/overlays/OverlaysImpl.ts",a),c=t.i18n.getLocalizedString.bind(void 0,l);function h(e){const t=[],i=[];switch(e.type){case"ENTRY_SELECTED":{const n=b(e.entry);t.push(n.startTime),i.push(n.endTime);break}case"ENTRY_OUTLINE":{const n=b(e.entry);t.push(n.startTime),i.push(n.endTime);break}case"TIME_RANGE":t.push(e.bounds.min),i.push(e.bounds.max);break;case"ENTRY_LABEL":{const n=b(e.entry);t.push(n.startTime),i.push(n.endTime);break}case"ENTRIES_LINK":{const n=b(e.entryFrom);if(t.push(n.startTime),e.entryTo){const t=b(e.entryTo);i.push(t.endTime)}else i.push(n.endTime);break}case"TIMESPAN_BREAKDOWN":if(e.entry){const n=b(e.entry);t.push(n.startTime),i.push(n.endTime)}for(const n of e.sections)t.push(n.bounds.min),i.push(n.bounds.max);break;case"TIMESTAMP_MARKER":t.push(e.timestamp);break;case"CANDY_STRIPED_TIME_RANGE":{const n=b(e.entry);t.push(n.startTime),i.push(n.endTime),t.push(e.bounds.min),i.push(e.bounds.max);break}case"TIMINGS_MARKER":{const n=b(e.entries[0]);t.push(n.startTime);break}default:n.TypeScriptUtilities.assertNever(e,`Unexpected overlay ${e}`)}const r=s.Types.Timing.Micro(Math.min(...t)),o=s.Types.Timing.Micro(Math.max(...i));return s.Helpers.Timing.traceWindowFromMicroSeconds(r,o)}function y(e){return s.Types.Events.isNetworkTrackEntry(e)?"network":"main"}function u(e){return d(e.type)}function d(e){return"TIMESTAMP_MARKER"===e||"ENTRY_SELECTED"===e}class m extends Event{overlay;action;static eventName="annotationoverlayactionsevent";constructor(e,t){super(m.eventName),this.overlay=e,this.action=t}}class v extends Event{isVisible;static eventName="consentdialogvisibilitychange";constructor(e){super(v.eventName,{bubbles:!0,composed:!0}),this.isVisible=e}}class E extends Event{overlay;static eventName="timerangemouseoverevent";constructor(e){super(E.eventName,{bubbles:!0}),this.overlay=e}}class p extends Event{static eventName="timerangemouseoutevent";constructor(){super(p.eventName,{bubbles:!0})}}class T extends Event{overlay;static eventName="entrylabelmouseclick";constructor(e){super(T.eventName,{composed:!0,bubbles:!0}),this.overlay=e}}class f extends Event{event;static eventName="eventreferenceclick";constructor(e){super(f.eventName,{bubbles:!0,composed:!0}),this.event=e}}let g=class extends EventTarget{#e=new Map;#t=new Map;#n=null;#s=null;#i;#r={trace:{visibleWindow:null},charts:{main:null,network:null}};#o;#a;#l;#c;constructor(t){super(),this.#a=t.container,this.#o=t.charts,this.#c=t.entryQueries,this.#i=null,this.#l=e.Settings.Settings.instance().moduleSetting("annotations-hidden"),this.#l.addChangeListener(this.update.bind(this)),t.flameChartsContainers.main.addEventListener("mousemove",(e=>this.#h.bind(this)(e,"main"))),t.flameChartsContainers.network.addEventListener("mousemove",(e=>this.#h.bind(this)(e,"network")))}toggleAllOverlaysDisplayed(e){this.#a.style.display=e?"block":"none"}#h(e,t){const n=e;if(this.#n=n.offsetX,this.#s=n.offsetY,"pending_to_event"!==this.#i?.state)return;const s=this.#r.charts.network?.heightPixels??0,i=this.#e.get(this.#i);if(i){const e=i.querySelector("devtools-entries-link-overlay"),r=n.offsetY+("main"===t?s:0);e.toEntryCoordinateAndDimensions={x:n.offsetX,y:r}}}add(e){if(this.#e.has(e))return e;if(u(e)){const t=this.#t.get(e.type);if(t)return this.updateExisting(t,e),t;this.#t.set(e.type,e)}return this.#e.set(e,null),e}updateExisting(e,t){if(this.#e.has(e))for(const[n,s]of Object.entries(t)){e[n]=s}else console.error("Trying to update an overlay that does not exist.")}enterLabelEditMode(e){const t=this.#e.get(e),n=t?.querySelector("devtools-entry-label-overlay");n&&n.setLabelEditabilityAndRemoveEmptyLabel(!0)}overlaysForEntry(e){const t=[];for(const[n]of this.#e)"entry"in n&&n.entry===e&&t.push(n);return t}removeOverlaysOfType(e){if(d(e)){const t=this.#t.get(e);return t?(this.remove(t),1):0}const t=Array.from(this.#e.keys()).filter((t=>t.type===e));for(const e of t)this.remove(e);return t.length}overlaysOfType(e){if(d(e)){const t=this.#t.get(e);return t?[t]:[]}const t=[];function n(t){return t.type===e}for(const[e]of this.#e)n(e)&&t.push(e);return t}allOverlays(){return[...this.#e.keys()]}remove(e){const t=this.#e.get(e);t&&this.#a&&this.#a.removeChild(t),this.#e.delete(e),u(e)&&this.#t.delete(e.type)}updateChartDimensions(e,t){this.#r.charts[e]=t}updateVisibleWindow(e){this.#r.trace.visibleWindow=e}reset(){this.#a&&(this.#a.innerHTML=""),this.#e.clear(),this.#r.trace.visibleWindow=null,this.#r.charts.main=null,this.#r.charts.network=null}async update(){const e=[],t=[];for(const[n,s]of this.#e){const i=s||this.#y(n);s||(this.#e.set(n,i),this.#a.appendChild(i)),this.#u(n,i),this.#d(n,i),this.#m(n,i),"TIME_RANGE"===n.type&&e.push(n),"TIMINGS_MARKER"===n.type&&t.push(n)}e.length>1&&this.#v(e)}#v(e){const t=e.toSorted(((e,t)=>e.bounds.min-t.bounds.min)),n=new Map;for(let e=0;e<t.length;e++){const i=t[e],r=[];for(let n=e+1;n<t.length;n++){const e=t[n];if(!s.Helpers.Timing.boundsIncludeTimeRange({bounds:i.bounds,timeRange:e.bounds}))break;r.push(e)}n.set(i,r)}for(const[e,t]of n){const n=this.#e.get(e);if(!n)continue;let s=1;n.getAttribute("class")?.includes("overlap-")&&(s=0),t.forEach((e=>{const t=this.#e.get(e);t?.classList.add("overlap-"+s++)}))}}#d(e,t){const i=this.#l.get();switch(e.type){case"ENTRY_SELECTED":{const n=this.entryIsVisibleOnChart(e.entry);this.#E(t,n),n&&this.#p(e.entry,t);break}case"ENTRY_OUTLINE":this.entryIsVisibleOnChart(e.entry)?(this.#E(t,!0),this.#p(e.entry,t)):this.#E(t,!1);break;case"TIME_RANGE":e.label.length&&this.#E(t,!i),this.#T(e,t);break;case"ENTRY_LABEL":{const n=this.entryIsVisibleOnChart(e.entry);if(this.#E(t,n&&!i),n){const n=this.#f(e,t),s=t.querySelector("devtools-entry-label-overlay");s&&n&&(s.entryLabelVisibleHeight=n)}break}case"ENTRIES_LINK":{const n=this.#g(e),s=null!==n&&!i;this.#E(t,s),s&&this.#b(e,t,n);break}case"TIMESPAN_BREAKDOWN":if(this.#O(e,t),e.entry){const{visibleWindow:n}=this.#r.trace,i=Boolean(n&&this.#C(e.entry)&&s.Helpers.Timing.boundsIncludeTimeRange({bounds:n,timeRange:e.sections[0].bounds}));this.#E(t,i)}break;case"TIMESTAMP_MARKER":{const{visibleWindow:n}=this.#r.trace,i=Boolean(n&&s.Helpers.Timing.timestampIsInBounds(n,e.timestamp));this.#E(t,i),i&&this.#x(e,t);break}case"CANDY_STRIPED_TIME_RANGE":{const{visibleWindow:n}=this.#r.trace,i=Boolean(n&&this.#C(e.entry)&&s.Helpers.Timing.boundsIncludeTimeRange({bounds:n,timeRange:e.bounds}));this.#E(t,i),i&&this.#M(e,t);break}case"TIMINGS_MARKER":{const{visibleWindow:n}=this.#r.trace,s=Boolean(n&&this.#R(e.entries[0]));this.#E(t,s),s&&this.#x(e,t);break}default:n.TypeScriptUtilities.assertNever(e,`Unknown overlay: ${JSON.stringify(e)}`)}}#x(e,t){let n;switch(e.type){case"TIMINGS_MARKER":{const t=s.Helpers.Timing.eventTimingsMicroSeconds(e.entries[0]);n=this.#k("main",t.startTime);break}case"TIMESTAMP_MARKER":n=this.#k("main",e.timestamp)}t.style.left=`${n}px`}#O(e,t){if(0===e.sections.length)return;const n=t.querySelector("devtools-timespan-breakdown-overlay"),s=n?.renderedSections()??[],i=this.#k("main",e.sections[0].bounds.min),r=this.#k("main",e.sections[e.sections.length-1].bounds.max);if(null===i||null===r)return;const o=r-i;if(t.style.left=`${i}px`,t.style.width=`${o}px`,0===s.length)return;let a=0;for(const t of e.sections){const e=this.#k("main",t.bounds.min),n=this.#k("main",t.bounds.max);if(null===e||null===n)return;const i=n-e,r=s[a];r.style.left=`${e}px`,r.style.width=`${i}px`,a++}if(e.entry&&("BELOW_EVENT"===e.renderLocation||"ABOVE_EVENT"===e.renderLocation)){const n=50;t.style.maxHeight=`${n}px`;const s=this.yPixelForEventOnChart(e.entry);if(null===s)return;const i=this.pixelHeightForEventOnChart(e.entry);if(null===i)return;if("BELOW_EVENT"===e.renderLocation){const e=s+i;t.style.top=`${e}px`}else{const e=s-7,i=Math.max(e,0),r=e-Math.min(n,i);t.style.top=`${r}px`}}}#b(e,t,n){const s=t.querySelector("devtools-entries-link-overlay");if(s){const i=this.#N(n.entryFrom),r=n.entryTo&&this.#N(n.entryTo);if(Boolean(i&&r))return void this.#E(t,!1);const o=Boolean(i||r);s.hideArrow=o;const{entryFrom:a,entryTo:l,entryFromIsSource:c,entryToIsSource:h}=n,y=s.entryFromWrapper();if(!y)return;const u=this.entryIsVisibleOnChart(a)&&!i,d=!!l&&(this.entryIsVisibleOnChart(l)&&!r);let v=0,E=this.#I(a);if(u){const e=this.#p(n.entryFrom,y);if(!e)return;{const t=e?.entryHeight,n=e?.entryWidth,i=e?.cutOffHeight;v=e?.x,E=e?.y,s.fromEntryCoordinateAndDimensions={x:v,y:E,length:n,height:t-i}}}u||"creation_not_started"!==e.state||this.dispatchEvent(new m(e,"Remove"));const p=s.entryToWrapper();if(l&&p){let e=0,t=this.#I(l);if(d){const n=this.#p(l,p);if(!n)return;{const i=n?.entryHeight,r=n?.entryWidth,o=n?.cutOffHeight;e=n?.x,t=n?.y,s.toEntryCoordinateAndDimensions={x:e,y:t,length:r,height:i-o}}}}else this.#n&&this.#s&&(this.#i=e);s.fromEntryIsSource=c,s.toEntryIsSource=h,s.entriesVisibility={fromEntryVisibility:u,toEntryVisibility:d}}}#I(e){const t=y(e),n=this.yPixelForEventOnChart(e);if(null===n)return 0;if("main"===t){if(!this.#r.charts.main?.heightPixels)return 0;if(n-this.networkChartOffsetHeight()<0)return this.networkChartOffsetHeight()}if("network"===t){if(!this.#r.charts.network)return 0;if(n>this.#r.charts.network.heightPixels)return this.#r.charts.network.heightPixels}return n}#T(e,t){const n=this.#k("main",e.bounds.min),s=this.#k("main",e.bounds.max);if(null===n||null===s)return;const i=s-n;t.style.left=`${n}px`,t.style.width=`${i}px`}#f(e,t){const n=t.querySelector("devtools-entry-label-overlay");if(!n)return null;const s=n.entryHighlightWrapper();if(!s)return null;const{entryHeight:i,entryWidth:r,cutOffHeight:a=0,x:l,y:c}=this.#p(e.entry,s)||{};return i&&r&&null!==l&&c?(t.style.top=c-o.EntryLabelOverlay.EntryLabelOverlay.LABEL_AND_CONNECTOR_HEIGHT+"px",t.style.left=`${l}px`,t.style.width=`${r}px`,i-a):null}#M(e,t){const n=y(e.entry),s=this.#k(n,e.bounds.min),i=this.#k(n,e.bounds.max);if(null===s||null===i)return;const r=i-s,o=Math.max(2,r);t.style.width=`${o}px`,t.style.left=`${s}px`;let a=this.yPixelForEventOnChart(e.entry);if(null===a)return;const l=this.pixelHeightForEventOnChart(e.entry)??0;let c=l;if(null!==c){if("main"===n){const e=this.networkChartOffsetHeight(),n=a<e;c=n?Math.abs(a+c-e):c,t.classList.toggle("cut-off-top",n),n&&(a=a+l-c)}else{const e=this.#r.charts.network?.heightPixels??0,n=a+l>e,s=a>e;t.classList.toggle("cut-off-top",s),t.classList.toggle("cut-off-bottom",n),n&&(c=e-a)}t.style.height=`${c}px`,t.style.top=`${a}px`}}#p(e,t){const n=y(e);let s=this.xPixelForEventStartOnChart(e),i=this.yPixelForEventOnChart(e);const r="main"===n?this.#r.charts.main?.widthPixels:this.#r.charts.network?.widthPixels;if(null===s||null===i||!r)return null;const{endTime:o}=b(e),a=this.#k(n,o);if(null===a)return null;const l=this.pixelHeightForEventOnChart(e)??0;let c=l;if(null===c)return null;let h=a-s;const u="main"===n?this.#o.mainProvider:this.#o.networkProvider,d="main"===n?this.#o.mainChart:this.#o.networkChart,m=u.indexForEvent?.(e),v=d.getCustomDrawnPositionForEntryIndex(m??-1);v&&(s=v.x,h=v.width);const E=s+h>r?s+h-r:null,p=s<0?Math.abs(s):null;t.classList.toggle("cut-off-right",null!==E),E&&(h-=E),p&&(s=0,h-=p);const T=Math.max(2,h);if(t.style.width=`${T}px`,"main"===n){const e=this.networkChartOffsetHeight(),n=i<e;c=n?Math.abs(i+c-e):c,t.classList.toggle("cut-off-top",n),n&&(i=i+l-c)}else{const e=this.#r.charts.network?.heightPixels??0,n=i+l>e;t.classList.toggle("cut-off-bottom",n),n&&(c=e-i)}return t.style.height=`${c}px`,t.style.top=`${i}px`,t.style.left=`${s}px`,{entryHeight:l,entryWidth:T,cutOffHeight:l-c,x:s,y:i}}#g(e){if(!e.entryTo)return{entryFrom:e.entryFrom,entryTo:e.entryTo,entryFromIsSource:!0,entryToIsSource:!0};let t=e.entryFrom,n=e.entryTo??null;return this.#c.isEntryCollapsedByUser(e.entryFrom)&&(t=this.#c.firstVisibleParentForEntry(e.entryFrom)),e.entryTo&&this.#c.isEntryCollapsedByUser(e.entryTo)&&(n=this.#c.firstVisibleParentForEntry(e.entryTo)),null===t||null===n?null:{entryFrom:t,entryFromIsSource:t===e.entryFrom,entryTo:n,entryToIsSource:n===e.entryTo}}#y(e){const t=document.createElement("div");t.classList.add("overlay-item",`overlay-type-${e.type}`);const n=O(e);switch(n&&t.setAttribute("jslog",`${i.item(n)}`),e.type){case"ENTRY_LABEL":{const n=s.Types.Events.isLegacyTimelineFrame(e.entry),i=new o.EntryLabelOverlay.EntryLabelOverlay(e.label,n),a=this.#c.parsedTrace(),l=a?r.AICallTree.AICallTree.fromEvent(e.entry,a):null;return i.callTree=l,i.addEventListener(o.EntryLabelOverlay.LabelAnnotationsConsentDialogVisiblityChange.eventName,(e=>{const t=e;this.dispatchEvent(new v(t.isVisible))})),i.addEventListener(o.EntryLabelOverlay.EmptyEntryLabelRemoveEvent.eventName,(()=>{this.dispatchEvent(new m(e,"Remove"))})),i.addEventListener(o.EntryLabelOverlay.EntryLabelChangeEvent.eventName,(t=>{const n=t.newLabel;e.label=n,this.dispatchEvent(new m(e,"Update"))})),t.appendChild(i),t.addEventListener("click",(t=>{t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new T(e))})),t}case"ENTRIES_LINK":{const n=this.#g(e);if(null===n)return t;const s=this.xPixelForEventEndOnChart(n.entryFrom)??0,i=this.xPixelForEventEndOnChart(n.entryFrom)??0,r=this.yPixelForEventOnChart(n.entryFrom)??0,a=s-i,l=this.pixelHeightForEventOnChart(n.entryFrom)??0,c=new o.EntriesLinkOverlay.EntriesLinkOverlay({x:s,y:r,width:a,height:l},e.state);return c.addEventListener(o.EntriesLinkOverlay.EntryLinkStartCreating.eventName,(()=>{e.state="pending_to_event",this.dispatchEvent(new m(e,"Update"))})),t.appendChild(c),t}case"ENTRY_OUTLINE":return t.classList.add(`outline-reason-${e.outlineReason}`),t;case"TIME_RANGE":{const n=new o.TimeRangeOverlay.TimeRangeOverlay(e.label);return n.duration=e.showDuration?e.bounds.range:null,n.canvasRect=this.#o.mainChart.canvasBoundingClientRect(),n.addEventListener(o.TimeRangeOverlay.TimeRangeLabelChangeEvent.eventName,(t=>{const n=t.newLabel;e.label=n,this.dispatchEvent(new m(e,"Update"))})),n.addEventListener(o.TimeRangeOverlay.TimeRangeRemoveEvent.eventName,(()=>{this.dispatchEvent(new m(e,"Remove"))})),n.addEventListener("mouseover",(()=>{this.dispatchEvent(new E(e))})),n.addEventListener("mouseout",(()=>{this.dispatchEvent(new p)})),t.appendChild(n),t}case"TIMESPAN_BREAKDOWN":{const n=new o.TimespanBreakdownOverlay.TimespanBreakdownOverlay;return n.sections=e.sections,n.canvasRect=this.#o.mainChart.canvasBoundingClientRect(),n.isBelowEntry="BELOW_EVENT"===e.renderLocation,t.appendChild(n),t}case"TIMINGS_MARKER":{const{color:n}=r.EntryStyles.markerDetailsForEvent(e.entries[0]),s=this.#L(e);return t.appendChild(s),t.style.backgroundColor=n,t}default:return t}}#S(e){this.dispatchEvent(new f(e))}#w(e,n,s){const i=document.createElement("div"),r=i.createChild("div","overlay-popover");if(r.createChild("span","overlay-popover-time").textContent=t.TimeUtilities.formatMicroSecondsTime(e),r.createChild("span","overlay-popover-title").textContent=s?c(a.fieldMetricMarkerLocal,{PH1:n}):n,s){const e=i.createChild("div","overlay-popover");e.createChild("span","overlay-popover-time").textContent=t.TimeUtilities.formatMicroSecondsTime(s.value);let r=s.pageScope;"url"===s.pageScope?r=c(a.urlOption):"origin"===s.pageScope&&(r=c(a.originOption)),e.createChild("span","overlay-popover-title").textContent=c(a.fieldMetricMarkerField,{PH1:n,PH2:r})}return i}#P(e,t,n,s,i,r){const o=s.entryToFieldResult.get(t),a=this.#w(s.adjustedTimestamp,n,o);this.#n=e.offsetX+(i.offsetLeft||0)+(r.offsetLeft||0),this.#s=e.offsetY+i.offsetTop||0,this.#o.mainChart.updateMouseOffset(this.#n,this.#s),this.#o.mainChart.updatePopoverContents(a)}#_(){this.#n=-1,this.#s=-1,this.#o.mainChart.updateMouseOffset(this.#n,this.#s),this.#o.mainChart.hideHighlight()}#L(e){const t=document.createElement("div");t.classList.add("markers");for(const n of e.entries){const{color:s,title:i}=r.EntryStyles.markerDetailsForEvent(n),o=document.createElement("div");o.classList.add("marker-title"),o.textContent=i,o.style.backgroundColor=s,t.appendChild(o),o.addEventListener("click",(()=>this.#S(n))),o.addEventListener("mousemove",(s=>this.#P(s,n,i,e,t,o))),o.addEventListener("mouseout",(()=>this.#_()))}return t}#u(e,t){switch(e.type){case"ENTRY_SELECTED":case"TIMESTAMP_MARKER":case"CANDY_STRIPED_TIME_RANGE":case"TIMINGS_MARKER":break;case"TIME_RANGE":{const n=t.querySelector("devtools-time-range-overlay");n&&(n.duration=e.showDuration?e.bounds.range:null,n.canvasRect=this.#o.mainChart.canvasBoundingClientRect());break}case"ENTRY_LABEL":case"ENTRY_OUTLINE":case"ENTRIES_LINK":{const e=t.querySelector("devtools-entries-link-overlay");e&&(e.canvasRect=this.#o.mainChart.canvasBoundingClientRect());break}case"TIMESPAN_BREAKDOWN":{const n=t.querySelector("devtools-timespan-breakdown-overlay");n&&(n.sections=e.sections,n.canvasRect=this.#o.mainChart.canvasBoundingClientRect());break}default:n.TypeScriptUtilities.assertNever(e,`Unexpected overlay ${e}`)}}#m(e,t){switch(e.type){case"ENTRY_SELECTED":case"ENTRY_LABEL":case"ENTRY_OUTLINE":case"ENTRIES_LINK":case"TIMESTAMP_MARKER":case"CANDY_STRIPED_TIME_RANGE":case"TIMINGS_MARKER":break;case"TIME_RANGE":{const e=t.querySelector("devtools-time-range-overlay");e?.updateLabelPositioning();break}case"TIMESPAN_BREAKDOWN":{const e=t.querySelector("devtools-timespan-breakdown-overlay");e?.checkSectionLabelPositioning();break}default:n.TypeScriptUtilities.assertNever(e,`Unexpected overlay ${e}`)}}entryIsVisibleOnChart(e){const t=this.#C(e),n=this.#R(e);return t&&n}#R(e){if(null===this.#r.trace.visibleWindow)return!1;const{startTime:t,endTime:n}=b(e),i=s.Helpers.Timing.traceWindowFromMicroSeconds(t,n);return s.Helpers.Timing.boundsIncludeTimeRange({bounds:this.#r.trace.visibleWindow,timeRange:i})}#N(e){const t="main"===y(e)?this.#o.mainProvider:this.#o.networkProvider,n=t.indexForEvent?.(e)??null;if(null===n)return!1;const s=t.groupForEvent?.(n)??null;return!!s&&!1===Boolean(s.expanded)}#C(e){const t=y(e),n=this.yPixelForEventOnChart(e);if(null===n)return!1;const s=this.pixelHeightForEventOnChart(e);if(!s)return!1;if("main"===t){if(!this.#r.charts.main?.heightPixels)return!1;const e=n-this.networkChartOffsetHeight();if(e+s<0)return!1;if(e>this.#r.charts.main.heightPixels)return!1}if("network"===t){if(!this.#r.charts.network)return!1;if(n<=-14)return!1;if(n>this.#r.charts.network.heightPixels)return!1}return!0}xPixelForEventStartOnChart(e){const t=y(e),{startTime:n}=b(e);return this.#k(t,n)}xPixelForEventEndOnChart(e){const t=y(e),{endTime:n}=b(e);return this.#k(t,n)}#k(e,t){if(null===this.#r.trace.visibleWindow)return console.error("Cannot calculate xPixel without visible trace window."),null;const n=this.#r.charts[e]?.widthPixels??null;if(null===n)return console.error(`Cannot calculate xPixel without ${e} dimensions.`),null;const s=t-this.#r.trace.visibleWindow.min,i=this.#r.trace.visibleWindow.range;return Math.floor(s/i*n)}yPixelForEventOnChart(e){const t=y(e),n="main"===t?this.#o.mainChart:this.#o.networkChart,s="main"===t?this.#o.mainProvider:this.#o.networkProvider,i=s.indexForEvent?.(e);if("number"!=typeof i)return null;const r=s.timelineData();if(null===r)return null;const o=r.entryLevels.at(i);if(void 0===o)return null;if(!n.levelIsVisible(o))return null;let a=n.levelToOffset(o)-(this.#r.charts[t]?.scrollOffsetPixels??0);return"main"===t&&(a+=this.networkChartOffsetHeight()),a}pixelHeightForEventOnChart(e){const t=y(e),n="main"===t?this.#o.mainChart:this.#o.networkChart,s="main"===t?this.#o.mainProvider:this.#o.networkProvider,i=s.indexForEvent?.(e);if("number"!=typeof i)return null;const r=s.timelineData();if(null===r)return null;const o=r.entryLevels.at(i);return void 0===o?null:n.levelHeight(o)}networkChartOffsetHeight(){return null===this.#r.charts.network||0===this.#r.charts.network.heightPixels?0:this.#r.charts.network.allGroupsCollapsed?this.#r.charts.network.heightPixels:this.#r.charts.network.heightPixels+8}#E(e,t){e.style.display=t?"block":"none"}};function b(e){return s.Types.Events.isLegacyTimelineFrame(e)?{startTime:e.startTime,endTime:e.endTime,duration:e.duration}:s.Helpers.Timing.eventTimingsMicroSeconds(e)}function O(e){switch(e.type){case"ENTRY_SELECTED":return null;case"ENTRY_OUTLINE":return`timeline.overlays.entry-outline-${n.StringUtilities.toKebabCase(e.outlineReason)}`;case"ENTRY_LABEL":return"timeline.overlays.entry-label";case"ENTRIES_LINK":return"connected"!==e.state?null:"timeline.overlays.entries-link";case"TIME_RANGE":return"timeline.overlays.time-range";case"TIMESPAN_BREAKDOWN":return"timeline.overlays.timespan-breakdown";case"TIMESTAMP_MARKER":return"timeline.overlays.cursor-timestamp-marker";case"CANDY_STRIPED_TIME_RANGE":return"timeline.overlays.candy-striped-time-range";case"TIMINGS_MARKER":return"timeline.overlays.timings-marker";default:n.assertNever(e,"Unknown overlay type")}}var C=Object.freeze({__proto__:null,AnnotationOverlayActionEvent:m,ConsentDialogVisibilityChange:v,EntryLabelMouseClick:T,EventReferenceClick:f,Overlays:g,TimeRangeMouseOutEvent:p,TimeRangeMouseOverEvent:E,chartForEntry:y,entriesForOverlay:function(e){const t=[];switch(e.type){case"ENTRY_SELECTED":case"ENTRY_OUTLINE":case"ENTRY_LABEL":case"CANDY_STRIPED_TIME_RANGE":t.push(e.entry);break;case"TIME_RANGE":case"TIMESTAMP_MARKER":break;case"ENTRIES_LINK":t.push(e.entryFrom),e.entryTo&&t.push(e.entryTo);break;case"TIMESPAN_BREAKDOWN":e.entry&&t.push(e.entry);break;case"TIMINGS_MARKER":t.push(...e.entries);break;default:n.assertNever(e,`Unknown overlay type ${JSON.stringify(e)}`)}return t},jsLogContext:O,overlayIsSingleton:u,overlayTypeIsSingleton:d,timingsForOverlayEntry:b,traceWindowContainingOverlays:function(e){let t=s.Types.Timing.Micro(Number.POSITIVE_INFINITY),n=s.Types.Timing.Micro(Number.NEGATIVE_INFINITY);if(0===e.length)return null;for(const s of e){const e=h(s);e.min<t&&(t=e.min),e.max>n&&(n=e.max)}return s.Helpers.Timing.traceWindowFromMicroSeconds(t,n)}});export{C as Overlays};

package/client/dist/chrome-devtools-ui/panels/timeline/timeline-meta.js

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as i from"../../core/i18n/i18n.js";import"../../core/root/root.js";import*as t from"../../core/sdk/sdk.js";import*as n from"../../ui/legacy/legacy.js";const o={performance:"Performance",showPerformance:"Show Performance",record:"Record",stop:"Stop",recordAndReload:"Record and reload",saveProfile:"Save profile…",loadProfile:"Load profile…",previousFrame:"Previous frame",nextFrame:"Next frame",showRecentTimelineSessions:"Show recent timeline sessions",previousRecording:"Previous recording",nextRecording:"Next recording",hideChromeFrameInLayersView:"Hide `chrome` frame in Layers view"},a=i.i18n.registerUIStrings("panels/timeline/timeline-meta.ts",o),r=i.i18n.getLazilyComputedLocalizedString.bind(void 0,a);let l;async function s(){return l||(l=await import("./timeline.js")),l}function c(e){return void 0===l?[]:e(l)}n.ViewManager.registerViewExtension({location:"panel",id:"timeline",title:r(o.performance),commandPrompt:r(o.showPerformance),order:50,loadView:async()=>(await s()).TimelinePanel.TimelinePanel.instance()}),n.ActionRegistration.registerActionExtension({actionId:"timeline.toggle-recording",category:"PERFORMANCE",iconClass:"record-start",toggleable:!0,toggledIconClass:"record-stop",toggleWithRedColor:!0,contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),options:[{value:!0,title:r(o.record)},{value:!1,title:r(o.stop)}],bindings:[{platform:"windows,linux",shortcut:"Ctrl+E"},{platform:"mac",shortcut:"Meta+E"}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.record-reload",iconClass:"refresh",contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),category:"PERFORMANCE",title:r(o.recordAndReload),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),bindings:[{platform:"windows,linux",shortcut:"Ctrl+Shift+E"},{platform:"mac",shortcut:"Meta+Shift+E"}],experiment:"!react-native-specific-ui"}),n.ActionRegistration.registerActionExtension({category:"PERFORMANCE",actionId:"timeline.save-to-file",contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),title:r(o.saveProfile),bindings:[{platform:"windows,linux",shortcut:"Ctrl+S"},{platform:"mac",shortcut:"Meta+S"}]}),n.ActionRegistration.registerActionExtension({category:"PERFORMANCE",actionId:"timeline.load-from-file",contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),title:r(o.loadProfile),bindings:[{platform:"windows,linux",shortcut:"Ctrl+O"},{platform:"mac",shortcut:"Meta+O"}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.jump-to-previous-frame",category:"PERFORMANCE",title:r(o.previousFrame),contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),bindings:[{shortcut:"["}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.jump-to-next-frame",category:"PERFORMANCE",title:r(o.nextFrame),contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),bindings:[{shortcut:"]"}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.show-history",loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),category:"PERFORMANCE",title:r(o.showRecentTimelineSessions),contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),bindings:[{platform:"windows,linux",shortcut:"Ctrl+H"},{platform:"mac",shortcut:"Meta+Y"}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.previous-recording",category:"PERFORMANCE",loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),title:r(o.previousRecording),contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),bindings:[{platform:"windows,linux",shortcut:"Alt+Left"},{platform:"mac",shortcut:"Meta+Left"}]}),n.ActionRegistration.registerActionExtension({actionId:"timeline.next-recording",category:"PERFORMANCE",loadActionDelegate:async()=>new((await s()).TimelinePanel.ActionDelegate),title:r(o.nextRecording),contextTypes:()=>c((e=>[e.TimelinePanel.TimelinePanel])),bindings:[{platform:"windows,linux",shortcut:"Alt+Right"},{platform:"mac",shortcut:"Meta+Right"}]}),e.Settings.registerSettingExtension({category:"PERFORMANCE",storageType:"Synced",title:r(o.hideChromeFrameInLayersView),settingName:"frame-viewer-hide-chrome-window",settingType:"boolean",defaultValue:!1}),e.Settings.registerSettingExtension({category:"PERFORMANCE",storageType:"Synced",settingName:"annotations-hidden",settingType:"boolean",defaultValue:!1}),e.Linkifier.registerLinkifier({contextTypes:()=>c((e=>[e.CLSLinkifier.CLSRect])),loadLinkifier:async()=>(await s()).CLSLinkifier.Linkifier.instance()}),n.ContextMenu.registerItem({location:"timelineMenu/open",actionId:"timeline.load-from-file",order:10}),n.ContextMenu.registerItem({location:"timelineMenu/open",actionId:"timeline.save-to-file",order:15}),e.Revealer.registerRevealer({contextTypes:()=>[t.TraceObject.TraceObject],destination:e.Revealer.RevealerDestination.TIMELINE_PANEL,loadRevealer:async()=>new((await s()).TimelinePanel.TraceRevealer)}),e.Revealer.registerRevealer({contextTypes:()=>[t.TraceObject.RevealableEvent],destination:e.Revealer.RevealerDestination.TIMELINE_PANEL,loadRevealer:async()=>new((await s()).TimelinePanel.EventRevealer)});