Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#20811 closed defect (bug) (fixed)

Theme Customizer: Fix race condition in previewer and use message channels

Reported by: koopersmith Owned by: koopersmith
Milestone: 3.4 Priority: normal
Severity: major Version: 3.4
Component: Customize Keywords: has-patch needs-testing commit
Focuses: Cc:


In the customizer, if any settings are updated via JS (postMessage or otherwise) after a request is sent, the request becomes immediately outdated. This creates a race condition between the request and any JS-specific changes applied after the request is sent. To solve this problem, we should send the updated values to the preview frame once it renders.

This, however, requires several other things. First, it requires the preview frame to send a ready event to the parent once it has rendered. Second, it requires us to be able to distinguish messages across the same connection but sent to different windows. To control this, we can add a channel parameter to the Messenger object.

In general, this also has the beneficial side effect of making preview requests more robust.

Attachments (2)

20811.diff (14.1 KB) - added by koopersmith 3 years ago.
20811.2.diff (14.4 KB) - added by koopersmith 3 years ago.

Download all attachments as: .zip

Change History (6)

3 years ago

3 years ago

#1 @koopersmith
3 years ago

  • Keywords has-patch needs-testing added

#2 @nacin
3 years ago

20811.2.diff — complicated, but solid. Everything is snappy, and I can't trigger any race conditions based on slow refreshes. I've tested out all of the controls, and a few custom ones.

It also fixed an issue (for me) where a non-postMessage color wheel would not trigger a refresh if I dragged the color indicator, rather than clicking.

#3 @nacin
3 years ago

  • Keywords commit added

#4 @ryan
3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

In [20988]:

Theme Customizer: Fix race condition in previewer and use message channels. Props koopersmith. fixes #20811

Note: See TracTickets for help on using tickets.