Vue-devtools: Settings tab

[bartlomieju]

I'd like to open a discussion regarding Settings tab as mentioned in #543

I think it is high time to add Settings tab to devtools. Some of the things that could live there:

• component name formatting
• spacing of inspector contents
• Vuex mutations recording
• events recording

Devtools are under fast development these days, more and more options pop up. It causes cluttering of each respective tab. Creating separate tab for all customizable settings might be a good idea to make it easier to tweak devtools to your preference.

I'm happy to implement it once we settle on what goes to that tab.

[Akryum]

I would leave recording toggles in their respective tabs, because it also displays the information that recording is activated or not.

[posva]

@Akryum I think he refers to the starting state, without affecting existing toggles.

[Akryum]

Well, it's not the same? We already save the starting state.

[posva]

The use case may be:

• I have them off by default because I barely use them (unchecked in settings)
• In some app I toggle it on because I need it and forget about it
• When going back to another app that handles a lot of events, I would like it to be off because I specified it that way in settings

[Akryum]

So you mean a global default setting, and a per-app setting with toggled?

[posva]

Not necessarily, although that would be better I think because you might close the devtools in the middle of debugging, but initially I thought that if you close the devtools and reopen them, they should go back to the state specified in the settings

[Akryum]

That would make it worse than currently, because you will need to turn recording on each time you open the devtools.

[posva]

but I think that's what some people want because they regularly use a heave event-based app

[Akryum]

My comment was about:

I thought that if you close the devtools and reopen them, they should go back to the state specified in the settings

[Akryum]

What if we also provide a way to configure the devtools in the user app code?

[posva]

it could also work

[michalsnik]

I don't think it would be a preferable way of configuring devtools, it's configuration should be separated from the app. I also find it more natural to have a dedicated place where I can set all my preferences regarding devtools, and expect they won't change when I change project. Only I use my devtools so I have no interest in having different settings per project regarding them :) Though I might have different preferences regarding current machine I'm working on (I'm speaking about high density mode), on 13" macbook I might prefer it, but on 34" desktop not really, so being able to save those setting in local storage or somewhere we can keep it from disappearing has a lot of sense to me :) So it's a +1 from my side 👍

But we need to separate temporary settings from global ones. Recording seems like a temporary setting to me. If you want it to be enabled by default though you could set in settings, if not - leave temporary, and you'll have to toggle it yourself when needed :)

[AlexandreBonneau]

Ok so to pitch in, in that settings tab, there should be an 'Appearance' one.

Copied from issue #570:

What problem does this feature solve?

It would be great to be able to change the font size of the Vue devtools, as well as being able to define custom syntax highlighting color for the property labels, numbers, strings, types, null/undefined values, etc.

Currently when using the devtools in Firefox dev, you can see that the font is somewhat bigger than in the inspector, and that the color scheme is totally different.

What does the proposed API look like?

I envision a basic list of every element that could be styled, with a color picker / text field.
Ideally, an import/export configuration would be even better :)

[Akryum]

I think we can have 3 sections:

• General settings
• Global settings
• Per-site override (with add site button and search field)

Each section could have multiple tabs

[bartlomieju]

I really like the idea of per-site override! I could boost productivity immensely. I'll happily help out

[Akryum]

First iteration: https://github.com/vuejs/vue-devtools/commit/14e05a2e8c25539cc336a7f3f30e69dfcfa9a763

[Akryum]

We may evolve this in the future but I think current implementation is good enough for now.