Add recommendation to enable 'preserve log' #125
Conversation
| ?.addMessage(new SDK.ConsoleModel.ConsoleMessage( | ||
| target.model(SDK.RuntimeModel.RuntimeModel), Protocol.Log.LogEntrySource.Recommendation, | ||
| Protocol.Log.LogEntryLevel.Info, | ||
| '[React Native] Console messages are currently cleared upon DevTools disconnection. You can preserve logs in settings: ', |
There was a problem hiding this comment.
Do we support other languages besides English?
There was a problem hiding this comment.
Sorry missed this. Yes I should use an i18n string. Don't think we're currently doing any translation at the moment but good practice regardless. Will follow up (@huntie has some ideas on improving the text so I'll likely do it together)
| @@ -5,6 +5,7 @@ | |||
| */ | |||
|
|
|||
| :host { | |||
| display: block; | |||
There was a problem hiding this comment.
Needed for the existing animation util to work.
The util attempts to animation the background on a Shadow DOM element <setting-checkbox>:
But since the host element is not a block by default, the background wouldn't be applied:
https://stackoverflow.com/a/60702911
|
Could we also add that same message after the devices disconnects and logs are cleared? |
|
@vzaidman Ditto. Can we exclusively log this after the device disconnects? |
|
Displaying it after the disconnect is the important one despite the ugliness. I do think there's value in displaying it before, but we might as well skip it to not introduce extra deviations from the main branch. |
|
Let's do it. Besides the code, a heads up on the UI: the message will be covered up by the "disconnected" dialog. That's what made me add it to the dialog initially, but I agree adding more to the dialog could get bloated. |
EdmondChuiHW
force-pushed
the
preserve-log-prompt
branch
from
4bb9e94 to
0b36b7e
Compare
|
New UI: 
Now exclusively prints after console is cleared. PS: there's no Fusebox-target check. It's not upstream-able as-is. |
|
Nice! Can you actually click on "Show Settings"? |
@vzaidman Yup! With an animation to highlight the checkbox. Check out the video in the original description |
|
I'm asking because the popup seems to be hiding the logs at the moment. Can you close it? |
|
Yup. The "Dismiss" button in the dialog works the same way (doesn't clear this new message) |
Summary
When the web socket between CDT and dev-middleware is closed, CDT consults the "Preserve log" setting and clears log upon disconnection accordingly.
This can be unexpected for React Native targets, as users may expect to continue inspecting the console messages even if the native app has crashed.
In this PR, we print a recommendation for Fusebox targets with a button to direct the user to the specific setting.
Related: UI improvement for users viewing console messages under the disconnection state: #116
Test plan
Conenct to a Fusebox target. The recommendation should show up if the "Preserve log" setting is off:
Notice the yellow highlight, but it's not a warning (does not increase the warning counter in the top-right).
Clicking on the "show settings" link opens the Settings panel and highlights the checkbox with an animation
Video:
Screen.Recording.2024-10-14.at.22.07.35.mov
Upstreaming plan
devtools-frontendrepo. I've reviewed the contribution guide.