977901 - DevTools - Implement split style editor

Status: RESOLVED DUPLICATE of bug 1121414

(DevTools :: General, defect)

Description

[Tim Nguyen :ntim]

Attachment: Chrome screenshot

It would be nice to be able to have the style editor and the inspector at the same time. Kinda like the split console.

Chrome has this and I really like the feature.

Some details about chrome's implementation :
- The editor automatically closes when switching to the sources tab (which makes sense)
- Chrome has a whole drawer with Console, Search, Emulation and Rendering (though I don't like Chrome's idea since those could be put in other better areas, I always hated chrome devtools for having everything everywhere)

-- 
Suggestions on the implementation :
- There could be some kind of switch between the split console and style editor on the right side of the split area.

Comment 1

[Tim Nguyen :ntim]

Attachment: Switcher concept (in console)

Here's a mockup of how the user could switch between the style editor and the console.
If I have some more time, I'll attach a mockup of this with the style editor.

Comment 2

[Tim Nguyen :ntim]

In case you don't see the switcher, it's on the right side of the split console.

Comment 3

[Brian Grinstead [:bgrins]]

Comment on attachment 8383591 [details]
Switcher concept (in console)

I like the idea of having the style editor opened directly under the inspector.  But it brings up some big UI questions like:
* When would you automatically switch to each panel?
* What happens if you switch to style editor tab while split panel is opened on console? Does the button disappear, get greyed out, let you click it?
* Where would the analogous button go in the style editor?

We would have to have a larger conversation about these things.  I can tell you that implementing this would be tricky for a couple of reasons:

1) The console panel does not *know* if it is in split mode or normal (full tab) mode.  We wouldn't want any extra buttons to the right of it in full tab mode, so we would somehow need to notify it and show/hide buttons.  Likewise, we would need to notify the style editor of the same thing.
2) The console panel is handled in a special way in the markup and js in order to allow it to show up in both modes.  And the logic would need to be updated (now, instead of a single bool for 'is split console opened', we would have a bool for 'is split panel opened' and probably a string for 'which panel is split panel opened to').  I would have to think more about it, but I'm thinking this would require some pretty big changes to the way this is happening in toolbox.js.
https://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.xul#78
https://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.js#312 (if you look at 'splitconsole' throughout that file, you will get an idea)

Comment 4

[Tim Nguyen :ntim]

When you'll switch to each panel (in the toolbox), the button will be grayed out, and the other tab will be selected (in the split panel).

The button would also be grayed out if you're in style editor and have the console tab in split panel.

If it can't detect the split mode, the switcher could instead overlay the split panel in the bottom right corner. The solution doesn't need any checking, but makes the switcher undiscoverable.

Comment 5

[Tim Nguyen :ntim]

Gonna try to tackle this tomorrow. I'm probably not gonna go with the switcher idea since it's quite complicated.

A few easier options :
- Add some tabs on top of the current split console and disable each of them when relevant
- Cut the split console horizontally in 2 parts, then put the split style editor the other side (although, some people don't need it, so it can be a waste of space)
- Add another button to open a split style editor (totally separate from the split console), I don't think that's a good idea though.

Comment 6

[Tim Nguyen :ntim]

Also, now that we have a pref that saves the height and the split console state. I might need to change the id of the split-console to split-drawer (split console will become the console frame then). Is it important to migrate users to a new prefname (a more relevant name) ?

Comment 7

[Brian Grinstead [:bgrins]]

I've thought about it, and until we land Bug 984880 and to allow better syncing between the inspector and style editor I'm thinking that showing them together in a split manner may cause some confusion / highlight the ways that the tools are not working together.  I mean that when I type `background: green` in the style editor it turns into `background: none repeat scroll 0% 0% #008000` in the inspector.  If I disable that property in the inspector / it remains in the style editor.  I wonder if putting them right next to each other might make that stuff more obvious / annoying?

If you still want to prototype this, I think cutting the space currently used by the split console into 2 with a splitter would be the best thing to do.  It would be then possible to just hide away the split console for testing and getting a feel for how it works.  I wouldn't worry about any of the id or pref names at this point.