React: React DevTools: Welcome screen keeps showing up

[proteriax]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
“Welcome to the new React DevTools!” message blocks the devtool panel every time the it is opened.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

1. Open a website with React with DevTools installed.
2. Open the Component tab.
3. Dismiss the welcome screen.
4. Close the devtools and open it again.

What is the expected behavior?
Dismissing the “Welcome to the new React DevTools!” message should be permanent.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
DevTools: 4.0.5
Chrome: 77.0.3865.35

[bvaughn]

Do you, by chance, have web storage disabled?

[proteriax]

I do block third party cookie access. Are DevTools preferences not stored in the extension storage itself?

[bvaughn]

DevTools _does_ store preferences in the extension itself, but the localStorage API is disabled (for the extension) when web storage is disabled. This was a surprise to me, and something I reported as Chromium bug.

Unfortunately the lack of a synchronous API for preferences- combined with some timing concerns in order to support features like reload-and-profile- makes the localStorage API pretty appealing for lightweight preferences (including "has seen" state like this).

Pretty unfortunate that it causes the Welcome overlay to always reappear though :( That's no good.

[proteriax]

That’s surprising. localStorage works for my extensions even with web storage disabled.

[bvaughn]

PRs are welcome if you'd like to dig in and lend a hand. :)

[proteriax]

Where’s the source code? It says it’s migrated to this repo but I don’t see it anywhere.

[proteriax]

Update: I fixed it by explicitly allowing chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/ to store data under chrome://settings/content/cookies

[bvaughn]

Where’s the source code? It says it’s migrated to this repo but I don’t see it anywhere.

It's still a work in progress, PR #16381

Glad you found a workaround for now!

[inoyakaigor]

I think this bug not only about welcome screen. Preferences also not saving:

[bvaughn]

That is correct. As the above discussion mentions, all preferences are stored in localStorage currently- which is blocked if you disable web storage in your settings.

[brianblakely]

I also disable third-party cookies (corporate policy), and the workaround posted earlier in the thread also worked for me, after restarting Chrome.

However, localStorage _does work_ on normal websites for me. So, if it is disabled, then it isn't across all apps (only extensions, perhaps).

[bvaughn]

Note to self: Maybe the best "solution" for this is to detect when localStorage is unavailable and...

1. Never show the welcome overlay (since it would always show)
2. Instead, display a dialog with an fb.me link that explains why web storage (or a workaround like the one above) is required for the extension to remember settings.

It might be annoying to show that dialog too, since we would _always_ show it, but I don't know a way around it that wouldn't require adding an additional (storage) permission which I would like to avoid.

[proteriax]

@bvaughn Can you post the link to the bug tracker on Chromium?

[bvaughn]

https://bugs.chromium.org/p/chromium/issues/detail?id=971848

[tyson-kubota]

May I suggest a general UX improvement to use banners instead of blocking modals? Then you could more gracefully show a "local storage unavailable" or "Welcome to React Dev Tools" as relevant, without blocking user input.

Or if a banner is too much effort to implement, maybe the "local storage disabled" message could live in the rightmost pane, where component details usually live? It seems to initialize as an empty area when you first open the tool, so it's currently unused real estate.

Example:

[gaearon]

I sent https://github.com/facebook/react/pull/16834 to remove the dialog.

[nstepien]

Chrome extensions should use the storage extension apis: https://developer.chrome.com/extensions/storage
It also allows for settings to be synced across devices.
I believe this permission won't display any warnings to users, so shouldn't be too scary to use. One caveat is that it's all async.

[proteriax]

@MayhemYDG They want a synchronous API.