Sidebar panels misbehave when the panel is selected in the editor when UI blocking brick is in the renderer

[fregante]

It doesn't immediately cause a lot of trouble for the user, but is shows a logic/synchronization issues caused by the editor. Marking as low-priority for now.

With this content:

1. Create sidebar panel
2. Add "Prompt for input" brick

Then any sequence of:

• page editor open/closed
• side panel selected or not selected in the editor
• opening the sidebar before or after selecting the item in the editor

Repro 1: no panel shown when "previewing"

This is probably the most visible issue:

1. Select the side panel in the editor
2. The sidebar opens, but no panels are shown (they're shown when opening the sidebar normally)

https://user-images.githubusercontent.com/1402241/187069184-7f9985d2-44a3-467f-b4b6-a4d0bca2d3d6.mov

Repro 2: repeated bricks execution

1. Open sidebar with panel
2. Open page editor
3. Select panel extension
4. Click "Save"
5. The bricks are executed 2 or 3 times

https://user-images.githubusercontent.com/1402241/187069341-0bc41b60-fc27-40a0-ae5b-a8e7c1837009.mov

[twschiller]

Add "Prompt for input" brick

@fregante bricks that require user interaction are not allowed in renderer pipelines because the enduser doesn't have control over when the render occurs

For the "Modal form" brick we now show a validation/analysis engine error: https://github.com/pixiebrix/pixiebrix-extension/pull/4062

And there's a more general ticket here: https://github.com/pixiebrix/pixiebrix-extension/issues/4048. Originally I thought we could use the isPure flag, but we'll actually need to introduce another brick flag (see ticket)

In the future, these bricks would also be greyed out in the Add Brick modal https://github.com/pixiebrix/pixiebrix-extension/issues/3901

[fregante]

The issue isn't about the brick. The brick only makes the issue visible when the extension executes multiple times.

[twschiller]

@fregante based on first video, moving this into triage. The sidebar panel needs to be reliable when editing with the Page Editor. What is your perspective so far on the underlying messenger issue?

[fregante]

~~Strangely I can no longer reproduce the first issue. In the meanwhile I did drop the "Quickbar to Google Sheets" blueprint though (which was actually repeated 4 times in it). I wonder if that had any effect.~~

I can still reproduce the second one though:

Click on "Render Panel"

Click on "Save"

[fregante]

It seems "Repro 1" is still reproducible after a fresh build.

The interesting part is that the panel appears immediately after closing the editor:

https://user-images.githubusercontent.com/1402241/187077105-ee99bc99-9f88-4ad9-b700-f8460244a348.mov

For reference, I went back to eb4274bc (before the "instant sidebar" #4099), and both issues were already present.

[fregante]

Here's the log from a click on the Page Editor sidebar (which normally renders the panel):

vendors.js: Messenger: SHOW_SIDEBAR ↘️ received in contentScript {sender: {…}, args: Array(1), wasForwarded: false}
vendors.js: Messenger: RECORD_EVENT ↗️ sending message to runtime
vendors.js: Messenger: SIDEBAR_PING ↗️ sending message to runtime
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↘️ received in contentScript {sender: {…}, args: Array(0), wasForwarded: false}
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↗️ responding {value: Array(3)}
vendors.js: Messenger: GET_PAGE_STATE ↘️ received in contentScript {sender: {…}, args: Array(1), wasForwarded: false}
vendors.js: Messenger: GET_PAGE_STATE ↗️ responding {value: {…}}
vendors.js: Messenger: GET_PAGE_STATE ↘️ received in contentScript {sender: {…}, args: Array(1), wasForwarded: false}
vendors.js: Messenger: GET_PAGE_STATE ↗️ responding {value: {…}}
vendors.js: Messenger: CHECK_AVAILABLE ↘️ received in contentScript {sender: {…}, args: Array(1), wasForwarded: false}
vendors.js: Messenger: CHECK_AVAILABLE ↗️ responding {value: true}
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↘️ received in contentScript {sender: {…}, args: Array(0), wasForwarded: false}
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↗️ responding {value: Array(3)}
vendors.js: Messenger: RUN_EXTENSION_POINT_READER ↘️ received in contentScript {sender: {…}, args: Array(2), wasForwarded: false}

vendors.js: Messenger: RUN_EXTENSION_POINT_READER ↗️ responding {value: {…}}

sidebar.js:180613 Messenger: SIDEBAR_PING ↘️ received in extension {sender: {…}, args: Array(0), wasForwarded: false}
sidebar.js:180634 Messenger: SIDEBAR_PING ↗️ responding {value: undefined}

vendors.js: Messenger: SIDEBAR_PING ↘️ replied successfully undefined
vendors.js: Messenger: SIDEBAR_ACTIVATE_PANEL ↗️ sending message to runtime
vendors.js: Messenger: SHOW_SIDEBAR ↗️ responding {value: undefined}

vendors.js: Messenger: ENABLE_OVERLAY ↘️ received in contentScript {sender: {…}, args: Array(1), wasForwarded: false}
vendors.js: Messenger: ENABLE_OVERLAY ↗️ responding {value: undefined}

sidebar.js:180613 Messenger: SIDEBAR_ACTIVATE_PANEL ↘️ received in extension {sender: {…}, args: Array(2), wasForwarded: false}
sidebar.js:180634 Messenger: SIDEBAR_ACTIVATE_PANEL ↗️ responding {value: undefined}

vendors.js: Messenger: SIDEBAR_ACTIVATE_PANEL ↘️ replied successfully undefined
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↘️ received in contentScript {sender: {…}, args: Array(0), wasForwarded: false}
vendors.js: Messenger: INSTALLED_EXTENSION_POINTS ↗️ responding {value: Array(3)}

There's no SIDEBAR_RENDER_PANELS call

[github-actions[bot]]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions[bot]]

This issue was closed because it has been stale for 7 days with no activity.

[fregante]

Just for reference, there's a good chance that sidebar issues will be resolved via:

• https://github.com/pixiebrix/pixiebrix-extension/pull/7266