jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #724 from openreplay/dynamic-css-support

Browse source 
dynamic cssGroupedRule support
This commit is contained in:
Alex K 2022-09-14 13:30:22 +02:00 • committed by GitHub
commit 5d22cd3596
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 423 additions and 330 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/app/player/MessageDistributor/managers/DOM/DOMManager.ts
View file

@ -51,7 +51,7 @@ export default class DOMManager extends ListWalker<Message> {
private vRoots: Map<number, VShadowRoot | VDocument> = new Map()
private activeIframeRoots: Map<number, number> = new Map()
private styleSheets: Map<number, CSSStyleSheet> = new Map()
private upperBodyId: number = -1;
private nodeScrollManagers: Map<number, ListWalker<SetNodeScroll>> = new Map()
@ -82,7 +82,7 @@ export default class DOMManager extends ListWalker<Message> {
if(m.tag === "BODY" && this.upperBodyId === -1) {
this.upperBodyId = m.id
}
} else if (m.tp === "set_node_attribute" &&
} else if (m.tp === "set_node_attribute" &&
(IGNORED_ATTRS.includes(m.name) || !ATTR_NAME_REGEXP.test(m.name))) {
logger.log("Ignorring message: ", m)
return; // Ignoring
@ -96,7 +96,7 @@ export default class DOMManager extends ListWalker<Message> {
}
}
// May be make it as a message on message add?
// May be make it as a message on message add?
private removeAutocomplete(node: Element): boolean {
const tag = node.tagName
if ([ "FORM", "TEXTAREA", "SELECT" ].includes(tag)) {
@ -124,7 +124,7 @@ export default class DOMManager extends ListWalker<Message> {
const pNode = parent.node
if ((pNode instanceof HTMLStyleElement) && // TODO: correct ordering OR filter in tracker
pNode.sheet &&
pNode.sheet &&
pNode.sheet.cssRules &&
pNode.sheet.cssRules.length > 0 &&
pNode.innerText &&
@ -161,7 +161,7 @@ export default class DOMManager extends ListWalker<Message> {
vDoc.insertChildAt(vn, 0)
this.vRoots = new Map([[0, vDoc]]) // watchout: id==0 for both Document and documentElement
// this is done for the AdoptedCSS logic
// todo: start from 0 (sync logic with tracker)
// todo: start from 0 (sync logic with tracker)
this.stylesManager.reset()
this.activeIframeRoots.clear()
return
@ -267,6 +267,8 @@ export default class DOMManager extends ListWalker<Message> {
vn.applyChanges()
}
return
// @depricated since 4.0.2 in favor of adopted_ss_insert/delete_rule + add_owner as being common case for StyleSheets
case "css_insert_rule":
vn = this.vElements.get(msg.id)
if (!vn) { logger.error("Node not found", msg); return }
@ -285,6 +287,8 @@ export default class DOMManager extends ListWalker<Message> {
}
vn.onStyleSheet(sheet => deleteRule(sheet, msg))
return
// end @depricated
case "create_i_frame_document":
vn = this.vElements.get(msg.frameID)
if (!vn) { logger.error("Node not found", msg); return }
@ -332,6 +336,7 @@ export default class DOMManager extends ListWalker<Message> {
}
deleteRule(styleSheet, msg)
return
case "adopted_ss_replace":
styleSheet = this.styleSheets.get(msg.sheetID)
if (!styleSheet) {
@ -343,7 +348,14 @@ export default class DOMManager extends ListWalker<Message> {
return
case "adopted_ss_add_owner":
vn = this.vRoots.get(msg.id)
if (!vn) { logger.error("Node not found", msg); return }
if (!vn) {
// non-constructed case
vn = this.vElements.get(msg.id)
if (!vn) { logger.error("Node not found", msg); return }
if (!(vn instanceof VStyleElement)) { logger.error("Non-style owner", msg); return }
this.styleSheets.set(msg.sheetID, vn.node.sheet)
return
}
styleSheet = this.styleSheets.get(msg.sheetID)
if (!styleSheet) {
let context: typeof globalThis
@ -370,11 +382,11 @@ export default class DOMManager extends ListWalker<Message> {
//@ts-ignore
vn.node.adoptedStyleSheets = [...vn.node.adoptedStyleSheets].filter(s => s !== styleSheet)
return
}
}
}
moveReady(t: number): Promise<void> {
// MBTODO (back jump optimisation):
// MBTODO (back jump optimisation):
// - store intemediate virtual dom state
// - cancel previous moveReady tasks (is it possible?) if new timestamp is less
this.moveApply(t, this.applyMessage) // This function autoresets pointer if necessary (better name?)
@ -399,4 +411,4 @@ export default class DOMManager extends ListWalker<Message> {
})
})
}
}
}

13
frontend/app/player/MessageDistributor/managers/DOM/StylesManager.ts
View file

@ -1,9 +1,8 @@
import type StatedScreen from '../../StatedScreen';
import type { CssInsertRule, CssDeleteRule } from '../../messages';
import type { CssInsertRule, CssDeleteRule, ReplaceVcss } from '../../messages';
type CSSRuleMessage = CssInsertRule | CssDeleteRule;
type CSSRuleMessage = CssInsertRule | CssDeleteRule | ReplaceVcss;
import logger from 'App/logger';
import ListWalker from '../ListWalker';
@ -72,7 +71,7 @@ export default class StylesManager extends ListWalker<CSSRuleMessage> {
private manageRule = (msg: CSSRuleMessage):void => {
// if (msg.tp === "css_insert_rule") {
// let styleSheet = this.#screen.document.styleSheets[ msg.stylesheetID ];
// if (!styleSheet) {
// if (!styleSheet) {
// logger.log("No stylesheet with corresponding ID found: ", msg)
// styleSheet = this.#screen.document.styleSheets[0];
// if (!styleSheet) {
@ -91,9 +90,9 @@ export default class StylesManager extends ListWalker<CSSRuleMessage> {
// if (msg.tp === "css_delete_rule") {
// // console.warn('Warning: STYLESHEET_DELETE_RULE msg')
// const styleSheet = this.#screen.document.styleSheets[msg.stylesheetID];
// if (!styleSheet) {
// if (!styleSheet) {
// logger.log("No stylesheet with corresponding ID found: ", msg)
// return;
// return;
// }
// styleSheet.deleteRule(msg.index);
// }
@ -103,4 +102,4 @@ export default class StylesManager extends ListWalker<CSSRuleMessage> {
return Promise.all(this.linkLoadPromises)
.then(() => this.moveApply(t, this.manageRule));
}
}
}

6
frontend/app/player/MessageDistributor/messages/JSONRawMessageReader.ts
View file

@ -64,7 +64,7 @@ const resolvers = {
...msg,
text: resolveCSS(msg.baseURL, msg.text),
tp: "adopted_ss_replace"
})
}),
} as const
type ResolvableType = keyof typeof resolvers
@ -84,7 +84,7 @@ export default class JSONRawMessageReader {
readMessage(): RawMessage | null {
let msg = this.messages.shift()
if (!msg) { return null }
const rawMsg = Array.isArray(msg)
const rawMsg = Array.isArray(msg)
? translate(msg)
: legacyTranslate(msg)
if (!rawMsg) {
@ -97,4 +97,4 @@ export default class JSONRawMessageReader {
return rawMsg
}
}
}

313
frontend/app/player/MessageDistributor/messages/RawMessageReader.ts
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import PrimitiveReader from './PrimitiveReader'
import type { RawMessage } from './raw'
@ -18,50 +19,50 @@ export default class RawMessageReader extends PrimitiveReader {
switch (tp) {
case 0: {
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
return {
tp: "timestamp",
timestamp,
tp: "timestamp",
timestamp,
};
}
case 4: {
const url = this.readString(); if (url === null) { return resetPointer() }
const referrer = this.readString(); if (referrer === null) { return resetPointer() }
const navigationStart = this.readUint(); if (navigationStart === null) { return resetPointer() }
const navigationStart = this.readUint(); if (navigationStart === null) { return resetPointer() }
return {
tp: "set_page_location",
tp: "set_page_location",
url,
referrer,
navigationStart,
navigationStart,
};
}
case 5: {
const width = this.readUint(); if (width === null) { return resetPointer() }
const height = this.readUint(); if (height === null) { return resetPointer() }
const height = this.readUint(); if (height === null) { return resetPointer() }
return {
tp: "set_viewport_size",
tp: "set_viewport_size",
width,
height,
height,
};
}
case 6: {
const x = this.readInt(); if (x === null) { return resetPointer() }
const y = this.readInt(); if (y === null) { return resetPointer() }
const y = this.readInt(); if (y === null) { return resetPointer() }
return {
tp: "set_viewport_scroll",
tp: "set_viewport_scroll",
x,
y,
y,
};
}
case 7: {
return {
tp: "create_document",
tp: "create_document",
};
}
@ -70,164 +71,164 @@ export default class RawMessageReader extends PrimitiveReader {
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const tag = this.readString(); if (tag === null) { return resetPointer() }
const svg = this.readBoolean(); if (svg === null) { return resetPointer() }
const svg = this.readBoolean(); if (svg === null) { return resetPointer() }
return {
tp: "create_element_node",
tp: "create_element_node",
id,
parentID,
index,
tag,
svg,
svg,
};
}
case 9: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "create_text_node",
tp: "create_text_node",
id,
parentID,
index,
index,
};
}
case 10: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const parentID = this.readUint(); if (parentID === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "move_node",
tp: "move_node",
id,
parentID,
index,
index,
};
}
case 11: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
return {
tp: "remove_node",
id,
tp: "remove_node",
id,
};
}
case 12: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
return {
tp: "set_node_attribute",
tp: "set_node_attribute",
id,
name,
value,
value,
};
}
case 13: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
return {
tp: "remove_node_attribute",
tp: "remove_node_attribute",
id,
name,
name,
};
}
case 14: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const data = this.readString(); if (data === null) { return resetPointer() }
const data = this.readString(); if (data === null) { return resetPointer() }
return {
tp: "set_node_data",
tp: "set_node_data",
id,
data,
data,
};
}
case 15: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const data = this.readString(); if (data === null) { return resetPointer() }
const data = this.readString(); if (data === null) { return resetPointer() }
return {
tp: "set_css_data",
tp: "set_css_data",
id,
data,
data,
};
}
case 16: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const x = this.readInt(); if (x === null) { return resetPointer() }
const y = this.readInt(); if (y === null) { return resetPointer() }
const y = this.readInt(); if (y === null) { return resetPointer() }
return {
tp: "set_node_scroll",
tp: "set_node_scroll",
id,
x,
y,
y,
};
}
case 18: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
const mask = this.readInt(); if (mask === null) { return resetPointer() }
const mask = this.readInt(); if (mask === null) { return resetPointer() }
return {
tp: "set_input_value",
tp: "set_input_value",
id,
value,
mask,
mask,
};
}
case 19: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const checked = this.readBoolean(); if (checked === null) { return resetPointer() }
const checked = this.readBoolean(); if (checked === null) { return resetPointer() }
return {
tp: "set_input_checked",
tp: "set_input_checked",
id,
checked,
checked,
};
}
case 20: {
const x = this.readUint(); if (x === null) { return resetPointer() }
const y = this.readUint(); if (y === null) { return resetPointer() }
const y = this.readUint(); if (y === null) { return resetPointer() }
return {
tp: "mouse_move",
tp: "mouse_move",
x,
y,
y,
};
}
case 22: {
const level = this.readString(); if (level === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
return {
tp: "console_log",
tp: "console_log",
level,
value,
value,
};
}
case 37: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const rule = this.readString(); if (rule === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "css_insert_rule",
tp: "css_insert_rule",
id,
rule,
index,
index,
};
}
case 38: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "css_delete_rule",
tp: "css_delete_rule",
id,
index,
index,
};
}
@ -238,16 +239,16 @@ export default class RawMessageReader extends PrimitiveReader {
const response = this.readString(); if (response === null) { return resetPointer() }
const status = this.readUint(); if (status === null) { return resetPointer() }
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
return {
tp: "fetch",
tp: "fetch",
method,
url,
request,
response,
status,
timestamp,
duration,
duration,
};
}
@ -255,67 +256,67 @@ export default class RawMessageReader extends PrimitiveReader {
const name = this.readString(); if (name === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
const args = this.readString(); if (args === null) { return resetPointer() }
const result = this.readString(); if (result === null) { return resetPointer() }
const result = this.readString(); if (result === null) { return resetPointer() }
return {
tp: "profiler",
tp: "profiler",
name,
duration,
args,
result,
result,
};
}
case 41: {
const key = this.readString(); if (key === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
return {
tp: "o_table",
tp: "o_table",
key,
value,
value,
};
}
case 44: {
const action = this.readString(); if (action === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
return {
tp: "redux",
tp: "redux",
action,
state,
duration,
duration,
};
}
case 45: {
const mutation = this.readString(); if (mutation === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
return {
tp: "vuex",
tp: "vuex",
mutation,
state,
state,
};
}
case 46: {
const type = this.readString(); if (type === null) { return resetPointer() }
const payload = this.readString(); if (payload === null) { return resetPointer() }
const payload = this.readString(); if (payload === null) { return resetPointer() }
return {
tp: "mob_x",
tp: "mob_x",
type,
payload,
payload,
};
}
case 47: {
const action = this.readString(); if (action === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
const duration = this.readUint(); if (duration === null) { return resetPointer() }
return {
tp: "ng_rx",
tp: "ng_rx",
action,
state,
duration,
duration,
};
}
@ -323,13 +324,13 @@ export default class RawMessageReader extends PrimitiveReader {
const operationKind = this.readString(); if (operationKind === null) { return resetPointer() }
const operationName = this.readString(); if (operationName === null) { return resetPointer() }
const variables = this.readString(); if (variables === null) { return resetPointer() }
const response = this.readString(); if (response === null) { return resetPointer() }
const response = this.readString(); if (response === null) { return resetPointer() }
return {
tp: "graph_ql",
tp: "graph_ql",
operationKind,
operationName,
variables,
response,
response,
};
}
@ -337,31 +338,31 @@ export default class RawMessageReader extends PrimitiveReader {
const frames = this.readInt(); if (frames === null) { return resetPointer() }
const ticks = this.readInt(); if (ticks === null) { return resetPointer() }
const totalJSHeapSize = this.readUint(); if (totalJSHeapSize === null) { return resetPointer() }
const usedJSHeapSize = this.readUint(); if (usedJSHeapSize === null) { return resetPointer() }
const usedJSHeapSize = this.readUint(); if (usedJSHeapSize === null) { return resetPointer() }
return {
tp: "performance_track",
tp: "performance_track",
frames,
ticks,
totalJSHeapSize,
usedJSHeapSize,
usedJSHeapSize,
};
}
case 54: {
const downlink = this.readUint(); if (downlink === null) { return resetPointer() }
const type = this.readString(); if (type === null) { return resetPointer() }
const type = this.readString(); if (type === null) { return resetPointer() }
return {
tp: "connection_information",
tp: "connection_information",
downlink,
type,
type,
};
}
case 55: {
const hidden = this.readBoolean(); if (hidden === null) { return resetPointer() }
const hidden = this.readBoolean(); if (hidden === null) { return resetPointer() }
return {
tp: "set_page_visibility",
hidden,
tp: "set_page_visibility",
hidden,
};
}
@ -372,16 +373,16 @@ export default class RawMessageReader extends PrimitiveReader {
const containerType = this.readUint(); if (containerType === null) { return resetPointer() }
const containerSrc = this.readString(); if (containerSrc === null) { return resetPointer() }
const containerId = this.readString(); if (containerId === null) { return resetPointer() }
const containerName = this.readString(); if (containerName === null) { return resetPointer() }
const containerName = this.readString(); if (containerName === null) { return resetPointer() }
return {
tp: "long_task",
tp: "long_task",
timestamp,
duration,
context,
containerType,
containerSrc,
containerId,
containerName,
containerName,
};
}
@ -389,25 +390,25 @@ export default class RawMessageReader extends PrimitiveReader {
const id = this.readUint(); if (id === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
const value = this.readString(); if (value === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
return {
tp: "set_node_attribute_url_based",
tp: "set_node_attribute_url_based",
id,
name,
value,
baseURL,
baseURL,
};
}
case 61: {
const id = this.readUint(); if (id === null) { return resetPointer() }
const data = this.readString(); if (data === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
return {
tp: "set_css_data_url_based",
tp: "set_css_data_url_based",
id,
data,
baseURL,
baseURL,
};
}
@ -415,13 +416,13 @@ export default class RawMessageReader extends PrimitiveReader {
const id = this.readUint(); if (id === null) { return resetPointer() }
const rule = this.readString(); if (rule === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
return {
tp: "css_insert_rule_url_based",
tp: "css_insert_rule_url_based",
id,
rule,
index,
baseURL,
baseURL,
};
}
@ -429,45 +430,45 @@ export default class RawMessageReader extends PrimitiveReader {
const id = this.readUint(); if (id === null) { return resetPointer() }
const hesitationTime = this.readUint(); if (hesitationTime === null) { return resetPointer() }
const label = this.readString(); if (label === null) { return resetPointer() }
const selector = this.readString(); if (selector === null) { return resetPointer() }
const selector = this.readString(); if (selector === null) { return resetPointer() }
return {
tp: "mouse_click",
tp: "mouse_click",
id,
hesitationTime,
label,
selector,
selector,
};
}
case 70: {
const frameID = this.readUint(); if (frameID === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
return {
tp: "create_i_frame_document",
tp: "create_i_frame_document",
frameID,
id,
id,
};
}
case 71: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const text = this.readString(); if (text === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
return {
tp: "adopted_ss_replace_url_based",
tp: "adopted_ss_replace_url_based",
sheetID,
text,
baseURL,
baseURL,
};
}
case 72: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const text = this.readString(); if (text === null) { return resetPointer() }
const text = this.readString(); if (text === null) { return resetPointer() }
return {
tp: "adopted_ss_replace",
tp: "adopted_ss_replace",
sheetID,
text,
text,
};
}
@ -475,65 +476,65 @@ export default class RawMessageReader extends PrimitiveReader {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const rule = this.readString(); if (rule === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
const baseURL = this.readString(); if (baseURL === null) { return resetPointer() }
return {
tp: "adopted_ss_insert_rule_url_based",
tp: "adopted_ss_insert_rule_url_based",
sheetID,
rule,
index,
baseURL,
baseURL,
};
}
case 74: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const rule = this.readString(); if (rule === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "adopted_ss_insert_rule",
tp: "adopted_ss_insert_rule",
sheetID,
rule,
index,
index,
};
}
case 75: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
const index = this.readUint(); if (index === null) { return resetPointer() }
return {
tp: "adopted_ss_delete_rule",
tp: "adopted_ss_delete_rule",
sheetID,
index,
index,
};
}
case 76: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
return {
tp: "adopted_ss_add_owner",
tp: "adopted_ss_add_owner",
sheetID,
id,
id,
};
}
case 77: {
const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
const id = this.readUint(); if (id === null) { return resetPointer() }
return {
tp: "adopted_ss_remove_owner",
tp: "adopted_ss_remove_owner",
sheetID,
id,
id,
};
}
case 79: {
const mutation = this.readString(); if (mutation === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
const state = this.readString(); if (state === null) { return resetPointer() }
return {
tp: "zustand",
tp: "zustand",
mutation,
state,
state,
};
}
@ -547,9 +548,9 @@ export default class RawMessageReader extends PrimitiveReader {
const userOSVersion = this.readString(); if (userOSVersion === null) { return resetPointer() }
const userDevice = this.readString(); if (userDevice === null) { return resetPointer() }
const userDeviceType = this.readString(); if (userDeviceType === null) { return resetPointer() }
const userCountry = this.readString(); if (userCountry === null) { return resetPointer() }
const userCountry = this.readString(); if (userCountry === null) { return resetPointer() }
return {
tp: "ios_session_start",
tp: "ios_session_start",
timestamp,
projectID,
trackerVersion,
@ -559,7 +560,7 @@ export default class RawMessageReader extends PrimitiveReader {
userOSVersion,
userDevice,
userDeviceType,
userCountry,
userCountry,
};
}
@ -567,13 +568,13 @@ export default class RawMessageReader extends PrimitiveReader {
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
const length = this.readUint(); if (length === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
const payload = this.readString(); if (payload === null) { return resetPointer() }
const payload = this.readString(); if (payload === null) { return resetPointer() }
return {
tp: "ios_custom_event",
tp: "ios_custom_event",
timestamp,
length,
name,
payload,
payload,
};
}
@ -583,15 +584,15 @@ export default class RawMessageReader extends PrimitiveReader {
const x = this.readUint(); if (x === null) { return resetPointer() }
const y = this.readUint(); if (y === null) { return resetPointer() }
const width = this.readUint(); if (width === null) { return resetPointer() }
const height = this.readUint(); if (height === null) { return resetPointer() }
const height = this.readUint(); if (height === null) { return resetPointer() }
return {
tp: "ios_screen_changes",
tp: "ios_screen_changes",
timestamp,
length,
x,
y,
width,
height,
height,
};
}
@ -600,14 +601,14 @@ export default class RawMessageReader extends PrimitiveReader {
const length = this.readUint(); if (length === null) { return resetPointer() }
const label = this.readString(); if (label === null) { return resetPointer() }
const x = this.readUint(); if (x === null) { return resetPointer() }
const y = this.readUint(); if (y === null) { return resetPointer() }
const y = this.readUint(); if (y === null) { return resetPointer() }
return {
tp: "ios_click_event",
tp: "ios_click_event",
timestamp,
length,
label,
x,
y,
y,
};
}
@ -615,13 +616,13 @@ export default class RawMessageReader extends PrimitiveReader {
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
const length = this.readUint(); if (length === null) { return resetPointer() }
const name = this.readString(); if (name === null) { return resetPointer() }
const value = this.readUint(); if (value === null) { return resetPointer() }
const value = this.readUint(); if (value === null) { return resetPointer() }
return {
tp: "ios_performance_event",
tp: "ios_performance_event",
timestamp,
length,
name,
value,
value,
};
}
@ -629,13 +630,13 @@ export default class RawMessageReader extends PrimitiveReader {
const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() }
const length = this.readUint(); if (length === null) { return resetPointer() }
const severity = this.readString(); if (severity === null) { return resetPointer() }
const content = this.readString(); if (content === null) { return resetPointer() }
const content = this.readString(); if (content === null) { return resetPointer() }
return {
tp: "ios_log",
tp: "ios_log",
timestamp,
length,
severity,
content,
content,
};
}
@ -648,9 +649,9 @@ export default class RawMessageReader extends PrimitiveReader {
const url = this.readString(); if (url === null) { return resetPointer() }
const success = this.readBoolean(); if (success === null) { return resetPointer() }
const method = this.readString(); if (method === null) { return resetPointer() }
const status = this.readUint(); if (status === null) { return resetPointer() }
const status = this.readUint(); if (status === null) { return resetPointer() }
return {
tp: "ios_network_call",
tp: "ios_network_call",
timestamp,
length,
duration,
@ -659,7 +660,7 @@ export default class RawMessageReader extends PrimitiveReader {
url,
success,
method,
status,
status,
};
}

4
frontend/app/player/MessageDistributor/messages/message.ts
View file

@ -1,8 +1,9 @@
// Auto-generated, do not edit
/* eslint-disable */
import type { Timed } from './timed'
import type { RawMessage } from './raw'
import type {
import type {
RawTimestamp,
RawSetPageLocation,
RawSetViewportSize,
@ -163,3 +164,4 @@ export type IosPerformanceEvent = RawIosPerformanceEvent & Timed
export type IosLog = RawIosLog & Timed
export type IosNetworkCall = RawIosNetworkCall & Timed

1
frontend/app/player/MessageDistributor/messages/raw.ts
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
export interface RawTimestamp {

3
frontend/app/player/MessageDistributor/messages/tracker-legacy.ts
View file

@ -1,4 +1,5 @@
// @ts-nocheck
/* eslint-disable */
// Auto-generated, do not edit
export const TP_MAP = {
@ -69,5 +70,3 @@ export const TP_MAP = {
103: "ios_log",
105: "ios_network_call",
} as const

89
frontend/app/player/MessageDistributor/messages/tracker.ts
View file

@ -1,6 +1,7 @@
// Auto-generated, do not edit
/* eslint-disable */
import type { RawMessage } from './raw'
import type { RawMessage } from './raw'
type TrBatchMetadata = [
@ -396,14 +397,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 0: {
return {
tp: "timestamp",
tp: "timestamp",
timestamp: tMsg[1],
}
}
case 4: {
return {
tp: "set_page_location",
tp: "set_page_location",
url: tMsg[1],
referrer: tMsg[2],
navigationStart: tMsg[3],
@ -412,7 +413,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 5: {
return {
tp: "set_viewport_size",
tp: "set_viewport_size",
width: tMsg[1],
height: tMsg[2],
}
@ -420,7 +421,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 6: {
return {
tp: "set_viewport_scroll",
tp: "set_viewport_scroll",
x: tMsg[1],
y: tMsg[2],
}
@ -428,14 +429,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 7: {
return {
tp: "create_document",
tp: "create_document",
}
}
case 8: {
return {
tp: "create_element_node",
tp: "create_element_node",
id: tMsg[1],
parentID: tMsg[2],
index: tMsg[3],
@ -446,7 +447,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 9: {
return {
tp: "create_text_node",
tp: "create_text_node",
id: tMsg[1],
parentID: tMsg[2],
index: tMsg[3],
@ -455,7 +456,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 10: {
return {
tp: "move_node",
tp: "move_node",
id: tMsg[1],
parentID: tMsg[2],
index: tMsg[3],
@ -464,14 +465,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 11: {
return {
tp: "remove_node",
tp: "remove_node",
id: tMsg[1],
}
}
case 12: {
return {
tp: "set_node_attribute",
tp: "set_node_attribute",
id: tMsg[1],
name: tMsg[2],
value: tMsg[3],
@ -480,7 +481,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 13: {
return {
tp: "remove_node_attribute",
tp: "remove_node_attribute",
id: tMsg[1],
name: tMsg[2],
}
@ -488,7 +489,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 14: {
return {
tp: "set_node_data",
tp: "set_node_data",
id: tMsg[1],
data: tMsg[2],
}
@ -496,7 +497,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 16: {
return {
tp: "set_node_scroll",
tp: "set_node_scroll",
id: tMsg[1],
x: tMsg[2],
y: tMsg[3],
@ -505,7 +506,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 18: {
return {
tp: "set_input_value",
tp: "set_input_value",
id: tMsg[1],
value: tMsg[2],
mask: tMsg[3],
@ -514,7 +515,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 19: {
return {
tp: "set_input_checked",
tp: "set_input_checked",
id: tMsg[1],
checked: tMsg[2],
}
@ -522,7 +523,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 20: {
return {
tp: "mouse_move",
tp: "mouse_move",
x: tMsg[1],
y: tMsg[2],
}
@ -530,7 +531,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 22: {
return {
tp: "console_log",
tp: "console_log",
level: tMsg[1],
value: tMsg[2],
}
@ -538,7 +539,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 37: {
return {
tp: "css_insert_rule",
tp: "css_insert_rule",
id: tMsg[1],
rule: tMsg[2],
index: tMsg[3],
@ -547,7 +548,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 38: {
return {
tp: "css_delete_rule",
tp: "css_delete_rule",
id: tMsg[1],
index: tMsg[2],
}
@ -555,7 +556,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 39: {
return {
tp: "fetch",
tp: "fetch",
method: tMsg[1],
url: tMsg[2],
request: tMsg[3],
@ -568,7 +569,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 40: {
return {
tp: "profiler",
tp: "profiler",
name: tMsg[1],
duration: tMsg[2],
args: tMsg[3],
@ -578,7 +579,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 41: {
return {
tp: "o_table",
tp: "o_table",
key: tMsg[1],
value: tMsg[2],
}
@ -586,7 +587,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 44: {
return {
tp: "redux",
tp: "redux",
action: tMsg[1],
state: tMsg[2],
duration: tMsg[3],
@ -595,7 +596,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 45: {
return {
tp: "vuex",
tp: "vuex",
mutation: tMsg[1],
state: tMsg[2],
}
@ -603,7 +604,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 46: {
return {
tp: "mob_x",
tp: "mob_x",
type: tMsg[1],
payload: tMsg[2],
}
@ -611,7 +612,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 47: {
return {
tp: "ng_rx",
tp: "ng_rx",
action: tMsg[1],
state: tMsg[2],
duration: tMsg[3],
@ -620,7 +621,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 48: {
return {
tp: "graph_ql",
tp: "graph_ql",
operationKind: tMsg[1],
operationName: tMsg[2],
variables: tMsg[3],
@ -630,7 +631,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 49: {
return {
tp: "performance_track",
tp: "performance_track",
frames: tMsg[1],
ticks: tMsg[2],
totalJSHeapSize: tMsg[3],
@ -640,7 +641,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 54: {
return {
tp: "connection_information",
tp: "connection_information",
downlink: tMsg[1],
type: tMsg[2],
}
@ -648,14 +649,14 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 55: {
return {
tp: "set_page_visibility",
tp: "set_page_visibility",
hidden: tMsg[1],
}
}
case 59: {
return {
tp: "long_task",
tp: "long_task",
timestamp: tMsg[1],
duration: tMsg[2],
context: tMsg[3],
@ -668,7 +669,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 60: {
return {
tp: "set_node_attribute_url_based",
tp: "set_node_attribute_url_based",
id: tMsg[1],
name: tMsg[2],
value: tMsg[3],
@ -678,7 +679,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 61: {
return {
tp: "set_css_data_url_based",
tp: "set_css_data_url_based",
id: tMsg[1],
data: tMsg[2],
baseURL: tMsg[3],
@ -687,7 +688,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 67: {
return {
tp: "css_insert_rule_url_based",
tp: "css_insert_rule_url_based",
id: tMsg[1],
rule: tMsg[2],
index: tMsg[3],
@ -697,7 +698,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 69: {
return {
tp: "mouse_click",
tp: "mouse_click",
id: tMsg[1],
hesitationTime: tMsg[2],
label: tMsg[3],
@ -707,7 +708,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 70: {
return {
tp: "create_i_frame_document",
tp: "create_i_frame_document",
frameID: tMsg[1],
id: tMsg[2],
}
@ -715,7 +716,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 71: {
return {
tp: "adopted_ss_replace_url_based",
tp: "adopted_ss_replace_url_based",
sheetID: tMsg[1],
text: tMsg[2],
baseURL: tMsg[3],
@ -724,7 +725,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 73: {
return {
tp: "adopted_ss_insert_rule_url_based",
tp: "adopted_ss_insert_rule_url_based",
sheetID: tMsg[1],
rule: tMsg[2],
index: tMsg[3],
@ -734,7 +735,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 75: {
return {
tp: "adopted_ss_delete_rule",
tp: "adopted_ss_delete_rule",
sheetID: tMsg[1],
index: tMsg[2],
}
@ -742,7 +743,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 76: {
return {
tp: "adopted_ss_add_owner",
tp: "adopted_ss_add_owner",
sheetID: tMsg[1],
id: tMsg[2],
}
@ -750,7 +751,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 77: {
return {
tp: "adopted_ss_remove_owner",
tp: "adopted_ss_remove_owner",
sheetID: tMsg[1],
id: tMsg[2],
}
@ -758,7 +759,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
case 79: {
return {
tp: "zustand",
tp: "zustand",
mutation: tMsg[1],
state: tMsg[2],
}
@ -768,4 +769,4 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
return null
}
}
}

28
mobs/messages.rb
View file

@ -44,7 +44,7 @@ message 1, 'SessionStart', :tracker => false, :replayer => false do
string 'UserCountry'
string 'UserID'
end
# message 2, 'CreateDocument', do
## message 2, 'CreateDocument', do
# end
message 3, 'SessionEnd', :tracker => false, :replayer => false do
uint 'Timestamp'
@ -62,7 +62,7 @@ message 6, 'SetViewportScroll' do
int 'X'
int 'Y'
end
# Depricated sinse tracker 3.6.0 in favor of CreateDocument(id=2)
# (should be) Depricated sinse tracker ?.?.? in favor of CreateDocument(id=2)
# in order to use Document as a default root node instead of the documentElement
message 7, 'CreateDocument' do
end
@ -238,13 +238,13 @@ message 36, 'CustomEvent', :tracker => false, :replayer => false do
string 'Name'
string 'Payload'
end
# depricated since 4.0.2 in favor of AdoptedSSInsertRule + AdoptedSSAddOwner
message 37, 'CSSInsertRule' do
uint 'ID'
string 'Rule'
uint 'Index'
end
# depricated since 4.0.2
message 38, 'CSSDeleteRule' do
uint 'ID'
uint 'Index'
@ -265,7 +265,6 @@ message 40, 'Profiler' do
string 'Args'
string 'Result'
end
message 41, 'OTable' do
string 'Key'
string 'Value'
@ -278,7 +277,6 @@ message 43, 'StateActionEvent', :tracker => false, :replayer => false do
uint 'Timestamp'
string 'Type'
end
message 44, 'Redux' do
string 'Action'
string 'State'
@ -363,6 +361,7 @@ message 56, 'PerformanceTrackAggr', :tracker => false, :replayer => false do
uint 'AvgUsedJSHeapSize'
uint 'MaxUsedJSHeapSize'
end
## 57 58
message 59, 'LongTask' do
uint 'Timestamp'
uint 'Duration'
@ -400,6 +399,7 @@ message 64, 'CustomIssue', :replayer => false do
string 'Name'
string 'Payload'
end
## 65
message 66, 'AssetCache', :replayer => false, :tracker => false do
string 'URL'
end
@ -409,6 +409,7 @@ message 67, 'CSSInsertRuleURLBased' do
uint 'Index'
string 'BaseURL'
end
## 68
message 69, 'MouseClick' do
uint 'ID'
uint 'HesitationTime'
@ -416,13 +417,14 @@ message 69, 'MouseClick' do
string 'Selector'
end
# Since 3.4.0
# Since 3.4.0 //also used for ShadowDom. TODO:remane to CreateRoot
message 70, 'CreateIFrameDocument' do
uint 'FrameID'
uint 'ID'
end
#Since 3.6.0 AdoptedStyleSheets
#Since 4.0.0 AdoptedStyleSheets etc
# TODO: rename to StyleSheets...
message 71, 'AdoptedSSReplaceURLBased' do
uint 'SheetID'
string 'Text'
@ -455,8 +457,16 @@ message 77, 'AdoptedSSRemoveOwner' do
uint 'SheetID'
uint 'ID'
end
#Since 4.0.1
# message 78, 'ReplaceVCSSURLBased' do
# uint 'SheetID'
# uint 'Index'
# string 'Styles'
# string 'BaseURL'
# end
message 79, 'Zustand' do
string 'Mutation'
string 'State'
end
# 80 -- 90 reserved

11
mobs/templates/frontend~app~player~MessageDistributor~messages~RawMessageReader.ts.erb
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import PrimitiveReader from './PrimitiveReader'
import type { RawMessage } from './raw'
@ -18,12 +19,12 @@ export default class RawMessageReader extends PrimitiveReader {
switch (tp) {
<% $messages.select { |msg| msg.replayer }.each do |msg| %>
case <%= msg.id %>: {
<%= msg.attributes.map { |attr|
" const #{attr.name.camel_case} = this.read#{attr.type.to_s.pascal_case}(); if (#{attr.name.camel_case} === null) { return resetPointer() }" }.join "\n" %>
<%= msg.attributes.map { |attr|
" const #{attr.name.camel_case} = this.read#{attr.type.to_s.pascal_case}(); if (#{attr.name.camel_case} === null) { return resetPointer() }" }.join "\n" %>
return {
tp: "<%= msg.name.snake_case %>",
<%= msg.attributes.map { |attr|
" #{attr.name.camel_case}," }.join "\n" %>
tp: "<%= msg.name.snake_case %>",
<%= msg.attributes.map { |attr|
" #{attr.name.camel_case}," }.join "\n" %>
};
}
<% end %>

5
mobs/templates/frontend~app~player~MessageDistributor~messages~message.ts.erb
View file

@ -1,8 +1,9 @@
// Auto-generated, do not edit
/* eslint-disable */
import type { Timed } from './timed'
import type { RawMessage } from './raw'
import type {
import type {
<%= $messages.select { |msg| msg.replayer }.map { |msg| " Raw#{msg.name.snake_case.pascal_case}," }.join "\n" %>
} from './raw'
@ -10,4 +11,4 @@ export type Message = RawMessage & Timed
<% $messages.select { |msg| msg.replayer }.each do |msg| %>
export type <%= msg.name.snake_case.pascal_case %> = Raw<%= msg.name.snake_case.pascal_case %> & Timed
<% end %>
<% end %>

1
mobs/templates/frontend~app~player~MessageDistributor~messages~raw.ts.erb
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
<% $messages.select { |msg| msg.replayer }.each do |msg| %>
export interface Raw<%= msg.name.snake_case.pascal_case %> {

3
mobs/templates/frontend~app~player~MessageDistributor~messages~tracker-legacy.ts.erb
View file

@ -1,8 +1,7 @@
// @ts-nocheck
/* eslint-disable */
// Auto-generated, do not edit
export const TP_MAP = {
<%= $messages.select { |msg| msg.tracker || msg.replayer }.map { |msg| " #{msg.id}: \"#{msg.name.snake_case}\"," }.join "\n" %>
} as const

7
mobs/templates/frontend~app~player~MessageDistributor~messages~tracker.ts.erb
View file

@ -1,6 +1,7 @@
// Auto-generated, do not edit
/* eslint-disable */
import type { RawMessage } from './raw'
import type { RawMessage } from './raw'
<% $messages.select { |msg| msg.tracker }.each do |msg| %>
type Tr<%= msg.name %> = [
@ -16,7 +17,7 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
<% $messages.select { |msg| msg.replayer & msg.tracker }.each do |msg| %>
case <%= msg.id %>: {
return {
tp: "<%= msg.name.snake_case %>",
tp: "<%= msg.name.snake_case %>",
<%= msg.attributes.map.with_index { |attr, i| "#{attr.name.camel_case}: tMsg[#{i+1}]," }.join "\n " %>
}
}
@ -25,4 +26,4 @@ export default function translate(tMsg: TrackerMessage): RawMessage | null {
return null
}
}
}

1
mobs/templates/tracker~tracker~src~common~messages.gen.ts.erb
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
export declare const enum Type {
<%= $messages.select { |msg| msg.tracker }.map { |msg| "#{ msg.name } = #{ msg.id }," }.join "\n " %>

3
mobs/templates/tracker~tracker~src~main~app~messages.gen.ts.erb
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import * as Messages from '../../common/messages.gen.js'
export { default } from '../../common/messages.gen.js'
@ -7,7 +8,7 @@ export { default } from '../../common/messages.gen.js'
export function <%= msg.name %>(
<%= msg.attributes.map { |attr| "#{attr.name.camel_case}: #{attr.type_js}," }.join "\n " %>
): Messages.<%= msg.name %> {
return [
return [
Messages.Type.<%= msg.name %>,
<%= msg.attributes.map { |attr| "#{attr.name.camel_case}," }.join "\n " %>
]

4
mobs/templates/tracker~tracker~src~webworker~MessageEncoder.gen.ts.erb
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import * as Messages from '../common/messages.gen.js'
import Message from '../common/messages.gen.js'
@ -15,6 +16,5 @@ export default class MessageEncoder extends PrimitiveEncoder {
<% end %>
}
}
}
}

2
tracker/tracker/.eslintrc.cjs
View file

@ -34,7 +34,7 @@ module.exports = {
'@typescript-eslint/no-unsafe-member-access': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
'@typescript-eslint/restrict-plus-operands': 'warn',
'@typescript-eslint/no-unsafe-return': 'warn',
'@typescript-eslint/no-unsafe-return': 'off',
'no-useless-escape': 'warn',
'no-control-regex': 'warn',
'@typescript-eslint/restrict-template-expressions': 'warn',

1
tracker/tracker/src/common/messages.gen.ts
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
export declare const enum Type {
BatchMetadata = 81,

113
tracker/tracker/src/main/app/messages.gen.ts
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import * as Messages from '../../common/messages.gen.js'
export { default } from '../../common/messages.gen.js'
@ -11,7 +12,7 @@ export function BatchMetadata(
timestamp: number,
location: string,
): Messages.BatchMetadata {
return [
return [
Messages.Type.BatchMetadata,
version,
pageNo,
@ -25,7 +26,7 @@ export function PartitionedMessage(
partNo: number,
partTotal: number,
): Messages.PartitionedMessage {
return [
return [
Messages.Type.PartitionedMessage,
partNo,
partTotal,
@ -35,7 +36,7 @@ export function PartitionedMessage(
export function Timestamp(
timestamp: number,
): Messages.Timestamp {
return [
return [
Messages.Type.Timestamp,
timestamp,
]
@ -46,7 +47,7 @@ export function SetPageLocation(
referrer: string,
navigationStart: number,
): Messages.SetPageLocation {
return [
return [
Messages.Type.SetPageLocation,
url,
referrer,
@ -58,7 +59,7 @@ export function SetViewportSize(
width: number,
height: number,
): Messages.SetViewportSize {
return [
return [
Messages.Type.SetViewportSize,
width,
height,
@ -69,7 +70,7 @@ export function SetViewportScroll(
x: number,
y: number,
): Messages.SetViewportScroll {
return [
return [
Messages.Type.SetViewportScroll,
x,
y,
@ -79,7 +80,7 @@ export function SetViewportScroll(
export function CreateDocument(
): Messages.CreateDocument {
return [
return [
Messages.Type.CreateDocument,
]
@ -92,7 +93,7 @@ export function CreateElementNode(
tag: string,
svg: boolean,
): Messages.CreateElementNode {
return [
return [
Messages.Type.CreateElementNode,
id,
parentID,
@ -107,7 +108,7 @@ export function CreateTextNode(
parentID: number,
index: number,
): Messages.CreateTextNode {
return [
return [
Messages.Type.CreateTextNode,
id,
parentID,
@ -120,7 +121,7 @@ export function MoveNode(
parentID: number,
index: number,
): Messages.MoveNode {
return [
return [
Messages.Type.MoveNode,
id,
parentID,
@ -131,7 +132,7 @@ export function MoveNode(
export function RemoveNode(
id: number,
): Messages.RemoveNode {
return [
return [
Messages.Type.RemoveNode,
id,
]
@ -142,7 +143,7 @@ export function SetNodeAttribute(
name: string,
value: string,
): Messages.SetNodeAttribute {
return [
return [
Messages.Type.SetNodeAttribute,
id,
name,
@ -154,7 +155,7 @@ export function RemoveNodeAttribute(
id: number,
name: string,
): Messages.RemoveNodeAttribute {
return [
return [
Messages.Type.RemoveNodeAttribute,
id,
name,
@ -165,7 +166,7 @@ export function SetNodeData(
id: number,
data: string,
): Messages.SetNodeData {
return [
return [
Messages.Type.SetNodeData,
id,
data,
@ -177,7 +178,7 @@ export function SetNodeScroll(
x: number,
y: number,
): Messages.SetNodeScroll {
return [
return [
Messages.Type.SetNodeScroll,
id,
x,
@ -189,7 +190,7 @@ export function SetInputTarget(
id: number,
label: string,
): Messages.SetInputTarget {
return [
return [
Messages.Type.SetInputTarget,
id,
label,
@ -201,7 +202,7 @@ export function SetInputValue(
value: string,
mask: number,
): Messages.SetInputValue {
return [
return [
Messages.Type.SetInputValue,
id,
value,
@ -213,7 +214,7 @@ export function SetInputChecked(
id: number,
checked: boolean,
): Messages.SetInputChecked {
return [
return [
Messages.Type.SetInputChecked,
id,
checked,
@ -224,7 +225,7 @@ export function MouseMove(
x: number,
y: number,
): Messages.MouseMove {
return [
return [
Messages.Type.MouseMove,
x,
y,
@ -235,7 +236,7 @@ export function ConsoleLog(
level: string,
value: string,
): Messages.ConsoleLog {
return [
return [
Messages.Type.ConsoleLog,
level,
value,
@ -253,7 +254,7 @@ export function PageLoadTiming(
firstPaint: number,
firstContentfulPaint: number,
): Messages.PageLoadTiming {
return [
return [
Messages.Type.PageLoadTiming,
requestStart,
responseStart,
@ -272,7 +273,7 @@ export function PageRenderTiming(
visuallyComplete: number,
timeToInteractive: number,
): Messages.PageRenderTiming {
return [
return [
Messages.Type.PageRenderTiming,
speedIndex,
visuallyComplete,
@ -285,7 +286,7 @@ export function JSException(
message: string,
payload: string,
): Messages.JSException {
return [
return [
Messages.Type.JSException,
name,
message,
@ -297,7 +298,7 @@ export function RawCustomEvent(
name: string,
payload: string,
): Messages.RawCustomEvent {
return [
return [
Messages.Type.RawCustomEvent,
name,
payload,
@ -307,7 +308,7 @@ export function RawCustomEvent(
export function UserID(
id: string,
): Messages.UserID {
return [
return [
Messages.Type.UserID,
id,
]
@ -316,7 +317,7 @@ export function UserID(
export function UserAnonymousID(
id: string,
): Messages.UserAnonymousID {
return [
return [
Messages.Type.UserAnonymousID,
id,
]
@ -326,7 +327,7 @@ export function Metadata(
key: string,
value: string,
): Messages.Metadata {
return [
return [
Messages.Type.Metadata,
key,
value,
@ -338,7 +339,7 @@ export function CSSInsertRule(
rule: string,
index: number,
): Messages.CSSInsertRule {
return [
return [
Messages.Type.CSSInsertRule,
id,
rule,
@ -350,7 +351,7 @@ export function CSSDeleteRule(
id: number,
index: number,
): Messages.CSSDeleteRule {
return [
return [
Messages.Type.CSSDeleteRule,
id,
index,
@ -366,7 +367,7 @@ export function Fetch(
timestamp: number,
duration: number,
): Messages.Fetch {
return [
return [
Messages.Type.Fetch,
method,
url,
@ -384,7 +385,7 @@ export function Profiler(
args: string,
result: string,
): Messages.Profiler {
return [
return [
Messages.Type.Profiler,
name,
duration,
@ -397,7 +398,7 @@ export function OTable(
key: string,
value: string,
): Messages.OTable {
return [
return [
Messages.Type.OTable,
key,
value,
@ -407,7 +408,7 @@ export function OTable(
export function StateAction(
type: string,
): Messages.StateAction {
return [
return [
Messages.Type.StateAction,
type,
]
@ -418,7 +419,7 @@ export function Redux(
state: string,
duration: number,
): Messages.Redux {
return [
return [
Messages.Type.Redux,
action,
state,
@ -430,7 +431,7 @@ export function Vuex(
mutation: string,
state: string,
): Messages.Vuex {
return [
return [
Messages.Type.Vuex,
mutation,
state,
@ -441,7 +442,7 @@ export function MobX(
type: string,
payload: string,
): Messages.MobX {
return [
return [
Messages.Type.MobX,
type,
payload,
@ -453,7 +454,7 @@ export function NgRx(
state: string,
duration: number,
): Messages.NgRx {
return [
return [
Messages.Type.NgRx,
action,
state,
@ -467,7 +468,7 @@ export function GraphQL(
variables: string,
response: string,
): Messages.GraphQL {
return [
return [
Messages.Type.GraphQL,
operationKind,
operationName,
@ -482,7 +483,7 @@ export function PerformanceTrack(
totalJSHeapSize: number,
usedJSHeapSize: number,
): Messages.PerformanceTrack {
return [
return [
Messages.Type.PerformanceTrack,
frames,
ticks,
@ -501,7 +502,7 @@ export function ResourceTiming(
url: string,
initiator: string,
): Messages.ResourceTiming {
return [
return [
Messages.Type.ResourceTiming,
timestamp,
duration,
@ -518,7 +519,7 @@ export function ConnectionInformation(
downlink: number,
type: string,
): Messages.ConnectionInformation {
return [
return [
Messages.Type.ConnectionInformation,
downlink,
type,
@ -528,7 +529,7 @@ export function ConnectionInformation(
export function SetPageVisibility(
hidden: boolean,
): Messages.SetPageVisibility {
return [
return [
Messages.Type.SetPageVisibility,
hidden,
]
@ -543,7 +544,7 @@ export function LongTask(
containerId: string,
containerName: string,
): Messages.LongTask {
return [
return [
Messages.Type.LongTask,
timestamp,
duration,
@ -561,7 +562,7 @@ export function SetNodeAttributeURLBased(
value: string,
baseURL: string,
): Messages.SetNodeAttributeURLBased {
return [
return [
Messages.Type.SetNodeAttributeURLBased,
id,
name,
@ -575,7 +576,7 @@ export function SetCSSDataURLBased(
data: string,
baseURL: string,
): Messages.SetCSSDataURLBased {
return [
return [
Messages.Type.SetCSSDataURLBased,
id,
data,
@ -587,7 +588,7 @@ export function TechnicalInfo(
type: string,
value: string,
): Messages.TechnicalInfo {
return [
return [
Messages.Type.TechnicalInfo,
type,
value,
@ -598,7 +599,7 @@ export function CustomIssue(
name: string,
payload: string,
): Messages.CustomIssue {
return [
return [
Messages.Type.CustomIssue,
name,
payload,
@ -611,7 +612,7 @@ export function CSSInsertRuleURLBased(
index: number,
baseURL: string,
): Messages.CSSInsertRuleURLBased {
return [
return [
Messages.Type.CSSInsertRuleURLBased,
id,
rule,
@ -626,7 +627,7 @@ export function MouseClick(
label: string,
selector: string,
): Messages.MouseClick {
return [
return [
Messages.Type.MouseClick,
id,
hesitationTime,
@ -639,7 +640,7 @@ export function CreateIFrameDocument(
frameID: number,
id: number,
): Messages.CreateIFrameDocument {
return [
return [
Messages.Type.CreateIFrameDocument,
frameID,
id,
@ -651,7 +652,7 @@ export function AdoptedSSReplaceURLBased(
text: string,
baseURL: string,
): Messages.AdoptedSSReplaceURLBased {
return [
return [
Messages.Type.AdoptedSSReplaceURLBased,
sheetID,
text,
@ -665,7 +666,7 @@ export function AdoptedSSInsertRuleURLBased(
index: number,
baseURL: string,
): Messages.AdoptedSSInsertRuleURLBased {
return [
return [
Messages.Type.AdoptedSSInsertRuleURLBased,
sheetID,
rule,
@ -678,7 +679,7 @@ export function AdoptedSSDeleteRule(
sheetID: number,
index: number,
): Messages.AdoptedSSDeleteRule {
return [
return [
Messages.Type.AdoptedSSDeleteRule,
sheetID,
index,
@ -689,7 +690,7 @@ export function AdoptedSSAddOwner(
sheetID: number,
id: number,
): Messages.AdoptedSSAddOwner {
return [
return [
Messages.Type.AdoptedSSAddOwner,
sheetID,
id,
@ -700,7 +701,7 @@ export function AdoptedSSRemoveOwner(
sheetID: number,
id: number,
): Messages.AdoptedSSRemoveOwner {
return [
return [
Messages.Type.AdoptedSSRemoveOwner,
sheetID,
id,
@ -711,7 +712,7 @@ export function Zustand(
mutation: string,
state: string,
): Messages.Zustand {
return [
return [
Messages.Type.Zustand,
mutation,
state,

1
tracker/tracker/src/main/app/observer/observer.ts
View file

@ -291,6 +291,7 @@ export default abstract class Observer {
const width = el.clientWidth
const height = el.clientHeight
el = node.cloneNode() as Element
// TODO: use ResizeObserver
;(el as HTMLElement | SVGElement).style.width = `${width}px`
;(el as HTMLElement | SVGElement).style.height = `${height}px`
}

4
tracker/tracker/src/main/index.ts
View file

@ -20,7 +20,7 @@ import Performance from './modules/performance.js'
import Scroll from './modules/scroll.js'
import Viewport from './modules/viewport.js'
import CSSRules from './modules/cssrules.js'
import AdoptedStyleSheets from './modules/adoptedStyleSheets.js'
import ConstructedStyleSheets from './modules/constructedStyleSheets.js'
import { IN_BROWSER, deprecationWarn, DOCS_HOST } from './utils.js'
import type { Options as AppOptions } from './app/index.js'
@ -113,7 +113,7 @@ export default class API {
if (app !== null) {
Viewport(app)
CSSRules(app)
AdoptedStyleSheets(app)
ConstructedStyleSheets(app)
Connection(app)
Console(app, options)
Exception(app, options)

10
tracker/tracker/src/main/modules/adoptedStyleSheets.ts → tracker/tracker/src/main/modules/constructedStyleSheets.ts
View file

@ -19,6 +19,13 @@ function hasAdoptedSS(node: Node): node is StyleSheetOwner {
)
}
// TODO: incapsulate to be init-ed on-start and join with cssrules.ts under one folder
let _id = 0xf
export function nextID(): number {
return _id++
}
export const styleSheetIDMap: Map<CSSStyleSheet, number> = new Map()
export default function (app: App | null) {
if (app === null) {
return
@ -31,7 +38,6 @@ export default function (app: App | null) {
return
}
let nextID = 0xf
const styleSheetIDMap: Map<CSSStyleSheet, number> = new Map()
const adoptedStyleSheetsOwnings: Map<number, number[]> = new Map()
@ -53,7 +59,7 @@ export default function (app: App | null) {
let sheetID = styleSheetIDMap.get(s)
const init = !sheetID
if (!sheetID) {
sheetID = ++nextID
sheetID = nextID()
}
nowOwning.push(sheetID)
if (!pastOwning.includes(sheetID)) {

96
tracker/tracker/src/main/modules/cssrules.ts
View file

@ -1,6 +1,12 @@
import type App from '../app/index.js'
import { CSSInsertRuleURLBased, CSSDeleteRule, TechnicalInfo } from '../app/messages.gen.js'
import {
AdoptedSSInsertRuleURLBased, // TODO: rename to common StyleSheet names
AdoptedSSDeleteRule,
AdoptedSSAddOwner,
TechnicalInfo,
} from '../app/messages.gen.js'
import { hasTag } from '../app/guards.js'
import { nextID, styleSheetIDMap } from './constructedStyleSheets.js'
export default function (app: App | null) {
if (app === null) {
@ -11,31 +17,69 @@ export default function (app: App | null) {
return
}
const processOperation = app.safe((stylesheet: CSSStyleSheet, index: number, rule?: string) => {
const sendMessage =
typeof rule === 'string'
? (nodeID: number) =>
app.send(CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
: (nodeID: number) => app.send(CSSDeleteRule(nodeID, index))
// TODO: Extend messages to maintain nested rules (CSSGroupingRule prototype, as well as CSSKeyframesRule)
if (stylesheet.ownerNode == null) {
throw new Error('Owner Node not found')
const sendInserDeleteRule = app.safe(
(stylesheet: CSSStyleSheet, index: number, rule?: string) => {
const sheetID = styleSheetIDMap.get(stylesheet)
if (!sheetID) {
app.debug.warn('No sheedID found', stylesheet, styleSheetIDMap)
return
}
if (typeof rule === 'string') {
app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()))
} else {
app.send(AdoptedSSDeleteRule(sheetID, index))
}
},
)
// TODO: proper rule insertion/removal (how?)
const sendReplaceGroupingRule = app.safe((rule: CSSGroupingRule) => {
let topmostRule: CSSRule = rule
while (topmostRule.parentRule) {
topmostRule = topmostRule.parentRule
}
const sheet = topmostRule.parentStyleSheet
if (!sheet) {
app.debug.warn('No parent StyleSheet found for', topmostRule, rule)
return
}
const sheetID = styleSheetIDMap.get(sheet)
if (!sheetID) {
app.debug.warn('No sheedID found for', sheet, styleSheetIDMap)
return
}
const cssText = topmostRule.cssText
const ruleList = sheet.cssRules
const idx = Array.from(ruleList).indexOf(topmostRule)
if (idx >= 0) {
app.send(AdoptedSSInsertRuleURLBased(sheetID, cssText, idx, app.getBaseHref()))
app.send(AdoptedSSDeleteRule(sheetID, idx + 1)) // Remove previous clone
}
const nodeID = app.nodes.getID(stylesheet.ownerNode)
if (nodeID !== undefined) {
sendMessage(nodeID)
} // else error?
})
const patchContext = (context: typeof globalThis) => {
const { insertRule, deleteRule } = context.CSSStyleSheet.prototype
const { insertRule: groupInsertRule, deleteRule: groupDeleteRule } =
context.CSSGroupingRule.prototype
context.CSSStyleSheet.prototype.insertRule = function (rule: string, index = 0) {
processOperation(this, index, rule)
return insertRule.call(this, rule, index)
sendInserDeleteRule(this, index, rule)
return insertRule.call(this, rule, index) as number
}
context.CSSStyleSheet.prototype.deleteRule = function (index: number) {
processOperation(this, index)
return deleteRule.call(this, index)
sendInserDeleteRule(this, index)
return deleteRule.call(this, index) as number
}
context.CSSGroupingRule.prototype.insertRule = function (rule: string, index = 0) {
const result = groupInsertRule.call(this, rule, index) as number
sendReplaceGroupingRule(this)
return result
}
context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
const result = groupDeleteRule.call(this, index) as number
sendReplaceGroupingRule(this)
return result
}
}
@ -47,11 +91,21 @@ export default function (app: App | null) {
return
}
if (node.textContent !== null && node.textContent.trim().length > 0) {
return // Only fully virtual sheets maintained so far
return // Non-virtual styles captured by the observer as a text
}
const rules = node.sheet.cssRules
const nodeID = app.nodes.getID(node)
if (!nodeID) {
return
}
const sheet = node.sheet
const sheetID = nextID()
styleSheetIDMap.set(sheet, sheetID)
app.send(AdoptedSSAddOwner(sheetID, nodeID))
const rules = sheet.cssRules
for (let i = 0; i < rules.length; i++) {
processOperation(node.sheet, i, rules[i].cssText)
sendInserDeleteRule(sheet, i, rules[i].cssText)
}
})
}

4
tracker/tracker/src/webworker/MessageEncoder.gen.ts
View file

@ -1,4 +1,5 @@
// Auto-generated, do not edit
/* eslint-disable */
import * as Messages from '../common/messages.gen.js'
import Message from '../common/messages.gen.js'
@ -235,6 +236,5 @@ export default class MessageEncoder extends PrimitiveEncoder {
}
}
}
}