Developing the Flexbox Inspector

Screenshot showing the particular Flex highlighter, Flex Container lite, and Flex Item pane

Firefox DevEdition logo 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.

Flexbox survey results

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.

Early Flexbox diagram

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.

NYTimes header with Flexbox overlay

Youtube header along with Flexbox overlay

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.

Flex item diagram

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.

Early container plan design

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.

Flex item sizing steps

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.

Flex badges within the markup view

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.

Showing the Flexbox information automatically when selecting a Flex element

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.

Page-like navigation

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.

Layout panel displaying flex container and item info

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.

Hovering over a flex product name which triggers an emphasize in the page

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.

Different displays in the Flexbox Inspector prototype

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.

User testing video

usertesting. com asks participants to report their screens and think out loud as they try out software

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

Add a Comment

Your email address will not be published. Required fields are marked *