Devtools: Tabs instead of a back button?

[turt2live]

Description

I've only played with devtools for about 5 minutes, but I've found myself hitting the "back" button a lot. Maybe use tabs instead of buttons for the 3 operations? I wouldn't go as far as sub-tabs, but being able to go from "send an event" to "what is my power level again?" would be nice.

Version information

• Platform: web (in-browser)
• Browser: Chrome 60
• OS: Windows 10
• URL: riot.im/develop

[t3chguy]

an artistic paint mockup would be appreciated

[t3chguy]

(keep in mind am intending to add more than just the current 3 operations)

[turt2live]

Here's the atrocious HTML/CSS from Chrome:

<div class="mx_Dialog_content">
    <div class="buttons" style="
    border-bottom: 1px solid #76CFA6;
    margin-bottom: 8px;
">

    <button style="
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    background-color: #233e31;
    font-weight: 700;
    margin-right: 3px;
    font-size: 12px;
    padding: 6px;
    line-height: 4px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    margin-right: 3px;
">Send Custom Event</button><button style="
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    /* background-color: #233e31; */
    /* font-weight: 700; */
    margin-right: 3px;
    font-size: 12px;
    padding: 6px;
    line-height: 4px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    margin-right: 3px;
">Send State Event</button><button style="
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    /* background-color: #233e31; */
    /* font-weight: 700; */
    margin-right: 3px;
    font-size: 12px;
    padding: 6px;
    line-height: 4px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    margin-right: 3px;
">View Room State</button><button style="
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    /* background-color: #233e31; */
    /* font-weight: 700; */
    margin-right: 3px;
    font-size: 12px;
    padding: 6px;
    line-height: 4px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    margin-right: 3px;
">Account Data</button></div>

    <div class="pane">
        <div></div><div class="mx_TextInputDialog_label"><label for="eventType"><!-- react-text: 50 --> <!-- /react-text --><!-- react-text: 51 -->Event Type<!-- /react-text --><!-- react-text: 52 --> <!-- /react-text --></label></div><div><input id="eventType" class="mx_TextInputDialog_input" size="64"></div><div class="mx_TextInputDialog_label"><label for="evContent"><!-- react-text: 57 --> <!-- /react-text --><!-- react-text: 58 -->Event Content<!-- /react-text --><!-- react-text: 59 --> <!-- /react-text --></label></div><div><textarea id="evContent" class="mx_TextInputDialog_input" cols="63" rows="5">{

}</textarea></div>
    </div>
</div>

[t3chguy]

I like it but what if we get 10 tools?

[turt2live]

Reference: http://usabilitygeek.com/14-guidelines-for-web-site-tabs-usability/

After a point it might be worthwhile to group them. For example, Send Event is the default tab action with a dropdown for Send State Event. Then things like Account Operations don't have a default tab action, but have a dropdown for Account Data, Avatar, Display name, etc.

[t3chguy]

/me likes the idea :)