Ignition v3

[AlexVanderbist]

Hi! 👋

We're hoping to give Ignition a new look in Laravel 9 and we're looking for your feedback! You can find a link to a non-interactive mock-up here:

🔗 https://flareapp.io/ignition-redesign

Some of the most notable changes include:

• We've switched from a tabbed layout to a single page with active scroll indicator. The "request", "app", "user" and "context" tabs have been merged into one context section.
• More menu improvements: sticky behavior with the exception always in sight, an indicator for debug data and a simplified share dropdown.
• On bigger screens a 2 column layout will be used. You can use your browsers zoom function to switch between 2 column layout (zoom out) and 1 column layout (zoom in). We're still very on the fence about this one so feedback is welcome.
• A settings panel to change light/dark mode and your preferred editor. This is currently in Ignition as an optional config file you can add on your local machine (dotfile). In Ignition v3 we'll update that file for you if you change these settings.
• Support for previous (nested) exceptions.
• Solutions are now more compact. Multiple solutions are shown all at once in an expandable list.
• A Laravel docs link that leads to the relevant docs page for the exception you're seeing. For example an ItemNotFoundException will link to the Collections page in the Laravel docs. The docs link with show a red dot to indicate if a relevant page has been found.
• We're back-porting some features from Flare like SQL query formatting and highlighting for QueryExceptions, quick CURL snippets and more.
• We'll switch from VueJS to React and we'll use ShikiJS instead of HighlightJS to improve code highlighting on partial code snippets.
• Tons of tiny tweaks like: PHP and Laravel version indicator, cleaner stack frames, sticky side menu in the context section, tabbed debug section, ...

We'd love to hear from you! Any feedback, good or bad, is welcome in the comments below. 👇

Please try to keep the discussion civilised (duh) and related to Ignition's front-end. This update will rebuild Ignition's UI from scratch but wont touch most of its PHP code.

[erikgaal]

• On bigger screens a 2 column layout will be used. You can use your browsers zoom function to switch between 2 column layout (zoom out) and 1 column layout (zoom in). We're still very on the fence about this one so feedback is welcome.

The smallest breakpoint that enabled the two-column layout (1920px) feels a bit too small for me. Only ~50 characters are visible in the code snippet. Maybe you could tweak the ratio of the stack trace and snippet columns to fit more characters? See screenshot¹.

• A settings panel to change light/dark mode and your preferred editor. This is currently in Ignition as an optional config file you can add on your local machine (dotfile). In Ignition v3 we'll update that file for you if you change these settings.

I would suggest to 1) hydrate the light/dark setting from the system settings, and 2) store the preferences in the browser instead so they are applied over all my projects.

Footnotes

1. https://user-images.githubusercontent.com/1234268/141974352-d79c4b74-7c03-4b59-8149-95b2f5801a1a.png ↩

[AlexVanderbist]

Hey, thanks for the feedback! I agree on not having enough room with 2 columns on a 1920px screen.

I would suggest to 1) hydrate the light/dark setting from the system settings, and 2) store the preferences in the browser instead so they are applied over all my projects.

We would actually save the preferences in a global file (~/.ignition.config.php or something) so it will b available to Ignition in all projects. I don't think there's a way to store these settings globally in the browser and have them available for all local .test domains.

[shalvah]

We'll switch from VueJS to React and we'll use HighlightJS instead of ShikiJS to improve code highlighting on partial code snippets.

In my experience, Highlight.js is pretty poor in highlighting partial snippets. Most times, it only recognises two kinds of tokens. But I guess you guys have tested it out before deciding to switch.

[AlexVanderbist]

Oops, looks like we messed up there. We'll use ShikiJS instead of HighlightJS for exactly that reason 😅

[randohinn]

Currently way too small to read on mobile

But otherwise I really like the tasteful look. Maybe move the stacktrace up a bit?

[AlexVanderbist]

Thanks! Should've mentioned that it's not yet been optimised for mobile at all 😅

[bsormagec]

Hello @AlexVanderbist , i think it looks too much detailed you can use more compact version to manage. Try to move bottom horizontal tabs to top of page with vertical style and make page smaller it will be better to handle and follow debug details. Thank you it looks great 😊