LeaVerou/dabblet — Issue #80: Rethink the views & tabs system
Author: LeaVerou
Created: 2011-12-21 01:13:32+00:00
State: open
Labels: Accepted, Feature

## 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`](http://dev.w3.org/csswg/css3-grid-align/#grid-template-property) 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)) {
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?