* Add very basic webgl support
* document the default
* only capture rr_dataURL in 2d canvas contexts
* rr_dataURL no longer part of webgl snapshot
* ignore __diff_output__ from jest-image-snapshot
* Rename generic "Monorepo" to "RRWeb Monorepo"
* Serialize WebGL variables
* Move rrweb test port number to unique port
rrweb-snapshot uses 3030, rrweb uses 3031
* Prepare for WebGL2
* Split up canvas replay and record webgl vars
* fix typo
* fix typo part 2
* fix typo
* Handle non-variables too
* provide correct context for warning
* (De)Serialize a lot of different objects
* monorepo root should be the first in the list
* Upgrade puppeteer to 11.x
* Correctly de-serialize webgl variables
* Encode arrayBuffers contents to base64
* rename contents to base64
* add webgl2 support and serialize HTMLImageElements
* Support serializing ImageData
* Correctly classify WebGL2 events
* Serialize format changed
* check if canvas has contents before we save the dataURL
* Remove blank dataURL
* reference original file not type defintion file
* update types
* rename code worspace
* update dependencies
* add spector to inspect webgl
* remove live server settings from code workspace
* Save canvas context in the node
Prevents from saving webgl canvases as 2d dataUrls
* remove extra braces
* add ICanvas type
* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas
* add snapshots and webgl 2 tests
* Upgrade to puppeteer 12.0.1
* Revert back to puppeteer 9.1.1
* Keep index order consistent between replay and record
* keep correct index order in webgl2
* fixed forgotten import
* buffer up pending canvas mutations
* unify the way webgl and webgl2 get patched
* fix parsing error
* Add types for serialize-args
* Add debugging for webgl replay
* Move start-server to utils
* turn off debug mode by default
* Move pendingCanvasMutations to local object and fix if/else statement
* Always save pending mutations
* only use assert snapshot as it's clearer whats going on
* Ugly fix for now
* Making the tests more DRY
* flush at the end of each request animation frame
* Looks like the promise made this test more predictable
* add waitForRAF
* Make nested iframe recording robust no matter the test speed
* mute noisy error in test
* force a requestAnimationFrame
* Bundle events within one frame together as much as possible
WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.
`newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.
* Rename RafStamps
* Override event.delay
* cleanup
* Add tests for addDelay
* Add webgl e2e test
* Remove settimeout
* DRY-up test
* Preload images in webgl
* Add e2e test for webgl image preloading
* don't turn on devtools by default!
* Remove spector
* close server after use
* Add imageMap parameter
* Make e2e image test more robust
* document debug mode
* cleanup
* WebGL recording in iframes & Safari 14 support
* fix tests
* don't save null objects as WebGLVar
* group (de)serialized webgl variables by context
* Fix test
* fix tests
* bundle webgl mutations on request animation frame
Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little
* Add canvas element to mutation observer file
* Add Canvas (Mutation) Manager
Allows you to do `record.freezePage()` and canvas events will get paused.
Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907
* cleanup
* Make sure the correct </body> gets replaced
* Perf: Speed up check to see if canvas is blank
* Access unpatched getImageData
* Use is2DCanvasBlank only for 2d context
* Only record canvas when recordCanvas is true
* Add very basic webgl support
* document the default
* only capture rr_dataURL in 2d canvas contexts
* rr_dataURL no longer part of webgl snapshot
* ignore __diff_output__ from jest-image-snapshot
* Rename generic "Monorepo" to "RRWeb Monorepo"
* Serialize WebGL variables
* Move rrweb test port number to unique port
rrweb-snapshot uses 3030, rrweb uses 3031
* Prepare for WebGL2
* Split up canvas replay and record webgl vars
* fix typo
* fix typo part 2
* fix typo
* Handle non-variables too
* provide correct context for warning
* (De)Serialize a lot of different objects
* monorepo root should be the first in the list
* Upgrade puppeteer to 11.x
* Correctly de-serialize webgl variables
* Encode arrayBuffers contents to base64
* rename contents to base64
* add webgl2 support and serialize HTMLImageElements
* Support serializing ImageData
* Correctly classify WebGL2 events
* Serialize format changed
* check if canvas has contents before we save the dataURL
* Remove blank dataURL
* reference original file not type defintion file
* update types
* rename code worspace
* update dependencies
* add spector to inspect webgl
* remove live server settings from code workspace
* Save canvas context in the node
Prevents from saving webgl canvases as 2d dataUrls
* remove extra braces
* add ICanvas type
* use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas
* add snapshots and webgl 2 tests
* Upgrade to puppeteer 12.0.1
* Revert back to puppeteer 9.1.1
* Keep index order consistent between replay and record
* keep correct index order in webgl2
* fixed forgotten import
* buffer up pending canvas mutations
* unify the way webgl and webgl2 get patched
* fix parsing error
* Add types for serialize-args
* Add debugging for webgl replay
* Move start-server to utils
* turn off debug mode by default
* Move pendingCanvasMutations to local object and fix if/else statement
* Always save pending mutations
* only use assert snapshot as it's clearer whats going on
* Ugly fix for now
* Making the tests more DRY
* flush at the end of each request animation frame
* Looks like the promise made this test more predictable
* add waitForRAF
* Make nested iframe recording robust no matter the test speed
* mute noisy error in test
* force a requestAnimationFrame
* Bundle events within one frame together as much as possible
WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames.
`newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events.
* Rename RafStamps
* Override event.delay
* cleanup
* Add tests for addDelay
* Add webgl e2e test
* Remove settimeout
* DRY-up test
* Preload images in webgl
* Add e2e test for webgl image preloading
* don't turn on devtools by default!
* Remove spector
* close server after use
* Add imageMap parameter
* Make e2e image test more robust
* document debug mode
* cleanup
* WebGL recording in iframes & Safari 14 support
* fix tests
* don't save null objects as WebGLVar
* group (de)serialized webgl variables by context
* Fix test
* fix tests
* bundle webgl mutations on request animation frame
Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little
* Add canvas element to mutation observer file
* Add Canvas (Mutation) Manager
Allows you to do `record.freezePage()` and canvas events will get paused.
Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907
* cleanup
* Make sure the correct </body> gets replaced
* Perf: Speed up check to see if canvas is blank
* Access unpatched getImageData
* Use is2DCanvasBlank only for 2d context
- this had the effect of making things visible which should have been invisible
- not sure what I was thinking with 'potentially non-standard browsers', maybe I thought I was covering return values from getPropertyValue of null or false. Could potentially add explicit tests for null or false, but as there is no evidence for these non-standard browsers, leaving as-is
* Hygiene: clean up the xhtml namespace attribute; this is an artefact of the `serializeToString` method which we are using (I think) to be consistent with whitespace and to clean up invalid attributes. I'm removing as was confused as am adding tests related to doctypes
* Record when a document is in `compatMode` and trigger this mode on the iframe upon replay
https://developer.mozilla.org/en-US/docs/Web/API/Document/compatMode
the included DOCTYPE was picked up from https://stackoverflow.com/questions/18976213/ - there may be better ways of triggering compatMode
* Don't write an extra DOCTYPE if there's one already present in the snapshot. Rely instead on whatever doctype is there to trigger the BackCompat mode
* Modify to write the correct doctype if we can sniff xhtml - don't have any evidence that this will make a difference
* Dev convenience: Ignore files generated by editors
* Typo fix
* Was getting a 2000ms timeout on the 'before' hook I believe
* Change certain tests to go directly to their localhost page instead of loading the html content programmatically in order to avoid triggering an incorrect BackCompat mode (incorrect in that the html content has a correct doctype)
* Add test based on motivating site that had images lined up in a square which were all different sizes; very old style percentage width/height attributes were doing the right thing in quirksmode, which is what we are testing for here
* Fixup rrweb test html to include a valid doctype and avoid BackCompat to ensure we're not accidentally testing against quirks modes. I didn't find an elegant way of avoiding the `BackCompat` when adding a minimal iframe, so some BackCompat has slipped in here, I don't think there's much harm
* `setTimeout` and `clearTimeout` are global functions. Think the window versions of them were for the following reason: https://stackoverflow.com/questions/60245787/
* Comments and extra test here helped me understand which inserts were expected and which are to be ignored
* Add a test for the style setProperty/removeProperty added in #671
* Add a test to ensure that listeners get added correctly in nested iframes - particularly important for those which rely on prototype monkeypatching
* Pass in the window object from the current iframe so that monkeypatching applies to all windows
* Satisfy typings
* No need to insert an iframe as there's one already set up for us
* Enable the console logger to also intercept log messages within iframes
* There's no tests for FontFace but presumably the monkeypatching here works similarly to the others
* Keep blocked root elements as placeholders
`serializeNode` turns blocked elements into placeholder nodes so we need to make sure we don't remove these elements from the mutations when they get added.
We do however need to keep removing any children of these blocked elements from getting added or mutated.
* Update packages/rrweb/src/record/mutation.ts
A previous patch has refactored the canvas image loading process
and it does not use <img /> anymore, so the counter is no longer
need.
commit: 4a72ff0b3cdf9920ea38bca8f69eedbfe52c99904a0036f3fc1cd7c1e0248a37R725
* Simplify css for click animation
* Refactor to transfer responsibility for casting multiple synchronous to index.ts from machine.ts (so they can be dealt with in bulk)
* During synchronous application of a batch of events, move the mouse to the last position so that it's in the correct place when the timer starts
- previous `needCastInSyncMode` added in 4bf533a675 meant that the isSync versions of MouseMove/TouchMove were being accidentally ignored
- each synchronous MouseMove would have resulted in a separate mouse position update
- the Click/TouchStart/TouchEnd events didn't have an async version
* The desktop pointer cursor is not representative of what is happening on a mobile device.
Instead, check a recording for any presence of a Touch event, and switch to a touch visualisation mode for the entire recording.
(for now, we use this mode even for mixed touch/mouse devices - this could be improved upon in future)
Show a round circle representing the users' finger which is visible only between TouchStart and TouchEnd events
Again this can be evolved upon, but this change should be a good start in the right direction.
* It's more correct to not have a transition for repositioning of touch as user can lift finger off screen and place elsewhere; however we can now have much smoother touch movement during the .touch-active phase as we know the finger is on the screen. This has a .25s delaying effect on the touch position which IMO is acceptable; e.g. scroll position can lag behind a touch movement and this seems to bring them more in sync
* Ensure we end up with the correct touch-active state after a series of synchronous events
* Important to discontinue tail animations and position transitions when user has lifted their finger and placed it into a new position. This is apparent in a replay session where the user is scrolling the page using repeated TouchMove bottom-to-top movements
* Simplify by unwrapping `mouseState.touchActive` and `mouseState.pos` into their own global vars
