3 Pane Inspector on Vertical Monitor

[spencerthayer]

A large number of developers prefer to use a vertically-oriented monitor, as it provides a more efficient way to read code. However, as demonstrated in the first screenshot, the Firefox developer tools appear cluttered and disorganized when displayed in this orientation, especially when the three-panel layout is enabled. This makes the user interface difficult to use effectively. In the second screenshot, even with the right sidebar minimized as much as possible by default, a significant amount of screen real estate remains underutilized, resulting in a subpar user experience.

The question arises as to how this issue can be resolved? Here are some suggestions for how the Firefox development team could improve the user interface of their developer tools when used with a vertically-oriented monitor:

• Responsive layout: Implement a responsive layout that automatically adapts the UI elements to the available screen space, ensuring a cleaner and more organized interface in both horizontal and vertical orientations.
• Customizable panel arrangement: Allow users to rearrange the panels (e.g., Elements, Console, Network, etc.) to suit their preferences, enabling them to create a more efficient workspace tailored to their needs when using a vertical monitor.
• Collapsible panels: Introduce collapsible panels, allowing users to expand or collapse sections within the developer tools as needed, freeing up valuable screen real estate and reducing clutter.
  Improved tab management: Enhance tab management within the developer tools, enabling users to group, reorder, or stack tabs, making it easier to navigate between different sections when working with limited screen space.
• Optimized font size and spacing: Adjust the font size, line spacing, and padding for the developer tools when used in a vertical orientation to ensure better readability and use of screen space.
• Floating or detachable panels: Allow users to float or detach individual panels from the main developer tools window, providing flexibility to position and resize the panels according to their preferences.
• Preset layouts: Offer a set of pre-configured layouts optimized for different screen orientations and sizes, enabling users to quickly switch between them based on their current setup.

By implementing these changes, the Firefox development team can significantly enhance the usability of their developer tools for users with vertically-oriented monitors, providing a more efficient and enjoyable experience.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.