Enhancement: Make JSON view collapsible#1007
Merged
Merged
Conversation
…l into enhancement/json-view-collapsible
mohdsayed
reviewed
Mar 27, 2025
|
|
||
| useEffect(() => { | ||
| if (window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| setIsDarkMode(true); |
Collaborator
There was a problem hiding this comment.
If we want to make it dynamic, shouldn't we make use of an event listener? Something like this
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = (event: MediaQueryListEvent) => {
setIsDarkMode(event.matches);
};
setIsDarkMode(mediaQuery.matches);
mediaQuery.addEventListener('change', handleChange);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, []);
Contributor
Author
There was a problem hiding this comment.
The problem is that the rest of our extension doesn't work like that, so if the user changes the browser's theme while using the extension, the JSON view will be dynamic but other parts of the app won't:
IMO, I think we should create a task to make it dynamic everywhere in the app.
Collaborator
There was a problem hiding this comment.
Yeah, that should not be too difficult to achieve, we could do something like this
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
mediaQuery.addEventListener('change', (event) => {
const isDarkMode = event.matches;
if (isDarkMode) {
document.body.classList.add('dark');
document.body.classList.remove('light');
} else {
document.body.classList.add('light');
document.body.classList.remove('dark');
}
});
}
}, []);Let do that in a separate PR.
mohdsayed
approved these changes
Mar 31, 2025
mohdsayed
added a commit
that referenced
this pull request
Apr 2, 2025
* make json view collapsible and replace third party library * improve colors and fix dark mode * rename json theme file * fix import statement * fix puppeter and worker.js * expand only root object in json view * improve dark light color matching * further improve styles to match default devtools styling * Reduce the size of three dots in collapsed state * center loading text and center collapse/expand icons --------- Co-authored-by: sayedtaqui <sayedwp@gmail.com>
mohdsayed
added a commit
that referenced
this pull request
Apr 8, 2025
* make json view collapsible and replace third party library * improve colors and fix dark mode * rename json theme file * fix import statement * fix puppeter and worker.js * expand only root object in json view * improve dark light color matching * further improve styles to match default devtools styling * Reduce the size of three dots in collapsed state * center loading text and center collapse/expand icons --------- Co-authored-by: sayedtaqui <sayedwp@gmail.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Making JSON view collapsible and trying to match colors to the JSON view used in default Dev tools
Relevant Technical Choices
The third party library was replace to be able to acheive functionality
Testing Instructions
enhacement/json-view-collapsiblenpm run build:all && npm run dev:extAdditional Information:
Should be tested in light and dark theme and in all posible places where JSON is previewed
Screenshot/Screencast
Checklist