emberjs/ember-inspector — pull request #206 by domchristie (2014-09-10 22:09:10+00:00)
Title: 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}}`?)
* 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:

* Tidy the CSS
* 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)