js.foresight-devtools 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +169 -169
- package/dist/index.d.mts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.js +59 -67
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +57 -65
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -6
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e,t)=>{for(var o=t>1?void 0:t?Ie(s,e):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(o=(t?r(s,e,o):r(o))||o);return t&&o&&$e(s,e,o),o};import{LitElement as Si,css as Ti,html as Oe}from"lit";import{customElement as Mi,state as _i}from"lit/decorators.js";import{LitElement as ii,css as oi,html as ni}from"lit";import{customElement as si,state as W}from"lit/decorators.js";import{classMap as Q}from"lit/directives/class-map.js";import{css as dt,html as
|
|
1
|
+
var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e,t)=>{for(var o=t>1?void 0:t?Ie(s,e):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(o=(t?r(s,e,o):r(o))||o);return t&&o&&$e(s,e,o),o};import{LitElement as Si,css as Ti,html as Oe}from"lit";import{customElement as Mi,state as _i}from"lit/decorators.js";import{LitElement as ii,css as oi,html as ni}from"lit";import{customElement as si,state as W}from"lit/decorators.js";import{classMap as Q}from"lit/directives/class-map.js";import{css as dt,html as fe,LitElement as ct}from"lit";import{customElement as pt,state as f}from"lit/decorators.js";import{map as gt}from"lit/directives/map.js";import{LitElement as Pe,html as Ue,css as Ne}from"lit";import{customElement as je}from"lit/decorators.js";var j=class extends Pe{render(){return Ue`
|
|
2
2
|
<div class="tab-bar-elements">
|
|
3
3
|
<div class="tab-bar-info">
|
|
4
4
|
<div class="stats-chips">
|
|
@@ -53,11 +53,11 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
53
53
|
z-index: 5;
|
|
54
54
|
min-height: 36px;
|
|
55
55
|
}
|
|
56
|
-
`],j=i([je("tab-header")],j);import{LitElement as
|
|
56
|
+
`],j=i([je("tab-header")],j);import{LitElement as Ve,html as q,css as Fe}from"lit";import{customElement as ze,property as ie}from"lit/decorators.js";var T=class extends Ve{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return q`
|
|
57
57
|
<div class="content-container">
|
|
58
|
-
${this.hasContent?
|
|
58
|
+
${this.hasContent?q`<slot></slot>`:q`<div class="no-content-message">${this.noContentMessage}</div>`}
|
|
59
59
|
</div>
|
|
60
|
-
`}};T.styles=[
|
|
60
|
+
`}};T.styles=[Fe`
|
|
61
61
|
:host {
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
}
|
|
@@ -171,7 +171,9 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
171
171
|
stroke: white;
|
|
172
172
|
fill: none;
|
|
173
173
|
stroke-width: 2;
|
|
174
|
-
transition:
|
|
174
|
+
transition:
|
|
175
|
+
transform 0.2s ease,
|
|
176
|
+
stroke 0.2s;
|
|
175
177
|
}
|
|
176
178
|
|
|
177
179
|
.trigger-button:hover {
|
|
@@ -248,11 +250,11 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
248
250
|
color: #b0c4de;
|
|
249
251
|
font-weight: bold;
|
|
250
252
|
}
|
|
251
|
-
`],i([Be()],d.prototype,"isDropdownOpen",2),i([He({type:Array})],d.prototype,"dropdownOptions",2);var M=d;var O=class extends M{constructor(){super(...arguments);this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:Ge``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:"Change selection"}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:"No selection"}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};i([ne({type:String})],O.prototype,"selectedOptionValue",2),i([ne({type:Function})],O.prototype,"onSelectionChange",2),O=i([We("single-select-dropdown")],O);import{LitElement as Ye,html as
|
|
253
|
+
`],i([Be()],d.prototype,"isDropdownOpen",2),i([He({type:Array})],d.prototype,"dropdownOptions",2);var M=d;var O=class extends M{constructor(){super(...arguments);this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:Ge``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:"Change selection"}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:"No selection"}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};i([ne({type:String})],O.prototype,"selectedOptionValue",2),i([ne({type:Function})],O.prototype,"onSelectionChange",2),O=i([We("single-select-dropdown")],O);import{LitElement as Ye,html as Ke,css as qe}from"lit";import{customElement as Je,property as Xe}from"lit/decorators.js";var $=class extends Ye{constructor(){super(...arguments);this.title=""}render(){return Ke`
|
|
252
254
|
<span class="chip" title="${this.title}">
|
|
253
255
|
<slot></slot>
|
|
254
256
|
</span>
|
|
255
|
-
`}};$.styles=[
|
|
257
|
+
`}};$.styles=[qe`
|
|
256
258
|
:host {
|
|
257
259
|
display: inline-block;
|
|
258
260
|
}
|
|
@@ -272,7 +274,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
272
274
|
line-height: 1.2;
|
|
273
275
|
transition: all 0.2s ease;
|
|
274
276
|
}
|
|
275
|
-
`],i([Xe({type:String})],$.prototype,"title",2),$=i([Je("chip-element")],$);import{LitElement as st,html as at,css as rt}from"lit";import{customElement as lt,property as A}from"lit/decorators.js";import{LitElement as it,html as
|
|
277
|
+
`],i([Xe({type:String})],$.prototype,"title",2),$=i([Je("chip-element")],$);import{LitElement as st,html as at,css as rt}from"lit";import{customElement as lt,property as A}from"lit/decorators.js";import{LitElement as it,html as ye,css as ot}from"lit";import{customElement as nt,property as V}from"lit/decorators.js";import{LitElement as Ze,html as Qe,css as et}from"lit";import{customElement as tt,property as be,state as ve}from"lit/decorators.js";import{html as g}from"lit";var se=g`
|
|
276
278
|
<svg
|
|
277
279
|
xmlns="http://www.w3.org/2000/svg"
|
|
278
280
|
width="16"
|
|
@@ -455,7 +457,9 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
455
457
|
stroke-linecap="round"
|
|
456
458
|
stroke-linejoin="round"
|
|
457
459
|
>
|
|
458
|
-
<path
|
|
460
|
+
<path
|
|
461
|
+
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
|
|
462
|
+
></path>
|
|
459
463
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
460
464
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
461
465
|
</svg>
|
|
@@ -477,7 +481,9 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
477
481
|
align-items: center;
|
|
478
482
|
justify-content: center;
|
|
479
483
|
opacity: 0.6;
|
|
480
|
-
transition:
|
|
484
|
+
transition:
|
|
485
|
+
opacity 0.2s ease,
|
|
486
|
+
background-color 0.2s ease;
|
|
481
487
|
}
|
|
482
488
|
|
|
483
489
|
:host([positioned]) .copy-button {
|
|
@@ -504,7 +510,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
504
510
|
.copy-button.copied svg {
|
|
505
511
|
stroke: #4caf50;
|
|
506
512
|
}
|
|
507
|
-
`,i([be({type:String})],v.prototype,"title",2),i([be({type:Function})],v.prototype,"onCopy",2),i([ve()],v.prototype,"isCopied",2),i([ve()],v.prototype,"copyTimeout",2),v=i([tt("copy-icon")],v);var u=class extends it{constructor(){super(...arguments);this.borderColor="#555";this.showCopyButton=!1;this.itemId="";this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let a=t.assignedNodes().map(r=>r.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(r){console.error("Failed to copy text: ",r)}}}render(){return this.style.setProperty("--border-color",this.borderColor),
|
|
513
|
+
`,i([be({type:String})],v.prototype,"title",2),i([be({type:Function})],v.prototype,"onCopy",2),i([ve()],v.prototype,"isCopied",2),i([ve()],v.prototype,"copyTimeout",2),v=i([tt("copy-icon")],v);var u=class extends it{constructor(){super(...arguments);this.borderColor="#555";this.showCopyButton=!1;this.itemId="";this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let a=t.assignedNodes().map(r=>r.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(r){console.error("Failed to copy text: ",r)}}}render(){return this.style.setProperty("--border-color",this.borderColor),ye`
|
|
508
514
|
<div class="item-entry ${this.isExpanded?"expanded":""}">
|
|
509
515
|
<div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
|
|
510
516
|
<div class="item-content">
|
|
@@ -516,7 +522,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
516
522
|
</svg>
|
|
517
523
|
</span>
|
|
518
524
|
</div>
|
|
519
|
-
${this.isExpanded?
|
|
525
|
+
${this.isExpanded?ye`
|
|
520
526
|
<div class="item-details">
|
|
521
527
|
<copy-icon
|
|
522
528
|
positioned
|
|
@@ -627,7 +633,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
627
633
|
display: block;
|
|
628
634
|
overflow-x: auto;
|
|
629
635
|
}
|
|
630
|
-
`],i([
|
|
636
|
+
`],i([V()],u.prototype,"borderColor",2),i([V()],u.prototype,"showCopyButton",2),i([V()],u.prototype,"itemId",2),i([V()],u.prototype,"isExpanded",2),i([V()],u.prototype,"onToggle",2),u=i([nt("expandable-item")],u);var y=class extends st{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.isIntersectingWithViewport?"#4caf50":"#666"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.isIntersectingWithViewport?"visible":"hidden"}formatElementDetails(){let e={tagName:this.elementData.element.tagName.toLowerCase(),isIntersecting:this.elementData.isIntersectingWithViewport,registerCount:this.elementData.registerCount,hitSlop:{top:this.elementData.elementBounds.hitSlop.top,right:this.elementData.elementBounds.hitSlop.right,bottom:this.elementData.elementBounds.hitSlop.bottom,left:this.elementData.elementBounds.hitSlop.left}};return JSON.stringify(e,null,2)}render(){return at`
|
|
631
637
|
<expandable-item
|
|
632
638
|
.borderColor=${this.getBorderColor()}
|
|
633
639
|
.showCopyButton=${!0}
|
|
@@ -643,7 +649,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
643
649
|
</div>
|
|
644
650
|
<div slot="details">${this.formatElementDetails()}</div>
|
|
645
651
|
</expandable-item>
|
|
646
|
-
`}};
|
|
652
|
+
`}};y.styles=[rt`
|
|
647
653
|
:host {
|
|
648
654
|
display: block;
|
|
649
655
|
}
|
|
@@ -691,8 +697,8 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
691
697
|
color: #fff;
|
|
692
698
|
font-weight: 600;
|
|
693
699
|
}
|
|
694
|
-
`],i([A()],
|
|
695
|
-
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),I.instance.addEventListener("elementRegistered",t=>{let o={...t.elementData,elementId:this.generateElementId()};this.elementListItems.set(t.elementData.element,o),this.updateVisibilityCounts()},{signal:e}),I.instance.addEventListener("elementDataUpdated",t=>{let o=this.elementListItems.get(t.elementData.element);if(o){let a={...t.elementData,elementId:o.elementId};this.elementListItems.set(t.elementData.element,a),this.updateVisibilityCounts(),this.requestUpdate()}},{signal:e}),I.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.updateVisibilityCounts(),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.requestUpdate(),this.activeCallbacks.delete(t.elementData.element)},{signal:e}),I.instance.addEventListener("callbackInvoked",t=>{this.activeCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),I.instance.addEventListener("callbackCompleted",t=>{this.handleCallbackCompleted(t.hitType),this.activeCallbacks.delete(t.elementData.element)},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){let e=new Map;I.instance.registeredElements.forEach((t,o)=>{e.set(o,{...t,elementId:this.generateElementId()})}),this.elementListItems=e}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,o)=>t.isIntersectingWithViewport!==o.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,o));default:return this.sortOrder,e}}render(){return
|
|
700
|
+
`],i([A()],y.prototype,"elementData",2),i([A()],y.prototype,"isActive",2),i([A()],y.prototype,"isExpanded",2),i([A()],y.prototype,"onToggle",2),y=i([lt("single-element")],y);import{ForesightManager as I}from"js.foresight";var c=class extends ct{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},total:0};this.visibleElementsCount=0;this.totalElementsCount=0;this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.activeCallbacks=new Set;this.expandedElementIds=new Set;this.elementIdCounter=0;this._abortController=null;this.handleSortChange=e=>{this.sortOrder=e};this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t};this.sortByDocumentPosition=(e,t)=>{let o=e.element.compareDocumentPosition(t.element);return o&Node.DOCUMENT_POSITION_FOLLOWING?-1:o&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:de},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:ce},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:pe}]}generateElementId(){return(++this.elementIdCounter).toString()}updateVisibilityCounts(){let e=0,t=0;this.elementListItems.forEach(o=>{t++,o.isIntersectingWithViewport&&e++}),this.visibleElementsCount=e,this.totalElementsCount=t,this.dispatchEvent(new CustomEvent("visibility-count-updated",{detail:{visibleCount:e,totalCount:t},bubbles:!0,composed:!0}))}_generateHitsChipTitle(e){let t=[];return t.push(`Total Hits: ${e.total}`),t.push(""),t.push(`Mouse: Trajectory: ${e.mouse.trajectory}, Hover: ${e.mouse.hover}`),t.push(`Scroll: Up: ${e.scroll.up}, Down: ${e.scroll.down}, Left: ${e.scroll.left}, Right: ${e.scroll.right}`),t.push(`Tab: Forwards: ${e.tab.forwards}, Reverse: ${e.tab.reverse}`),t.join(`
|
|
701
|
+
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),I.instance.addEventListener("elementRegistered",t=>{let o={...t.elementData,elementId:this.generateElementId()};this.elementListItems.set(t.elementData.element,o),this.updateVisibilityCounts()},{signal:e}),I.instance.addEventListener("elementDataUpdated",t=>{let o=this.elementListItems.get(t.elementData.element);if(o){let a={...t.elementData,elementId:o.elementId};this.elementListItems.set(t.elementData.element,a),this.updateVisibilityCounts(),this.requestUpdate()}},{signal:e}),I.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.updateVisibilityCounts(),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.requestUpdate(),this.activeCallbacks.delete(t.elementData.element)},{signal:e}),I.instance.addEventListener("callbackInvoked",t=>{this.activeCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),I.instance.addEventListener("callbackCompleted",t=>{this.handleCallbackCompleted(t.hitType),this.activeCallbacks.delete(t.elementData.element)},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){let e=new Map;I.instance.registeredElements.forEach((t,o)=>{e.set(o,{...t,elementId:this.generateElementId()})}),this.elementListItems=e}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,o)=>t.isIntersectingWithViewport!==o.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,o));default:return this.sortOrder,e}}render(){return fe`
|
|
696
702
|
<tab-header>
|
|
697
703
|
<div slot="chips" class="chips-container">
|
|
698
704
|
<chip-element title="Number of visible registered elements / total registered elements">
|
|
@@ -714,7 +720,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
714
720
|
.noContentMessage=${this.noContentMessage}
|
|
715
721
|
.hasContent=${!!this.elementListItems.size}
|
|
716
722
|
>
|
|
717
|
-
${gt(this.getSortedElements(),e=>
|
|
723
|
+
${gt(this.getSortedElements(),e=>fe`
|
|
718
724
|
<single-element
|
|
719
725
|
.elementData=${e}
|
|
720
726
|
.isActive=${this.activeCallbacks.has(e.element)}
|
|
@@ -778,7 +784,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
778
784
|
color: #fff;
|
|
779
785
|
font-weight: 600;
|
|
780
786
|
}
|
|
781
|
-
`,i([
|
|
787
|
+
`,i([f()],c.prototype,"hitCount",2),i([f()],c.prototype,"visibleElementsCount",2),i([f()],c.prototype,"totalElementsCount",2),i([f()],c.prototype,"sortDropdown",2),i([f()],c.prototype,"sortOrder",2),i([f()],c.prototype,"elementListItems",2),i([f()],c.prototype,"noContentMessage",2),i([f()],c.prototype,"activeCallbacks",2),i([f()],c.prototype,"expandedElementIds",2),c=i([pt("element-tab")],c);import{css as ht,html as xe,LitElement as mt}from"lit";import{customElement as ut,property as bt}from"lit/decorators.js";var P=class extends mt{constructor(){super(...arguments);this.activeTab="settings";this.tabs=["settings","elements","logs"]}_handleTabClick(e){this.dispatchEvent(new CustomEvent("tab-change",{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return xe`
|
|
782
788
|
<div class="tab-selector-wrapper">
|
|
783
789
|
${this.tabs.map(e=>xe`
|
|
784
790
|
<button
|
|
@@ -821,7 +827,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
821
827
|
color: #b0c4de;
|
|
822
828
|
border-bottom-color: #b0c4de;
|
|
823
829
|
}
|
|
824
|
-
`,i([bt({type:String})],P.prototype,"activeTab",2),P=i([ut("tab-selector")],P);import{ForesightManager as X}from"js.foresight";import{LitElement as St,css as Tt,html as H}from"lit";import{customElement as Mt,property as _t,state as U}from"lit/decorators.js";import{map as
|
|
830
|
+
`,i([bt({type:String})],P.prototype,"activeTab",2),P=i([ut("tab-selector")],P);import{ForesightManager as X}from"js.foresight";import{LitElement as St,css as Tt,html as H}from"lit";import{customElement as Mt,property as _t,state as U}from"lit/decorators.js";import{map as Dt}from"lit/directives/map.js";function we(n,s){try{switch(n.type){case"elementRegistered":return{type:"elementRegistered",name:n.elementData.name,id:n.elementData.element.id||"",registerCount:n.elementData.registerCount,hitslop:n.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),logId:s,summary:n.elementData.registerCount===1?n.elementData.name:`${n.elementData.name} - ${yt(n.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:n.elementData.name,id:n.elementData.element.id||"",registerCount:n.elementData.registerCount,unregisterReason:n.unregisterReason,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),logId:s,summary:`${n.elementData.name} - ${n.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:n.elementData.name,updatedProps:n.updatedProps||[],isIntersecting:n.elementData.isIntersectingWithViewport,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:`${n.elementData.name} - ${n.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:n.elementData.name,hitType:n.hitType,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),logId:s,summary:`${n.elementData.name} - ${n.hitType.kind}`};case"callbackCompleted":{let e=vt(n.elapsed);return{type:"callbackCompleted",...n.status==="error"?{status:"error",errorMessage:n.errorMessage}:{status:"success"},name:n.elementData.name,hitType:n.hitType,callbackRunTimeFormatted:e,callbackRunTimeRaw:n.elapsed,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),logId:s,summary:`${n.elementData.name} - ${e}`}}case"mouseTrajectoryUpdate":return{type:"mouseTrajectoryUpdate",currentPoint:n.trajectoryPositions?.currentPoint,predictedPoint:n.trajectoryPositions?.predictedPoint,positionCount:n.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:n.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:n.currentPoint,predictedPoint:n.predictedPoint,scrollDirection:n.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:n.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:n.managerData?.globalSettings||{},settingsChanged:n.updatedSettings,localizedTimestamp:new Date(n.timestamp).toLocaleTimeString(),logId:s,summary:n.updatedSettings.map(e=>e.setting).join(", ")};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(n),localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:""}}}catch(e){return{type:"serializationError",error:"Failed to serialize event data",localizedTimestamp:new Date().toLocaleTimeString(),errorMessage:e instanceof Error?e.message:String(e),logId:s,summary:""}}}function vt(n){return`${(n/1e3).toFixed(4)} s`}function yt(n){let s=["th","st","nd","rd"],e=n%100;return n+(s[(e-20)%10]||s[e]||s[0])}import{html as ke,css as ft}from"lit";import{customElement as xt,property as Ee}from"lit/decorators.js";var _=class extends M{constructor(){super(...arguments);this.selectedValues=[]}_handleOptionClick(e){let t=this.selectedValues.includes(e.value);t?this.selectedValues=this.selectedValues.filter(a=>a!==e.value):this.selectedValues=[...this.selectedValues,e.value];let o=!t;this.onSelectionChange?.(e.value,o)}_getTriggerIcon(){return m}_isOptionSelected(e){return this.selectedValues.includes(e.value)}_getTriggerTitle(){let e=this.selectedValues.length;return e===0?"No items selected":e===1?"1 item selected":`${e} items selected`}_getTriggerLabel(){return`Filter options: ${this.selectedValues.length} selected`}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ke`
|
|
825
831
|
<div class="dropdown-container">
|
|
826
832
|
<button
|
|
827
833
|
class="${e}"
|
|
@@ -861,7 +867,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
861
867
|
`)}
|
|
862
868
|
</div>
|
|
863
869
|
</div>
|
|
864
|
-
`}};_.styles=[...M.styles,
|
|
870
|
+
`}};_.styles=[...M.styles,ft`
|
|
865
871
|
.dropdown-menu button.active::after {
|
|
866
872
|
content: "✓";
|
|
867
873
|
position: absolute;
|
|
@@ -877,7 +883,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
877
883
|
color: #b0c4de;
|
|
878
884
|
margin-left: 2px;
|
|
879
885
|
}
|
|
880
|
-
`],i([Ee({type:Array})],_.prototype,"selectedValues",2),i([Ee()],_.prototype,"onSelectionChange",2),_=i([xt("multi-select-dropdown")],_);import{LitElement as wt,html as kt,css as Et}from"lit";import{customElement as Ct,property as J}from"lit/decorators.js";var E=class extends wt{constructor(e){super();this.isExpanded=!1;this.log=e}serializeLogDataWithoutSummary(e){let{summary:t,...o}=e;return JSON.stringify(o,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,
|
|
886
|
+
`],i([Ee({type:Array})],_.prototype,"selectedValues",2),i([Ee()],_.prototype,"onSelectionChange",2),_=i([xt("multi-select-dropdown")],_);import{LitElement as wt,html as kt,css as Et}from"lit";import{customElement as Ct,property as J}from"lit/decorators.js";var E=class extends wt{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,o=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=o?"#f44336":this.getLogTypeColor(t.type),r=o?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",r)}}serializeLogDataWithoutSummary(e){let{summary:t,...o}=e;return JSON.stringify(o,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,o=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return kt`
|
|
881
887
|
<expandable-item
|
|
882
888
|
.borderColor=${o}
|
|
883
889
|
.itemId=${e.logId}
|
|
@@ -896,6 +902,11 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
896
902
|
`}};E.styles=[Et`
|
|
897
903
|
:host {
|
|
898
904
|
display: block;
|
|
905
|
+
/*
|
|
906
|
+
* The background color is now driven by a CSS variable.
|
|
907
|
+
* This allows us to set it from TypeScript without touching the class.
|
|
908
|
+
*/
|
|
909
|
+
background-color: var(--log-background-color, transparent);
|
|
899
910
|
}
|
|
900
911
|
|
|
901
912
|
.log-time {
|
|
@@ -917,6 +928,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
917
928
|
font-weight: 600;
|
|
918
929
|
text-transform: uppercase;
|
|
919
930
|
letter-spacing: 0.02em;
|
|
931
|
+
/* The color is driven by a CSS variable set in updated() */
|
|
920
932
|
color: var(--log-color, #b0c4de);
|
|
921
933
|
min-width: 90px;
|
|
922
934
|
max-width: 90px;
|
|
@@ -946,36 +958,12 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
946
958
|
min-width: 0;
|
|
947
959
|
}
|
|
948
960
|
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
:host(.log-callbackCompleted) {
|
|
956
|
-
--log-color: #4caf50;
|
|
957
|
-
}
|
|
958
|
-
:host(.log-elementDataUpdated) {
|
|
959
|
-
--log-color: #ffc107;
|
|
960
|
-
}
|
|
961
|
-
:host(.log-elementUnregistered) {
|
|
962
|
-
--log-color: #ff9800;
|
|
963
|
-
}
|
|
964
|
-
:host(.log-managerSettingsChanged) {
|
|
965
|
-
--log-color: #f44336;
|
|
966
|
-
}
|
|
967
|
-
:host(.log-mouseTrajectoryUpdate) {
|
|
968
|
-
--log-color: #78909c;
|
|
969
|
-
}
|
|
970
|
-
:host(.log-scrollTrajectoryUpdate) {
|
|
971
|
-
--log-color: #607d8b;
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
:host(.log-callbackCompleted.error-status) {
|
|
975
|
-
--log-color: #f44336;
|
|
976
|
-
background-color: rgba(244, 67, 54, 0.1);
|
|
977
|
-
}
|
|
978
|
-
`],i([J()],E.prototype,"log",2),i([J()],E.prototype,"isExpanded",2),i([J()],E.prototype,"onToggle",2),E=i([Ct("single-log")],E);var h=class extends St{constructor(){super();this.logs=[];this.expandedLogIds=new Set;this.MAX_LOGS=100;this.logIdCounter=0;this.noContentMessage="No logs available";this._abortController=null;this._eventListeners=new Map;this.handleLogLocationChange=e=>{this.logLocation=e};this.handleFilterChange=(e,t)=>{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)};this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=l.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:se},{value:"console",label:"Console",title:"Log only to the console",icon:ae},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:le},{value:"none",label:"None",title:"Dont log anywhere",icon:re}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:m},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:m},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:m},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:m},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:m},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:m},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:m},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:m}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([e,t])=>t).map(([e,t])=>e)}shouldShowPerformanceWarning(){let e=this.logLocation==="console"||this.logLocation==="both",t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return Object.values(this.eventsEnabled).filter(Boolean).length===0?"Logging for all events is turned off":this.logLocation==="console"?"No logs to display. Logging location is set to console - check browser console for events.":this.logLocation==="none"?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=o=>{this.handleEvent(e,o)};this._eventListeners.set(e,t),X.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(X.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{X.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let o=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${o}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addEventLog(e){let t=we(e);if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}let o={...t,logId:(++this.logIdCounter).toString()};this.logs.unshift(o),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}render(){return H`
|
|
961
|
+
/*
|
|
962
|
+
* The :host(.error-status) selector is no longer needed,
|
|
963
|
+
* as all styling is now handled by setting CSS variables below.
|
|
964
|
+
* This makes the component's styling more self-contained.
|
|
965
|
+
*/
|
|
966
|
+
`],i([J({attribute:!1})],E.prototype,"log",2),i([J({type:Boolean})],E.prototype,"isExpanded",2),i([J()],E.prototype,"onToggle",2),E=i([Ct("single-log")],E);var h=class extends St{constructor(){super();this.logs=[];this.expandedLogIds=new Set;this.MAX_LOGS=100;this.logIdCounter=0;this.noContentMessage="No logs available";this._abortController=null;this._eventListeners=new Map;this.handleLogLocationChange=e=>{this.logLocation=e};this.handleFilterChange=(e,t)=>{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)};this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=l.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:se},{value:"console",label:"Console",title:"Log only to the console",icon:ae},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:le},{value:"none",label:"None",title:"Dont log anywhere",icon:re}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:m},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:m},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:m},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:m},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:m},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:m},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:m},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:m}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([e])=>e).map(([e])=>e)}shouldShowPerformanceWarning(){let e=this.logLocation==="console"||this.logLocation==="both",t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return Object.values(this.eventsEnabled).filter(Boolean).length===0?"Logging for all events is turned off":this.logLocation==="console"?"No logs to display. Logging location is set to console - check browser console for events.":this.logLocation==="none"?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=o=>{this.handleEvent(e,o)};this._eventListeners.set(e,t),X.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(X.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{X.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let o=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${o}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addEventLog(e){let t=we(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.logs.unshift(t),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}render(){return H`
|
|
979
967
|
<tab-header>
|
|
980
968
|
<div slot="chips" class="chips-container">
|
|
981
969
|
<chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
|
|
@@ -1014,7 +1002,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1014
1002
|
</div>
|
|
1015
1003
|
</tab-header>
|
|
1016
1004
|
<tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
|
|
1017
|
-
${this.logs.length===0?H`<div class="no-items">${this.getNoLogsMessage()}</div>`:
|
|
1005
|
+
${this.logs.length===0?H`<div class="no-items">${this.getNoLogsMessage()}</div>`:Dt(this.logs,e=>H`
|
|
1018
1006
|
<single-log
|
|
1019
1007
|
.log=${e}
|
|
1020
1008
|
.isExpanded=${this.expandedLogIds.has(e.logId)}
|
|
@@ -1115,7 +1103,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1115
1103
|
.warning-container:hover svg {
|
|
1116
1104
|
stroke: #ffdc3e;
|
|
1117
1105
|
}
|
|
1118
|
-
`],i([U()],h.prototype,"logDropdown",2),i([U()],h.prototype,"filterDropdown",2),i([U()],h.prototype,"logLocation",2),i([U()],h.prototype,"eventsEnabled",2),i([U()],h.prototype,"logs",2),i([U()],h.prototype,"expandedLogIds",2),i([_t()],h.prototype,"noContentMessage",2),h=i([Mt("log-tab")],h);import{ForesightManager as _e}from"js.foresight";import{css as Qt,html as
|
|
1106
|
+
`],i([U()],h.prototype,"logDropdown",2),i([U()],h.prototype,"filterDropdown",2),i([U()],h.prototype,"logLocation",2),i([U()],h.prototype,"eventsEnabled",2),i([U()],h.prototype,"logs",2),i([U()],h.prototype,"expandedLogIds",2),i([_t()],h.prototype,"noContentMessage",2),h=i([Mt("log-tab")],h);import{ForesightManager as _e}from"js.foresight";import{css as Qt,html as De,LitElement as ei}from"lit";import{customElement as ti,state as G}from"lit/decorators.js";var Z="points",Ce="px",Se="tabs",Te="ms";import{LitElement as Pt,html as Ut,css as Nt}from"lit";import{customElement as jt,property as B}from"lit/decorators.js";import{LitElement as Lt,html as Ot,css as $t}from"lit";import{customElement as It,property as Me}from"lit/decorators.js";var D=class extends Lt{constructor(){super(...arguments);this.header="";this.description=""}render(){return Ot`<div class="setting-item">
|
|
1119
1107
|
<label>
|
|
1120
1108
|
<span class="setting-header">${this.header}</span>
|
|
1121
1109
|
<span class="setting-description"> ${this.description} </span>
|
|
@@ -1123,7 +1111,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1123
1111
|
<div class="setting-controls">
|
|
1124
1112
|
<slot name="controls"></slot>
|
|
1125
1113
|
</div>
|
|
1126
|
-
</div>`}};
|
|
1114
|
+
</div>`}};D.styles=[$t`
|
|
1127
1115
|
.setting-item {
|
|
1128
1116
|
display: flex;
|
|
1129
1117
|
align-items: center;
|
|
@@ -1163,7 +1151,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1163
1151
|
color: #fff;
|
|
1164
1152
|
font-size: 13px;
|
|
1165
1153
|
}
|
|
1166
|
-
`],i([Me({type:String})],
|
|
1154
|
+
`],i([Me({type:String})],D.prototype,"header",2),i([Me({type:String})],D.prototype,"description",2),D=i([It("setting-item")],D);import{ForesightManager as Vt}from"js.foresight";var x=class extends Pt{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let o=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:o},bubbles:!0})):Vt.instance.alterGlobalSettings({[this.setting]:o})}}render(){return Ut`<setting-item header=${this.header} description=${this.description}>
|
|
1167
1155
|
<input
|
|
1168
1156
|
slot="controls"
|
|
1169
1157
|
type="checkbox"
|
|
@@ -1213,7 +1201,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1213
1201
|
input[type="checkbox"]:hover {
|
|
1214
1202
|
box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
|
|
1215
1203
|
}
|
|
1216
|
-
`],i([B({type:Boolean})],x.prototype,"isChecked",2),i([B({type:String})],x.prototype,"header",2),i([B({type:String})],x.prototype,"description",2),i([B({type:String})],x.prototype,"setting",2),x=i([jt("setting-item-checkbox")],x);import{LitElement as
|
|
1204
|
+
`],i([B({type:Boolean})],x.prototype,"isChecked",2),i([B({type:String})],x.prototype,"header",2),i([B({type:String})],x.prototype,"description",2),i([B({type:String})],x.prototype,"setting",2),x=i([jt("setting-item-checkbox")],x);import{LitElement as Ft,html as zt,css as Rt}from"lit";import{customElement as At,property as L,state as Ht}from"lit/decorators.js";import{ForesightManager as Bt}from"js.foresight";var p=class extends Ft{constructor(){super(...arguments);this.minValue=0;this.maxValue=100;this.currentValue=50;this.unit="px";this.header="";this.description="";this.setting="tabOffset";this.displayValue=50}handleRangeInput(e){let t=e.target;t instanceof HTMLInputElement&&(this.displayValue=parseInt(t.value,10))}handleRangeChange(e){let t=e.target;if(t instanceof HTMLInputElement){let o=parseInt(t.value,10);this.displayValue=o,Bt.instance.alterGlobalSettings({[this.setting]:o})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return zt`<setting-item header=${this.header} description=${this.description}>
|
|
1217
1205
|
<div slot="controls" class="range-wrapper">
|
|
1218
1206
|
<input
|
|
1219
1207
|
slot="controls"
|
|
@@ -1296,14 +1284,14 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1296
1284
|
transform: scale(1.1);
|
|
1297
1285
|
box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
|
|
1298
1286
|
}
|
|
1299
|
-
`],i([
|
|
1287
|
+
`],i([L({type:Number})],p.prototype,"minValue",2),i([L({type:Number})],p.prototype,"maxValue",2),i([L({type:Number})],p.prototype,"currentValue",2),i([L({type:String})],p.prototype,"unit",2),i([L({type:String})],p.prototype,"header",2),i([L({type:String})],p.prototype,"description",2),i([L({type:String})],p.prototype,"setting",2),i([Ht()],p.prototype,"displayValue",2),p=i([At("setting-item-range")],p);var w=class extends ei{constructor(){super();this.changedSettings=[];this._abortController=null;let e=l.instance.devtoolsSettings,t=_e.instance.getManagerData.globalSettings;this.devtoolsSettings=Object.assign({},e),this.managerSettings=Object.assign({},t),this.initialSettings={devtools:Object.assign({},e),manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;_e.instance.addEventListener("managerSettingsChanged",t=>{this.managerSettings=t.managerData.globalSettings,this._updateChangedSettings()},{signal:e}),this._updateChangedSettings()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}_updateChangedSettings(){let e=[];this._checkManagerSettingsChanges(e),this._checkDevtoolsSettingsChanges(e),this.changedSettings=e}_checkManagerSettingsChanges(e){let t=["enableMousePrediction","enableTabPrediction","enableScrollPrediction","trajectoryPredictionTime","positionHistorySize","tabOffset","scrollMargin"];for(let o of t){let a=this.initialSettings.manager[o],r=this.managerSettings[o];a!==r&&e.push({setting:o,oldValue:a,newValue:r})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let o of t){let a=this.initialSettings.devtools[o],r=this.devtoolsSettings[o];a!==r&&e.push({setting:o,oldValue:a,newValue:r})}}_handleDevtoolsSettingChange(e){let{setting:t,value:o}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:o},l.instance.alterDevtoolsSettings({showNameTags:o}),this._updateChangedSettings())}async handleCopySettings(){if(this.managerSettings)try{let e=this.generateSettingsCode(this.managerSettings);navigator.clipboard&&navigator.clipboard.writeText&&await navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy settings code:",e)}}generateSettingsCode(e){let t={enableMousePrediction:e.enableMousePrediction,enableTabPrediction:e.enableTabPrediction,enableScrollPrediction:e.enableScrollPrediction,positionHistorySize:e.positionHistorySize,trajectoryPredictionTime:e.trajectoryPredictionTime,tabOffset:e.tabOffset,scrollMargin:e.scrollMargin};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}render(){if(!this.managerSettings||!this.devtoolsSettings)return De`<tab-content
|
|
1300
1288
|
.noContentMessage=${"Loading settings..."}
|
|
1301
1289
|
.hasContent=${!1}
|
|
1302
1290
|
></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings.
|
|
1303
1291
|
Click on the copy icon to easely copy the new setting into your project
|
|
1304
1292
|
|
|
1305
|
-
`+this.changedSettings.map(o=>`${o.
|
|
1306
|
-
`):"No settings changed from initial values";return
|
|
1293
|
+
`+this.changedSettings.map(o=>`${o.setting}: ${JSON.stringify(o.oldValue)} -> ${JSON.stringify(o.newValue)}`).join(`
|
|
1294
|
+
`):"No settings changed from initial values";return De`
|
|
1307
1295
|
<tab-header>
|
|
1308
1296
|
<div slot="chips" class="chips-container">
|
|
1309
1297
|
<chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
|
|
@@ -1477,7 +1465,9 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1477
1465
|
flex-direction: column;
|
|
1478
1466
|
width: 450px;
|
|
1479
1467
|
height: 450px;
|
|
1480
|
-
transition:
|
|
1468
|
+
transition:
|
|
1469
|
+
width 0.3s ease,
|
|
1470
|
+
height 0.3s ease;
|
|
1481
1471
|
box-sizing: border-box;
|
|
1482
1472
|
}
|
|
1483
1473
|
.control-wrapper.minimized {
|
|
@@ -1541,7 +1531,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1541
1531
|
width: 100%;
|
|
1542
1532
|
height: 100%;
|
|
1543
1533
|
}
|
|
1544
|
-
`,i([W()],b.prototype,"activeTab",2),i([W()],b.prototype,"isMinimized",2),i([W()],b.prototype,"visibleCount",2),i([W()],b.prototype,"totalCount",2),b=i([si("control-panel")],b);customElements.get("control-panel")||customElements.define("control-panel",b);import{LitElement as wi,css as ki,html as Ei}from"lit";import{customElement as Ci}from"lit/decorators.js";import{LitElement as ai,html as ri,css as li}from"lit";import{customElement as di,state as
|
|
1534
|
+
`,i([W()],b.prototype,"activeTab",2),i([W()],b.prototype,"isMinimized",2),i([W()],b.prototype,"visibleCount",2),i([W()],b.prototype,"totalCount",2),b=i([si("control-panel")],b);customElements.get("control-panel")||customElements.define("control-panel",b);import{LitElement as wi,css as ki,html as Ei}from"lit";import{customElement as Ci}from"lit/decorators.js";import{LitElement as ai,html as ri,css as li}from"lit";import{customElement as di,state as Le,query as ci}from"lit/decorators.js";import{ForesightManager as F}from"js.foresight";var C=class extends ai{constructor(){super(...arguments);this.overlayMap=new Map;this.callbackAnimations=new Map;this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;F.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),F.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),F.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),F.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),F.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let o=t;this.updateNameTagVisibility(o.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let o=document.createElement("div");o.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(o);let a={expandedOverlay:t,nameLabel:o};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:o,nameLabel:a}=e,{expandedRect:r}=t.elementBounds,N=r.right-r.left,te=r.bottom-r.top;o.style.width=`${N}px`,o.style.height=`${te}px`,o.style.transform=`translate3d(${r.left}px, ${r.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${r.left}px, ${r.top-25}px, 0)`):a.style.display="none"}createOrUpdateElementOverlay(e){let t=this.overlayMap.get(e.element);t||(t=this.createElementOverlays(e)),this.updateElementOverlays(t,e)}removeElementOverlay(e){let t=this.overlayMap.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.overlayMap.delete(e.element)),this.clearCallbackAnimationTimeout(e.element)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){let o=this.overlayMap.get(e.element);if(o)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":o.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":o.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":o.expandedOverlay.classList.add("invoked-by-tab");break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(t){let o=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:o})}}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let o=t.nameLabel;e?o.style.display="block":o.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}render(){return ri` <div id="overlays-container"></div> `}};C.styles=[li`
|
|
1545
1535
|
:host {
|
|
1546
1536
|
position: fixed;
|
|
1547
1537
|
top: 0;
|
|
@@ -1557,7 +1547,9 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1557
1547
|
will-change: transform, box-shadow;
|
|
1558
1548
|
border: 1px dashed rgba(100, 116, 139, 0.4);
|
|
1559
1549
|
background-color: rgba(100, 116, 139, 0.05);
|
|
1560
|
-
transition:
|
|
1550
|
+
transition:
|
|
1551
|
+
border-color 0.2s ease,
|
|
1552
|
+
background-color 0.2s ease;
|
|
1561
1553
|
}
|
|
1562
1554
|
|
|
1563
1555
|
.expanded-overlay.invoked-by-scroll {
|
|
@@ -1608,7 +1600,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1608
1600
|
white-space: nowrap;
|
|
1609
1601
|
pointer-events: none;
|
|
1610
1602
|
}
|
|
1611
|
-
`],i([
|
|
1603
|
+
`],i([Le()],C.prototype,"overlayMap",2),i([Le()],C.prototype,"callbackAnimations",2),i([ci("#overlays-container")],C.prototype,"containerElement",2),C=i([di("element-overlays")],C);import{LitElement as pi,html as gi,css as hi}from"lit";import{customElement as mi,state as ee}from"lit/decorators.js";import{styleMap as ui}from"lit/directives/style-map.js";import{ForesightManager as Y}from"js.foresight";var S=class extends pi{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=Y.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1)};this.handleTrajectoryUpdate=e=>{this._mousePredictionIsEnabled&&(this._isVisible=!0,this._latestTrajectory=e.trajectoryPositions,this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderTrajectory)))};this.renderTrajectory=()=>{if(!this._latestTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.sqrt(o*o+a*a);if(r===0)this._trajectoryStyles={display:"none"};else{let N=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${N}deg)`,width:`${r}px`}}this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;Y.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),Y.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),Y.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return gi` <div class="trajectory-line" style=${ui(e)}></div> `}};S.styles=[hi`
|
|
1612
1604
|
:host {
|
|
1613
1605
|
display: block;
|
|
1614
1606
|
}
|
|
@@ -1639,7 +1631,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1639
1631
|
border-bottom: 4px solid transparent;
|
|
1640
1632
|
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
|
|
1641
1633
|
}
|
|
1642
|
-
`],i([ee()],S.prototype,"_mousePredictionIsEnabled",2),i([ee()],S.prototype,"_isVisible",2),i([ee()],S.prototype,"_trajectoryStyles",2),S=i([mi("mouse-trajectory")],S);import{LitElement as bi,html as vi,css as
|
|
1634
|
+
`],i([ee()],S.prototype,"_mousePredictionIsEnabled",2),i([ee()],S.prototype,"_isVisible",2),i([ee()],S.prototype,"_trajectoryStyles",2),S=i([mi("mouse-trajectory")],S);import{LitElement as bi,html as vi,css as yi}from"lit";import{customElement as fi,state as K}from"lit/decorators.js";import{styleMap as xi}from"lit/directives/style-map.js";import{ForesightManager as z}from"js.foresight";var k=class extends bi{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=z.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=z.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let o=e.updatedSettings.find(a=>a.setting==="scrollMargin");o&&(this._scrollMargin=o.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderScrollTrajectory)))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${r}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;z.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),z.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),z.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",width:`${this._scrollMargin}px`,...this._trajectoryStyles};return vi` <div class="scroll-trajectory-line" style=${xi(e)}></div> `}};k.styles=[yi`
|
|
1643
1635
|
:host {
|
|
1644
1636
|
display: block;
|
|
1645
1637
|
}
|
|
@@ -1699,7 +1691,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1699
1691
|
filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
|
|
1700
1692
|
}
|
|
1701
1693
|
}
|
|
1702
|
-
`],i([
|
|
1694
|
+
`],i([K()],k.prototype,"_scrollPredictionIsEnabled",2),i([K()],k.prototype,"_scrollMargin",2),i([K()],k.prototype,"_isVisible",2),i([K()],k.prototype,"_trajectoryStyles",2),k=i([fi("scroll-trajectory")],k);var R=class extends wi{render(){return Ei`
|
|
1703
1695
|
<div id="overlay-container">
|
|
1704
1696
|
<mouse-trajectory></mouse-trajectory>
|
|
1705
1697
|
<scroll-trajectory></scroll-trajectory>
|