Developing the Flexbox Inspector

The new Flexbox Inspector , created by Firefox DevTools , assists developers understand the sizing, positioning, plus nesting of Flexbox elements. You can test it out now in Firefox DevEdition or join us because of its official launch in Firefox 65 on January 29th.

The UX challenges of this device have been both frustrating and a lot of enjoyable for our team. Built on the simple concepts of the CSS Grid Inspector , all of us sought to expand on the likelihood of what a design tool could be. I’ m excited to share a behind-the-scenes look at the UX patterns and procedures that drove our design ahead.

Research and ideation

CSS Flexbox is an ever more popular layout model that helps in constructing robust dynamic page layouts. Nevertheless , it has a big learning curve— at the outset of this project, our team wasn’ capital t sure if we understood Flexbox ourself, and we didn’ t know what the primary challenges were. So , we collected data to help us design the fundamental feature set.

The earliest research on design-focused equipment included interviews with developer/designer buddies and community members who informed us they wanted to understand Flexbox better.

We furthermore ran a survey to position the Flexbox features folks many wanted to see. Min/max width plus height constraints received the highest score . The ranking of shrink/grow functions was also higher than we expected. This particular greatly influenced our plans, once we had originally assumed these more difficult features could wait for a version second . 0. It was clear however these were the details developers needed the majority of.

The majority of the early design work took the shape of spirited brainstorming sessions within video chat, text chat, plus email. We also consulted professionals: Daniel Holbert , our Gecko engine programmer who implemented the Flexbox specification for Firefox; Dave Geddes , CSS instructor and creator of the Flexbox Zombies course; and Jen Simmons , web specifications champion and designer of the Main grid Inspector.

The conversations with friendly and passionate co-workers were among the best parts of working on this particular project. We were able to deep-dive to the meaty questions, the nitty-gritty information, and the far-flung ideas about what might be possible. As a designer, it is incredible to work with developers and product supervisors who care so much about the style process and have so many great UX ideas.

Visualizing a brand new layout model

Right after our info-gathering, we worked to construct our own mental models of Flexbox.

While trying to learn Flexbox personally, I drew diagrams that display its different features.

My colleague Gabriel a new working model of a Flexbox highlighter that greatly influenced our initial launch version of the overlay. It’ s a monochrome design just like our Grid Inspector overlay, using a customizable highlight color to make it obviously visible on any website.

We use a dotted put together for the container, solid outlines with regard to items, and diagonal shading between items to represent the free room created by justify-content and margins.

We all got more adventurous with the Flexbox pane inside DevTools. The bend item diagram (or “ minimap” as we love to call it) displays a visualization of basis, shrink/grow, min/max clamping, and the final size— each attribute appearing only if it’ s relevant to the layout engine’ s sizing decisions.

Many other design concepts, such as these bend container diagrams , didn’ big t make it into the final MVP, however they helped us think through the options and may even get incorporated later.

Color-coded strategies of the rendering engine

With help from our Gecko technical engineers, we were able to display a graph with step-by-step descriptions of how the flex item’ s size is identified. Basic color-coding between the diagram plus chart helps to connect the two UIs.

Markup badges and other entry points

Flex badges in the markup watch serve as indicators of flex storage containers as well as shortcuts for turning in the in-page overlay. Early data demonstrates this is the most common way to turn on the particular overlay; the toggle switch within the Layout panel and the button close to the display: bend declaration in Guidelines are two other commonly used strategies. Having multiple entry points fits different workflows, which may focus on any of the three Inspector panels.

Appearing a brand new tool

Developing new tools can be risky because of the presumption of modifying developers’ daily workflows. One of my big anxieties was that we’ d spend hours and hours on a new feature only to conceal it away somewhere inside the complex megaplex that is Firefox Developer Equipment . This could result in people in no way finding it or not bothering in order to navigate to it.

In order to invite usage, we automatically display Flexbox info in the Layout -panel whenever a developer selects a bend container or product inside the markup view. The Design panel will usually be visible automatically in the 3rd Inspector column which usually we added in Firefox sixty two. From there, the developer can choose in order to dig deeper into flex visualizations and relationships.

Mobile-inspired navigation & structure

One brand new thing we’ re trying is really a page-style navigation in which the developer will go “ forward a page” in order to traverse down the tree (to kid elements), or “ back the page” to go up the tree (to parent elements). We’ re also utilizing a select menu for bouncing between sibling flex items. Influenced by mobile interfaces, the Opera hamburger menu, and other page-style UIs, it’ s a big experimental leaving from the simpler navigation normally utilized in DevTools.

One of the trickier parts of the framework was coming up with a cohesive design to get flex containers, items, and nested container-items. My colleague Patrick identified that we should have two types of bend panes inside the Layout panel, displaying whichever is relevant: an Item pane or even a Container pane. Both panes appear when the element is both the container and an item.

Tighter connection with in-page context

When hovering over component names inside the Flexbox panes, we all highlight the element in the web page, strengthening the connection between the code as well as the output without including extra ‘ inspect’ icons or other measures. I plan to introduce more of this kind of intuitive hover behavior into other areas of DevTools.

Tests and development

Right after lots of iteration, I created a high-fidelity prototype to share with our community stations. We received lots of helpful feedback that fed back into the design.

We had our first despoliation into formal user testing, that was helpful in revealing the complicated parts of our tool. We intend to continue improving our user study process for all new projects.

Later this 30 days, developers from our team will be composing a more technical deep-dive about the Flexbox Inspector. Meanwhile, here are some fun information from the dev process: Lots and lots of issues were created in Bugzilla to organize every implementation task from the project. Silly test pages, such as this one , created by my colleague Mike , were designed to test out every Flexbox situation. All of us regularly used the tool in Firefox Nightly with various sites in order to dog-food the tool and find insects.

What’ s following

2018 was a huge year for Firefox DevTools as well as the new Style Tools initiative. There have been hard-earned lessons and times associated with doubt, but in the end, we emerged together as a team and we shipped!

We have more work to complete in improving our UX procedures, stepping up our research capabilities, plus understanding the results of our decisions. We now have more tools to build— much better debugging tools for all types of CSS layouts and smoother workflows regarding CSS development. There’ s much more we can do to improve the Flexbox Inspector, but it’ s period for us to put it out to the world and see if we can confirm what we’ ve already constructed.

Now we need your own help. It’ s critical how the Flexbox Inspector gets feedback through real-world usage. Give it a rewrite in DevEdition , and let us know via Twitter or Talk if you run into any kind of bugs, ideas, or big is victorious.

____

Thanks to Martin Balfanz , Daniel Holbert , Patrick Brosset , and Michael jordan Witte for critiquing drafts of this article.

Victoria is a Portland-based UX designer with Mozilla who works on Firefox DevTools.

More articles by Victoria Wang…

If you liked Developing the Flexbox Inspector by Victoria Wang Then you'll love Web Design Agency Miami