WebView windows reload on refocus

[Prozilla]

Context: WebView is a new component that is a wrapper for an iframe and is inserted into an application window (as the windowContent property, so it is a child of the window component).

Steps to reproduce

1. Start a WebView application and any other application
2. Make changes in the WebView application
3. Switch to the other application and back

You'll see that the WebView will have reloaded and all your changes will be gone.

Tech analysis

Windows reload due to rerendering when order changes. WebViews lose their state because they use iframes instead of React components.

Assumption: this bug was caused by 80f6e8e

Potential solutions

• Remove WebViews and turn everything into a React component
  Pros: No rerendering issues
  Cons: lots of work, removes support for viewing web pages as an app
• Improve WebView component (planned)
  Pros: scalable, keeps support for web pages as app
  Cons: effort

[Prozilla]

Potential implementation for solution #2: Use memo to wrap the iframe to prevent re-rendering (https://react.dev/reference/react/memo).

[Prozilla]

Note: this also causes an additional bug that prevents a unfocused window from closing when the user clicks on it. The window becomes focused instead of closed. This can easily be fixed by only calling the refocus function if the click doesn't happen on the close button.

[Prozilla]

These bugs are caused by each item in the array re-rendering when the order changes (when the focused window changed), this is because the index was used as the key for each item in the array. This can be solved by using a unique id instead of the index.

I also recommend using this eslint rule to prevent these issues from reoccurring: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md#prevent-usage-of-array-index-in-keys-reactno-array-index-key

[Prozilla]

Note: this also causes an additional bug that prevents a unfocused window from closing when the user clicks on it. The window becomes focused instead of closed. This can easily be fixed by only calling the refocus function if the click doesn't happen on the close button.

This issue (unfocused windows not closing) has now been solved: 271338c

As for the other issue: Adding a unique key to the array item did not fix it.

Edit: further investigation has proven all previous assumption to be false. The webviews do not reload when they change from unfocused to focused. They only reload when the user starts dragging the window around.