Rethink the views & tabs system

[LeaVerou]

The problem

The current system of views and tabs has quite a few issues:

• Misleading: If you choose anything other than "separate", the labels of the tabs don't reflect the content shown.
• Not customizable enough:
  • A 50/50 split isn't always best
  • Some people want a view with all three panes (HTML, CSS and Result). I assume there is no best way to stack these that's good for every dabblet and every person and there are at least 26 possible ways to do them (even with evenly sizing them).

The idea we settle on needs to:

• Be easy for the user to set (taking into account the user is a front-end developer, so code-based ones are acceptable and cool, especially if based in CSS)
• Allow for almost every possible customization
• Have a compact UI that doesn't clutter the settings panel too much
• Be compact to store, preferably without introducing more key-value pairs than the current one.
• Be easily discoverable, although that's not a priority

Basically, the customizations that need to be allowed are:

• Which panes are displayed at the same time
• How to stack the panes in rows and columns
• How to split the width/height of the viewport into the displayed panes
• - This doesn't need to allow for all continuous values. I assume choosing a 10-percentile would be fine for almost anyone and much easier to store.

  An idea

I'm currently thinking of something that accepts a value similar to what the grid-template CSS value accepts, using the letters c for CSS, h for HTML and r for result. So the current views would be coded like:

• Horizontal split would be "r" "c" for the CSS tab,"r" "h"` for the HTML tab and "r" for the Result tab
• Vertical split would be "cr" for the CSS tab, "hr" for the HTML tab and "r" for the Result tab
• Separate would be "c" for the CSS tab, "h" for the HTML tab and "r" for the Result tab

With this it would be pretty easy to divide tabs in a different way than evenly. For example, if you want a vertical split with two thirds being CSS and one third being the result, it can easily be coded as "ccr". In the future, code about dragging could also be added, which snaps to tenths (to avoid overly verbose code) and generates the code automatically.

The UI could be a little arrow or eye icon on the right of every tab, with a textarea to set the layout for that tab. The title of the tab would then be extracted from the layout, with an algorithm like:

var title = "",
    titles = {c: 'CSS', h: 'HTML', r: 'Result'};

for (var letter in titles) {
    if (layout.indexOf(letter) > -1) {
        title += (title? '+' : '') + titles[letter];
    }
}

Since tabs will then lose their meaning as they are fully customizable, maybe there would also be a button there to delete and add tabs ("views").

One problem with that is that the current "Code over result" view cannot be represented in that format. Maybe it will be removed (I don't think it's being used much anyway) or a separate option could be added that generalizes it, making the result full page and the code occupying whatever it would occupy normally with the current layout. So, it would have the same layout code as the separate view.

Thoughts?

[bigbossSNK]

Here's a mockup, first with the settings tucked away,

and then expanded

Notes: Great interfaces don't misinterpret a user's actions. Currently, each time I switch browser tabs, dabblet thinks I want to change its settings. Move them left-side, no worries.

The tabs interface shouldn't be hard to code with a little pixie-dust. Erm, I mean JS.

[matthewlein]

I'm not sure that the views/arrangement necessarily needs to be stored with the dabblet data.

I think Dabblet use breaks down into 2 use-cases: creating and sharing.

For sharing, I think 95% will be sharing the preview view only. Then interested parties can check out the other views as they please. I don't see much use to share a dabblet in a specific order of views

For creating, I think user all have their own preferences of view order/arrangement. This could be stored locally only in localStorage, not part of the dabblet. Give people the option of 1,2, or 3 views, and horz/vert stack order. That way any dabblet opens with a user's prefs.

Each view could a tab in the upper right corner that says what its displaying (CSS/HTML, etc). I like that the header hides itself. Maybe the tabs could do the same. The tabs could be select menus that let you choose what they display, also stored locally.

I would want the view dividers to be draggable.

So data stored in the dabblet URL would just be its ID and whether its fullscreen preview or not. A normal Dabblet is viewed using the users prefs or the default 2-view split.

[cssagogo]

Love the tool. Don't love the navigation. The slide out tabs are not efficient. They should be attached to the edit boxes not the preview pane and they should always be present. I also think there should be a 3 panel view where you can see preview, html and css all together. Like jsfiddle minus the javascript window.