Consistency with Chrome Dev Tools

I’ve been working on redesigning the layout to be more consistent with Chrome dev tools, and thought it might be a good time to open a discussion about the various changes. **Note**: this is a work in progress.

## Visual Changes:

* Adds split view styles with header/body/footer content areas
* Adds icon buttons for “clear” and “toggle inspector”
* Moves the iframes dropdown to the top left
* Moves  filter/search/clear actions from the bottom of a panel to the top
* Adds a navigation-style split view to the data tab
* Simplifies notice styles
* Sharpens nav Icons
* Flattens gradients on active nav links and table headers (consistent with Chrome dev tools)

**Before**
![screen shot 2014-09-10 at 22 52 38](https://cloud.githubusercontent.com/assets/111734/4226141/e205590c-3934-11e4-8c2b-fe0890475815.png)

**After**
![screen shot 2014-09-10 at 21 23 20](https://cloud.githubusercontent.com/assets/111734/4226126/b99b8324-3934-11e4-9f96-0821fcff28d5.png)

**Before**
![screen shot 2014-09-10 at 22 54 15](https://cloud.githubusercontent.com/assets/111734/4226164/1a8c643c-3935-11e4-9407-4ed30ddb66d5.png)

**After**
![screen shot 2014-09-10 at 22 55 11](https://cloud.githubusercontent.com/assets/111734/4226170/2ba4db28-3935-11e4-9b5a-9566bfef9411.png)

**Before**
![screen shot 2014-09-10 at 22 56 15](https://cloud.githubusercontent.com/assets/111734/4226199/5eb21ea4-3935-11e4-9f4d-2f1e77ec4182.png)

**After**
![screen shot 2014-09-10 at 22 56 30](https://cloud.githubusercontent.com/assets/111734/4226202/64441048-3935-11e4-9066-c7820be7ebf2.png)

**Before**
![screen shot 2014-09-10 at 22 59 20](https://cloud.githubusercontent.com/assets/111734/4226277/19688134-3936-11e4-98f2-3e7b81c0cf4f.png)

**After**
![screen shot 2014-09-10 at 22 59 58](https://cloud.githubusercontent.com/assets/111734/4226279/1e3aa34a-3936-11e4-8d76-47aacd6207ff.png)


## Technical Changes:

* Adds components: `{{#resizable-column}}`, `{{sidebar-toggle}}`, and `{{clear-button}}`. Improves the `{{drag-handle}}` component
* Adds a [TabRoute](https://github.com/domchristie/ember-inspector/blob/dev-tools-layout/app/routes/tab.js) base route which renders a `ROUTE_NAME + "_toolbar"` if present
* Tidies up CSS, making classes more reusable

## Breakages:

- No inspector animation (perhaps a use case for `{{#liquid-if}}`?)
- [x] Failing command line tests re: Records are successfully listed and bound. They pass in the browser, so any help with this would be great.

## Todo:

- [x] Tidy the CSS
- [x] Make the inspector back button more “dev-tools-like”. Something like:
![screen shot 2014-09-10 at 22 48 08](https://cloud.githubusercontent.com/assets/111734/4226293/30b285ba-3936-11e4-96cc-562c430215c3.png)

Ah ok, I was adding it to the split-panel header. Adding it to the toolbar
seems to work…

On 14 September 2014 22:32, Teddy Zeenny <notifications@github.com> wrote:

> In css/toolbar.css:
>
> > @@ -0,0 +1,193 @@
> > +.toolbar {
> > +  display: -webkit-flex;
> > +  display: flex;
> > +  -webkit-flex-direction: row;
> > +  flex-direction: row;
> > +  align-items: center;
>
> The button doesn't disappear in my case, can you show me a screenshot of
> what you mean?
>
> —
> Reply to this email directly or view it on GitHub
> <https://github.com/emberjs/ember-inspector/pull/206/files#r17522729>.
>



-- 
Dom Christie
t: 07709143652
e: christiedom@gmail.com