1798774 - Every keystroke is shown as a change (no special characters involved)

Status: RESOLVED FIXED

(DevTools :: Inspector: Changes, defect, P2)

Description

[Victoria Wang [:victoria]]

Attachment: Screen Shot 2022-11-02 at 1.22.59 PM.png

Related to #1590031 and #1783893

STR:

• Go to https://k3vifk.csb.app/
• Open inspector and select the footer of the first modal (.spotlight-modal footer)
• Edit margin: 24px 0 0 0; by putting the cursor next to "24" and increasing the count with the up arrow key multiple times. (Bug also happens when changing the value with a number key)

Result:

• Every change to this value is shown in Changes as opposed to only the most recent one (see screenshot)

Comment 1

[Julian Descottes [:jdescottes]]

Similar to Bug 1783893 and Bug 1590031.
I checked back in ESR 102, before the fixes for the two bugs mentioned above landed, and this issue was already here, so not a recent regression.

Comment 3

[Julian Descottes [:jdescottes]]

Dedicated reducer is at https://searchfox.org/firefox-main/rev/ff87356d65bc2e9e7349ac3a24276696434f27fc/devtools/client/inspector/changes/reducers/changes.js#209

Comment 4

[Julian Descottes [:jdescottes]]

Reduced test case:

• data:text/html,<iframe src="data:text/html,1"></iframe><div style="margin: 10px 0 0 0">inspectme

This issue only happens when the test page contains an iframe. Then any update in the rule view will trigger many updates.

Comment 5

[Julian Descottes [:jdescottes]]

Whenever a target is created, we create a "watcher" for CSSChanges which listens to events on a singleton:

https://searchfox.org/firefox-main/rev/bd4c9573f3f4304df50e943f4358a7af7688b4c0/devtools/server/actors/resources/css-changes.js#19-36

class CSSChangeWatcher {
  constructor() {
    this.onTrackChange = this.onTrackChange.bind(this);
  }

  async watch(targetActor, { onAvailable }) {
    this.onAvailable = onAvailable;
    TrackChangeEmitter.on("track-change", this.onTrackChange);
  }

  onTrackChange(change) {
    this.onAvailable([change]);
  }

  destroy() {
    TrackChangeEmitter.off("track-change", this.onTrackChange);
  }
}

So when we have several targets in the same process, we emit duplicated resources for the same change.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1798774 - [devtools] Prevent sending duplicated CSS_CHANGE resources on pages with multiple documents. r=#devtools.

This updates all the call to the singleton TrackChangeEmitter trackChange method
to include a targetActor so it can then be checked against CSSChangeWatcher own
targetActor to only consume events from the same targetActor.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/e1486392e3a4
https://hg.mozilla.org/integration/autoland/rev/7c18baea2f78
[devtools] Prevent sending duplicated CSS_CHANGE resources on pages with multiple documents. r=devtools-reviewers,ochameau.

Comment 8

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/7c18baea2f78