feat(settings modal)

[HugoDF]

One for @KevinBatdorf would be great to get some design feedback from @stephenoldham as well

• add "info" icon + modal that opens with information
• for now I've disabled it on production builds since we don't have much content for it

Demo:

[KevinBatdorf]

This feels a little bit off to me. How would you feel about a more general settings area?

I kind of agree with you that we shouldn't need to have document features outright. Instead, we could disguise documentation as settings. If we decide allowing something like x-devtools-ignore we could instead include a settings area with something like

Enable advanced visibility mode
<small>This lets you hide or show components based on a specific selector you define.</small>
<input x-modal="ignoreSelector">

[HugoDF]

This feels a little bit off to me. How would you feel about a more general settings area?

I kind of agree with you that we shouldn't need to have document features outright. Instead, we could disguise documentation as settings. If we decide allowing something like x-devtools-ignore we could instead include a settings area with something like

Enable advanced visibility mode
<small>This lets you hide or show components based on a specific selector you define.</small>
<input x-modal="ignoreSelector">

Looks good to me 👍

As long as the users can learn about it through the UI it's all good.

Shall I close this or do you want to push those changes to this PR?

[KevinBatdorf]

I can push here. It's just boilerplate stuff though at the moment. Could we easily extract the panel.html file into separate files to manage it a little better? What would you suggest?

[KevinBatdorf]

I pushed the files here. Take a look and let me know if you want anything changed or removed

[HugoDF]

I can push here. It's just boilerplate stuff though at the moment. Could we easily extract the panel.html file into separate files to manage it a little better? What would you suggest?

🤔 there's a couple of options

1. We could switch to a templating system that allows partials, maybe nunjucks or https://edge.adonisjs.com/ (which has a blade-like syntax so I assume we could do partials)

We would need to mess around with the build setup in order to do that, probably by pre-processing the HTML. Probably removing the HTML from rollup copy step and running the templating library/some static site generator instead or creating a custom rollup plugin

2. we could import HTML partials into the JS file (devtools.js) as strings (using rollup + rollup plugin HTML) and then use x-html to inject the markup

3. we could split some of the markup into HTML partials, load them using fetch and inject using x-html

None of the 3 are ideal, 1. is best for performance (HTML would be fully generated at build time) but 2. and 3. will probably be easier to set up.

[HugoDF]

What's up with the massive package-lock diff?

Otherwise looks fine to me

[KevinBatdorf]

What's up with the massive package-lock diff?

I ran npm i to pull in that divider bar. I can remove it though

[HugoDF]

What's up with the massive package-lock diff?

I ran npm i to pull in that divider bar. I can remove it though

Weird, that didn't happen when I did the npm install are we running different versions of npm or something? I'm on v6 something

[HugoDF]

In any case, let's add a Cypress test for show/hide of the modal, merge this and we can edit the modal content in/after #109 ?

[KevinBatdorf]

Otherwise, let's add a Cypress test for show/hide of the modal, merge this and we can edit the modal content in #109 ?

I can add one now. If I can get it working. Maybe I just change the port number? Does it matter much to you?
Fixed it. If it ever happens to you (and you're on mac) run lsof -i :8080 then kill the processes running

1. is best for performance

I say let's go with #​1 then. Do you want me to set this up? Might not be until the weekend though. Want to use https://edge.adonisjs.com/ ?

[HugoDF]

@KevinBatdorf not too fussed if I'm honest, I think we can add some JS to the rollup config that will do the template compilation

But let's keep it as a separate bit of functionality, it's not technically a blocker for anything, just nicer development experience as the panel gets larger

[KevinBatdorf]

If that's more convenient. I think having it clean and separate early on will keep it from getting unwieldy fast. Especially if we plan to start adding more features like event monitoring, Spruce integration, etc

[HugoDF]

Last few comments

You're right about the pre-processing, we can create an issue to make it more visible/easy to track/discuss

[KevinBatdorf]

Can you check it again? I changed the IDs and updated the test

[HugoDF]

Nice one @KevinBatdorf