diff --git a/.bowerrc b/.bowerrc
deleted file mode 100644
index 959e1696e7..0000000000
--- a/.bowerrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "directory": "bower_components",
-  "analytics": false
-}
diff --git a/.eslintrc.js b/.eslintrc.js
index 33d24c6746..855a39f3a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,6 +14,9 @@ module.exports = {
   env: {
     browser: true
   },
+  globals: {
+    basicContext: false
+  },
   rules: {
     /* Possible Errors */
 
@@ -122,6 +125,8 @@ module.exports = {
     'require-yield': 2,
     'template-curly-spacing': 2,
 
+    'ember/no-jquery': 'error',
+
     // Temporarily turn these off
     'ember/avoid-leaking-state-in-ember-objects': 'off',
     'ember/closure-actions': 'off',
diff --git a/.github_changelog_generator b/.github_changelog_generator
new file mode 100644
index 0000000000..195b3ef5d4
--- /dev/null
+++ b/.github_changelog_generator
@@ -0,0 +1 @@
+since-tag=v2.3.1
diff --git a/.travis.yml b/.travis.yml
index 30c95ba09e..f36d343aba 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -47,11 +47,9 @@ jobs:
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH=$HOME/.yarn/bin:$PATH
-  - yarn global add bower
 
 install:
   - yarn install --ignore-engines
-  - bower install
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO --skip-cleanup=true --- node_modules/.bin/ember test --filter="Ember Debug"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5a1c50291..2523959eb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,65 @@
+# Change Log
+
+## [Unreleased](https://github.com/emberjs/ember-inspector/tree/HEAD)
+
+[Full Changelog](https://github.com/emberjs/ember-inspector/compare/v3.0.0...HEAD)
+
+**Fixed bugs:**
+
+- "Cannot read property 'outlets' of undefined" On Ember 3.1-beta.1 [\#770](https://github.com/emberjs/ember-inspector/issues/770)
+- Data tab not working [\#739](https://github.com/emberjs/ember-inspector/issues/739)
+
+**Merged pull requests:**
+
+- Bump minor version to 3.1.0 [\#769](https://github.com/emberjs/ember-inspector/pull/769) ([teddyzeenny](https://github.com/teddyzeenny))
+- Remove jQuery from app [\#768](https://github.com/emberjs/ember-inspector/pull/768) ([rwwagner90](https://github.com/rwwagner90))
+
+## [v3.0.0](https://github.com/emberjs/ember-inspector/tree/v3.0.0) (2018-03-08)
+[Full Changelog](https://github.com/emberjs/ember-inspector/compare/v2.3.1...v3.0.0)
+
+**Implemented enhancements:**
+
+- Test against all supported Ember versions with ember-try [\#763](https://github.com/emberjs/ember-inspector/issues/763)
+
+**Fixed bugs:**
+
+- Empty mixins break component selector [\#752](https://github.com/emberjs/ember-inspector/issues/752)
+- Make View Tree support Glimmer components [\#750](https://github.com/emberjs/ember-inspector/issues/750)
+- Not visible in Chromium 62 or Vivaldi 1.12 [\#734](https://github.com/emberjs/ember-inspector/issues/734)
+
+**Closed issues:**
+
+- Remove ember\_debug/addons/ember-new-computed [\#758](https://github.com/emberjs/ember-inspector/issues/758)
+- Consider dropping Ember 1.x support / `ember-new-computed` [\#745](https://github.com/emberjs/ember-inspector/issues/745)
+- \[feature discussion\] ability to configure value for "Hide Empty Model Types" [\#741](https://github.com/emberjs/ember-inspector/issues/741)
+- Can not build current master [\#736](https://github.com/emberjs/ember-inspector/issues/736)
+- Support Firefox 57.0 \("Quantum"\) [\#735](https://github.com/emberjs/ember-inspector/issues/735)
+- Illegal invocation when using View tree. [\#718](https://github.com/emberjs/ember-inspector/issues/718)
+- Compatibility with new modules API \(Ember 2.16\) [\#707](https://github.com/emberjs/ember-inspector/issues/707)
+
+**Merged pull requests:**
+
+- Fix text field assertion [\#767](https://github.com/emberjs/ember-inspector/pull/767) ([rwwagner90](https://github.com/rwwagner90))
+- Add branches to build in Travis CI [\#766](https://github.com/emberjs/ember-inspector/pull/766) ([teddyzeenny](https://github.com/teddyzeenny))
+- Fix inspector reset on client app's reset and destroy [\#765](https://github.com/emberjs/ember-inspector/pull/765) ([teddyzeenny](https://github.com/teddyzeenny))
+- Bump version to 3.0.0 [\#764](https://github.com/emberjs/ember-inspector/pull/764) ([teddyzeenny](https://github.com/teddyzeenny))
+- Ember 3.0, dep updates, testing updates, and codemods [\#762](https://github.com/emberjs/ember-inspector/pull/762) ([rwwagner90](https://github.com/rwwagner90))
+- Remove computedPolyfill [\#761](https://github.com/emberjs/ember-inspector/pull/761) ([rwwagner90](https://github.com/rwwagner90))
+- Remove getTemplate stuff [\#760](https://github.com/emberjs/ember-inspector/pull/760) ([rwwagner90](https://github.com/rwwagner90))
+- WIP [\#759](https://github.com/emberjs/ember-inspector/pull/759) ([rwwagner90](https://github.com/rwwagner90))
+- Fix file paths displayed in the Routes tab [\#757](https://github.com/emberjs/ember-inspector/pull/757) ([omarhamdan](https://github.com/omarhamdan))
+- Add Documentation + Minor Cleanup [\#755](https://github.com/emberjs/ember-inspector/pull/755) ([omarhamdan](https://github.com/omarhamdan))
+- Allow for empty mixins [\#753](https://github.com/emberjs/ember-inspector/pull/753) ([XuluWarrior](https://github.com/XuluWarrior))
+- ember-qunit-codemod [\#751](https://github.com/emberjs/ember-inspector/pull/751) ([rwwagner90](https://github.com/rwwagner90))
+- Start converting to module imports [\#749](https://github.com/emberjs/ember-inspector/pull/749) ([rwwagner90](https://github.com/rwwagner90))
+- Fix loading main outlet [\#748](https://github.com/emberjs/ember-inspector/pull/748) ([rwwagner90](https://github.com/rwwagner90))
+- Drop ember-new-computed [\#746](https://github.com/emberjs/ember-inspector/pull/746) ([jacobq](https://github.com/jacobq))
+- UI Tweaks to Match Latest Inspectors [\#744](https://github.com/emberjs/ember-inspector/pull/744) ([nummi](https://github.com/nummi))
+- Update Inspect Views Icon [\#743](https://github.com/emberjs/ember-inspector/pull/743) ([nummi](https://github.com/nummi))
+- preserve model type hiding [\#742](https://github.com/emberjs/ember-inspector/pull/742) ([efx](https://github.com/efx))
+- Bump patch version to 2.3.1 [\#738](https://github.com/emberjs/ember-inspector/pull/738) ([teddyzeenny](https://github.com/teddyzeenny))
+- Avoid error in some environments [\#638](https://github.com/emberjs/ember-inspector/pull/638) ([pablobm](https://github.com/pablobm))
+
 # Ember Inspector Changelog
 
 ## Ember Inspector 2.3.1
@@ -285,3 +347,6 @@
 * Added a hint to refresh the page when the Inspector is open after a few promises were created and uncaught.
 * [BUGFIX] Error message about file:// protocol should only be shown on Chrome
 * [BUGFIX] Add missing ember.prod.js file in vendors
+
+
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
\ No newline at end of file
diff --git a/HISTORY.md b/HISTORY.md
new file mode 100644
index 0000000000..a86f99fa96
--- /dev/null
+++ b/HISTORY.md
@@ -0,0 +1,283 @@
+# Ember Inspector Changelog
+
+## Ember Inspector 2.3.0
+
+* [FEATURE] View tree filter support [#720](https://github.com/emberjs/ember-inspector/pull/720)
+* [IMPROVEMENT] Sort object inspector properties [#622](https://github.com/emberjs/ember-inspector/pull/622)
+* [BUGFIX] Fix the Ember Application's query selector [#730](https://github.com/emberjs/ember-inspector/pull/730)
+* [BUGFIX] Fix late Iframe detection in Chrome [#729](https://github.com/emberjs/ember-inspector/pull/729)
+* [INTERNAL] Update README and `package.json` to match recent updates [#724](https://github.com/emberjs/ember-inspector/pull/724)
+* [INTERNAL] Fix compressed `dist` directory [#722](https://github.com/emberjs/ember-inspector/pull/722)
+
+## Ember Inspector 2.2.0
+
+* [IMPROVEMENT] Rewrite the FF addon as a FF WebExtension [#715](https://github.com/emberjs/ember-inspector/pull/715)
+* [BUGFIX] Fix `event` variable name [#714](https://github.com/emberjs/ember-inspector/pull/714)
+
+## Ember Inspector 2.1.1
+
+* [BUGFIX] Only call Mixin#toString on Ember > 2.11 [#708](https://github.com/emberjs/ember-inspector/pull/708)
+* [BUGFIX] Fix unloading a record in the data tab [#709](https://github.com/emberjs/ember-inspector/pull/709)
+
+## Ember Inspector 2.0.4
+
+* [BUGFIX] Account for components that are appended manually [#610](https://github.com/emberjs/ember-inspector/pull/610)
+* [BUGFIX] Only list sub-routes if they are defined [#612](https://github.com/emberjs/ember-inspector/pull/612)
+
+## Ember Inspector 2.0.3
+
+* [BUGFIX] Fall back to memory caching if local storage is inaccessible [#592](https://github.com/emberjs/ember-inspector/pull/592)
+* [BUGFIX] Update outlet and template Glimmer code to match 2.9.beta-3  [#607](https://github.com/emberjs/ember-inspector/pull/607)
+
+## Ember Inspector 2.0.2
+
+* [BUGFIX] Rebuild columns when schema changes [#589](https://github.com/emberjs/ember-inspector/pull/589)
+* [BUGFIX] Update to new way to get the root element in Glimmer [#588](https://github.com/emberjs/ember-inspector/pull/588)
+
+## Ember Inspector 2.0.1
+
+* [BUGFIX] Disable source map for ember_debug.js [#583](https://github.com/emberjs/ember-inspector/pull/583)
+
+## Ember Inspector 2.0.0
+
+* [FEATURE] Added the ability to resize and toggle columns [#574](https://github.com/emberjs/ember-inspector/pull/574)
+* [IMPROVEMENT] Added Glimmer 2 support [#579](https://github.com/emberjs/ember-inspector/pull/579)
+* [IMPROVEMENT] Current route only checkbox persists between refreshes now [#568](https://github.com/emberjs/ember-inspector/pull/568)
+* [DOC] Fix typo in install instructions [#576](https://github.com/emberjs/ember-inspector/pull/576)
+* [DOC] Remove `grunt version` command from README [#540](https://github.com/emberjs/ember-inspector/pull/540)
+* [BUGFIX] The bookmarklet's `load_inspector.js` should not include ES6 [#546](https://github.com/emberjs/ember-inspector/pull/546)
+* [BUGFIX] Fix deprecated `window.postMessage` usage [#555](https://github.com/emberjs/ember-inspector/pull/555)
+* [INTERNAL] Upgrade Ember 1.12 -> Ember and Ember CLI 2.6 [#563](https://github.com/emberjs/ember-inspector/pull/563)
+* [INTERNAL] Use smoke-and-mirrors for lazy rendering [#563](https://github.com/emberjs/ember-inspector/pull/563)
+* [INTERNAL] Replace obsolete Broccoli plugins with "broccoli-funnel" [#571](https://github.com/emberjs/ember-inspector/pull/571)
+* [INTERNAL] Update ESLint and enable more rules [#572](https://github.com/emberjs/ember-inspector/pull/572)
+* [INTERNAL] Update build dependencies [#573](https://github.com/emberjs/ember-inspector/pull/573) [#578](https://github.com/emberjs/ember-inspector/pull/578)
+* [INTERNAL] Remove `list-view` in order to upgrade Ember [#543](https://github.com/emberjs/ember-inspector/pull/543)
+* [INTERNAL] Remove `dist-config.js` from index files [#542](https://github.com/emberjs/ember-inspector/pull/542)
+* [INTERNAL] Lock down jQuery version [#512](https://github.com/emberjs/ember-inspector/pull/512)
+* [INTERNAL] Upgrade babel-eslint [#515](https://github.com/emberjs/ember-inspector/pull/515)
+* [INTERNAL] remove duplicate key from eslintrc [#517](https://github.com/emberjs/ember-inspector/pull/517)
+* [INTERNAL] Port Gruntfile tasks to `grunt-jpm` to build a valid xpi for Firefox [#519](https://github.com/emberjs/ember-inspector/pull/519)
+
+## Ember Inspector 1.10.0
+
+* [IMPROVEMENT] Add [DEV] to the tab name for the inspector development version [#527](https://github.com/emberjs/ember-inspector/pull/527)
+* [BUGFIX] Fix PDF documents not opening on latest Chrome [#533](https://github.com/emberjs/ember-inspector/pull/533)
+* [INTERNAL] Publish multiple versions of the inspector to support all Ember versions [#535](https://github.com/emberjs/ember-inspector/pull/535)
+* [INTERNAL] Lock Ember version at 0.0.0 -> 2.6.0 and start supporting a new version at 2.7.0
+
+## Ember Inspector 1.9.5
+
+* [BUGFIX] filter out null/undefined nodes [#510](https://github.com/emberjs/ember-inspector/pull/510)
+* [BUGFIX] Fix websocket adapter ES6 conversion [#505](https://github.com/emberjs/ember-inspector/pull/505)
+
+## Ember Inspector 1.9.4
+
+* [BUGFIX] Launch inspector if document ready state is `interactive` [#500](https://github.com/emberjs/ember-inspector/pull/500)
+* [BUGFIX] [Ember 2.2] Use the new `resolveRegistration` to remove the deprecation warning [#499](https://github.com/emberjs/ember-inspector/pull/499) [#497](https://github.com/emberjs/ember-inspector/pull/497)
+* [BUGFIX] [Ember 2.2] Fix the view tree: use `scope.getSelf` when available to get the controller [#496](https://github.com/emberjs/ember-inspector/pull/496)
+* [INTERNAL] Tweak Firefox skeleton again for 44 and later [#491](https://github.com/emberjs/ember-inspector/pull/491)
+
+## Ember Inspector 1.9.3
+
+* [BUGFIX] Make sure we only reopen the app once [#482](https://github.com/emberjs/ember-inspector/pull/482)
+* [BUGFIX] Save `_super` before reopening [#481](https://github.com/emberjs/ember-inspector/pull/481)
+* [BUGFIX] Prevent errors when document.documentElement.dataset is not present [#475](https://github.com/emberjs/ember-inspector/pull/475)
+* [BUGFIX] [Ember 2.1] Prevent deprecation for initializer arguments [#476](https://github.com/emberjs/ember-inspector/pull/476)
+* [BUGFIX] [Ember 2.1] Update getState and getLocals for compatibility with canary [#467](https://github.com/emberjs/ember-inspector/pull/467)
+
+## Ember Inspector 1.9.2
+
+* [BUGFIX] Don't assume Ember.View exists (for Ember 2.0+) [#469](https://github.com/emberjs/ember-inspector/pull/469)
+* [IMPROVEMENT] Update Firefox skeleton for path change in Firefox 44+ [#470](https://github.com/emberjs/ember-inspector/pull/470)
+
+## Ember Inspector 1.9.1
+
+* [BUGFIX] Fix value of this after ES6 refactor [#450](https://github.com/emberjs/ember-inspector/pull/450)
+
+## Ember Inspector 1.9.0
+
+* [IMPROVEMENT] Speed up source map computation in deprecations pane [#439](https://github.com/emberjs/ember-inspector/pull/439)
+* [BUGFIX] Fix resolver and Ember.View errors in Ember 2.0 canary [#440](https://github.com/emberjs/ember-inspector/pull/440)
+* [BUGFIX] Fix components not being detected inside {{each}} helper [#428](https://github.com/emberjs/ember-inspector/pull/428)
+* [BUGFIX] Fix "object could not be cloned" error when prototype extensions are disabled [#435](https://github.com/emberjs/ember-inspector/pull/435)
+* [BUGFIX] Tomster should be not hidden if the Ember app contains an iframe [#436](https://github.com/emberjs/ember-inspector/pull/436)
+* [BUGFIX] Guard against renderNode.lastResult being null
+[#437](https://github.com/emberjs/ember-inspector/pull/437)
+* [BUGFIX] Fix object inspector toggle button being hidden when the object inspector is expanded.
+[#438](https://github.com/emberjs/ember-inspector/pull/438)
+* [BUGFIX] Prevent deprecations for Ember.keys on Ember 2.0.0 [#426](https://github.com/emberjs/ember-inspector/pull/426)
+* [INTERNAL] Rewrite the entire build process to targets all platforms in the same build [#374](https://github.com/emberjs/ember-inspector/pull/374)
+* [INTERNAL] Refactor all the code to use ES6 [#368](https://github.com/emberjs/ember-inspector/pull/368), [#370](https://github.com/emberjs/ember-inspector/pull/370), [#372](https://github.com/emberjs/ember-inspector/pull/372),
+[#376](https://github.com/emberjs/ember-inspector/pull/376)
+,
+[#387](https://github.com/emberjs/ember-inspector/pull/387)
+* [INTERNAL] Update the README deployment steps [#442](https://github.com/emberjs/ember-inspector/pull/442)
+* [INTERNAL] Use a new eslint config (eslint-config-ember) [#371](https://github.com/emberjs/ember-inspector/pull/371)
+* [INTERNAL] Fix the build commands in README [#385](https://github.com/emberjs/ember-inspector/pull/385)
+* [INTERNAL] Add CODE_OF_CONDUCT.md
+
+## Ember Inspector 1.8.3
+
+* [BUGFIX] Fix routes pane for Ember >= 1.13 [#399](https://github.com/emberjs/ember-inspector/pull/399)
+* [BUGFIX] Fix sending view model to console [#412](https://github.com/emberjs/ember-inspector/pull/412)
+* [BUGFIX] Guard against renderNode not being rendered yet [#417](https://github.com/emberjs/ember-inspector/pull/417)
+
+## Ember Inspector 1.8.2
+
+* [IMPROVEMENT] Add support for Ember Data >= 1.0.0-beta.19 [#383](https://github.com/emberjs/ember-inspector/pull/383)
+* [IMPROVEMENT] Add support for Ember >= 1.13.0 [#393](https://github.com/emberjs/ember-inspector/pull/393)
+  - Rename `Ember.Debug` to `Ember.EmberInspectorDebugger`
+  - Remove calls to `Ember.View.addMutationListener`
+  - Use the container's view registry instead of `Ember.View.views`
+
+## Ember Inspector 1.8.1
+
+* [IMPROVEMENT] Remove new CP syntax deprecation warning [#362](https://github.com/emberjs/ember-inspector/pull/362)
+
+## Ember Inspector 1.8.0
+
+* [IMPROVEMENT] The view tree now supports glimmer [#357](https://github.com/emberjs/ember-inspector/pull/357)
+* [IMPROVEMENT] Catch errors triggered by the inspector and show them as warnings [#343](https://github.com/emberjs/ember-inspector/pull/343)
+* [IMPROVEMENT] Handle and display errors caused by CP calculation in the object inspector [#342](https://github.com/emberjs/ember-inspector/pull/342)
+* [IMPROVEMENT] Stop deprecation logging in console and add one warning [#347](https://github.com/emberjs/ember-inspector/pull/347)
+* [IMPROVEMENT] Speed up the deprecations tab and source map computation [#358](https://github.com/emberjs/ember-inspector/pull/358)
+* [BUGFIX] Include ember-new-computed in ember-debug to remove CP syntax deprecations [#352](https://github.com/emberjs/ember-inspector/pull/352)
+* [INTERNAL] Tests now use async/await instead of async test helpers [#340](https://github.com/emberjs/ember-inspector/pull/340)
+* [INTERNAL] Use new CP syntax [#337](https://github.com/emberjs/ember-inspector/pull/337)
+* [INTERNAL] Add eslint [#340](https://github.com/emberjs/ember-inspector/pull/340)
+* [INTERNAL] Use broccoli-es6modules (esperanto) to transpile ember-debug [#328](https://github.com/emberjs/ember-inspector/pull/328)
+* [INTERNAL] Upgrade to ember-cli 0.2 and qunit 2.0 syntax [#330](https://github.com/emberjs/ember-inspector/pull/330) [#332](https://github.com/emberjs/ember-inspector/pull/332) [#293](https://github.com/emberjs/ember-inspector/pull/293)
+* [INTERNAL] Upgrade to Ember 1.10 [#329](https://github.com/emberjs/ember-inspector/pull/329)
+
+## Ember Inspector 1.7.3
+
+* [BUGFIX] Don't assume prototype extensions are enabled
+* [BUGFIX] Descriptor is no longer exposed on the Ember global
+* [BUGFIX] Handle case where container type no longer exists after reload
+
+## Ember Inspector 1.7.2
+
+* [BUGFIX] Fixed error when `define` is defined but `requireModule` is not
+* [BUGFIX] Fixed Ember 1.11 resolver bug that broke the routes tab
+* [BUGFIX] Only destroy the promise assembler if it exists
+* [BUGFIX] Use the new Ember load hook if available
+* [BUGFIX] Fixed issue with deferred apps getting mistakenly detected
+* [BUGFIX] ObjectInspector is not destroyed last on app reset
+* [BUGFIX] Use registry.resolve for latest Ember
+* Add grunt-cli to package.json
+* Do not minify code for FF addon
+
+## Ember Inspector 1.7.1
+
+* [BUGFIX] Fix the inspector for Ember < 1.4
+
+## Ember Inspector 1.7.0
+
+* [FEATURE] Added a new deprecations tab
+* [FEATURE] The inspector now works in tests
+* [FEATURE] Inspector state is now preserved across reloads
+* [IMPROVEMENT] Fixed object naming to account for module based names
+* [IMPROVEMENT] Moved the project to ember-cli
+* [IMPROVEMENT] Added a date picker to the object inspector
+* [IMPROVEMENT] Migrated to the new chrome extension options dialog
+* [BUGFIX] The data tab now detects models using pod structure
+* [BUGFIX] Prevent duplicate model types in the data tab
+* [BUGFIX] Improved startup so the inspector launches before the app
+* [BUGFIX] We now store `instrumentWithStack` in session storage for reloads
+* [BUGFIX] Ember.Debug as a namespace was changing inspected object names
+* [BUGFIX] The render performance tab now fails silently on render errors
+* [BUGFIX] Nested components no longer cause wrong views to be listed
+* [BUGFIX] Guarded against `event.data`in window messages being null
+* Use Ember's `ViewUtils` to get the `BoundingClientRect`
+* Ensured last Firefox addon-sdk is used
+* Added warning to the README about the use of window messages
+
+## Ember Inspector 1.6.4
+
+* [BUGFIX] Check type of EMBER_INSPECTOR_CONFIG
+
+## Ember Inspector 1.6.3
+
+* Use the new `Ember.libraries` api for newer Ember versions
+
+## Ember Inspector 1.6.2
+
+* Add dist directories to npm
+
+## Ember Inspector 1.6.1
+
+* [BUGFIX] Used general dot replacement in regex expressions to support nested routes
+* Used `document.defaultView.eval` to support FF >= 34
+* Added npm `prepublish` hook
+
+## Ember Inspector 1.6.0
+
+* [FEATURE] Added new "Container" tab
+* [FEATURE] Added `EmberInspector.inspect(obj)` to send objects to the inspector
+* [FEATURE] Views generated by `each` helper are now shown by default
+* [FEATURE] Added a link to Github issues
+* [FEATURE] Object inspector can now drill into arrays
+* [FEATURE] Added support for dates in the object inspector
+* [IMPROVEMENT] Main nav is now resizable
+* [IMPROVEMENT] Performance improvement by making promise tracing opt-in
+* [IMPROVEMENT] Model types are now sorted alphabetically
+* [IMPROVEMENT] Separated regular tabs from advanced tabs
+* [IMPROVEMENT] Detecting the application view no longer depends on `ember-application` class
+* [BUGFIX] `null` values now show up as "null" in the object inspector
+* [BUGFIX] Empty values in the object inspector should be editable
+* [BUGFIX] Support views without a controller
+* [BUGFIX] Firefox Tomster script no longer conflicts with WYSIWYGs
+* [BUGFIX] Fixed issue with toolbar and expanding the object inspector
+* [BUGFIX] Removed 404 image errors from tests
+
+## Ember Inspector 1.5.0
+
+* [IMPROVEMENT] Redesigned the UI to be more consistent with Chrome dev tools
+* [IMPROVEMENT] Improved "appeared" performance by instrumenting out of band
+* [BUGFIX] Fixed compatibility issue between promise inspection and Ember >= 1.7
+* [BUGFIX] Fixed view highlighting after metal-views upgrade
+* [BUGFIX] Fixed conflict between injecting Tomster script and file upload libraries
+
+## Ember Inspector 1.4.0
+
+* [FEATURE] Added bookmark option to support all browsers
+* [FEATURE] Added support for multiple iframes
+* [FEATURE] Added optional Tomster to Firefox
+* [FEATURE] Added "display current route" option to the routes tab
+* [IMPROVEMENT] Removed redundant prefixes from class names in the view tree
+* [IMPROVEMENT] Added search field to the render performance tab
+* [BUGFIX] Fixed current route match when resource same as route name
+* [BUGFIX] Fixed bug where a maximum of one namespace was assumed
+* [BUGFIX] Fixed render perf tab for apps with prototype extensions disabled
+* [BUGFIX] Routes tab no longer instantiates controllers
+* `data-ember-extension` is now only added to the HTML tag (instead of the body).
+
+## Ember Inspector 1.3.1
+
+* [IMPROVEMENT] Better view names in the render performance tab
+* [IMPROVEMENT] Object inspector now skips properties ending with `Binding`
+* [IMPROVEMENT] Removed several `Ember.View` private props from the Object Inspector
+* [BUGFIX] Fixed hierarchy issue in render perf tree causing duplication of views
+* [BUGFIX] Fixed scrollbar in render performance tab on OS X
+* [BUGFIX] Object inspector should not assume all `_debugInfo` props exist
+
+## Ember Inspector 1.3.0
+
+* [FEATURE] Added new "Render Performance" tab
+* [FEATURE] Added new column "Duration" to the view tree
+* [BUGFIX] Fixed bug with editing json strings in the object inspector
+* [BUGFIX] Fixed permission denied exception on Firefox >= 30
+* Removed dummy URLs created by Ember for error and loading routes
+* Removed methods from the object inspector
+
+## Ember Inspector 1.2.0
+
+* [FEATURE] Add info tab that shows a list of libraries used and their versions
+* [FEATURE] Add a Tomster icon to Chrome bar on any page with an Ember app (opt-in in chrome://extensions -> Ember Inspector -> options)
+* [FEATURE] Promise chains can now be collapsed / expanded. Fulfilled promises are collapsed by default. Rejected and pending are expanded.
+* Replaced $E button with "Stack trace" when the promise rejects with an instance of `Error`.
+* Added support for async loading of Ember (such as requirejs)
+* Added a hint to refresh the page when the Inspector is open after a few promises were created and uncaught.
+* [BUGFIX] Error message about file:// protocol should only be shown on Chrome
+* [BUGFIX] Add missing ember.prod.js file in vendors
diff --git a/README.md b/README.md
index 9e388b4ee2..6d1401bf93 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ OR:
 
 - Clone the repository
 - cd into the repo directory
-- run `yarn install && bower install`
+- run `yarn install`
 - run `yarn global add ember-cli`
 - run `yarn build` to build the `dist` directory
 - Visit `chrome://extensions` in Chrome
@@ -30,7 +30,7 @@ OR:
 
 - Clone the repository
 - cd into the repo directory
-- run `yarn install && bower install`
+- run `yarn install`
 - run `yarn global add ember-cli`
 - run `yarn build` to build the `dist` directory
 - Visit `about:debugging` in Firefox
@@ -41,7 +41,7 @@ OR:
 
 - Clone the repository
 - cd into the repo directory
-- run `yarn install && bower install`
+- run `yarn install`
 - run `yarn global add ember-cli`
 - run `yarn build` to build the `dist` directory
 - Visit `chrome://extensions` in Opera
@@ -69,7 +69,7 @@ javascript: (function() { var s = document.createElement('script'); s.src = 'htt
 
 ## Building and Testing:
 
-Run `yarn install && yarn global add ember-cli && yarn global add bower && bower install && grunt-cli` to install the required modules.
+Run `yarn install && yarn global add ember-cli && grunt-cli` to install the required modules.
 
 - `yarn build` to build the files in the `dist` directory
 - `yarn watch` To watch the files and re-build in `dist` when anything changes (useful during development).
diff --git a/app/adapters/web-extension.js b/app/adapters/web-extension.js
index 64219e24d2..b1c65bd842 100644
--- a/app/adapters/web-extension.js
+++ b/app/adapters/web-extension.js
@@ -16,6 +16,8 @@ export default BasicAdapter.extend({
     this._connect();
     this._handleReload();
     this._injectDebugger();
+    this._setThemeColors();
+
     return this._super(...arguments);
   },
 
@@ -55,6 +57,17 @@ export default BasicAdapter.extend({
     this.onResourceAdded();
   },
 
+  _setThemeColors() {
+    // Remove old theme colors to ensure switching themes works
+    document.body.classList.remove('theme--light', 'theme--dark');
+
+    let theme = 'theme--light';
+    if (chrome.devtools.panels.themeName === 'dark') {
+      theme = 'theme--dark';
+    }
+    document.body.classList.add(theme);
+  },
+
   onResourceAdded(/*callback*/) {},
 
   willReload() {
diff --git a/app/components/component-tree-item.js b/app/components/component-tree-item.js
new file mode 100644
index 0000000000..85f3d51ecc
--- /dev/null
+++ b/app/components/component-tree-item.js
@@ -0,0 +1,14 @@
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+import { htmlSafe } from '@ember/string';
+
+export default Component.extend({
+  item: null,
+  tagName: '',
+
+  labelStyle: computed('item.parentCount', function() {
+    let expanderOffset = this.get('item.hasChildren') ? 12 : 0;
+    let padding = this.get('item.parentCount') * 20 - expanderOffset + 25;
+    return htmlSafe(`padding-left: ${padding}px;`);
+  })
+});
diff --git a/app/components/date-property-field.js b/app/components/date-property-field.js
index 8c6afa1014..dc655e1297 100644
--- a/app/components/date-property-field.js
+++ b/app/components/date-property-field.js
@@ -16,7 +16,7 @@ export default DatePicker.extend({
   },
 
   openDatePicker: on('didInsertElement', function() {
-    once(this.$(), 'click');
+    once(this.element, 'click');
   }),
 
   keyUp(e) {
diff --git a/app/components/drag-handle.js b/app/components/drag-handle.js
index dd4cb1779e..ac200a8ce5 100644
--- a/app/components/drag-handle.js
+++ b/app/components/drag-handle.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { equal } from '@ember/object/computed';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
@@ -51,32 +50,18 @@ export default Component.extend({
   'on-drag'() {},
 
   startDragging() {
-    let $container = this.$().parent();
-    let $containerOffsetLeft = $container.offset().left;
-    let $containerOffsetRight = $containerOffsetLeft + $container.width();
-    let namespace = `drag-${this.get('elementId')}`;
-
-    this.sendAction('action', true);
+    let namespace = `drag-${this.elementId}`;
 
-    $('body').on(`mousemove.${namespace}`, e => {
-      let position = this.get('isLeft') ?
-        e.pageX - $containerOffsetLeft :
-        $containerOffsetRight - e.pageX;
+    this.setIsDragging(true);
 
-      position -= this.get('left');
-      if (position >= this.get('minWidth') && position <= this.get('maxWidth')) {
-        this.set('position', position);
-        this.get('on-drag')(position);
-      }
-    })
-      .on(`mouseup.${namespace} mouseleave.${namespace}`, () => {
-        this.stopDragging();
-      });
+    document.body.addEventListener(`mousemove.${namespace}`, this._mouseMoveHandler);
+    document.body.addEventListener(`mouseup.${namespace} mouseleave.${namespace}`, this.stopDragging);
   },
 
   stopDragging() {
-    this.sendAction('action', false);
-    $('body').off(`.drag-${this.get('elementId')}`);
+    this.setIsDragging(false);
+    document.body.removeEventListener(`.drag-${this.elementId}`, this._mouseMoveHandler);
+    document.body.removeEventListener(`.drag-${this.elementId}`, this.stopDragging);
   },
 
   willDestroyElement() {
@@ -97,5 +82,21 @@ export default Component.extend({
       string = '';
     }
     return htmlSafe(string);
-  })
+  }),
+
+  _mouseMoveHandler(e) {
+    let $container = this.element.parentNode;
+    let $containerOffsetLeft = $container.offset().left;
+    let $containerOffsetRight = $containerOffsetLeft + $container.width();
+
+    let position = this.get('isLeft') ?
+      e.pageX - $containerOffsetLeft :
+      $containerOffsetRight - e.pageX;
+
+    position -= this.get('left');
+    if (position >= this.get('minWidth') && position <= this.get('maxWidth')) {
+      this.set('position', position);
+      this.get('on-drag')(position);
+    }
+  }
 });
diff --git a/app/components/draggable-column.js b/app/components/draggable-column.js
index 79e56a1c68..7fc4b80e80 100644
--- a/app/components/draggable-column.js
+++ b/app/components/draggable-column.js
@@ -9,16 +9,15 @@ export default Component.extend({
   tagName: '', // Prevent wrapping in a div
   side: 'left',
   minWidth: 60,
-  setIsDragging: 'setIsDragging',
 
   /**
    * Injected `layout` service. Used to broadcast
    * changes the layout of the app.
    *
-   * @property layout
+   * @property layoutService
    * @type {Service}
    */
-  layout: service(),
+  layoutService: service('layout'),
 
   /**
    * Trigger that the application dimensions have changed due to
@@ -28,14 +27,10 @@ export default Component.extend({
    * @method triggerResize
    */
   triggerResize() {
-    this.get('layout').trigger('resize', { source: 'draggable-column' });
+    this.get('layoutService').trigger('resize', { source: 'draggable-column' });
   },
 
   actions: {
-    setIsDragging(isDragging) {
-      this.sendAction('setIsDragging', isDragging);
-    },
-
     /**
      * Action called whenever the draggable column has been
      * resized.
diff --git a/app/components/main-content.js b/app/components/main-content.js
index 82ea6032e4..488d3ef80c 100644
--- a/app/components/main-content.js
+++ b/app/components/main-content.js
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { schedule } from '@ember/runloop';
-import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
@@ -16,9 +15,7 @@ export default Component.extend({
   layoutService: service('layout'),
 
   didInsertElement() {
-    $(window).on(`resize.view-${this.get('elementId')}`, () => {
-      this.get('updateHeightDebounce').perform();
-    });
+    window.addEventListener(`resize.view-${this.elementId}`, this._performUpdateHeight);
     schedule('afterRender', this, this.updateHeight);
     return this._super(...arguments);
   },
@@ -35,6 +32,10 @@ export default Component.extend({
     this.updateHeight();
   }).restartable(),
 
+  _performUpdateHeight() {
+    this.get('updateHeightDebounce').perform();
+  },
+
   /**
    * Update the layout's `contentHeight` property.
    * This will cause the layout service to trigger
@@ -47,11 +48,11 @@ export default Component.extend({
    * @method updateHeight
    */
   updateHeight() {
-    this.get('layoutService').updateContentHeight(this.$().height());
+    this.get('layoutService').updateContentHeight(this.element.clientHeight);
   },
 
   willDestroyElement() {
-    $(window).off(`.view-${this.get('elementId')}`);
+    window.removeEventListener(`.view-${this.elementId}`, this._performUpdateHeight);
     return this._super(...arguments);
   }
 });
diff --git a/app/components/mixin-property.js b/app/components/mixin-property.js
index 27954c2dc1..92af19ceb3 100644
--- a/app/components/mixin-property.js
+++ b/app/components/mixin-property.js
@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
 import Component from '@ember/component';
-import { equal, alias } from '@ember/object/computed';
+import { equal, alias, and } from '@ember/object/computed';
 
 export default Component.extend({
   isEdit: false,
@@ -17,19 +17,31 @@ export default Component.extend({
   txtValue: null,
   dateValue: null,
 
-  isCalculated: computed('model.value.type', function() {
-    return this.get('model.value.type') !== 'type-descriptor';
+  isCalculated: computed('valueType', function() {
+    return this.get('valueType') !== 'type-descriptor';
   }),
 
-  isEmberObject: equal('model.value.type', 'type-ember-object'),
+  valueType: alias('model.value.type'),
+
+  isService: alias('model.isService'),
+
+  isOverridden: alias('model.overridden'),
+
+  isEmberObject: equal('valueType', 'type-ember-object'),
 
   isComputedProperty: alias('model.value.computed'),
 
-  isFunction: equal('model.value.type', 'type-function'),
+  isFunction: equal('valueType', 'type-function'),
+
+  isArray: equal('valueType', 'type-array'),
 
-  isArray: equal('model.value.type', 'type-array'),
+  isDate: equal('valueType', 'type-date'),
 
-  isDate: equal('model.value.type', 'type-date'),
+  isDepsExpanded: false,
+
+  hasDependentKeys: and('model.dependentKeys.length', 'isCalculated'),
+
+  showDependentKeys: and('isDepsExpanded', 'hasDependentKeys'),
 
   _parseTextValue(value) {
     let parsedValue;
@@ -48,6 +60,9 @@ export default Component.extend({
   },
 
   actions: {
+    toggleDeps() {
+      this.toggleProperty('isDepsExpanded');
+    },
     valueClick() {
       if (this.get('isEmberObject') || this.get('isArray')) {
         this.get('mixin').send('digDeeper', this.get('model'));
@@ -64,7 +79,7 @@ export default Component.extend({
       }
 
       let value = this.get('model.value.inspect');
-      let type = this.get('model.value.type');
+      let type = this.get('valueType');
       if (type === 'type-string') {
         value = `"${value}"`;
       }
diff --git a/app/components/property-field.js b/app/components/property-field.js
index 0e117400f8..74b2bd5011 100644
--- a/app/components/property-field.js
+++ b/app/components/property-field.js
@@ -12,7 +12,7 @@ export default TextField.extend({
   properyComponent: null,
 
   didInsertElement() {
-    this.$().select();
+    this.element.select();
     return this._super(...arguments);
   },
 
diff --git a/app/components/record-item.js b/app/components/record-item.js
index d7d79ba8e1..76ea9a6bb4 100644
--- a/app/components/record-item.js
+++ b/app/components/record-item.js
@@ -5,7 +5,7 @@ import { isEmpty } from '@ember/utils';
 const COLOR_MAP = {
   red: '#ff2717',
   blue: '#174fff',
-  green: '#006400'
+  green: '#009900'
 };
 
 export default Component.extend({
diff --git a/app/components/resizable-column.js b/app/components/resizable-column.js
index 6781862581..a776627edc 100644
--- a/app/components/resizable-column.js
+++ b/app/components/resizable-column.js
@@ -12,7 +12,7 @@ export default Component.extend({
 
   didInsertElement() {
     if (!this.get('width')) {
-      this.set('width', this.$().width());
+      this.set('width', this.element.clientWidth);
     }
   }
 });
diff --git a/app/components/search-field.js b/app/components/search-field.js
new file mode 100644
index 0000000000..f9108ca8c1
--- /dev/null
+++ b/app/components/search-field.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  actions: {
+    clear() {
+      this.element.querySelector('input').focus();
+      this.set('value', '');
+    }
+  }
+});
diff --git a/app/components/x-list.js b/app/components/x-list.js
index ec4fcd6466..bfe553149c 100644
--- a/app/components/x-list.js
+++ b/app/components/x-list.js
@@ -1,9 +1,8 @@
 import Component from '@ember/component';
 import { run, scheduleOnce } from '@ember/runloop';
-import $ from 'jquery';
 import { task, timeout } from 'ember-concurrency';
 import ResizableColumns from 'ember-inspector/libs/resizable-columns';
-import LocalStorageService from "ember-inspector/services/storage/local";
+import LocalStorageService from 'ember-inspector/services/storage/local';
 import { inject as service } from '@ember/service';
 import { readOnly, reads } from '@ember/object/computed';
 
@@ -27,12 +26,12 @@ export default Component.extend({
 
   /**
    * Layout service used to listen to changes to the application
-   * layout such as resizing of the main nav or object inspecto.
+   * layout such as resizing of the main nav or object inspector.
    *
-   * @property layout
+   * @property layoutService
    * @type {Service}
    */
-  layout: service(),
+  layoutService: service('layout'),
 
   /**
    * Indicate the table's header's height in pixels.
@@ -140,8 +139,8 @@ export default Component.extend({
     this.onResize = () => {
       this.get('debounceColumnWidths').perform();
     };
-    $(window).on(`resize.${this.get('elementId')}`, this.onResize);
-    this.get('layout').on('resize', this.onResize);
+    window.addEventListener(`resize.${this.get('elementId')}`, this.onResize);
+    this.get('layoutService').on('resize', this.onResize);
     return this._super(...arguments);
   },
 
@@ -164,12 +163,19 @@ export default Component.extend({
       arr.push({
         name,
         title: name,
-        fun: run.bind(this, this.toggleColumnVisibility, id)
+        fn: run.bind(this, this.toggleColumnVisibility, id)
       });
       return arr;
     }, []);
 
-    this.$('.list__header').contextMenu(menu, { triggerOn: 'contextmenu' });
+    this.showBasicContext = (e) => {
+      basicContext.show(menu, e);
+    };
+
+    const listHeader = this.element.querySelector('.list__header');
+    if (listHeader) {
+      listHeader.addEventListener('contextmenu', this.showBasicContext);
+    }
   },
 
   /**
@@ -183,7 +189,10 @@ export default Component.extend({
    */
   toggleColumnVisibility(id) {
     this.resizableColumns.toggleVisibility(id);
-    this.$('.list__header').contextMenu('destroy');
+    const listHeader = this.element.querySelector('.list__header');
+    if (listHeader) {
+      listHeader.removeEventListener('contextmenu', this.showBasicContext);
+    }
     this.setupContextMenu();
   },
 
@@ -195,7 +204,7 @@ export default Component.extend({
    * @property debounceColumnWidths
    * @type {Object} Ember Concurrency task
    */
-  debounceColumnWidths: task(function * () {
+  debounceColumnWidths: task(function* () {
     yield timeout(100);
     this.resizableColumns.setTableWidth(this.getTableWidth());
   }).restartable(),
@@ -207,9 +216,12 @@ export default Component.extend({
    * @method willDestroyElement
    */
   willDestroyElement() {
-    $(window).off(`.${this.get('elementId')}`);
-    this.$('.list__header').contextMenu('destroy');
-    this.get('layout').off('resize', this.onResize);
+    window.removeEventListener(`.${this.elementId}`, this.onResize);
+    const listHeader = this.element.querySelector('.list__header');
+    if (listHeader) {
+      listHeader.removeEventListener('contextmenu', this.showBasicContext);
+    }
+    this.get('layoutService').off('resize', this.onResize);
     return this._super(...arguments);
   },
 
@@ -220,7 +232,7 @@ export default Component.extend({
    * @return {Number} The width in pixels
    */
   getTableWidth() {
-    return this.$('.list__table-container').innerWidth();
+    return this.element.querySelector('.list__table-container').clientWidth;
   },
 
   /**
diff --git a/app/controllers/component-tree.js b/app/controllers/component-tree.js
new file mode 100644
index 0000000000..77cebefccc
--- /dev/null
+++ b/app/controllers/component-tree.js
@@ -0,0 +1,228 @@
+import {
+  get,
+  computed
+} from '@ember/object';
+import Controller, {
+  inject as controller
+} from '@ember/controller';
+import searchMatch from 'ember-inspector/utils/search-match';
+import {
+  notEmpty,
+} from '@ember/object/computed';
+import {
+  isEmpty
+} from '@ember/utils';
+
+import ComponentViewItem from 'ember-inspector/models/component-view-item';
+
+/**
+ * Takes the `viewTree` from `view-debug`'s `sendTree()` method, and recursively
+ * flattens it into an array of `ComponentViewItem` objects
+ * @param {string} searchValue The value of the search box
+ * @param {*} treeNode The node in the viewTree
+ * @param {ComponentViewItem} parent The parent `ComponentViewItem`
+ * @param {number} parentCount The component hierarchy depth
+ * @param {boolean} parentMatched Whether the parent node is initially set to display
+ * @param {Array<ComponentViewItem>} list The accumulator, gets mutated in each call
+ */
+const flattenSearchTree = (
+  searchValue,
+  treeNode,
+  parent,
+  parentCount,
+  parentMatched,
+  list
+) => {
+  let activeSearch = !isEmpty(searchValue);
+  let searchMatched = activeSearch ?
+    searchMatch(get(treeNode, 'value.name'), searchValue) :
+    true;
+
+  let viewItem = ComponentViewItem.create({
+    view: treeNode.value,
+    parent,
+    parentCount,
+    searchMatched,
+    activeSearch,
+    expanded: !activeSearch,
+    hasChildren: treeNode.children.length > 0,
+  });
+
+  // remember if there is no active search, searchMatched will be true
+  let shouldAddItem = searchMatched || parentMatched;
+  if (shouldAddItem) {
+    list.push(viewItem);
+  }
+
+  let newParentCount = shouldAddItem ? parentCount + 1 : 0;
+
+  treeNode.children.forEach(child => {
+    flattenSearchTree(
+      searchValue,
+      child,
+      viewItem,
+      newParentCount,
+      shouldAddItem,
+      list
+    );
+  });
+  return list;
+};
+
+export default Controller.extend({
+  application: controller(),
+  pinnedObjectId: null,
+  inspectingViews: false,
+  components: true,
+  options: {
+    components: true,
+  },
+
+  /**
+   * Bound to the search field to filter the component list.
+   *
+   * @property searchValue
+   * @type {String}
+   * @default ''
+   */
+  searchValue: '',
+
+  activeSearch: notEmpty('searchValue'),
+
+  /**
+   * The final list that the `{{vertical-collection}}` renders
+   * is created in three stages:
+   * 1. The `viewArray` is recalculated When the controller's `viewTree` is set by the route, or when
+   *    a user updates the search box.
+   * 2. The `filteredArray` CP takes the `viewArray` and caches the expanded state for each item.
+   *    This keeps the tree from suddenly re-expanding if the `viewTree` updates after users have
+   *    collapsed some nodes.
+   * 3. Once the list is rendered, when users expand/collapse a node that action directly
+   *    toggles the `expanded` property on each item, which makes `visible` recompute.
+   *
+   * This could probably happen in one big function, but for the time being its split in the
+   * interest of clarity rather than performance (even if the extra CPs might avoid doing some extra
+   * work when users expand/contract tree nodes)
+   */
+  displayedList: computed('filteredArray.@each.visible', function () {
+    return this.get('filteredArray').filterBy('visible');
+  }),
+
+  filteredArray: computed('viewArray.[]', function () {
+    let viewArray = this.get('viewArray');
+    let expandedStateCache = this.get('expandedStateCache');
+    viewArray.forEach(viewItem => {
+      let cachedExpansion = expandedStateCache[viewItem.view.objectId];
+      if (cachedExpansion !== undefined) {
+        viewItem.set('expanded', cachedExpansion);
+      } else {
+        expandedStateCache[viewItem.view.objectId] = viewItem.expanded;
+      }
+    });
+
+    return viewArray;
+  }),
+
+  viewArray: computed('viewTree', 'searchValue', function () {
+    let tree = this.get('viewTree');
+    if (!tree) {
+      return [];
+    }
+    return flattenSearchTree(this.get('searchValue'), tree, null, 0, false, []);
+  }),
+
+  expandedStateCache: null, //set on init
+
+  init() {
+    this._super(...arguments);
+    this.set('expandedStateCache', {});
+  },
+
+  expandToNode(objectId) {
+    let node = this.get('filteredArray').find(item => item.get('id') === objectId);
+    if (node) {
+      node.expandParents();
+    }
+  },
+
+  actions: {
+    previewLayer({
+      view: {
+        objectId,
+        elementId,
+        renderNodeId
+      }
+    }) {
+      // We are passing all of objectId, elementId, and renderNodeId to support post-glimmer 1, post-glimmer 2, and root for
+      // post-glimmer 2
+      this.get('port').send('view:previewLayer', {
+        objectId,
+        renderNodeId,
+        elementId,
+      });
+    },
+
+    hidePreview() {
+      this.get('port').send('view:hidePreview');
+    },
+
+    toggleViewInspection() {
+      this.get('port').send('view:inspectViews', {
+        inspect: !this.get('inspectingViews'),
+      });
+    },
+
+    sendObjectToConsole(objectId) {
+      this.get('port').send('objectInspector:sendToConsole', {
+        objectId,
+      });
+    },
+
+    expandAll() {
+      this.expandedStateCache = {};
+      this.get('filteredArray').forEach((item) => {
+        item.set('expanded', true);
+        this.expandedStateCache[item.view.objectId] = true;
+      });
+    },
+
+    collapseAll() {
+      this.expandedStateCache = {};
+      this.get('filteredArray').forEach((item) => {
+        item.set('expanded', false);
+        this.expandedStateCache[item.view.objectId] = false;
+      });
+    },
+
+    toggleExpanded(item) {
+      item.toggleProperty('expanded');
+      this.expandedStateCache[item.view.objectId] = item.get('expanded');
+    },
+
+    inspect(objectId) {
+      if (objectId) {
+        this.set('pinnedObjectId', objectId);
+        this.expandToNode(objectId);
+        this.get('port').send('objectInspector:inspectById', {
+          objectId,
+        });
+      }
+    },
+
+    scrollToElement(elementId) {
+      this.get('port').send('view:scrollToElement', {
+        elementId
+      });
+    },
+
+    inspectElement({
+      objectId,
+      elementId
+    }) {
+      this.get('port').send('view:inspectElement', {
+        objectId,
+        elementId,
+      });
+    },
+  },
+});
diff --git a/app/controllers/container-type.js b/app/controllers/container-type.js
index bd7c1b96c0..fcef33fd2b 100644
--- a/app/controllers/container-type.js
+++ b/app/controllers/container-type.js
@@ -9,7 +9,7 @@ export default Controller.extend({
 
   sortProperties: ['name'],
 
-  searchVal: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
 
   search: null,
 
diff --git a/app/controllers/deprecations.js b/app/controllers/deprecations.js
index 3294947180..5611fc11f3 100644
--- a/app/controllers/deprecations.js
+++ b/app/controllers/deprecations.js
@@ -13,10 +13,12 @@ export default Controller.extend({
    */
   application: controller(),
   search: null,
-  searchVal: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
+
   filtered: filter('model', function(item) {
     return searchMatch(get(item, 'message'), this.get('search'));
   }).property('model.@each.message', 'search'),
+
   actions: {
     openResource(item) {
       this.get('adapter').openResource(item.fullSource, item.line);
diff --git a/app/controllers/promise-tree.js b/app/controllers/promise-tree.js
index 31a7f3921f..207de41325 100644
--- a/app/controllers/promise-tree.js
+++ b/app/controllers/promise-tree.js
@@ -70,15 +70,15 @@ export default Controller.extend({
   isPendingFilter: equal('filter', 'pending'),
   isFulfilledFilter: equal('filter', 'fulfilled'),
 
-  search: null,
+  searchValue: null,
   effectiveSearch: null,
 
-  searchChanged: observer('search', function() {
+  searchChanged: observer('searchValue', function() {
     debounce(this, this.notifyChange, 500);
   }),
 
   notifyChange() {
-    this.set('effectiveSearch', this.get('search'));
+    this.set('effectiveSearch', this.get('searchValue'));
     next(() => {
       this.notifyPropertyChange('model');
     });
diff --git a/app/controllers/records.js b/app/controllers/records.js
index 55c87a5a37..64db0a8089 100644
--- a/app/controllers/records.js
+++ b/app/controllers/records.js
@@ -8,11 +8,11 @@ import { dasherize } from '@ember/string';
 export default Controller.extend({
   application: controller(),
 
-  queryParams: ['filterValue', 'search'],
+  queryParams: ['filterValue', 'searchValue'],
 
   columns: readOnly('modelType.columns'),
 
-  search: '',
+  searchValue: '',
 
   filters: computed(() => []),
 
@@ -21,7 +21,7 @@ export default Controller.extend({
   noFilterValue: none('filterValue'),
 
   modelChanged: observer('model', function() {
-    this.set('search', '');
+    this.set('searchValue', '');
   }),
 
   recordToString(record) {
@@ -72,8 +72,8 @@ export default Controller.extend({
     return { columns };
   }),
 
-  filtered: computed('search', 'model.@each.columnValues', 'model.@each.filterValues', 'filterValue', function() {
-    let search = this.get('search');
+  filtered: computed('searchValue', 'model.@each.columnValues', 'model.@each.filterValues', 'filterValue', function() {
+    let search = this.get('searchValue');
     let filter = this.get('filterValue');
     return this.get('model').filter(item => {
       // check filters
diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js
index bfcc43100d..cc551bbc0f 100644
--- a/app/controllers/render-tree.js
+++ b/app/controllers/render-tree.js
@@ -68,7 +68,7 @@ export default Controller.extend({
 
   // bound to the input field, updates the `search` property
   // 300ms after changing
-  searchField: debounceComputed('search', 300),
+  searchValue: debounceComputed('search', 300),
 
   // model filtered based on this value
   search: '',
diff --git a/app/controllers/view-tree.js b/app/controllers/view-tree.js
index 6e9885ea12..c717e1cb7c 100644
--- a/app/controllers/view-tree.js
+++ b/app/controllers/view-tree.js
@@ -1,4 +1,3 @@
-import { on } from '@ember/object/evented';
 import { observer, get } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import searchMatch from 'ember-inspector/utils/search-match';
@@ -17,11 +16,11 @@ export default Controller.extend({
   /**
    * Bound to the search field to filter the component list.
    *
-   * @property searchText
+   * @property searchValue
    * @type {String}
    * @default ''
    */
-  searchText: '',
+  searchValue: '',
 
   /**
    * The filtered view list.
@@ -30,12 +29,12 @@ export default Controller.extend({
    * @type {Array<Object>}
    */
   filteredList: filter('model', function(item) {
-    return searchMatch(get(item, 'value.name'), this.get('searchText'));
-  }).property('model.[]', 'searchText'),
+    return searchMatch(get(item, 'value.name'), this.get('searchValue'));
+  }).property('model.[]', 'searchValue'),
 
-  optionsChanged: on('init', observer('options.components', function() {
+  optionsChanged: observer('options.components', function() {
     this.port.send('view:setOptions', { options: this.get('options') });
-  })),
+  }),
 
   actions: {
     previewLayer({ value: { objectId, elementId, renderNodeId } }) {
diff --git a/app/models/component-view-item.js b/app/models/component-view-item.js
new file mode 100644
index 0000000000..9da81d1e58
--- /dev/null
+++ b/app/models/component-view-item.js
@@ -0,0 +1,56 @@
+import EmberObject, { computed } from '@ember/object';
+import { reads } from '@ember/object/computed';
+
+/**
+ * ComponentViewItem is used to represent the flattened nodes in the component tree
+ */
+export default EmberObject.extend({
+  /**
+   * The Ember View object this item represents
+   */
+  view: null,
+
+  /**
+   * A reference to the parent `ComponentViewItem`, null at the root of the tree
+   */
+  parent: null,
+
+  /**
+   * Used to set indentation levels later
+   */
+  parentCount: 0,
+  expanded: true,
+  hasChildren: true,
+  searchMatched: false,
+
+  /**
+   * If the user has typed text into the search box (used to calculate visibility)
+   */
+  activeSearch: false,
+
+  id: reads('view.objectId'),
+
+  expandParents() {
+    let parent = this.get('parent');
+    if (parent) {
+      parent.set('expanded', true);
+      parent.expandParents();
+    }
+  },
+
+  visible: computed(
+    'parent.{visible,expanded}',
+    'searchMatched',
+    'activeSearch',
+    function() {
+      let parent = this.get('parent');
+      let showNodeInHierarchy =
+        parent && parent.get('expanded') && parent.get('visible');
+      if (this.get('activeSearch')) {
+        return this.get('searchMatched') || showNodeInHierarchy;
+      } else {
+        return !parent || showNodeInHierarchy;
+      }
+    }
+  ),
+});
diff --git a/app/router.js b/app/router.js
index e1b3e6c557..7a404e04bf 100644
--- a/app/router.js
+++ b/app/router.js
@@ -9,6 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
   this.route('app-detected', { path: '/', resetNamespace: true }, function() {
     this.route('view-tree', { path: '/', resetNamespace: true });
+    this.route('component-tree', { resetNamespace: true });
     this.route('route-tree', { resetNamespace: true });
 
     this.route('data', { resetNamespace: true }, function() {
diff --git a/app/routes/application.js b/app/routes/application.js
index af7d516b42..b4f71e3c20 100644
--- a/app/routes/application.js
+++ b/app/routes/application.js
@@ -3,6 +3,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { schedule } from '@ember/runloop';
 import Ember from "ember";
+
 const {
   NativeArray
 } = Ember;
@@ -77,24 +78,24 @@ export default Route.extend({
    * Service used to broadcast changes to the application's layout
    * such as toggling of the object inspector.
    *
-   * @property layout
+   * @property layoutService
    * @type {Service}
    */
-  layout: service(),
+  layoutService: service('layout'),
 
   actions: {
     expandInspector() {
       this.set("controller.inspectorExpanded", true);
       // Broadcast that tables have been resized (used by `x-list`).
       schedule('afterRender', () => {
-        this.get('layout').trigger('resize', { source: 'object-inspector' });
+        this.get('layoutService').trigger('resize', { source: 'object-inspector' });
       });
     },
     toggleInspector() {
       this.toggleProperty("controller.inspectorExpanded");
       // Broadcast that tables have been resized (used by `x-list`).
       schedule('afterRender', () => {
-        this.get('layout').trigger('resize', { source: 'object-inspector' });
+        this.get('layoutService').trigger('resize', { source: 'object-inspector' });
       });
     },
     inspectObject(objectId) {
diff --git a/app/routes/component-tree.js b/app/routes/component-tree.js
new file mode 100644
index 0000000000..73d590121b
--- /dev/null
+++ b/app/routes/component-tree.js
@@ -0,0 +1,43 @@
+import TabRoute from "ember-inspector/routes/tab";
+
+export default TabRoute.extend({
+  setupController() {
+    this._super(...arguments);
+    this.get('port').on('view:viewTree', this, this.setViewTree);
+    this.get('port').on('view:stopInspecting', this, this.stopInspecting);
+    this.get('port').on('view:startInspecting', this, this.startInspecting);
+    this.get('port').on('view:inspectDOMElement', this, this.inspectDOMElement);
+    this.get('port').on('view:inspectComponent', this, this.inspectComponent);
+    this.get('port').send('view:setOptions', { options: this.get('controller.options') });
+    this.get('port').send('view:getTree');
+  },
+
+  deactivate() {
+    this.get('port').off('view:viewTree', this, this.setViewTree);
+    this.get('port').off('view:stopInspecting', this, this.stopInspecting);
+    this.get('port').off('view:startInspecting', this, this.startInspecting);
+    this.get('port').off('view:inspectDOMElement', this, this.inspectDOMElement);
+    this.get('port').off('view:inspectComponent', this, this.inspectComponent);
+
+  },
+
+  setViewTree(options) {
+    this.set('controller.viewTree', options.tree);
+  },
+
+  startInspecting() {
+    this.set('controller.inspectingViews', true);
+  },
+
+  stopInspecting() {
+    this.set('controller.inspectingViews', false);
+  },
+
+  inspectComponent({ viewId }) {
+    this.get('controller').send('inspect', viewId);
+  },
+
+  inspectDOMElement({ elementSelector }) {
+    this.get('port.adapter').inspectDOMElement(elementSelector);
+  }
+});
diff --git a/app/routes/view-tree.js b/app/routes/view-tree.js
index d7319736c1..98c2aa74c7 100644
--- a/app/routes/view-tree.js
+++ b/app/routes/view-tree.js
@@ -12,6 +12,7 @@ export default TabRoute.extend({
     this.get('port').on('view:stopInspecting', this, this.stopInspecting);
     this.get('port').on('view:startInspecting', this, this.startInspecting);
     this.get('port').on('view:inspectDOMElement', this, this.inspectDOMElement);
+    this.get('port').send('view:setOptions', { options: this.get('controller.options') });
     this.get('port').send('view:getTree');
   },
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 5a604e5166..6366a14791 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -23,6 +23,8 @@
 }
 
 @import "base";
+@import "colors";
+@import "component_tree";
 @import "context_menu";
 @import "drag_handle";
 @import "dropdown";
diff --git a/app/styles/base.scss b/app/styles/base.scss
index 3066cf49af..5deb108ecc 100644
--- a/app/styles/base.scss
+++ b/app/styles/base.scss
@@ -1,3 +1,9 @@
+:root {
+  --font-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cantarell', 'Oxygen', 'Ubuntu', 'Helvetica Neue', helvetica, arial, sans-serif;
+  --font-monospace: 'SF Mono', Menlo, Monaco, monospace;
+}
+
+
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
   padding: 0;
@@ -10,8 +16,8 @@ html, body {
 }
 
 body, input {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cantarell', 'Oxygen', 'Ubuntu', 'Helvetica Neue', helvetica, arial, sans-serif;
-  color: #333;
+  font-family: var(--font-sans-serif);
+  color: var(--base26);
 }
 
 body, div, nav {
@@ -24,5 +30,5 @@ a {
 }
 
 code {
-  font-family: Menlo, Monaco, monospace;
+  font-family: var(--font-monospace);
 }
diff --git a/app/styles/colors.scss b/app/styles/colors.scss
new file mode 100644
index 0000000000..fd42e7b873
--- /dev/null
+++ b/app/styles/colors.scss
@@ -0,0 +1,111 @@
+.theme--light {
+  --base00: #ffffff;
+  --base01: #f3f3f3;
+  --base03: #ededed;
+  --base05: #dedede;
+  --base06: #d1d1d1;
+  --base07: #cccccc;
+  --base08: #cacaca;
+  --base10: #b4b4b4;
+  --base11: #b3b3b3;
+  --base12: #b2b2b2;
+  --base13: #aaaaaa;
+  --base14: #a3a3a3;
+  --base15: #999999;
+  --base16: #888888;
+  --base17: #777777;
+  --base18: #737373;
+  --base19: #6e6e6e;
+  --base20: #676767;
+  --base21: #555555;
+  --base22: #505050;
+  --base23: #444444;
+  --base24: #404040;
+  --base25: #3d3d3d;
+  --base26: #333333;
+  --base27: #303030;
+  --base28: #222222;
+  --base29: #000000;
+  --base30: #bcbcbc;
+  --base31: #464646;
+  --base32: #d6d6d6;
+  --base33: #666666;
+  --base34: #cecece;
+  --base35: #f5f5f5;
+  --base36: #e7e7e7;
+  --spec00: #fffec2;
+  --spec01: #ffffee;
+  --spec02: #ff0000;
+  --spec03: #f23818;
+  --spec04: #990099;
+  --spec05: #990000;
+  --spec06: #6e68c6;
+  --spec07: #4281eb;
+  --spec08: #3879d9;
+  --spec09: #2b7fb3;
+  --spec10: #000099;
+  --spec11: #3F81EE;
+  --spec12: #7c027c;
+  --spec13: #4977d2;
+  --spec14: #ecf1fa;
+  --spec15: #cd61a7;
+  --spec16: #7fb56d;
+  --spec17: #328509;
+  --spec18: #9c0f9c;
+}
+
+.theme--dark {
+  --base00: #242424;
+  --base01: #242424;
+  --base03: #121212;
+  --base05: #212121;
+  --base06: #2E2E2E;
+  --base07: #333333;
+  --base08: #353535;
+  --base10: #4B4B4B;
+  --base11: #4C4C4C;
+  --base12: #4D4D4D;
+  --base13: #555555;
+  --base14: #5C5C5C;
+  --base15: #666666;
+  --base16: #777777;
+  --base17: #888888;
+  --base18: #8C8C8C;
+  --base19: #919191;
+  --base20: #989898;
+  --base21: #AAAAAA;
+  --base22: #AFAFAF;
+  --base23: #BBBBBB;
+  --base24: #BFBFBF;
+  --base25: #C2C2C2;
+  --base26: #CCCCCC;
+  --base27: #CFCFCF;
+  --base28: #DDDDDD;
+  --base29: #FFFFFF;
+  --base30: #434343;
+  --base31: #B9B9B9;
+  --base32: #292929;
+  --base33: #999999;
+  --base34: #313131;
+  --base35: #0A0A0A;
+  --base36: #181818;
+  --spec00: #00013D;
+  --spec01: #000011;
+  --spec02: #00FFFF;
+  --spec03: #0DC7E7;
+  --spec04: #66FF66;
+  --spec05: #66FFFF;
+  --spec06: #919739;
+  --spec07: #BD7E14;
+  --spec08: #C78626;
+  --spec09: #D4804C;
+  --spec10: #FFFF66;
+  --spec11: #C07E11;
+  --spec12: #83FD83;
+  --spec13: #B6882D;
+  --spec14: #130E05;
+  --spec15: #cd61a7;
+  --spec16: #7fb56d;
+  --spec17: #328509;
+  --spec18: #9c0f9c;
+}
diff --git a/app/styles/component_tree.scss b/app/styles/component_tree.scss
new file mode 100644
index 0000000000..52c813f525
--- /dev/null
+++ b/app/styles/component_tree.scss
@@ -0,0 +1,99 @@
+.component-tree-item {
+  position: relative;
+  display: flex;
+  min-height: 18px;
+  align-items: center;
+  margin: 3px 3px 0 3px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--base21);
+
+}
+
+.component-tree-item--component {
+  color: var(--spec12);
+
+  &:hover {
+    background-color: var(--spec14);
+
+    .component-tree-item__view-element { opacity: 1; }
+  }
+}
+
+.component-tree-item__view-element {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+
+  &:focus { outline: none; }
+}
+
+.component-tree-item__tag {
+  display: flex;
+  cursor: default;
+}
+  .component-tree-item--component .component-tree-item__tag {
+    cursor: pointer;
+  }
+
+.component-tree-item__bracket::before {
+  content: '{{';
+  color: var(--base14);
+}
+.component-tree-item__bracket::after {
+  content: '}}';
+  color: var(--base14);
+}
+
+.component-tree-item__expand {
+  display: inline-block;
+  border: 0;
+  padding: 0 2px;
+  cursor: pointer;
+  background: transparent;
+
+  &:focus { outline: none; }
+
+  svg {
+    transition-property: transform;
+    transition-duration: 0.1s;
+  }
+
+  &.collapsed svg {
+    transform: rotate(-90deg);
+  }
+}
+
+.component-tree-item__view-element {
+  display: inline-block;
+  margin-left: 10px;
+  opacity: 0;
+  cursor: pointer;
+
+  polygon, rect, path { fill: var(--base28); }
+}
+
+
+/**
+ * Modifier
+ */
+
+.component-tree-item--selected {
+  color: var(--base00);
+  background: var(--spec13);
+  &:hover { background: var(--spec13); }
+
+  .component-tree-item__bracket::before,
+  .component-tree-item__bracket::after {
+    color: var(--base14);
+  }
+
+  .component-tree-item__expand,
+  .component-tree-item__view-element {
+    opacity: 1;
+    polygon, rect, path { fill: var(--base00); }
+  }
+}
diff --git a/app/styles/drag_handle.scss b/app/styles/drag_handle.scss
index 275e89318c..14885cfb40 100644
--- a/app/styles/drag_handle.scss
+++ b/app/styles/drag_handle.scss
@@ -25,7 +25,7 @@
   height: 100%;
   margin-left: 3px;
   width: 1px;
-  border-left: 1px solid #A3A3A3;
+  border-left: 1px solid var(--base30);
   pointer-events: none;
 }
 
diff --git a/app/styles/dropdown.scss b/app/styles/dropdown.scss
index a9e1e79131..63488c1aa6 100644
--- a/app/styles/dropdown.scss
+++ b/app/styles/dropdown.scss
@@ -6,20 +6,22 @@
 .dropdown {
   position: relative;
   flex: auto;
+  height: 28px;
 }
 
 .dropdown__select {
-  -webkit-appearance: none;
   box-sizing: border-box;
   display: block;
   width: 100%;
-  height: 18px;
-  padding: 0 15px 0 5px;
+  height: 100%;
+  margin: 0;
+  padding: 0 16px 0 5px;
   font-size: 12px;
-  color: rgb(48, 48, 48);
-  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+  color: var(--base31);
   border: 0;
   background-color: transparent;
+  -moz-appearance: none;
+  -webkit-appearance: none;
 }
 
 .dropdown__select:focus {
@@ -28,13 +30,9 @@
 
 .dropdown__arrow {
   position: absolute;
-  right: 4px;
-  top: 7px;
-  background-image: url(images/arrow_down.svg);
-  background-size: 100%;
+  right: 5px;
+  top: 9px;
   opacity: 0.7;
-  width: 7px;
-  height: 7px;
-  display: inline-block;
+  width: 6px;
   pointer-events: none;
 }
diff --git a/app/styles/error_page.scss b/app/styles/error_page.scss
index 1a3d225680..86de69c8a4 100644
--- a/app/styles/error_page.scss
+++ b/app/styles/error_page.scss
@@ -15,13 +15,13 @@
 
 .error-page {
   padding: 10px;
-  background: #ededed;
+  background: var(--base03);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 100%;
-  color: #505050;
+  color: var(--base22);
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -32,14 +32,14 @@
   padding: 25px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  background: #ffffff;
-  border: solid 1px #d1d1d1;
+  background: var(--base00);
+  border: 1px solid var(--base06);
   border-radius: 5px;
   margin: auto;
 }
 
 .error-page__content a {
-  color: #f23818;
+  color: var(--spec03);
   text-decoration: none;
 }
 
@@ -49,7 +49,7 @@
   padding-top: 15px;
   padding-bottom: 30px;
   margin-bottom: 10px;
-  border-bottom: solid 1px #d1d1d1;
+  border-bottom: 1px solid var(--base06);
   position: relative;
 }
 
@@ -58,6 +58,7 @@
   width: 128px;
   height: 89px;
   background: url("images/fishy_tomster.png") left center no-repeat;
+  background-size: 128px 89px;
   position: absolute;
   right: 0px;
   bottom: 0px;
@@ -82,7 +83,7 @@
 .error-page__list {
   padding-left: 16px;
   padding-bottom: 5px;
-  border-bottom: solid 1px #d1d1d1;;
+  border-bottom: 1px solid var(--base06);
 }
 
 .error-page__list li {
diff --git a/app/styles/external_link.scss b/app/styles/external_link.scss
index 82b74a4075..2931736172 100644
--- a/app/styles/external_link.scss
+++ b/app/styles/external_link.scss
@@ -9,7 +9,7 @@
     position: absolute;
     right: -12px;
     bottom: 10px;
-    background-image: url('images/external_link.svg');
+    background-image: url('svg/external_link.svg');
     background-size: 100%;
   }
 }
diff --git a/app/styles/list.scss b/app/styles/list.scss
index 367d6bd7de..201ceb3166 100644
--- a/app/styles/list.scss
+++ b/app/styles/list.scss
@@ -3,7 +3,7 @@
   font-size: 11px;
   height: 100%;
   box-sizing: border-box;
-  background: white;
+  background: var(--base00);
   overflow: hidden;
 }
 
@@ -32,12 +32,12 @@
 
   text-align: left;
   user-select: none;
-  border-bottom: 1px solid #cacaca;
+  border-bottom: 1px solid var(--base08);
 
   height: 30px;
 
   .list__row {
-    background: #fff;
+    background: var(--base00);
   }
 
   .list__cell {
@@ -55,10 +55,10 @@
 .list:not(.list_no-alternate-color) .list__content {
 
   .list__row {
-    background: #f3f3f3;
+    background: var(--base03);
 
     &:nth-of-type(2n) {
-      background: #fff;
+      background: var(--base00);
     }
   }
 }
@@ -200,7 +200,7 @@
     top: 0px;
 
     font-size: 75%;
-    color: #737373;
+    color: var(--base18);
   }
 }
 
diff --git a/app/styles/mixin.scss b/app/styles/mixin.scss
index aa87925e0a..32b4c602c0 100644
--- a/app/styles/mixin.scss
+++ b/app/styles/mixin.scss
@@ -6,69 +6,59 @@
  or a mixin the object extends
 */
 
+$mixin-left-padding: 22px;
+
 .mixin__name {
-  margin-top: -1px;
-  padding: 2px 2px 2px 5px;
-  border-top: 1px solid #bdbdbd;
-  border-bottom: 1px solid #bdbdbd;
-  background-color: #f0f0f0;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  padding: 4px 2px 4px $mixin-left-padding;
+  border-bottom: 1px solid var(--base34);
+  background-color: var(--base35);
   cursor: default;
   user-select: none;
+  color: var(--base28);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  z-index: 1;
 }
 
 .mixin__name:active {
-  background-color: #ccc;
-  border-top: 1px solid #b2b2b2;
-  border-bottom: 1px solid #b2b2b2;
+  background-color: var(--base36);
 }
 
-  .mixin_props_no .mixin__name:before {
-    opacity: 0;
-  }
+.mixin__name--no-props {
+  color: var(--base17);
+}
 
-  .mixin.ember-mixin .mixin__name {
-    color: #888;
-  }
+.mixin_props_no .mixin__name:before {
+  opacity: 0;
+}
 
 .mixin__name:before {
+  position: absolute;
+  top: 5px;
+  left: 6px;
   content: "\25B6";
-  color: #737373;
-  margin-right: 4px;
-  position: relative;
-  top: -1px;
-  font-size: 75%;
+  color: var(--base18);
+  margin-right: 5px;
+  font-size: 90%;
+  transform: rotate(0deg);
+  transition: all 0.1s;
 }
 
-  .mixin_state_expanded .mixin__name {
-    border-bottom: 1px solid #bdbdbd;
-  }
-
   .mixin_state_expanded .mixin__name:before {
-    content: "\25BC";
-  }
-
-  .mixin.ember-mixin .mixin__name:before {
-    color: #aaa;
+    transform: rotate(90deg);
   }
 
-.mixin__name_errors {
-  background-color: #fff;
-
-  &:active{
-    background-color: #fff;
-  }
-}
-
-
 .mixin__properties {
-  margin: 5px;
   list-style-type: none;
-  padding: 0;
+  border-bottom: 1px solid var(--base34);
+  margin: 0;
+  padding: 3px 0 5px 0;
   font-size: 12px;
-  font-family: Menlo, Monaco, monospace;
+  font-family: var(--font-monospace);
 }
 
 .mixin__property {
@@ -79,24 +69,64 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  min-height: 19px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+
+  .mixin__cp-toggle {
+    width: $mixin-left-padding;
+    outline: none;
+
+    svg {
+      transition: all 0.2s;
+      transform:
+        rotate(-90deg)
+        translateY(1px);
+    }
+  }
+  .mixin__cp-toggle--expanded {
+    svg {
+      transform: rotate(0deg);
+    }
+  }
 }
 
+/* Errors */
+
 .mixin__error {
   margin-right: 3px;
   padding: 0px 20px;
-  color: red;
+  color: var(--spec02);
 }
 
-.mixin__property button {
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
+.mixin__name--errors {
+  background-color: var(--base00);
+
+  &:active{
+    background-color: var(--base00);
+  }
 }
 
-.mixin__property button img, .mixin__property span.pad {
-  margin-right: 3px;
-  width: 20px;
+/* Buttons */
+
+.mixin__property {
+  button {
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .pad { width: $mixin-left-padding; }
+
+  .mixin__calc-btn svg {
+    path, circle { fill: var(--spec18); }
+  }
+
+  .mixin__send-btn {
+    opacity: 0;
+    padding-right: 6px;
+  }
 }
 
 .mixin__property-overridden-by {
@@ -104,7 +134,7 @@
 }
 
 .mixin__property-name {
-  color: #909;
+  color: var(--base26);
 }
 
 .mixin__property-value {
@@ -117,33 +147,23 @@
 
 .mixin__property-value-txt {
   flex: 1;
-  border: solid 1px #ccc;
-  /*border: none;*/
-  box-shadow: 2px 2px 2px #888;
-  /*box-shadow: none;*/
+  border: 1px solid var(--base17);
   outline: none;
+  color: var(--base26);
+  font-size: 12px;
+  background: var(--base01);
 }
 
-.mixin__calc-btn_calculated {
-  opacity: 0.4;
-}
-
-.mixin__send-btn {
-  width: 20px;
-  opacity: 0;
-}
-
-
 .mixin__property-value-separator {
   margin-right: 5px;
 }
 
 .mixin__property .type-function {
-  color: #999;
+  color: var(--base15);
 }
 
 .mixin__property .type-object {
-  color: #999;
+  color: var(--base20);
 }
 
 .mixin__property .type-ember-object,
@@ -151,20 +171,19 @@
   cursor: pointer;
 }
 
-.mixin__property-calculated-value {
-  flex: 1;
-  color: #999;
-}
-
-.mixin__property .type-null, .mixin__property .type-boolean {
-  color: #009;
+.mixin__property .type-null,
+.mixin__property .type-boolean {
+  color: var(--spec10);
 }
 
 .mixin__property .type-descriptor {
   cursor: pointer;
-  color: #900;
+  color: var(--spec05);
 }
 
+.mixin__property .type-service {
+  color: var(--spec17);
+}
 
 
 .mixin__property_state_overridden {
@@ -173,22 +192,22 @@
 
 
 .mixin__property:not(.mixin__property_state_overridden):hover {
-  background-color: #ffe;
+  background-color: var(--base01);
 }
 
 
 .mixin__property_state_overridden:hover .mixin__property-overridden-by {
   position: absolute;
-  background-color: rgba(255, 255, 255, 0.95);
+  background-color: var(--spec01);
   right: 0;
   display: inline;
   text-decoration: none;
 }
 
 .mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
-    opacity: 1;
-}
+  opacity: 1;
 
-.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
-  opacity: 0.5;
+  &:active {
+    opacity: 0.5;
+  }
 }
diff --git a/app/styles/nav.scss b/app/styles/nav.scss
index c51efefbd8..8a0b57f6f0 100644
--- a/app/styles/nav.scss
+++ b/app/styles/nav.scss
@@ -3,22 +3,17 @@
  ===
  Navigation lists and links
 */
-.nav__title {
-  padding: 3px 5px;
-  line-height: 11px;
-  height: 15px;
-}
 
-.nav__title h3 {
+.nav__title h1 {
   white-space: nowrap;
-  display: inline-block;
+  height: 22px;
   text-overflow: ellipsis;
   overflow: hidden;
-  color: #6e6e6e;
-  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
-  float: left;
-  padding: 0;
-  margin: 0;
+  color: var(--base19);
+  line-height: 22px;
+  text-shadow: var(--base05) 0 1px 0;
+  padding: 0 5px;
+  margin: 2px 0 0 0;
 }
 
 /* List */
@@ -33,24 +28,22 @@
 
 .nav li {
   display: block;
-  margin-top: 2px;
 }
 
 .nav li svg {
-  position: absolute;
-  top: 50%;
-  left: 14px;
-  margin-top: -10px;
+  flex-shrink: 0;
+  margin-right: 7px;
+  width: 22px;
+  height: 22px;
 }
 
 /* List anchor */
 
 .nav li > a {
   display: block;
-  height: 18px;
-  line-height: 18px;
-  margin-top: 1px;
-  padding: 2px 5px;
+  height: 22px;
+  line-height: 22px;
+  padding: 0 5px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -66,7 +59,7 @@
 .nav li > a path,
 .nav li > a rect,
 .nav li > a circle {
-  fill: #222;
+  fill: var(--base28);
 }
 
 .nav li > a:focus {
@@ -74,38 +67,43 @@
 }
 
 .nav li > a.active {
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0,0,0, 0.33);
-  background: #3879D9;
+  color: var(--base00);
+  background: var(--spec11);
 }
 
 .nav li > a.active polygon,
 .nav li > a.active path,
 .nav li > a.active rect,
 .nav li > a.active circle {
-  fill: #fff;
+  fill: var(--base00);
 }
 
 .app.inactive .nav li > a.active {
-  background: #b4b4b4;
+  background: var(--base10);
 }
 
 /* Custom navs */
 
 .nav--main li > a {
-  position: relative;
-  height: 33px;
-  padding-left: 40px;
-  color: #333;
-  line-height: 33px;
+  display: flex;
+  align-items: center;
+  height: 38px;
+  padding-left: 12px;
+  color: var(--base26);
+  line-height: 38px;
+}
+
+.nav--main .pill {
+  margin-left: 5px;
 }
 
-.nav.nav--main .nav__title {
-  padding-left: 15px;
+.nav.nav--main .nav__title h1 {
+  padding-left: 14px;
 }
 
-/* Custom nav title */
+/* Flip path on Promises icon */
 
-.nav__title--middle {
-  line-height: 21px;
+.promises-icon-circle {
+  transform: scaleX(-1);
+  transform-origin: 18px;
 }
diff --git a/app/styles/notice.scss b/app/styles/notice.scss
index 6e350c4bc8..d1df4ead3b 100644
--- a/app/styles/notice.scss
+++ b/app/styles/notice.scss
@@ -7,5 +7,4 @@
   margin-top: 20px;
   font-size: 14px;
   text-align: center;
-  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 }
diff --git a/app/styles/object_inspector.scss b/app/styles/object_inspector.scss
index ef97da814f..8ce81cd21a 100644
--- a/app/styles/object_inspector.scss
+++ b/app/styles/object_inspector.scss
@@ -6,6 +6,98 @@
 */
 
 .object-trail {
+  margin-bottom: 4px;
   margin-left: 39px;
   word-break: break-all;
 }
+
+.mixin__property-dependency-list {
+  position: relative;
+  margin-bottom: 5px;
+  margin-top: 2px;
+  padding-top: 2px;
+
+  & > svg {
+    position: absolute;
+    top: -4px;
+    left: 28px;
+    width: 19px;
+    height: 10px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.mixin__property-dependency-item {
+  position: relative;
+  margin-bottom: 2px;
+  margin-left: 55px;
+  font-size: 11px;
+  color: var(--base21);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -9px;
+    width: 1px;
+    height: 8px;
+    background-color: var(--base16);
+  }
+
+  svg {
+    position: absolute;
+    bottom: 2px;
+    left: -13px;
+    
+    ellipse {
+      stroke: var(--base16);
+      fill: var(--base00);
+    }
+  }
+}
+
+.mixin__property-dependency-item:first-child::before { display: none; }
+
+.mixin__property-icon-container {
+  width: $mixin-left-padding;
+}
+
+.mixin__property-icon {
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 17px;
+  font-family: var(--font-monospace);
+  text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.mixin__property-icon--service {
+  background-color: var(--spec16);
+  &::before {
+    content: "S";
+  }
+}
+
+.mixin__property-icon--computed {
+  background-color: var(--spec15);
+  &::before {
+    content: "C";
+  }
+}
+
+.mixin__property-icon--property {
+  background-color: var(--base11);
+  &::before {
+    content: "P";
+  }
+}
\ No newline at end of file
diff --git a/app/styles/pill.scss b/app/styles/pill.scss
index 392feac8f3..35a7693c8a 100644
--- a/app/styles/pill.scss
+++ b/app/styles/pill.scss
@@ -12,24 +12,24 @@
   padding: 2px 6px;
   line-height: 12px;
   background: transparent;
-  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
   border-radius: 8px;
   vertical-align: middle;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--base11);
 }
 
-.pill_text_clear {
-  text-shadow: none;
-  font-weight: bold;
+a.active > .pill {
+  background: var(--base21);
 }
 
-.pill_not-clickable {
+.pill--not-clickable {
   cursor: inherit;
 }
 
-/** MODIFIER: SIZE = SMALL **/
-.pill_size_small {
+.pill--small {
+  padding: 2px 4px;
   font-size: 10px;
+}
 
-  padding: 2px 4px;
+.pill--bold {
+  font-weight: bold;
 }
diff --git a/app/styles/send_to_console.scss b/app/styles/send_to_console.scss
index 9b163acb0f..5e8518d49a 100644
--- a/app/styles/send_to_console.scss
+++ b/app/styles/send_to_console.scss
@@ -23,7 +23,7 @@
 }
 
 .send-to-console:hover {
-  border-bottom: solid 1px rgb(43, 127, 179);
+  border-bottom: 1px solid var(--spec09);
 }
 
 .send-to-console:active {
@@ -42,7 +42,7 @@
 
 
 .send-trace-to-console:hover {
-  color: black;
+  color: var(--base29);
 }
 
 .send-trace-to-console:active {
diff --git a/app/styles/sidebar_toggle.scss b/app/styles/sidebar_toggle.scss
index e3ec844b13..7b799e13a6 100644
--- a/app/styles/sidebar_toggle.scss
+++ b/app/styles/sidebar_toggle.scss
@@ -6,11 +6,18 @@
 
 .sidebar-toggle {
   position: absolute;
-  top: 2px;
+  top: 0;
+  max-height: 27px;
 }
 
+  .toolbar__icon-button.sidebar-toggle {
+    margin-right: 0;
+    padding-right: 6px;
+    background: var(--base00);
+  }
+
 .sidebar-toggle--right {
-  right: -6px;
+  right: 0;
 }
 
 .sidebar-toggle--left {
diff --git a/app/styles/split.scss b/app/styles/split.scss
index c7307d7d59..8a0644625d 100644
--- a/app/styles/split.scss
+++ b/app/styles/split.scss
@@ -39,28 +39,28 @@
   flex: none;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 1px 2px;
-  min-height: 23px;
-  line-height: 20px;
-  border-color: #cacaca;
+  border-color: var(--base32);
 }
 
 .split__panel__hd {
+  min-height: 29px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
-  background: #fff;
+  background: var(--base00);
 }
 
 .split__panel__bd {
-  background: #fff;
+  background: var(--base00);
   flex: auto;
   overflow: auto;
 }
 
 .split__panel__ft {
+  justify-content: center;
+  height: 23px;
   border-top-width: 1px;
   border-top-style: solid;
-  background: #F3F3F3;
+  background: var(--base01);
 }
 
 /* Fix visibility issue with phantomjs test runner
@@ -75,7 +75,7 @@
 /* Custom panels */
 
 .split__panel--sidebar-1 .split__panel__bd {
-  background: #F3F3F3;
+  background: var(--base01);
 }
 
 .split__panel--sidebar-1 > .split__panel__ft {
@@ -83,7 +83,7 @@
 }
 
 .split__panel--sidebar-2 .split__panel__bd {
-  background: #f3f3f3;
+  background: var(--base01);
 }
 
 /* Fix main list-view scrolling */
diff --git a/app/styles/toolbar.scss b/app/styles/toolbar.scss
index 11e95750d4..8057e7b641 100644
--- a/app/styles/toolbar.scss
+++ b/app/styles/toolbar.scss
@@ -1,23 +1,23 @@
+$toolbar-height: 28px;
+
 .toolbar {
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-direction: row;
   flex-direction: row;
   align-items: center;
+  min-height: $toolbar-height;
 }
 
 .toolbar > * {
-  -webkit-flex: none;
   flex: none;
 }
 
+
 /**
  Toolbar Title
  =============
 */
 
 .toolbar__title {
-  -webkit-flex: auto;
   flex: auto;
   font-weight: 700;
   white-space: nowrap;
@@ -31,19 +31,21 @@
 */
 
 .toolbar__icon-button {
-  display: inline-block;
-  width: 32px;
-  height: 20px;
-  margin-left: 0;
-  padding: 0;
-  vertical-align: top;
+  display: flex;
+  align-items: center;
+  height: $toolbar-height;
+  margin-right: 2px;
+  margin-left: 2px;
+  padding: 0 2px;
   border: 0 transparent none;
-  background-color: rgba(0, 0, 0, 0);
-  background: white;
+  vertical-align: top;
+  background: transparent;
 }
 
+/* if first item in toolbar, create extra clickable space */
 .toolbar__icon-button:first-child {
-  margin-left: -2px;
+  margin-left: 0;
+  padding-left: 10px;
 }
 
 .toolbar__icon-button:focus {
@@ -51,19 +53,19 @@
 }
 
 .toolbar__icon-button .svg-stroke {
-  stroke: rgb(103,103,103);
+  stroke: var(--base20);
 }
 
 .toolbar__icon-button .svg-fill {
-  fill: rgb(103,103,103);
+  fill: var(--base20);
 }
 
 .toolbar__icon-button:hover .svg-stroke {
-  stroke: rgb(64,64,64);
+  stroke: var(--base24);
 }
 
 .toolbar__icon-button:hover .svg-fill {
-  fill: rgb(64,64,64);
+  fill: var(--base24);
 }
 
 .toolbar__icon-button:active {
@@ -72,11 +74,11 @@
 
 /* active (highlighted) */
 .toolbar__icon-button.active .svg-stroke {
-  stroke: #4281eb;
+  stroke: var(--spec07);
 }
 
 .toolbar__icon-button.active .svg-fill {
-  fill: #4281eb;
+  fill: var(--spec07);
 }
 
 /* disabled */
@@ -89,24 +91,47 @@
 }
 
 .toolbar__icon-button.disabled .svg-stroke {
-  stroke: #cacaca;
+  stroke: var(--base08);
 }
 
 .toolbar__icon-button.disabled .svg-fill {
-  fill: #cacaca;
+  fill: var(--base08);
 }
 
+
+
 /**
  Toolbar Checkboxes
  ==================
 */
 
 .toolbar__checkbox {
-  margin: auto 6px auto 0;
-  height: auto;
-  line-height: 20px;
+  height: 100%;
   white-space: nowrap;
   overflow: hidden;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.toolbar__checkbox label {
+  display: block;
+  height: 100%;
+  line-height: $toolbar-height;
+}
+
+.toolbar__checkbox input {
+  margin: 0;
+}
+
+/* if first item in toolbar, create extra clickable space */
+
+.toolbar__checkbox:first-child {
+  margin-left: 0;
+}
+
+.toolbar__checkbox:first-child label {
+  margin-left: 0;
+  padding-left: 8px;
 }
 
 /**
@@ -120,14 +145,14 @@
   position: relative;
   cursor: default;
   display: inline-block;
-  margin-right: 6px;
-  padding: 2px 6px;
-  line-height: 12px;
-  background: transparent;
-  text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+  margin-left: 2px;
+  margin-right: 2px;
+  padding: 0 6px;
+  background: var(--base03);
   border: none;
-  border-radius: 8px;
+  border-radius: 2px;
   vertical-align: middle;
+  color: var(--base26);
 }
 
 .toolbar__radio:active,
@@ -135,21 +160,27 @@
 .toolbar__radio:focus,
 .toolbar__radio.active {
   outline: none;
-  color: white;
-  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
 }
 
+.toolbar__radio--first {
+  margin-left: 4px;
+}
+
+.toolbar__radio--last {
+  margin-right: 4px;
+}
 
 .toolbar__radio:hover {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--base06);
 }
 
 .toolbar__radio:active {
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--base00);
 }
 
 .toolbar__radio.active {
-  background: rgba(0, 0, 0, 0.3);
+  color: var(--base00);
+  background: var(--spec11);
 }
 
 /**
@@ -158,23 +189,22 @@
 */
 
 .toolbar__search {
-  margin-right: 6px;
+  position: relative;
+  margin-right: 4px;
+  margin-left: 4px;
 }
 
 .toolbar__search input {
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
-  border: 1px solid #b3b3b3;
-  border-radius: 2px;
-  margin: auto 0;
-  padding: 0 3px;
+  width: 175px;
+  height: $toolbar-height - 7;
   margin: 0;
-  -webkit-appearance: none;
+  border: 1px solid var(--base07);
+  border-radius: 3px;
+  padding: 0 15px 0 4px;
   font-size: 12px;
-  background-color: #FFF;
-  height: 20px;
+  background-color: var(--base00);
   line-height: normal;
-  width: 179px;
 }
 
 .toolbar__search input:focus {
@@ -185,6 +215,18 @@
   width: 150px;
 }
 
+.toolbar__search-clear-button {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  width: auto;
+  height: auto;
+
+  svg {
+    path { fill: var(--base33); }
+  }
+}
+
 /**
  Toolbar Divider
  ===============
@@ -193,8 +235,9 @@
 .toolbar .divider {
   display: inline-block;
   width: 1px;
-  height: 16px;
+  height: $toolbar-height - 10px;
   position: relative;
-  margin-right: 6px;
-  background-color: #cacaca;
+  margin-right: 4px;
+  margin-left: 4px;
+  background-color: var(--base08);
 }
diff --git a/app/styles/warning.scss b/app/styles/warning.scss
index 99aca515bc..65965f9629 100644
--- a/app/styles/warning.scss
+++ b/app/styles/warning.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  background: #FFFEC2;
+  background: var(--spec00);
   font-size: 11px;
   padding: 0;
 }
@@ -21,9 +21,9 @@
 
 .warning__close {
   font-weight: 200;
-  color: #6E68C6;
+  color: var(--spec06);
   text-decoration: underline;
-  background: #FFFEC2;
+  background: var(--spec00);
   border: hidden;
   cursor: pointer;
   padding: 0;
diff --git a/app/templates/-main.hbs b/app/templates/-main.hbs
index c72d7ff9ba..2a41901db6 100644
--- a/app/templates/-main.hbs
+++ b/app/templates/-main.hbs
@@ -1,7 +1,8 @@
 <div class="split split--main">
   {{#draggable-column
-          width=navWidth
-          classes="split__panel split__panel--sidebar-1"}}
+    width=navWidth
+    classes="split__panel split__panel--sidebar-1"
+    setIsDragging=(route-action 'setIsDragging')}}
     <div class="split__panel__hd">
       {{iframe-picker}}
     </div>
@@ -20,7 +21,7 @@
       {{outlet "toolbar"}}
       {{#unless inspectorExpanded}}
         {{sidebar-toggle action="toggleInspector" side="right"
-          isExpanded=false classNames="toolbar__icon-button"}}
+                         isExpanded=false classNames="toolbar__icon-button"}}
       {{/unless}}
     </div>
 
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 348eaa3506..ca65b959ad 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -7,27 +7,29 @@
 
       {{#if inspectorExpanded}}
         {{#draggable-column
-                side="right"
-                width=inspectorWidth
-                classes="split__panel"}}
-          {{object-inspector application=this model=mixinStack mixinDetails=mixinDetails toggleInspector="toggleInspector"}}
+          side="right"
+          width=inspectorWidth
+          classes="split__panel"
+          setIsDragging=(route-action 'setIsDragging')}}
+          {{object-inspector application=this model=mixinStack mixinDetails=mixinDetails
+                             toggleInspector="toggleInspector"}}
         {{/draggable-column}}
       {{/if}}
     </div>
 
   {{else}}
     {{#not-detected description="Ember application"}}
-    <li>This is not an Ember application.</li>
-    <li>You are using an old version of Ember (&lt; rc5).</li>
-    {{#if isChrome}}
-      <li>You are using the file:// protocol (instead of http://), in which case:
-        <ul>
-          <li>Visit the URL: chrome://extensions.</li>
-          <li>Find the Ember Inspector.</li>
-          <li>Make sure "Allow access to file URLs" is checked.</li>
-        </ul>
-      </li>
-    {{/if}}
+      <li>This is not an Ember application.</li>
+      <li>You are using an old version of Ember (&lt; rc5).</li>
+      {{#if isChrome}}
+        <li>You are using the file:// protocol (instead of http://), in which case:
+          <ul>
+            <li>Visit the URL: chrome://extensions.</li>
+            <li>Find the Ember Inspector.</li>
+            <li>Make sure "Allow access to file URLs" is checked.</li>
+          </ul>
+        </li>
+      {{/if}}
     {{/not-detected}}
   {{/if}}
 {{/x-app}}
diff --git a/app/templates/component-tree-toolbar.hbs b/app/templates/component-tree-toolbar.hbs
new file mode 100644
index 0000000000..4b979b5758
--- /dev/null
+++ b/app/templates/component-tree-toolbar.hbs
@@ -0,0 +1,21 @@
+<div class="toolbar">
+  <button class="{{if inspectingViews 'active'}} toolbar__icon-button js-inspect-views" {{action "toggleViewInspection"}}>
+    {{svg-jar "inspect" width="16px" height="17px"}}
+  </button>
+
+  <div class="divider"></div>
+
+  <button class="toolbar__icon-button" title="expand all" {{action "expandAll"}}>
+    {{svg-jar "chevron-down" width="16px" height="16px"}}
+  </button>
+
+  <button class="toolbar__icon-button" title="collapse all" {{action "collapseAll"}}>
+    {{svg-jar "chevron-right" width="16px" height="16px"}}
+  </button>
+
+  <div class="divider"></div>
+
+  <div class="toolbar__search js-filter-views">
+    {{search-field value=searchValue}}
+  </div>
+</div>
diff --git a/app/templates/component-tree.hbs b/app/templates/component-tree.hbs
new file mode 100644
index 0000000000..50852bca6c
--- /dev/null
+++ b/app/templates/component-tree.hbs
@@ -0,0 +1,14 @@
+<div class="list__content" style="height: 100%;">
+  {{#vertical-collection displayedList estimateHeight=20 as |item i|}}
+    <div onmouseenter={{action "previewLayer" item}}
+      onmouseleave={{action "hidePreview"}}>
+      {{component-tree-item
+        item=item
+        pinnedObjectId=pinnedObjectId
+        toggleExpanded=(action "toggleExpanded" item)
+        inspect=(action "inspect")
+        scrollToElement=(action "scrollToElement")
+        sendObjectToConsole=(action "sendObjectToConsole")}}
+    </div>
+  {{/vertical-collection}}
+</div>
\ No newline at end of file
diff --git a/app/templates/components/clear-button.hbs b/app/templates/components/clear-button.hbs
index 30f5f14ec7..bfa28c192f 100644
--- a/app/templates/components/clear-button.hbs
+++ b/app/templates/components/clear-button.hbs
@@ -1,6 +1 @@
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g class="svg-stroke" transform="translate(3.000000, 3.7500000)" stroke="#000000" stroke-width="2" fill="none" fill-rule="evenodd">
-    <circle cx="5.5" cy="5.5" r="5.5"></circle>
-    <path d="M1.98253524,1.98253524 L9,9" id="Line" stroke-linecap="square"></path>
-  </g>
-</svg>
+{{svg-jar "clear-2" width="13px" height="13px"}}
\ No newline at end of file
diff --git a/app/templates/components/component-tree-item.hbs b/app/templates/components/component-tree-item.hbs
new file mode 100644
index 0000000000..799f5c96fc
--- /dev/null
+++ b/app/templates/components/component-tree-item.hbs
@@ -0,0 +1,27 @@
+<div {{action inspect item.view.objectId}}
+  style={{labelStyle}}
+  class="component-tree-item {{if item.view.isComponent "component-tree-item--component"}} {{if (eq pinnedObjectId item.view.objectId) "component-tree-item--selected"}}">
+  {{#if item.hasChildren}}
+    <button {{action toggleExpanded bubbles=false}}
+      class="component-tree-item__expand {{if item.expanded "expanded" "collapsed"}}">
+      {{svg-jar "disclosure-triangle"
+        title="Toggle visibility"
+        width="9px" height="9px"
+      }}
+    </button>
+  {{/if}}
+
+  <code class="component-tree-item__tag {{if item.view.isComponent "component-tree-item__bracket"}}">
+    {{item.view.name}}
+  </code>
+
+  {{#if item.view.isComponent}}
+    <button {{action scrollToElement item.view.objectId bubbles=false}}
+      class="component-tree-item__view-element">
+      {{svg-jar "eye"
+        title="Scroll into view"
+        width="20px" height="20px"
+      }}
+    </button>
+  {{/if}}
+</div>
diff --git a/app/templates/components/deprecation-item.hbs b/app/templates/components/deprecation-item.hbs
index ad72a754fb..fb81d8e2c7 100644
--- a/app/templates/components/deprecation-item.hbs
+++ b/app/templates/components/deprecation-item.hbs
@@ -1,7 +1,7 @@
 <tr class="list__row {{if isExpanded 'list__row_arrow_expanded' 'list__row_arrow_collapsed'}} js-deprecation-item" {{action "toggleExpand"}}>
   {{#list.cell class="list__cell_main js-deprecation-main-cell" title=model.message}}
     <div class="list__cell-arrow"></div>
-    <span class="pill pill_not-clickable js-deprecation-count">{{model.count}}</span>
+    <span class="pill pill--not-clickable js-deprecation-count">{{model.count}}</span>
     <span class="js-deprecation-message">{{model.message}}</span>
     {{#if model.url}}
       <a href={{model.url}} class="external-link js-deprecation-url" target="_blank" title="Transition Plan">
diff --git a/app/templates/components/draggable-column.hbs b/app/templates/components/draggable-column.hbs
index 2a9bd3f728..d558135d8d 100644
--- a/app/templates/components/draggable-column.hbs
+++ b/app/templates/components/draggable-column.hbs
@@ -2,4 +2,9 @@
   {{yield}}
 {{/resizable-column}}
 
-{{drag-handle side=side position=width minWidth=minWidth action="setIsDragging" on-drag=(action "didDrag")}}
+{{drag-handle
+  minWidth=minWidth
+  on-drag=(action "didDrag")
+  position=width
+  setIsDragging=setIsDragging
+  side=side}}
diff --git a/app/templates/components/iframe-picker.hbs b/app/templates/components/iframe-picker.hbs
index a2903d3ce5..ab66cf21ee 100644
--- a/app/templates/components/iframe-picker.hbs
+++ b/app/templates/components/iframe-picker.hbs
@@ -4,5 +4,5 @@
       <option value={{iframe.val}}>{{iframe.name}}</option>
     {{/each}}
   </select>
-  <div class="dropdown__arrow"></div>
+  {{svg-jar "dropdown-arrow" class="dropdown__arrow"}}
 </div>
diff --git a/app/templates/components/mixin-details.hbs b/app/templates/components/mixin-details.hbs
index 55be88564b..67e546524e 100644
--- a/app/templates/components/mixin-details.hbs
+++ b/app/templates/components/mixin-details.hbs
@@ -1,53 +1,146 @@
 {{#if model.errors.length}}
-<div class="mixin mixin_props_no js-object-inspector-errors">
-  <h2 class="mixin__name mixin__name_errors">
-    Errors
-    <span {{action "traceErrors"}} class="send-trace-to-console js-send-errors-to-console">
-      Trace in the console
-    </span>
-  </h2>
-  <div class="mixin__properties">
-  {{#each model.errors as |error|}}
-    <div class="mixin__error js-object-inspector-error">
-      Error while computing: {{error.property}}
+  <div class="mixin mixin_props_no js-object-inspector-errors">
+    <h2 class="mixin__name mixin__name--errors">
+      Errors
+      <span {{action "traceErrors"}} class="send-trace-to-console js-send-errors-to-console">
+        Trace in the console
+      </span>
+    </h2>
+    <div class="mixin__properties">
+    {{#each model.errors as |error|}}
+      <div class="mixin__error js-object-inspector-error">
+        Error while computing: {{error.property}}
+      </div>
+    {{/each}}
     </div>
-  {{/each}}
   </div>
-</div>
 {{/if}}
+
 {{#each model.mixins as |item|}}
   {{#mixin-detail model=item mixinDetails=this as |mixin|}}
     <div class="mixin {{mixin.model.type}} {{if mixin.isExpanded 'mixin_state_expanded'}} {{if mixin.model.properties.length 'mixin_props_yes' 'mixin_props_no'}} js-object-detail">
       {{#if mixin.model.properties.length}}
         <h2 class="mixin__name js-object-detail-name" {{action "toggleExpanded" target=mixin}}>{{mixin.model.name}}</h2>
       {{else}}
-        <h2 class="mixin__name js-object-detail-name">{{mixin.model.name}}</h2>
+        <h2 class="mixin__name mixin__name--no-props js-object-detail-name">{{mixin.model.name}}</h2>
       {{/if}}
       {{#if mixin.isExpanded}}
         <ul class="mixin__properties">
           {{#each mixin.sortedProperties as |prop|}}
             {{#mixin-property model=prop mixin=mixin as |property|}}
-              <li class="{{if property.model.overridden 'mixin__property_state_overridden'}} mixin__property js-object-property">
-                {{#if property.model.value.computed}}
-                  <button class="mixin__calc-btn {{if property.isCalculated 'mixin__calc-btn_calculated'}} js-calculate" {{action "calculate" property.model bubbles=false target=mixin}}><img src="assets/images/calculate.svg"></button>
+              <li class="{{if property.isOverridden 'mixin__property_state_overridden'}} mixin__property js-object-property">
+                <!-- Disclosure Triangle -->
+                {{#if property.hasDependentKeys}}
+                  <button
+                    class="mixin__cp-toggle {{if property.showDependentKeys "mixin__cp-toggle--expanded"}}"
+                    {{action "toggleDeps" target=property}}>
+                    {{svg-jar "disclosure-triangle"
+                      title="Toggle dependent keys"
+                      width="9px" height="9px"}}
+                  </button>
                 {{else}}
-                  <span class='pad'></span>
+                  <span class="pad"></span>
                 {{/if}}
-                <span class="mixin__property-name js-object-property-name">{{property.model.name}}</span><span class='mixin__property-value-separator'>: </span>
+
+                <!-- Property Icon -->
+                {{#if property.isService}}
+                  <span class="mixin__property-icon-container" title="Service">
+                    <span class="mixin__property-icon mixin__property-icon--service"></span>
+                  </span>
+                {{else if property.isComputedProperty}}
+                  <span
+                    class="mixin__property-icon-container"
+                    title="{{if property.model.code property.model.code 'code not avaliable' }}"
+                    {{action "toggleDeps" target=property}}>
+                    <span class="mixin__property-icon mixin__property-icon--computed"></span>
+                  </span>
+                {{else}}
+                  <span class="mixin__property-icon-container" title="Property">
+                    <span class="mixin__property-icon mixin__property-icon--property"></span>
+                  </span>
+                {{/if}}
+
+                <!-- Property Name -->
+                <span class="mixin__property-name js-object-property-name">
+                  {{#if property.isService}}
+                    <span
+                      title="service"
+                      class="js-property-name-service mixin__property--group">
+                      {{property.model.name}}
+                    </span>
+                  {{else}}
+                    {{#if property.hasDependentKeys}}
+                      <span
+                        title="computed"
+                        class="js-property-name-computed mixin__property--group">
+                        {{property.model.name}}
+                      </span>
+                    {{else}}
+                      {{property.model.name}}
+                    {{/if}}
+                  {{/if}}
+                </span>
+
+                <span class="mixin__property-value-separator">: </span>
+
+                <!-- Property Value -->
                 {{#unless property.isEdit}}
-                  <span  {{action "valueClick" property.model target=property}} class="{{property.model.value.type}} mixin__property-value js-object-property-value">{{property.model.value.inspect}}</span>
+                  {{#if (and property.isComputedProperty (not property.isCalculated))}}
+                    <button
+                      class="mixin__calc-btn js-calculate"
+                      title="compute property"
+                      {{action "calculate" property.model bubbles=false target=mixin}}>
+                      {{svg-jar "calculate" width="16px" height="16px"}}
+                    </button>
+                  {{else}}
+                    <span
+                      {{action "valueClick" property.model target=property}}
+                      class="{{property.model.value.type}} {{if property.isService "type-service"}} mixin__property-value js-object-property-value">
+                      {{property.model.value.inspect}}
+                    </span>
+                  {{/if}}
                 {{else}}
                   {{#unless property.isDate}}
-                    {{property-field value=property.txtValue finished-editing="finishedEditing" save-property="saveProperty" propertyComponent=property
-                     class="mixin__property-value-txt js-object-property-value-txt"}}
+                    {{property-field
+                      value=property.txtValue
+                      finished-editing="finishedEditing"
+                      save-property="saveProperty"
+                      propertyComponent=property
+                      class="mixin__property-value-txt js-object-property-value-txt"}}
                   {{else}}
-                    {{date-property-field value=property.dateValue format="YYYY-MM-DD"
-                     class="mixin__property-value-txt js-object-property-value-date" onSelection=(action "dateSelected" target=property) cancel=(action "finishedEditing" target=property)}}
+                    {{date-property-field
+                      value=property.dateValue
+                      format="YYYY-MM-DD"
+                      class="mixin__property-value-txt js-object-property-value-date"
+                      onSelection=(action "dateSelected" target=property)
+                      cancel=(action "finishedEditing" target=property)}}
                   {{/unless}}
                 {{/unless}}
-                <span class='mixin__property-overridden-by'>(Overridden by {{property.model.overridden}})</span>
-                <button class="mixin__send-btn js-send-to-console-btn" {{action "sendToConsole" property.model target=mixin}}><img src="assets/images/send.png" title="Send to console"></button>
-              </li>
+
+               <span class="mixin__property-overridden-by">(Overridden by {{property.model.overridden}})</span>
+
+               <button
+                 class="mixin__send-btn send-to-console js-send-to-console-btn"
+                 {{action "sendToConsole" property.model target=mixin}}>
+                 <img src="assets/images/send.png" title="Send to console">
+               </button>
+             </li>
+             
+              {{#if property.showDependentKeys}}
+                <li class="mixin__property-dependency-list">
+                  {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
+                  <ul>
+                    {{#each property.model.dependentKeys as |depKey index|}}
+                      <li class="mixin__property-dependency-item">
+                        {{svg-jar "dependent-key-bullet" width="9px" height="9px"}}
+                        <span class="mixin__property-dependency-name" data-label="object-property-name">
+                          {{depKey}}
+                        </span>
+                      </li>
+                    {{/each}}
+                  </ul>
+                </li>
+              {{/if}}
             {{/mixin-property}}
           {{else}}
             <li class="mixin__property">No Properties</li>
diff --git a/app/templates/components/not-detected.hbs b/app/templates/components/not-detected.hbs
index 9da0409940..099bcc1f0f 100644
--- a/app/templates/components/not-detected.hbs
+++ b/app/templates/components/not-detected.hbs
@@ -21,7 +21,7 @@
       </ul>
 
       If you're still having trouble, please file an issue on the Ember Inspector's
-      <a href="https://github.com/emberjs/ember-inspector" target="_blank">GitHub page.</a>
+      <a href="https://github.com/emberjs/ember-inspector/issues" target="_blank">GitHub page.</a>
     </div>
 
   </div>
diff --git a/app/templates/components/object-inspector.hbs b/app/templates/components/object-inspector.hbs
index 99208a8a14..c2ef2c0348 100644
--- a/app/templates/components/object-inspector.hbs
+++ b/app/templates/components/object-inspector.hbs
@@ -4,14 +4,10 @@ isExpanded=true class="toolbar__icon-button sidebar-toggle--far-left"}}
   <div class="split__panel__hd">
     <div class="toolbar">
       <button {{action "popStack"}} class="toolbar__icon-button {{if isNested 'enabled' 'disabled'}} js-object-inspector-back">
-        <svg width="9px" height="9px" viewBox="0 0 9 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <polygon class="svg-fill" fill="#000000" transform="translate(4.500000, 4.500000) rotate(-90.000000) translate(-4.500000, -4.500000) " points="4.5 0 9 9 0 9 "></polygon>
-          </g>
-        </svg>
+        {{svg-jar "arrow-back" width="21px" height="21px"}}
       </button>
 
-      <div class="divider"></div>
+      <div class="divider" aria-hidden="true"></div>
 
       <code class="toolbar__title js-object-name">{{model.firstObject.name}}</code>
 
diff --git a/app/templates/components/promise-item.hbs b/app/templates/components/promise-item.hbs
index 98aa7e352b..22f1b5eb01 100644
--- a/app/templates/components/promise-item.hbs
+++ b/app/templates/components/promise-item.hbs
@@ -13,7 +13,7 @@
   </div>
 {{/list.cell}}
 {{#list.cell}}
-  <div class="pill pill_text_clear js-promise-state" style={{style}}>{{state}}</div>
+  <div class="pill pill--bold js-promise-state" style={{style}}>{{state}}</div>
 {{/list.cell}}
 {{#list.cell class="js-promise-value"}}
   {{#if hasValue}}
diff --git a/app/templates/components/reload-button.hbs b/app/templates/components/reload-button.hbs
index f67ffeb417..3905c01ab4 100644
--- a/app/templates/components/reload-button.hbs
+++ b/app/templates/components/reload-button.hbs
@@ -1,7 +1 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   width="14px" height="14px" viewBox="0 0 54.203 55.142" enable-background="new 0 0 54.203 55.142" xml:space="preserve">
-<path fill="#797979" d="M54.203,21.472l-0.101-1.042h0.101c-0.042-0.159-0.101-0.311-0.146-0.468l-1.82-18.786l-6.056,6.055
-  C41.277,2.741,34.745,0,27.571,0C12.344,0,0,12.344,0,27.571s12.344,27.571,27.571,27.571c12.757,0,23.485-8.666,26.632-20.431
-  h-8.512c-2.851,7.228-9.881,12.349-18.12,12.349c-10.764,0-19.49-8.726-19.49-19.489s8.727-19.489,19.49-19.489
-  c4.942,0,9.441,1.853,12.873,4.887l-6.536,6.536L54.203,21.472z"/>
-</svg>
+{{svg-jar "reload" width="13px" height="13px"}}
\ No newline at end of file
diff --git a/app/templates/components/render-item.hbs b/app/templates/components/render-item.hbs
index d766e667a0..0560d1bb00 100644
--- a/app/templates/components/render-item.hbs
+++ b/app/templates/components/render-item.hbs
@@ -6,7 +6,7 @@
     </span>
   {{/list.cell}}
   {{#list.cell class="list__cell_value_numeric"}}
-    <span class="pill pill_not-clickable js-render-profile-duration">{{ms-to-time model.duration}}</span>
+    <span class="pill pill--not-clickable js-render-profile-duration">{{ms-to-time model.duration}}</span>
   {{/list.cell}}
   {{#list.cell class="list__cell_value_numeric js-render-profile-timestamp"}}
     {{readableTime}}
diff --git a/app/templates/components/search-field.hbs b/app/templates/components/search-field.hbs
new file mode 100644
index 0000000000..0a6cf24f1e
--- /dev/null
+++ b/app/templates/components/search-field.hbs
@@ -0,0 +1,6 @@
+{{input value=value type="text" placeholder="Search"}}
+{{#if value}}
+  <button {{action "clear"}} class="toolbar__icon-button toolbar__search-clear-button js-search-field-clear-button" title="clear">
+    {{svg-jar "clear" width="14px" height="14px"}}
+  </button>
+{{/if}}
\ No newline at end of file
diff --git a/app/templates/components/view-item.hbs b/app/templates/components/view-item.hbs
index 62fc6db6d3..4e6bc79bbc 100644
--- a/app/templates/components/view-item.hbs
+++ b/app/templates/components/view-item.hbs
@@ -45,5 +45,5 @@
 {{/list.cell}}
 
 {{#list.cell class="list__cell_size_small list__cell_value_numeric"}}
-  <span class="pill pill_not-clickable pill_size_small js-view-duration">{{ms-to-time model.value.duration}}</span>
+  <span class="pill pill--not-clickable pill--small js-view-duration">{{ms-to-time model.value.duration}}</span>
 {{/list.cell}}
diff --git a/app/templates/components/x-list.hbs b/app/templates/components/x-list.hbs
index 2130c00f81..09535f9acb 100644
--- a/app/templates/components/x-list.hbs
+++ b/app/templates/components/x-list.hbs
@@ -8,15 +8,15 @@
           {{/each}}
         </colgroup>
         <tbody>
-          <tr class="list__row">
-            {{#each columns key="id" as |column|}}
-              {{#x-list-cell
-                tagName="th"
-                class="js-header-column"}}
-                {{column.name}}
-              {{/x-list-cell}}
-            {{/each}}
-          </tr>
+        <tr class="list__row">
+          {{#each columns key="id" as |column|}}
+            {{#x-list-cell
+              tagName="th"
+              class="js-header-column"}}
+              {{column.name}}
+            {{/x-list-cell}}
+          {{/each}}
+        </tr>
         </tbody>
       </table>
     </div>
@@ -39,12 +39,13 @@
 {{#each columns key="id" as |column|}}
   {{#unless (eq column columns.lastObject)}}
     {{drag-handle
-      side="left"
+      faded=true
       left=column.left
-      position=(one-way column.width)
       minWidth=minWidth
       maxWidth=column.maxWidth
       on-drag=(action "didResize" column.id)
-      faded=true}}
+      position=(one-way column.width)
+      setIsDragging=setIsDragging
+      side="left"}}
   {{/unless}}
 {{/each}}
diff --git a/app/templates/container-type-toolbar.hbs b/app/templates/container-type-toolbar.hbs
index 046ac69ffb..461d0844b6 100644
--- a/app/templates/container-type-toolbar.hbs
+++ b/app/templates/container-type-toolbar.hbs
@@ -1,7 +1,9 @@
 <div class="toolbar">
   {{reload-button action="reload" classNames="toolbar__icon-button js-reload-container-btn"}}
 
+  <div class="divider" aria-hidden="true"></div>
+
   <div class="toolbar__search toolbar__search--small js-container-instance-search">
-    {{input value=searchVal placeholder="Search"}}
+    {{search-field value=searchValue}}
   </div>
 </div>
diff --git a/app/templates/container-type.hbs b/app/templates/container-type.hbs
index 76ec086988..ab906fc079 100644
--- a/app/templates/container-type.hbs
+++ b/app/templates/container-type.hbs
@@ -1,4 +1,8 @@
-{{#x-list name="container-instance-list" schema=(hash columns=null) headerHeight=0 as |list|}}
+{{#x-list
+  headerHeight=0
+  name="container-instance-list"
+  schema=(hash columns=null)
+  setIsDragging=(route-action 'setIsDragging') as |list|}}
   {{#list.vertical-collection filtered estimateHeight=30 itemClass="js-instance-row" as |content index|}}
     <tr class="list__row js-container-instance-list-item" {{action "inspectInstance" content}}>
       {{#list.cell class="list__cell_main" clickable=content.inspectable}}
diff --git a/app/templates/container-types.hbs b/app/templates/container-types.hbs
index 943e5cdebf..19040a91c3 100644
--- a/app/templates/container-types.hbs
+++ b/app/templates/container-types.hbs
@@ -1,12 +1,13 @@
 <div class="split">
 
   {{#draggable-column
-          width=180
-          classes="split__panel split__panel--sidebar-2 nav"}}
+    width=180
+    classes="split__panel split__panel--sidebar-2 nav"
+    setIsDragging=(route-action 'setIsDragging')}}
 
     <div class="split__panel__bd">
       <div class="nav__title">
-        <h3>Types</h3>
+        <h1>Types</h1>
       </div>
 
       <ul>
diff --git a/app/templates/deprecations-toolbar.hbs b/app/templates/deprecations-toolbar.hbs
index ca835ab49b..c925521ea5 100644
--- a/app/templates/deprecations-toolbar.hbs
+++ b/app/templates/deprecations-toolbar.hbs
@@ -1,7 +1,9 @@
 <div class="toolbar">
   {{clear-button action="clear" classNames="toolbar__icon-button js-clear-deprecations-btn"}}
 
+  <div class="divider" aria-hidden="true"></div>
+
   <div class="toolbar__search js-deprecations-search">
-    {{input value=searchVal placeholder="Search"}}
+    {{search-field value=searchValue}}
   </div>
 </div>
diff --git a/app/templates/deprecations.hbs b/app/templates/deprecations.hbs
index 91653cfc24..8274966469 100644
--- a/app/templates/deprecations.hbs
+++ b/app/templates/deprecations.hbs
@@ -1,20 +1,26 @@
-{{#x-list name="deprecation-list" schema=(hash columns=null) headerHeight=0 class="js-deprecations list_no-alternate-color" as |list|}}
+{{#x-list
+  class="js-deprecations list_no-alternate-color"
+  headerHeight=0
+  name="deprecation-list"
+  schema=(hash columns=null)
+  setIsDragging=(route-action 'setIsDragging') as |list|}}
   {{#if filtered.length}}
     <tbody>
-      {{#each filtered as |content|}}
-        {{deprecation-item
-          model=content
-          openResource=(action "openResource")
-          traceSource=(action "traceSource")
-          traceDeprecations=(action "traceDeprecations")
-          class="deprecation-item"
-          list=list
-        }}
-      {{/each}}
+    {{#each filtered as |content|}}
+      {{deprecation-item
+        model=content
+        openResource=(action "openResource")
+        traceSource=(action "traceSource")
+        traceDeprecations=(action "traceDeprecations")
+        class="deprecation-item"
+        list=list
+      }}
+    {{/each}}
     </tbody>
   {{else}}
     <div class="notice js-page-refresh">
-      <p>No deprecations have been detected. Try reloading to catch the deprecations that were logged before you opened the inspector.</p>
+      <p>No deprecations have been detected. Try reloading to catch the deprecations that were logged before you opened
+        the inspector.</p>
       <button class="js-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
     </div>
   {{/if}}
diff --git a/app/templates/info.hbs b/app/templates/info.hbs
index 453e4e2f0a..05956a691a 100644
--- a/app/templates/info.hbs
+++ b/app/templates/info.hbs
@@ -1,4 +1,7 @@
-{{#x-list name="info-list" schema=(schema-for "info-list") as |list|}}
+{{#x-list
+  name="info-list"
+  schema=(schema-for "info-list")
+  setIsDragging=(route-action 'setIsDragging') as |list|}}
   <tbody>
     {{#each model as |library|}}
       <tr class="list__row js-library-row">
diff --git a/app/templates/model-types-toolbar.hbs b/app/templates/model-types-toolbar.hbs
index fe77c73762..b414522d1c 100644
--- a/app/templates/model-types-toolbar.hbs
+++ b/app/templates/model-types-toolbar.hbs
@@ -1,5 +1,8 @@
 <div class="toolbar">
     <div class="toolbar__checkbox js-filter-hide-empty-model-typess">
-      {{input type="checkbox" checked=hideEmptyModelTypes id="options-hideEmptyModelTypes"}} <label for="options-hideEmptyModelTypes">Hide Empty Model Types</label>
+      <label for="options-hideEmptyModelTypes">
+        {{input type="checkbox" checked=hideEmptyModelTypes id="options-hideEmptyModelTypes"}}
+        Hide Empty Model Types
+      </label>
     </div>
 </div>
diff --git a/app/templates/model-types.hbs b/app/templates/model-types.hbs
index 44b7c9e62a..99a9ad0faf 100644
--- a/app/templates/model-types.hbs
+++ b/app/templates/model-types.hbs
@@ -1,7 +1,10 @@
 <div class="split">
-  {{#draggable-column width=navWidth classes="split__panel split__panel--sidebar-2 nav"}}
+  {{#draggable-column
+    width=navWidth
+    classes="split__panel split__panel--sidebar-2 nav"
+    setIsDragging=(route-action 'setIsDragging')}}
     <div class="split__panel__bd">
-      <div class="nav__title"><h3>Model Types</h3></div>
+      <div class="nav__title"><h1>Model Types</h1></div>
       <ul>
         {{#each sorted as |modelType|}}
           <li class="js-model-type">
diff --git a/app/templates/nav.hbs b/app/templates/nav.hbs
index 1cf373ea9a..6e2683eaac 100644
--- a/app/templates/nav.hbs
+++ b/app/templates/nav.hbs
@@ -1,116 +1,61 @@
 <nav class="nav nav--main">
   <ul>
+    <li>
+      {{#link-to "component-tree"}}
+        {{svg-jar "nav-components" width="20px" height="20px"}}
+        Components
+      {{/link-to}}
+    </li>
     <li>
       {{#link-to "view-tree"}}
+        {{svg-jar "nav-view-tree" width="20px" height="20px"}}
         View Tree
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
-          <path fill="#454545" d="M0,0v19h19V0H0z M6,17h-4V5h4V17z M17,17H7V5h10v12H17z M17,4H2V2h15V1z"/>
-        </svg>
       {{/link-to}}
     </li>
     <li>
       {{#link-to "route-tree"}}
+        {{svg-jar "nav-route-tree" width="20px" height="20px"}}
         Routes
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
-          <polygon fill="#454545" points="0.591,17.012 2.36,17.012 6.841,2.086 5.07,2.086"/>
-          <path fill="#454545" d="M18.117,8.495l0.292-1.494h-2.242l0.874-3.507h-1.544l-0.874,3.507h-1.88l0.874-3.507h-1.536l-0.883,3.507 H8.668L8.375,8.495h2.449l-0.616,2.474H7.875l-0.292,1.495h2.252l-0.883,3.515h1.544l0.874-3.515h1.888l-0.883,3.515h1.544 l0.874-3.515h2.53l0.303-1.495h-2.459l0.625-2.474H18.117z M14.249,8.495l-0.617,2.474h-1.888l0.625-2.474H14.249z"/>
-        </svg>
       {{/link-to}}
     </li>
     <li>
       {{#link-to "data"}}
+        {{svg-jar "nav-data" width="20px" height="20px"}}
         Data
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
-          <path d="M9.5,0.001C3.907,0.001,0,1.507,0,3.663v11.675C0,17.494,3.907,19,9.5,19c5.594,0,9.5-1.506,9.5-3.662V3.663 C19,1.507,15.094,0.001,9.5,0.001z M9.5,5.669c-4.768,0-7.81-1.318-7.81-2.007c0-0.689,3.042-2.008,7.81-2.008 c4.769,0,7.81,1.318,7.81,2.008C17.31,4.352,14.269,5.669,9.5,5.669z M17.31,15.338c0,0.689-3.041,2.007-7.81,2.007 c-4.768,0-7.81-1.317-7.81-2.007V5.852C3.39,6.77,6.282,7.324,9.5,7.324c3.217,0,6.108-0.554,7.81-1.472V15.338z"/>
-        </svg>
       {{/link-to}}
     </li>
     <li>
       {{#link-to "deprecations"}}
+        {{svg-jar "nav-deprecations" width="20px" height="20px"}}
         Deprecations
-        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-           width="20" height="18" viewBox="0 0 20.565 18.33" enable-background="new 0 0 20.565 18.33" xml:space="preserve">
-        <g>
-          <path d="M19.58,18.33H0.985c-0.351,0-0.674-0.187-0.851-0.489c-0.177-0.303-0.179-0.677-0.006-0.982L9.426,0.463
-            c0.35-0.617,1.363-0.617,1.713,0l9.297,16.396c0.173,0.305,0.17,0.679-0.006,0.982S19.931,18.33,19.58,18.33z M2.676,16.36h15.213
-            L10.283,2.946L2.676,16.36z"/>
-          <g>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.265,8.038c-0.082,1.158-0.162,2.375-0.259,3.594
-              c-0.021,0.271-0.088,0.544-0.169,0.806c-0.079,0.257-0.266,0.358-0.553,0.358c-0.289,0-0.489-0.098-0.553-0.358
-              c-0.096-0.394-0.167-0.799-0.201-1.203c-0.088-1.068-0.159-2.138-0.22-3.208c-0.017-0.289-0.011-0.588,0.047-0.87
-              c0.084-0.409,0.486-0.673,0.933-0.67c0.439,0.003,0.812,0.27,0.924,0.667c0.024,0.08,0.045,0.163,0.049,0.245
-              C11.271,7.59,11.265,7.784,11.265,8.038z"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.285,14.534c0.004,0.554-0.436,1.004-0.991,1.015
-              c-0.552,0.01-1.015-0.45-1.013-1.008c0.001-0.552,0.449-1.004,1-1.007C10.829,13.531,11.281,13.983,11.285,14.534z"/>
-          </g>
-        </g>
-        </svg>
-
-        <span class="pill pill_not-clickable">{{deprecationCount}}</span>
+        <span class="pill pill--not-clickable">{{deprecationCount}}</span>
       {{/link-to}}
     </li>
     <li>
       {{#link-to "info"}}
-      Info
-      <svg width="19" height="19" xmlns="http://www.w3.org/2000/svg">
-        <rect id="svg_3" height="6.815" width="3.33" fill="#454545" y="7.8805" x="7.737"/>
-        <circle id="svg_4" r="1.753" cy="5.3775" cx="9.451" fill="#454545"/>
-        <path id="svg_6" d="m9.5,19c-5.238,0 -9.5,-4.262 -9.5,-9.5c0,-5.238 4.262,-9.5 9.5,-9.5s9.5,4.262 9.5,9.5c0,5.238 -4.262,9.5 -9.5,9.5zm0,-17.434c-4.375,0 -7.933,3.559 -7.933,7.933c0,4.374 3.559,7.932 7.933,7.932c4.374,0 7.933,-3.559 7.933,-7.932c0,-4.374 -3.559,-7.933 -7.933,-7.933z" fill="#454545"/>
-      </svg>
+        {{svg-jar "nav-info" width="20px" height="20px"}}
+        Info
       {{/link-to}}
     </li>
   </ul>
-  <div class="nav__title nav__title--middle">
-    <h3>Advanced</h3>
-  </div>
+  <div class="nav__title"><h1>Advanced</h1></div>
   <ul>
     <li>
       {{#link-to "promise-tree"}}
+        {{svg-jar "nav-promises" width="20px" height="20px"}}
         Promises
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="23px" height="23px" viewBox="0 0 23 23" enable-background="new 0 0 23 23" xml:space="preserve">
-          <path d="M19,0 L19,19 L-0,19 L-0,0 z M2,2 L2,17 L17,17 L17,2.832 L6.807,12.912 L5.12,12.923 L5.12,2 z M7,2 L7.12,9.863 L15.953,2 z" />
-          <path d="M6.066,13.643 C4.488,13.643 3.208,12.363 3.208,10.784 C3.208,9.206 4.488,7.926 6.066,7.926 C7.645,7.926 8.925,9.206 8.925,10.784 C8.925,12.363 7.645,13.643 6.066,13.643 z" />
-        </svg>
       {{/link-to}}
     </li>
     <li>
       {{#link-to "container-types"}}
-      Container
-
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-         width="19px" height="19px" viewBox="0 0 43 42.191" enable-background="new 0 0 43 42.191" xml:space="preserve">
-      <g>
-        <path d="M20.038,42.092L18,40.691V15.687l1.07-1.437l22-6.585L43,9.102v23.138l-0.962,1.4L20.038,42.092z M21,16.804v21.704
-          l19-7.299V11.116L21,16.804z"/>
-        <path d="M19.647,42.191c-0.224,0-0.452-0.05-0.666-0.156L0.833,33.028L0,31.685V8.01l2.075-1.386l18.507,7.677
-          c0.765,0.317,1.128,1.195,0.811,1.961c-0.318,0.765-1.195,1.129-1.96,0.811L3,10.256v20.499l17.315,8.593
-          c0.742,0.368,1.045,1.269,0.677,2.011C20.73,41.886,20.199,42.191,19.647,42.191z"/>
-        <path d="M41.414,10.602c-0.193,0-0.391-0.037-0.58-0.116L23.047,3.027L2.096,9.444C1.303,9.688,0.465,9.24,0.223,8.449
-          C-0.02,7.657,0.425,6.818,1.217,6.575L22.687,0l1.02,0.051l18.288,7.667c0.764,0.32,1.124,1.2,0.804,1.964
-          C42.557,10.256,42,10.602,41.414,10.602z"/>
-      </g>
-      </svg>
-
+        {{svg-jar "nav-container" width="20px" height="20px"}}
+        Container
       {{/link-to}}
     </li>
     <li>
       {{#link-to "render-tree"}}
-      Render Performance
-      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="18.979px" height="18.979px" viewBox="0.021 -0.018 18.979 18.979" enable-background="new 0.021 -0.018 18.979 18.979"
- xml:space="preserve">
-      <g>
-        <path d="M8.358,11.589c0.291,0.299,0.674,0.45,1.053,0.45c0.347,0,0.69-0.126,0.955-0.384c0.553-0.535,5.625-7.474,5.625-7.474
-          s-7.089,4.864-7.641,5.4C7.798,10.12,7.803,11.017,8.358,11.589z"/>
-        <g>
-          <path d="M16.057,2.615c-1.702-1.627-4.005-2.633-6.546-2.633c-5.237,0-9.482,4.246-9.482,9.482c0,2.816,1.233,5.336,3.182,7.073
-            c-1.22-1.439-1.959-3.299-1.959-5.333c0-4.561,3.698-8.259,8.26-8.259c1.577,0,3.045,0.45,4.298,1.216
-            c0.561-0.386,1.067-0.734,1.472-1.011L16.057,2.615z"/>
-          <path d="M17.005,4.923c-0.26,0.354-0.582,0.794-0.936,1.275c1.062,1.39,1.7,3.121,1.7,5.005c0,2.037-0.741,3.898-1.963,5.338
-            c1.951-1.736,3.187-4.259,3.187-7.078c0-1.905-0.568-3.676-1.535-5.162L17.005,4.923z"/>
-        </g>
-      </g>
-      </svg>
+        {{svg-jar "nav-render-performance" width="20px" height="20px"}}
+        Render Performance
       {{/link-to}}
     </li>
   </ul>
diff --git a/app/templates/promise-tree-toolbar.hbs b/app/templates/promise-tree-toolbar.hbs
index 31c14ce8a7..c64d50240a 100644
--- a/app/templates/promise-tree-toolbar.hbs
+++ b/app/templates/promise-tree-toolbar.hbs
@@ -1,31 +1,34 @@
 <div class="toolbar">
   {{clear-button action="clear" classNames="toolbar__icon-button js-clear-promises-btn"}}
 
+  {{! if should refresh the refresh button will be in the middle of the of the tab }}
+  {{#unless shouldRefresh}}
+    <div class="divider" aria-hidden="true"></div>
+    {{reload-button action="refreshPage" classNames="toolbar__icon-button js-toolbar-page-refresh-btn"}}
+  {{/unless}}
+
+  <div class="divider" aria-hidden="true"></div>
+
   <div class="toolbar__search js-promise-search">
-    {{input value=search placeholder="Search"}}
+    {{search-field value=searchValue}}
   </div>
 
-  <button class="{{if noFilter 'active'}} toolbar__radio js-filter" {{action "setFilter" "all"}}>
+  <div class="divider" aria-hidden="true"></div>
+
+  <button class="{{if noFilter 'active'}} toolbar__radio toolbar__radio--first js-filter" {{action "setFilter" "all"}}>
     All
   </button>
 
-  <div class="divider"></div>
-
   <button class="{{if isRejectedFilter 'active'}} toolbar__radio js-filter" {{action "setFilter" "rejected"}} >Rejected</button>
   <button class="{{if isPendingFilter 'active'}} toolbar__radio js-filter" {{action "setFilter" "pending"}} >Pending</button>
-  <button class="{{if isFulfilledFilter 'active'}} toolbar__radio js-filter" {{action "setFilter" "fulfilled"}} >Fulfilled</button>
+  <button class="{{if isFulfilledFilter 'active'}} toolbar__radio toolbar__radio--last js-filter" {{action "setFilter" "fulfilled"}} >Fulfilled</button>
 
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
 
   <div class="toolbar__checkbox js-with-stack">
-    {{action-checkbox on-update="updateInstrumentWithStack" checked=instrumentWithStack id="instrument-with-stack"}} <label for="instrument-with-stack">Trace promises</label>
+    <label for="instrument-with-stack">
+      {{action-checkbox on-update="updateInstrumentWithStack" checked=instrumentWithStack id="instrument-with-stack"}}
+      Trace promises
+    </label>
   </div>
-
-
-  {{! if should refresh the refresh button will be in the middle of the of the tab }}
-  {{#unless shouldRefresh}}
-    <div class="divider"></div>
-    <button class="js-toolbar-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
-  {{/unless}}
-
 </div>
diff --git a/app/templates/promise-tree.hbs b/app/templates/promise-tree.hbs
index ade01e9a45..d24ed758c6 100644
--- a/app/templates/promise-tree.hbs
+++ b/app/templates/promise-tree.hbs
@@ -1,7 +1,11 @@
 {{#if shouldRefresh}}
   {{partial "page_refresh"}}
 {{else}}
-  {{#x-list name="promise-tree" schema=(schema-for "promise-tree") class="js-promise-tree" as |list|}}
+  {{#x-list
+    class="js-promise-tree"
+    name="promise-tree"
+    schema=(schema-for "promise-tree")
+    setIsDragging=(route-action 'setIsDragging') as |list|}}
     {{#list.vertical-collection filtered as |content|}}
       <tr class="list__row js-promise-tree-item">
         {{promise-item
diff --git a/app/templates/records-toolbar.hbs b/app/templates/records-toolbar.hbs
index 191c2e1ee0..6a82e69ebc 100644
--- a/app/templates/records-toolbar.hbs
+++ b/app/templates/records-toolbar.hbs
@@ -1,13 +1,14 @@
 <div class="toolbar">
   <div class="toolbar__search js-records-search">
-    {{input value=search placeholder="Search"}}
+    {{search-field value=searchValue}}
   </div>
 
+  <div class="divider" aria-hidden="true"></div>
+
   <button class="{{if noFilterValue 'active'}} toolbar__radio js-filter" {{action "setFilter"}}>
     All
   </button>
 
-  <div class="divider"></div>
   {{#each filters as |item|}}
     {{#record-filter model=item filterValue=filterValue as |filter|}}
       <button class="{{if filter.checked 'active'}} toolbar__radio js-filter" {{action "setFilter" filter.model.name}} >
diff --git a/app/templates/records.hbs b/app/templates/records.hbs
index 2a69ed04b1..ae1701485d 100644
--- a/app/templates/records.hbs
+++ b/app/templates/records.hbs
@@ -1,6 +1,7 @@
 {{#x-list
   name="record-list"
   schema=schema
+  setIsDragging=(route-action 'setIsDragging')
   storageKey=(concat "record-list-" modelType.name)
   itemClass="list__row_highlight" as |list|}}
 
diff --git a/app/templates/render-tree-toolbar.hbs b/app/templates/render-tree-toolbar.hbs
index 78e3639d7f..b34db4730a 100644
--- a/app/templates/render-tree-toolbar.hbs
+++ b/app/templates/render-tree-toolbar.hbs
@@ -1,13 +1,14 @@
 <div class="toolbar">
   {{clear-button action="clearProfiles" classNames="toolbar__icon-button"}}
-  <div class="toolbar__search js-render-profiles-search">
-    {{input value=searchField placeholder="Search"}}
-  </div>
-  <div class="filter-bar__pills"></div>
 
   {{#unless showEmpty}}
-    <div class="divider"></div>
-    <button class="js-toolbar-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
+    <div class="divider" aria-hidden="true"></div>
+    {{reload-button action="refreshPage" classNames="toolbar__icon-button js-toolbar-page-refresh-btn"}}
   {{/unless}}
 
+  <div class="divider" aria-hidden="true"></div>
+
+  <div class="toolbar__search js-render-profiles-search">
+    {{search-field value=searchValue}}
+  </div>
 </div>
diff --git a/app/templates/render-tree.hbs b/app/templates/render-tree.hbs
index 7a6d3bf169..d1e940df3f 100644
--- a/app/templates/render-tree.hbs
+++ b/app/templates/render-tree.hbs
@@ -9,7 +9,12 @@
     <button class="js-toolbar-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
   </div>
 {{else}}
-  {{#x-list name="render-tree" schema=(schema-for "render-tree") class="js-render-tree" headerHeight=headerHeight as |list|}}
+  {{#x-list
+    class="js-render-tree"
+    headerHeight=headerHeight
+    name="render-tree"
+    schema=(schema-for "render-tree")
+    setIsDragging=(route-action 'setIsDragging') as |list|}}
     <tbody>
       {{#each filtered as |item|}}
         {{render-item model=item search=search list=list}}
diff --git a/app/templates/route-tree-toolbar.hbs b/app/templates/route-tree-toolbar.hbs
index a907f74acc..0f4c733a3f 100644
--- a/app/templates/route-tree-toolbar.hbs
+++ b/app/templates/route-tree-toolbar.hbs
@@ -1,5 +1,8 @@
 <div class="toolbar">
   <div class="toolbar__checkbox js-filter-hide-routes">
-    {{input type="checkbox" checked=options.hideRoutes id="options-hideRoutes"}} <label for="options-hideRoutes">Current Route only</label>
+    <label for="options-hideRoutes">
+      {{input type="checkbox" checked=options.hideRoutes id="options-hideRoutes"}}
+      Current Route only
+    </label>
   </div>
 </div>
diff --git a/app/templates/route-tree.hbs b/app/templates/route-tree.hbs
index a3bdb08fc4..6606b59945 100644
--- a/app/templates/route-tree.hbs
+++ b/app/templates/route-tree.hbs
@@ -1,4 +1,8 @@
-{{#x-list name="route-tree" schema=(schema-for "route-tree") as |list|}}
+{{#x-list
+  name="route-tree"
+  schema=(schema-for "route-tree")
+  setIsDragging=(route-action 'setIsDragging')
+as |list|}}
   {{#list.vertical-collection filtered as |content|}}
     <tr class="list__row js-route-tree-item">
       {{route-item
diff --git a/app/templates/view-tree-toolbar.hbs b/app/templates/view-tree-toolbar.hbs
index c72e5d2165..899397521e 100644
--- a/app/templates/view-tree-toolbar.hbs
+++ b/app/templates/view-tree-toolbar.hbs
@@ -1,22 +1,20 @@
 <div class="toolbar">
   <button class="{{if inspectingViews 'active'}} toolbar__icon-button js-inspect-views" {{action "toggleViewInspection"}}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17">
-      <g class="svg-fill" fill-rule="evenodd" transform="translate(0, 2)">
-        <path d="M8 7l2.29 8 2.33-2.33L14.81 15l1.14-1.14-2.29-2.29L16 9.25z"/>
-        <path d="M7 13v1H2c-1.13 0-2-.88-2-2V2C0 .88.87 0 2 0h11c1.12 0 2 .88 2 2v4h-1V2c0-.37-.63-1-1-1H2c-.37 0-1 .63-1 1v10c0 .37.62 1 1 1h5z"/>
-      </g>
-    </svg>
+    {{svg-jar "inspect" width="16px" height="17px"}}
   </button>
 
-  <div class="divider"></div>
+  <div class="divider" aria-hidden="true"></div>
 
   <div class="toolbar__checkbox js-filter-components">
-    {{input type="checkbox" checked=options.components id="options-components"}} <label for="options-components">Components</label>
+    <label for="options-components">
+      {{input type="checkbox" checked=options.components id="options-components"}}
+      Components
+    </label>
   </div>
 
   <div class="divider"></div>
 
   <div class="toolbar__search js-filter-views">
-    {{input type="text" id="options-views" placeholder="Search Views" value=searchText}}
+    {{search-field value=searchValue}}
   </div>
 </div>
diff --git a/app/templates/view-tree.hbs b/app/templates/view-tree.hbs
index 34d01e534e..7cf69cba24 100644
--- a/app/templates/view-tree.hbs
+++ b/app/templates/view-tree.hbs
@@ -1,14 +1,18 @@
-{{#x-list name="view-tree" schema=(schema-for "view-tree") as |list|}}
+{{#x-list
+  name="view-tree"
+  schema=(schema-for "view-tree")
+  setIsDragging=(route-action 'setIsDragging') as |list|}}
   {{#list.vertical-collection filteredList as |content index|}}
-    <tr class="list__row js-view-tree-item" onmouseenter={{action "previewLayer" content}} onmouseleave={{action "hidePreview"}}>
+    <tr class="list__row js-view-tree-item" onmouseenter={{action "previewLayer" content}} onmouseleave={{action
+      "hidePreview"}}>
       {{view-item
-          model=content
-          inspect=(action "inspect")
-          inspectElement=(action "inspectElement")
-          sendModelToConsole=(action "sendModelToConsole")
-          sendObjectToConsole=(action "sendObjectToConsole")
-          list=list
-        }}
+        model=content
+        inspect=(action "inspect")
+        inspectElement=(action "inspectElement")
+        sendModelToConsole=(action "sendModelToConsole")
+        sendObjectToConsole=(action "sendObjectToConsole")
+        list=list
+      }}
     </tr>
   {{/list.vertical-collection}}
 {{/x-list}}
diff --git a/bower.json b/bower.json
deleted file mode 100644
index cf901578bf..0000000000
--- a/bower.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "ember-inspector",
-  "dependencies": {
-    "moment": "~2.8.4",
-    "animation-frame": "~0.2.4",
-    "contextMenu": "~1.4.0"
-  }
-}
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 504335fd3c..5d37b3e854 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -22,6 +22,12 @@ const map = stew.map;
 const options = {
   fingerprint: {
     enabled: false
+  },
+
+  svgJar: {
+    sourceDirs: [
+      'public/assets/svg'
+    ]
   }
 };
 
@@ -48,8 +54,9 @@ module.exports = function(defaults) {
   const env = process.env.EMBER_ENV;
 
   app.import('vendor/babel-polyfill.js', { prepend: true });
-  app.import('bower_components/contextMenu/contextMenu.js');
-  app.import('bower_components/contextMenu/contextMenu.css');
+  app.import('node_modules/basiccontext/dist/basicContext.min.css');
+  app.import('node_modules/basiccontext/dist/themes/default.min.css');
+  app.import('node_modules/basiccontext/dist/basicContext.min.js');
 
   // Ember Debug
 
diff --git a/ember_debug/object-inspector.js b/ember_debug/object-inspector.js
index c9acf9dfee..3c542d2c8a 100644
--- a/ember_debug/object-inspector.js
+++ b/ember_debug/object-inspector.js
@@ -232,7 +232,6 @@ export default EmberObject.extend(PortMixin, {
 
     if (this.canSend(object)) {
       let details = this.mixinsForObject(object);
-
       this.sendMessage('updateObject', {
         parentObject: objectId,
         property,
@@ -342,7 +341,11 @@ export default EmberObject.extend(PortMixin, {
       // for more details.
       if (compareVersion(VERSION, '2.11.0') !== -1) {
         if (!name && typeof mixin.toString === 'function') {
-          name = mixin.toString();
+          try {
+            name = mixin.toString();
+          } catch (e) {
+            name = '(Unable to convert Object to string)';
+          }
         }
       }
       if (!name) {
@@ -468,7 +471,25 @@ function addProperties(properties, hash) {
       continue;
     }
     let options = { isMandatorySetter: isMandatorySetter(hash, prop) };
+
+    if (typeof hash[prop] === 'object' && hash[prop] !== null) {
+      options.isService = hash[prop].type === 'service';
+      if (!options.isService) {
+        if (hash[prop].constructor) {
+          options.isService = hash[prop].constructor.isServiceFactory;
+        }
+      }
+    }
+
     if (isComputed(hash[prop])) {
+      options.dependentKeys = (hash[prop]._dependentKeys || []).map((key) => key.toString());
+      if (!options.isService) {
+        if (typeof hash[prop]._getter === 'function') {
+          options.code = Function.prototype.toString.call(hash[prop]._getter);
+        } else {
+          options.code = '';
+        }
+      }
       options.readOnly = hash[prop]._readOnly;
     }
     replaceProperty(properties, prop, hash[prop], options);
@@ -493,6 +514,10 @@ function replaceProperty(properties, name, value, options) {
   let prop = { name, value: inspectValue(value) };
   prop.isMandatorySetter = options.isMandatorySetter;
   prop.readOnly = options.readOnly;
+  prop.dependentKeys = options.dependentKeys || [];
+  let hasServiceFootprint = prop.value && typeof prop.value.inspect === 'string' ? prop.value.inspect.includes('@service:') : false;
+  prop.isService = options.isService || hasServiceFootprint;
+  prop.code = options.code;
   properties.push(prop);
 }
 
diff --git a/ember_debug/view-debug.js b/ember_debug/view-debug.js
index a85896603b..ec8a6eda59 100644
--- a/ember_debug/view-debug.js
+++ b/ember_debug/view-debug.js
@@ -77,6 +77,14 @@ export default EmberObject.extend(PortMixin, {
         this.stopInspecting();
       }
     },
+
+    scrollToElement({ elementId }) {
+      let el = document.querySelector(`#${elementId}`);
+      if (el) {
+        el.scrollIntoView();
+      }
+    },
+
     inspectElement({ objectId, elementId }) {
       if (objectId) {
         this.inspectViewElement(objectId);
@@ -226,6 +234,7 @@ export default EmberObject.extend(PortMixin, {
         let view = this.get('objectInspector').sentObjects[viewElem.id];
         if (view instanceof Component) {
           this.get('objectInspector').sendObject(view);
+          this.sendMessage('inspectComponent', { viewId: viewElem.id });
         }
       }
       this.stopInspecting();
diff --git a/package.json b/package.json
index 521b2ab0fc..a671d09358 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-inspector",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Extends developer tools to allow you to better inspect your Ember.js apps.",
   "license": "MIT",
   "author": "Tilde, Inc.",
@@ -36,6 +36,7 @@
     "aws-sdk": "^2.3.3",
     "babel-eslint": "^8.2.2",
     "babel-plugin-transform-es2015-modules-amd": "^6.24.0",
+    "basiccontext": "^3.5.1",
     "broccoli-asset-rev": "^2.4.5",
     "broccoli-babel-transpiler": "^6.0.0",
     "broccoli-concat": "^3.0.1",
@@ -54,7 +55,7 @@
     "ember-cli-htmlbars": "^2.0.3",
     "ember-cli-htmlbars-inline-precompile": "^1.0.2",
     "ember-cli-inject-live-reload": "^1.4.1",
-    "ember-cli-moment-shim": "3.5.0",
+    "ember-cli-moment-shim": "^3.6.0",
     "ember-cli-qunit": "^4.3.2",
     "ember-cli-sass": "^7.1.7",
     "ember-cli-shims": "^1.2.0",
@@ -66,8 +67,10 @@
     "ember-native-dom-helpers": "^0.4.2",
     "ember-pikaday": "^2.2.2",
     "ember-resolver": "^4.0.0",
+    "ember-route-action-helper": "^2.0.6",
     "ember-source": "~3.0.0",
     "ember-source-channel-url": "^1.0.1",
+    "ember-svg-jar": "^1.1.1",
     "ember-truth-helpers": "2.0.0",
     "ember-try": "^1.0.0-beta.1",
     "eslint-plugin-ember": "^5.0.0",
@@ -80,6 +83,7 @@
     "js-string-escape": "^1.0.0",
     "loader.js": "^4.2.3",
     "mkdirp": "^0.5.1",
+    "qunit-dom": "^0.6.2",
     "rimraf": "^2.5.2",
     "yauzl": "^2.4.1"
   },
diff --git a/public/assets/images/arrow_down.svg b/public/assets/images/arrow_down.svg
index 46da0494a1..cc7ffabc39 100644
--- a/public/assets/images/arrow_down.svg
+++ b/public/assets/images/arrow_down.svg
@@ -1,52 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://web.resource.org/cc/"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg2"
-   sodipodi:version="0.32"
-   inkscape:version="0.43"
-   width="560"
-   height="560"
-   version="1.0"
-   sodipodi:docbase="C:\Dokumente und Einstellungen\Gertis.VIVASOFT\Desktop"
-   sodipodi:docname="arrow-down.svg">
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs5" />
-  <sodipodi:namedview
-     inkscape:window-height="998"
-     inkscape:window-width="1280"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     borderopacity="1.0"
-     bordercolor="#666666"
-     pagecolor="#ffffff"
-     id="base"
-     inkscape:zoom="1.4093077"
-     inkscape:cx="369.9936"
-     inkscape:cy="350.13172"
-     inkscape:window-x="1276"
-     inkscape:window-y="-4"
-     inkscape:current-layer="svg2" />
-  <path
-     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1"
-     d="M 3.5478478,3.6203409 L 557.01111,3.6203409 L 280.2795,556.3741 L 3.5478478,3.6203409 z "
-     id="rect1316"
-     sodipodi:nodetypes="cccc" />
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="36" viewBox="0 0 43 36">
+  <polygon fill="#6E6E6E" fill-rule="evenodd" points="39 18 4 -3 4 39" transform="rotate(90 21.5 18)"/>
 </svg>
diff --git a/public/assets/images/calculate.svg b/public/assets/images/calculate.svg
deleted file mode 100755
index 7fe298b836..0000000000
--- a/public/assets/images/calculate.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<g>
-	<path fill="#000000" d="M66.755,10.115H33.937c-7.98,0-14.451,6.472-14.451,14.454V75.75c0,7.979,5.267,14.451,13.246,14.451   h34.023c7.982,0,14.454-6.472,14.454-14.451V24.569C81.209,16.587,74.737,10.115,66.755,10.115z M74.583,72.855   c0,6.597-4.146,10.128-10.746,10.128H36.161c-6.6,0-9.75-3.531-9.75-10.128V28.082c0-9.814,4.149-10.749,10.748-10.749h26.678   c6.6,0,10.746,2.941,10.746,9.542V72.855z"/>
-	<path fill="#000000" d="M42.065,48.349c0-2.241-1.817-4.062-4.065-4.062c-2.243,0-4.063,1.821-4.063,4.062   c0,2.248,1.821,4.065,4.063,4.065C40.248,52.414,42.065,50.597,42.065,48.349z"/>
-	<path fill="#000000" d="M53.959,48.349c0-2.241-1.82-4.062-4.064-4.062c-2.246,0-4.065,1.821-4.065,4.062   c0,2.248,1.819,4.065,4.065,4.065C52.139,52.414,53.959,50.597,53.959,48.349z"/>
-	<path fill="#000000" d="M66.305,48.349c0-2.241-1.82-4.062-4.067-4.062c-2.242,0-4.062,1.821-4.062,4.062   c0,2.248,1.82,4.065,4.062,4.065C64.484,52.414,66.305,50.597,66.305,48.349z"/>
-	<path fill="#000000" d="M42.065,60.242c0-2.241-1.817-4.064-4.065-4.064c-2.243,0-4.063,1.823-4.063,4.064   c0,2.25,1.821,4.068,4.063,4.068C40.248,64.311,42.065,62.492,42.065,60.242z"/>
-	<path fill="#000000" d="M53.959,60.242c0-2.241-1.82-4.064-4.064-4.064c-2.246,0-4.065,1.823-4.065,4.064   c0,2.25,1.819,4.068,4.065,4.068C52.139,64.311,53.959,62.492,53.959,60.242z"/>
-	<path fill="#000000" d="M66.305,60.242c0-2.241-1.82-4.064-4.067-4.064c-2.242,0-4.062,1.823-4.062,4.064   c0,2.25,1.82,4.068,4.062,4.068C64.484,64.311,66.305,62.492,66.305,60.242z"/>
-	<path fill="#000000" d="M42.065,71.686c0-2.244-1.817-4.068-4.065-4.068c-2.243,0-4.063,1.824-4.063,4.068   c0,2.247,1.821,4.064,4.063,4.064C40.248,75.75,42.065,73.933,42.065,71.686z"/>
-	<circle fill="#000000" cx="49.895" cy="71.686" r="4.064"/>
-	<path fill="#000000" d="M66.305,71.686c0-2.244-1.82-4.068-4.067-4.068c-2.242,0-4.062,1.824-4.062,4.068   c0,2.247,1.82,4.064,4.062,4.064C64.484,75.75,66.305,73.933,66.305,71.686z"/>
-	<path fill="#000000" d="M70.971,28.857c0,3.368-2.729,6.098-6.098,6.098H35.517c-3.365,0-6.096-2.729-6.096-6.098l0,0   c0-3.368,2.731-6.095,6.096-6.095h29.356C68.241,22.763,70.971,25.489,70.971,28.857L70.971,28.857z"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/public/assets/images/external_link.svg b/public/assets/images/external_link.svg
deleted file mode 100644
index 8e05e1b374..0000000000
--- a/public/assets/images/external_link.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="13.558px" height="13.558px" viewBox="0 0 13.558 13.558" enable-background="new 0 0 13.558 13.558" xml:space="preserve">
-<g>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#6D6D6D" d="M13.558,7.44c-0.027,0.115-0.047,0.233-0.084,0.344
-		c-0.044,0.132-0.126,0.167-0.245,0.098c-0.113-0.065-0.224-0.142-0.317-0.234c-0.561-0.55-1.114-1.105-1.67-1.66
-		c-0.035-0.034-0.064-0.073-0.106-0.121c-0.049,0.046-0.086,0.08-0.123,0.116c-0.911,0.911-1.82,1.823-2.732,2.732
-		C7.698,9.295,6.87,9.36,6.237,8.881c-0.07-0.053-0.133-0.115-0.196-0.176C5.654,8.318,5.266,7.932,4.88,7.544
-		C4.219,6.879,4.219,5.96,4.883,5.295C5.79,4.387,6.698,3.48,7.605,2.573c0.034-0.034,0.065-0.069,0.104-0.109
-		c-0.039-0.04-0.07-0.076-0.104-0.109c-0.563-0.565-1.128-1.13-1.688-1.699C5.832,0.569,5.76,0.465,5.7,0.358
-		C5.625,0.226,5.664,0.129,5.811,0.081C5.927,0.043,6.05,0.026,6.17,0c2.109,0,4.219,0,6.328,0c0.096,0.009,0.191,0.023,0.287,0.029
-		c0.468,0.028,0.654,0.191,0.73,0.652c0.021,0.125,0.029,0.252,0.042,0.378C13.558,3.187,13.558,5.313,13.558,7.44z"/>
-	<path fill-rule="evenodd" clip-rule="evenodd" fill="#6D6D6D" d="M0,4.951c0.026-0.129,0.043-0.26,0.077-0.387
-		c0.272-1.017,0.924-1.65,1.945-1.895c0.182-0.043,0.376-0.053,0.564-0.054C3.633,2.61,4.679,2.613,5.725,2.614
-		c0.038,0,0.076,0.005,0.134,0.009c-0.037,0.044-0.06,0.073-0.086,0.1C5.321,3.175,4.87,3.63,4.413,4.077
-		C4.363,4.126,4.277,4.161,4.207,4.161C3.678,4.168,3.148,4.165,2.619,4.166c-0.423,0-0.76,0.162-0.947,0.552
-		C1.603,4.859,1.565,5.03,1.564,5.188C1.557,7.116,1.559,9.044,1.56,10.973c0.001,0.603,0.424,1.024,1.028,1.025
-		C4.513,12,6.437,12,8.36,11.998c0.614-0.001,1.025-0.419,1.031-1.049c0.005-0.516,0.003-1.032,0-1.548
-		c0-0.094,0.023-0.165,0.092-0.233c0.453-0.446,0.9-0.897,1.349-1.346c0.027-0.027,0.057-0.052,0.1-0.09
-		c0.005,0.041,0.012,0.065,0.012,0.089c-0.003,1.117,0.008,2.233-0.012,3.349c-0.019,1.034-0.811,2.013-1.811,2.28
-		c-0.169,0.045-0.344,0.074-0.516,0.109c-2.083,0-4.166,0-6.249,0c-0.039-0.008-0.077-0.02-0.116-0.025
-		c-1.012-0.151-1.711-0.701-2.078-1.655c-0.082-0.215-0.11-0.45-0.163-0.676C0,9.118,0,7.035,0,4.951z"/>
-</g>
-</svg>
diff --git a/public/assets/images/fishy_tomster.png b/public/assets/images/fishy_tomster.png
index bd16ea8818..fd4b7d4192 100644
Binary files a/public/assets/images/fishy_tomster.png and b/public/assets/images/fishy_tomster.png differ
diff --git a/public/assets/svg/arrow-back.svg b/public/assets/svg/arrow-back.svg
new file mode 100644
index 0000000000..58ff40f2e4
--- /dev/null
+++ b/public/assets/svg/arrow-back.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path fill="none" d="M0 0h20v20H0z"/>
+  <path class="svg-fill" d="M11.5 3.6L4.9 10l6.6 6.4c.4.4 1 .4 1.3 0 .4-.4.4-1 0-1.3l-5.2-5 5.2-5c.4-.4.4-1 0-1.3s-.9-.6-1.3-.2z"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/calculate.svg b/public/assets/svg/calculate.svg
new file mode 100755
index 0000000000..1958000a85
--- /dev/null
+++ b/public/assets/svg/calculate.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <path d="M66.755 10.115H33.937c-7.98 0-14.451 6.472-14.451 14.454V75.75c0 7.979 5.267 14.451 13.246 14.451h34.023c7.982 0 14.454-6.472 14.454-14.451V24.569c0-7.982-6.472-14.454-14.454-14.454zm7.828 62.74c0 6.597-4.146 10.128-10.746 10.128H36.161c-6.6 0-9.75-3.531-9.75-10.128V28.082c0-9.814 4.149-10.749 10.748-10.749h26.678c6.6 0 10.746 2.941 10.746 9.542v45.98z"/>
+  <path d="M42.065 48.349a4.063 4.063 0 0 0-8.128 0A4.063 4.063 0 0 0 38 52.414a4.061 4.061 0 0 0 4.065-4.065zm11.894 0a4.065 4.065 0 0 0-8.129 0 4.062 4.062 0 0 0 4.065 4.065 4.063 4.063 0 0 0 4.064-4.065zm12.346 0a4.065 4.065 0 0 0-8.129 0 4.064 4.064 0 1 0 8.129 0zm-24.24 11.893a4.065 4.065 0 0 0-8.128 0 4.065 4.065 0 1 0 8.128 0zm11.894 0a4.067 4.067 0 0 0-4.064-4.064 4.066 4.066 0 0 0 0 8.132 4.064 4.064 0 0 0 4.064-4.068zm12.346 0a4.067 4.067 0 0 0-4.067-4.064 4.066 4.066 0 0 0 0 8.132 4.065 4.065 0 0 0 4.067-4.068zm-24.24 11.444A4.066 4.066 0 0 0 38 67.618a4.068 4.068 0 0 0-4.063 4.068A4.063 4.063 0 0 0 38 75.75a4.061 4.061 0 0 0 4.065-4.064z"/>
+  <circle cx="49.895" cy="71.686" r="4.064"/>
+  <path d="M66.305 71.686a4.069 4.069 0 0 0-4.067-4.068 4.068 4.068 0 0 0-4.062 4.068 4.064 4.064 0 1 0 8.129 0zm4.666-42.829a6.097 6.097 0 0 1-6.098 6.098H35.517a6.097 6.097 0 0 1-6.096-6.098 6.095 6.095 0 0 1 6.096-6.095h29.356a6.096 6.096 0 0 1 6.098 6.095z"/>
+</svg>
diff --git a/public/assets/svg/chevron-down.svg b/public/assets/svg/chevron-down.svg
new file mode 100644
index 0000000000..1fa36f1584
--- /dev/null
+++ b/public/assets/svg/chevron-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 36 36">
+  <path class="svg-fill" d="M29.1 16.6c-.4 0-.8.1-1.1.4l-9.9 9.9L8.2 17c-.3-.3-.7-.4-1.1-.4-.4 0-.8.2-1 .4-.6.6-.6 1.5 0 2.1l12.1 12.1L30.1 19c.5-.6.5-1.4 0-2-.2-.2-.6-.4-1-.4z"/>
+  <path class="svg-fill" d="M18.1 20.1L30.1 8c.5-.6.5-1.4 0-2-.3-.3-.6-.5-1-.5s-.8.1-1.1.4l-9.9 9.9-10-9.9c-.3-.2-.6-.4-1-.4s-.8.2-1 .4c-.7.6-.7 1.6-.1 2.2l12.1 12z"/>
+</svg>
diff --git a/public/assets/svg/chevron-right.svg b/public/assets/svg/chevron-right.svg
new file mode 100644
index 0000000000..cea127cdc0
--- /dev/null
+++ b/public/assets/svg/chevron-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 36 36">
+  <path class="svg-fill" d="M16.3 7.2c0 .4.1.8.4 1.1l9.9 9.9-9.9 9.9c-.3.3-.4.7-.4 1.1 0 .4.2.8.4 1 .6.6 1.5.6 2.1 0l12.1-12.1L18.7 6.2c-.6-.5-1.4-.5-2 0-.2.3-.4.6-.4 1z"/>
+  <path class="svg-fill" d="M19.8 18.3L7.7 6.2c-.6-.5-1.4-.5-2 0-.3.3-.5.6-.5 1s.1.8.4 1.1l9.9 9.9-9.9 9.9c-.3.3-.5.7-.4 1.1 0 .4.2.8.4 1 .6.6 1.5.6 2.1 0l12.1-11.9z"/>
+</svg>
diff --git a/public/assets/svg/clear-2.svg b/public/assets/svg/clear-2.svg
new file mode 100644
index 0000000000..004e8de23a
--- /dev/null
+++ b/public/assets/svg/clear-2.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" width="13" height="13">
+  <path class="svg-fill" d="M6.5 13a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zm0-2a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"/>
+  <path class="svg-fill" d="M9.177 10.589l-.329-.33-1.313-1.316-5.242-5.235L1.586 3l1.413-1.415.708.706a10641.178 10641.178 0 0 1 6.557 6.554l.333.335c.075.069.075.069.256.297l.522.853-1.706 1.044-.463-.757-.03-.03z"/>
+</svg>
diff --git a/public/assets/svg/clear.svg b/public/assets/svg/clear.svg
new file mode 100644
index 0000000000..1a64a5a254
--- /dev/null
+++ b/public/assets/svg/clear.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" width="14" height="14" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M18,2A16,16,0,1,0,34,18,16,16,0,0,0,18,2Zm8,22.1a1.4,1.4,0,0,1-2,2l-6-6L12,26.12a1.4,1.4,0,1,1-2-2L16,18.08,9.83,11.86a1.4,1.4,0,1,1,2-2L18,16.1l6.17-6.17a1.4,1.4,0,1,1,2,2L20,18.08Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/dependent-key-bullet.svg b/public/assets/svg/dependent-key-bullet.svg
new file mode 100644
index 0000000000..09923134a7
--- /dev/null
+++ b/public/assets/svg/dependent-key-bullet.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="9" aria-hidden="true" viewBox="0 0 9 9">
+  <ellipse cx="4.5" cy="4.5" rx="3.5" ry="3.5" stroke-width="1"></ellipse>
+</svg>
diff --git a/public/assets/svg/dependent-key-connection.svg b/public/assets/svg/dependent-key-connection.svg
new file mode 100644
index 0000000000..c4c255aa87
--- /dev/null
+++ b/public/assets/svg/dependent-key-connection.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 20 10">
+  <path fill="none" stroke="#888" d="M.5 0v1.6c0 2.1 1.7 3.896 3.7 3.896h10.5c2.1 0 3.815 1.704 3.815 3.804v.7"/>
+</svg>
diff --git a/public/assets/svg/disclosure-triangle.svg b/public/assets/svg/disclosure-triangle.svg
new file mode 100644
index 0000000000..bb2f84a318
--- /dev/null
+++ b/public/assets/svg/disclosure-triangle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9px" height="9px" viewBox="0 0 43 36">
+  <polygon fill="#777" fill-rule="evenodd" points="39 18 4 -3 4 39" transform="rotate(90 21.5 18)"/>
+</svg>
diff --git a/public/assets/svg/dropdown-arrow.svg b/public/assets/svg/dropdown-arrow.svg
new file mode 100644
index 0000000000..15562a27ce
--- /dev/null
+++ b/public/assets/svg/dropdown-arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.2 40.4">
+  <path d="M23.1 13.4c-.3 0-.5-.1-.7-.3L12.1 2.8 1.8 13.1c-.4.4-1.1.3-1.4-.1-.3-.4-.3-.9 0-1.3L12.1 0l11.7 11.7c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM1.1 27c.3 0 .5.1.7.3l10.3 10.3 10.3-10.3c.4-.4 1.1-.3 1.4.1.3.4.3.9 0 1.3L12.1 40.4.4 28.7c-.4-.4-.4-1 0-1.4.2-.2.5-.3.7-.3z" />
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/external_link.svg b/public/assets/svg/external_link.svg
new file mode 100644
index 0000000000..aa605f396e
--- /dev/null
+++ b/public/assets/svg/external_link.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="13.558px" height="13.558px" viewBox="0 0 13.558 13.558" enable-background="new 0 0 13.558 13.558" xml:space="preserve">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#6D6D6D" d="M13.558,7.44c-0.027,0.115-0.047,0.233-0.084,0.344 c-0.044,0.132-0.126,0.167-0.245,0.098c-0.113-0.065-0.224-0.142-0.317-0.234c-0.561-0.55-1.114-1.105-1.67-1.66 c-0.035-0.034-0.064-0.073-0.106-0.121c-0.049,0.046-0.086,0.08-0.123,0.116c-0.911,0.911-1.82,1.823-2.732,2.732 C7.698,9.295,6.87,9.36,6.237,8.881c-0.07-0.053-0.133-0.115-0.196-0.176C5.654,8.318,5.266,7.932,4.88,7.544 C4.219,6.879,4.219,5.96,4.883,5.295C5.79,4.387,6.698,3.48,7.605,2.573c0.034-0.034,0.065-0.069,0.104-0.109 c-0.039-0.04-0.07-0.076-0.104-0.109c-0.563-0.565-1.128-1.13-1.688-1.699C5.832,0.569,5.76,0.465,5.7,0.358 C5.625,0.226,5.664,0.129,5.811,0.081C5.927,0.043,6.05,0.026,6.17,0c2.109,0,4.219,0,6.328,0c0.096,0.009,0.191,0.023,0.287,0.029 c0.468,0.028,0.654,0.191,0.73,0.652c0.021,0.125,0.029,0.252,0.042,0.378C13.558,3.187,13.558,5.313,13.558,7.44z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#6D6D6D" d="M0,4.951c0.026-0.129,0.043-0.26,0.077-0.387 c0.272-1.017,0.924-1.65,1.945-1.895c0.182-0.043,0.376-0.053,0.564-0.054C3.633,2.61,4.679,2.613,5.725,2.614 c0.038,0,0.076,0.005,0.134,0.009c-0.037,0.044-0.06,0.073-0.086,0.1C5.321,3.175,4.87,3.63,4.413,4.077 C4.363,4.126,4.277,4.161,4.207,4.161C3.678,4.168,3.148,4.165,2.619,4.166c-0.423,0-0.76,0.162-0.947,0.552 C1.603,4.859,1.565,5.03,1.564,5.188C1.557,7.116,1.559,9.044,1.56,10.973c0.001,0.603,0.424,1.024,1.028,1.025 C4.513,12,6.437,12,8.36,11.998c0.614-0.001,1.025-0.419,1.031-1.049c0.005-0.516,0.003-1.032,0-1.548 c0-0.094,0.023-0.165,0.092-0.233c0.453-0.446,0.9-0.897,1.349-1.346c0.027-0.027,0.057-0.052,0.1-0.09 c0.005,0.041,0.012,0.065,0.012,0.089c-0.003,1.117,0.008,2.233-0.012,3.349c-0.019,1.034-0.811,2.013-1.811,2.28 c-0.169,0.045-0.344,0.074-0.516,0.109c-2.083,0-4.166,0-6.249,0c-0.039-0.008-0.077-0.02-0.116-0.025 c-1.012-0.151-1.711-0.701-2.078-1.655c-0.082-0.215-0.11-0.45-0.163-0.676C0,9.118,0,7.035,0,4.951z"/>
+</svg>
diff --git a/public/assets/svg/eye.svg b/public/assets/svg/eye.svg
new file mode 100644
index 0000000000..c3850a6328
--- /dev/null
+++ b/public/assets/svg/eye.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M33.62,17.53c-3.37-6.23-9.28-10-15.82-10S5.34,11.3,2,17.53L1.72,18l.26.48c3.37,6.23,9.28,10,15.82,10s12.46-3.72,15.82-10l.26-.48ZM17.8,26.43C12.17,26.43,7,23.29,4,18c3-5.29,8.17-8.43,13.8-8.43S28.54,12.72,31.59,18C28.54,23.29,23.42,26.43,17.8,26.43Z" class="clr-i-outline clr-i-outline-path-1"></path><path d="M18.09,11.17A6.86,6.86,0,1,0,25,18,6.86,6.86,0,0,0,18.09,11.17Zm0,11.72A4.86,4.86,0,1,1,23,18,4.87,4.87,0,0,1,18.09,22.89Z" class="clr-i-outline clr-i-outline-path-2"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/inspect.svg b/public/assets/svg/inspect.svg
new file mode 100644
index 0000000000..c4faea3d1b
--- /dev/null
+++ b/public/assets/svg/inspect.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17">
+  <g class="svg-fill" fill-rule="evenodd" transform="translate(0, 1)">
+    <path d="M8 7l2.29 8 2.33-2.33L14.81 15l1.14-1.14-2.29-2.29L16 9.25z"/>
+    <path d="M7 13v1H2c-1.13 0-2-.88-2-2V2C0 .88.87 0 2 0h11c1.12 0 2 .88 2 2v4h-1V2c0-.37-.63-1-1-1H2c-.37 0-1 .63-1 1v10c0 .37.62 1 1 1h5z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-components.svg b/public/assets/svg/nav-components.svg
new file mode 100644
index 0000000000..1abb9e5114
--- /dev/null
+++ b/public/assets/svg/nav-components.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" width="36" height="36" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="12" y="11" width="2" height="19"></rect>
+  <path d="M32,4H4A2,2,0,0,0,2,6V30a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V6A2,2,0,0,0,32,4ZM4,6H32v4.2H4ZM4,30V11.8H32V30Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-container.svg b/public/assets/svg/nav-container.svg
new file mode 100644
index 0000000000..16006bcbc1
--- /dev/null
+++ b/public/assets/svg/nav-container.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M32.43,8.35l-13-6.21a1,1,0,0,0-.87,0l-15,7.24a1,1,0,0,0-.57.9V26.83a1,1,0,0,0,.6.92l13,6.19a1,1,0,0,0,.87,0l15-7.24a1,1,0,0,0,.57-.9V9.25A1,1,0,0,0,32.43,8.35ZM19,4.15,29.93,9.37l-5.05,2.44L14.21,6.46ZM17,15.64,6,10.41l5.9-2.85L22.6,12.91ZM5,12.13,16,17.4V31.46L5,26.2ZM18,31.45V17.36l13-6.29v14.1Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-data.svg b/public/assets/svg/nav-data.svg
new file mode 100644
index 0000000000..3c45889742
--- /dev/null
+++ b/public/assets/svg/nav-data.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M33,6.69h0c-.18-3.41-9.47-4.33-15-4.33S3,3.29,3,6.78V29.37c0,3.49,9.43,4.43,15,4.43s15-.93,15-4.43V6.78s0,0,0,0S33,6.7,33,6.69Zm-2,7.56c-.33.86-5.06,2.45-13,2.45A37.45,37.45,0,0,1,7,15.34v2.08A43.32,43.32,0,0,0,18,18.7c4,0,9.93-.48,13-2v5.17c-.33.86-5.06,2.45-13,2.45A37.45,37.45,0,0,1,7,22.92V25a43.32,43.32,0,0,0,11,1.28c4,0,9.93-.48,13-2v5.1c-.35.86-5.08,2.45-13,2.45S5.3,30.2,5,29.37V6.82C5.3,6,10,4.36,18,4.36c7.77,0,12.46,1.53,13,2.37-.52.87-5.21,2.39-13,2.39A37.6,37.6,0,0,1,7,7.76V9.85a43.53,43.53,0,0,0,11,1.27c4,0,9.93-.48,13-2Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-deprecations.svg b/public/assets/svg/nav-deprecations.svg
new file mode 100644
index 0000000000..912242c038
--- /dev/null
+++ b/public/assets/svg/nav-deprecations.svg
@@ -0,0 +1,5 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <circle cx="18" cy="26.06" r="1.33"></circle>
+  <path d="M18,22.61a1,1,0,0,1-1-1v-12a1,1,0,1,1,2,0v12A1,1,0,0,1,18,22.61Z"></path>
+  <path d="M15.0620782,1.681196 C15.6298819,0.649266355 16.7109091,0.0102219396 17.885,0.0102219396 C19.0590909,0.0102219396 20.1401181,0.649266355 20.7086433,1.68252129 L34.598644,27.2425225 C35.1407746,28.2401397 35.1174345,29.4495373 34.5372161,30.4254943 C33.9569977,31.4014514 32.905671,31.9996984 31.77,32 L4.02239323,31.9997492 C2.87409009,32.0254699 1.79902843,31.4375753 1.20106335,30.4569126 C0.603098265,29.4762499 0.572777899,28.2513179 1.12207818,27.241196 L15.0620782,1.681196 Z M2.87850767,28.1977282 C2.67060966,28.5800376 2.6820975,29.0441423 2.9086557,29.4156977 C3.1352139,29.7872532 3.5425354,30.0099959 4,30 L31.7697344,30 C32.1999191,29.9998858 32.5982478,29.7732208 32.8180821,29.4034482 C33.0379164,29.0336757 33.0467595,28.5754567 32.8413567,28.1974787 L18.9538739,2.64208195 C18.7394236,2.25234436 18.3298419,2.01022194 17.885,2.01022194 C17.4406889,2.01022194 17.0315538,2.25176692 16.8168946,2.64068753 L2.87850767,28.1977282 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-info.svg b/public/assets/svg/nav-info.svg
new file mode 100644
index 0000000000..9258bf96d7
--- /dev/null
+++ b/public/assets/svg/nav-info.svg
@@ -0,0 +1,5 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20"  viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <circle cx="17.97" cy="10.45" r="1.4"></circle>
+  <path d="M21,25H19V14.1H16a1,1,0,0,0,0,2h1V25H15a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"></path>
+  <path d="M18,34A16,16,0,1,1,34,18,16,16,0,0,1,18,34ZM18,4A14,14,0,1,0,32,18,14,14,0,0,0,18,4Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-promises.svg b/public/assets/svg/nav-promises.svg
new file mode 100644
index 0000000000..c39637295b
--- /dev/null
+++ b/public/assets/svg/nav-promises.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M18,9.83a1,1,0,0,0-1,1v8.72l5.9,4A1,1,0,0,0,24,21.88l-5-3.39V10.83A1,1,0,0,0,18,9.83Z"></path>
+  <path class="promises-icon-circle" d="M18,2A16.09,16.09,0,0,0,4,10.26V5.2a1,1,0,0,0-2,0V14h8.8a1,1,0,0,0,0-2H5.35A14,14,0,1,1,8.58,28.35a1,1,0,0,0-1.35,1.48A16,16,0,1,0,18,2Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-render-performance.svg b/public/assets/svg/nav-render-performance.svg
new file mode 100644
index 0000000000..badc9e1c03
--- /dev/null
+++ b/public/assets/svg/nav-render-performance.svg
@@ -0,0 +1,4 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M25.18,12.32l-5.91,5.81a3,3,0,1,0,1.41,1.42l5.92-5.81Z"></path>
+  <path d="M18,4.25A16.49,16.49,0,0,0,5.4,31.4l.3.35H30.3l.3-.35A16.49,16.49,0,0,0,18,4.25Zm11.34,25.5H6.66a14.43,14.43,0,0,1-3.11-7.84H7v-2H3.55A14.41,14.41,0,0,1,7,11.29l2.45,2.45,1.41-1.41L8.43,9.87A14.41,14.41,0,0,1,17,6.29v3.5h2V6.3a14.47,14.47,0,0,1,13.4,13.61H28.92v2h3.53A14.43,14.43,0,0,1,29.34,29.75Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-route-tree.svg b/public/assets/svg/nav-route-tree.svg
new file mode 100644
index 0000000000..78f4326ff8
--- /dev/null
+++ b/public/assets/svg/nav-route-tree.svg
@@ -0,0 +1,8 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M27,22V14a2,2,0,0,0-2-2H11a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2H25A2,2,0,0,0,27,22ZM11,14H25v8H11Z"></path>
+  <rect x="19" y="6" width="4" height="2"></rect>
+  <rect x="25.01" y="6" width="1.97" height="2"></rect>
+  <path d="M5.8,8H16.87V6h-11L7.78,4.08a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0L2,7,6.37,11.4a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41Z"></path><path d="M29.61,24.68a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42L30.1,28H19v2H30.2l-2,2a1,1,0,0,0,0,1.41,1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29L34,29.05Z"></path>
+  <rect x="13" y="28" width="4" height="2"></rect>
+  <rect x="9" y="28" width="1.97" height="2"></rect>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/nav-view-tree.svg b/public/assets/svg/nav-view-tree.svg
new file mode 100644
index 0000000000..7936b51a1e
--- /dev/null
+++ b/public/assets/svg/nav-view-tree.svg
@@ -0,0 +1,5 @@
+<svg aria-hidden="true" version="1.1" width="20" height="20" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <polygon points="9.8 18.8 26.2 18.8 26.2 21.88 27.8 21.88 27.8 17.2 18.8 17.2 18.8 14 17.2 14 17.2 17.2 8.2 17.2 8.2 21.88 9.8 21.88 9.8 18.8"></polygon>
+  <path d="M14,23H4a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V25A2,2,0,0,0,14,23ZM4,31V25H14v6Z"></path>
+  <path d="M32,23H22a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V25A2,2,0,0,0,32,23ZM22,31V25H32v6Z"></path><path d="M13,13H23a2,2,0,0,0,2-2V5a2,2,0,0,0-2-2H13a2,2,0,0,0-2,2v6A2,2,0,0,0,13,13Zm0-8H23v6H13Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/svg/reload.svg b/public/assets/svg/reload.svg
new file mode 100644
index 0000000000..b9724a1640
--- /dev/null
+++ b/public/assets/svg/reload.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 54.203 55.142">
+  <path d="M54.203 21.472l-.101-1.042h.101c-.042-.159-.101-.311-.146-.468l-1.82-18.786-6.056 6.055A27.466 27.466 0 0 0 27.571 0C12.344 0 0 12.344 0 27.571s12.344 27.571 27.571 27.571c12.757 0 23.485-8.666 26.632-20.431h-8.512C42.84 41.939 35.81 47.06 27.571 47.06c-10.764 0-19.49-8.726-19.49-19.489s8.727-19.489 19.49-19.489c4.942 0 9.441 1.853 12.873 4.887l-6.536 6.536 20.295 1.967z" class="svg-fill"/>
+</svg>
diff --git a/tests/acceptance/component-tree-test.js b/tests/acceptance/component-tree-test.js
new file mode 100644
index 0000000000..a4cac1ef8c
--- /dev/null
+++ b/tests/acceptance/component-tree-test.js
@@ -0,0 +1,303 @@
+import {
+  visit,
+  fillIn,
+  findAll,
+  click,
+  triggerEvent,
+} from '@ember/test-helpers';
+import { run } from '@ember/runloop';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import wait from 'ember-test-helpers/wait';
+
+let port;
+
+module('Component Tab', function(hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function() {
+    port = this.owner.lookup('port:main');
+  });
+
+  function textFor(selector, context) {
+    return context.querySelector(selector).textContent.trim();
+  }
+
+  let treeId = 0;
+  function viewNodeFactory(props) {
+    if (!props.template) {
+      props.template = props.name;
+    }
+    let obj = {
+      value: props,
+      children: [],
+      treeId: ++treeId,
+    };
+    return obj;
+  }
+
+  function viewTreeFactory(tree) {
+    let children = tree.children;
+    delete tree.children;
+    let viewNode = viewNodeFactory(tree);
+    if (children) {
+      for (let i = 0; i < children.length; i++) {
+        viewNode.children.push(viewTreeFactory(children[i]));
+      }
+    }
+    return viewNode;
+  }
+
+  function defaultViewTree() {
+    return viewTreeFactory({
+      name: 'application',
+      isVirtual: false,
+      isComponent: false,
+      objectId: 'applicationView',
+      viewClass: 'App.ApplicationView',
+      completeViewClass: 'App.ApplicationView',
+      duration: 10,
+      controller: {
+        name: 'App.ApplicationController',
+        completeName: 'App.ApplicationController',
+        objectId: 'applicationController',
+      },
+      children: [
+        {
+          name: 'todos',
+          isVirtual: false,
+          isComponent: false,
+          viewClass: 'App.TodosView',
+          completeViewClass: 'App.TodosView',
+          duration: 1,
+          objectId: 'todosView',
+          model: {
+            name: 'TodosArray',
+            completeName: 'TodosArray',
+            objectId: 'todosArray',
+            type: 'type-ember-object',
+          },
+          controller: {
+            name: 'App.TodosController',
+            completeName: 'App.TodosController',
+            objectId: 'todosController',
+          },
+          children: [
+            {
+              completeViewClass: 'todo-list',
+              isComponent: true,
+              name: 'todo-list',
+              objectId: 'ember392',
+              tagName: 'section',
+              template: 'app/templates/components/todo-list',
+              viewClass: 'todo-list',
+              children: [
+                {
+                  completeViewClass: 'todo-item',
+                  isComponent: true,
+                  name: 'todo-item',
+                  objectId: 'ember267',
+                  tagName: 'li',
+                  template: 'app/templates/components/todo-item',
+                  viewClass: 'todo-item',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  }
+
+  test('It should correctly display the component tree', async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/component-tree');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 4, 'expected some tree nodes');
+
+    let expandedNodes = findAll('.component-tree-item .expanded');
+    assert.equal(expandedNodes.length, 3, 'all nodes should be expanded except the leaf node');
+
+    let templateNames = [];
+
+    [...treeNodes].forEach(function(node) {
+      templateNames.push(textFor('code', node));
+    });
+
+    assert.deepEqual(
+      templateNames,
+      ['application', 'todos', 'todo-list', 'todo-item'],
+      'expected names for all views/components'
+    );
+  });
+
+  test('It allows users to expand and collapse nodes', async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/component-tree');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 4, 'expected some tree nodes');
+
+    let expanders = findAll('.component-tree-item__expand');
+    let expanderEl = expanders[expanders.length - 1];
+    await click(expanderEl);
+
+    treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 3, 'the last node should be hidden');
+
+  });
+
+  test('It should filter the view tree using the search text', async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/component-tree');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 4, 'expected some tree nodes');
+
+    await fillIn('.js-filter-views input', 'todo-');
+    treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 2, 'expected filtered tree nodes');
+
+    let visibleComponentNames = [];
+    [...treeNodes].forEach(function(node) {
+      visibleComponentNames.push(textFor('code', node));
+    });
+
+    assert.deepEqual(
+      visibleComponentNames,
+      ['todo-list', 'todo-item'],
+      'expected names for all views/components'
+    );
+  });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/component-tree');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 4, 'expected all tree nodes');
+
+    await fillIn('.js-filter-views input', 'xxxxxx');
+    treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 0, 'expected filtered tree nodes');
+
+    await click('.js-search-field-clear-button');
+    treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 4, 'expected all tree nodes');
+  });
+
+  test('It should update the view tree when the port triggers a change, preserving the expanded state of existing nodes', async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/component-tree');
+    run(() => port.trigger('view:viewTree', { tree: viewTree }));
+    await wait();
+
+    let expanders = findAll('.component-tree-item__expand');
+    let expanderEl = expanders[expanders.length - 1];
+    await click(expanderEl);
+
+    let treeNodes = findAll('.component-tree-item');
+    assert.equal(treeNodes.length, 3, 'the last node should be hidden');
+
+    viewTree = defaultViewTree(); // resend the same view tree
+    run(() => port.trigger('view:viewTree', { tree: viewTree }));
+    await wait();
+
+    assert.dom('.component-tree-item').exists({ count: 3 }, 'the last node should still be hidden');
+  });
+
+  test('Previewing / showing a view on the client', async function(assert) {
+    let messageSent = null;
+    port.reopen({
+      send(name, message) {
+        messageSent = { name, message };
+      },
+    });
+
+    await visit('/component-tree');
+    let viewTree = defaultViewTree();
+    viewTree.children = [];
+    run(() => port.trigger('view:viewTree', { tree: viewTree }));
+    await wait();
+    await triggerEvent('.component-tree-item', 'mouseenter');
+    assert.equal(
+      messageSent.name,
+      'view:previewLayer',
+      'Client asked to preview layer'
+    );
+    assert.equal(
+      messageSent.message.objectId,
+      'applicationView',
+      'Client sent correct id to preview layer'
+    );
+    await triggerEvent('.component-tree-item', 'mouseleave');
+    assert.equal(
+      messageSent.name,
+      'view:hidePreview',
+      'Client asked to hide preview'
+    );
+  });
+
+  test('Scrolling an element into view', async function(assert) {
+    let messageSent = null;
+    port.reopen({
+      send(name, message) {
+        messageSent = { name, message };
+      },
+    });
+
+    await visit('/component-tree');
+    let viewTree = defaultViewTree();
+    run(() => port.trigger('view:viewTree', { tree: viewTree }));
+    await wait();
+
+    await click('.component-tree-item__view-element');
+    assert.equal(
+      messageSent.name,
+      'view:scrollToElement',
+      'Client asked to scroll element into view'
+    );
+  });
+
+  test('Inspects the component in the object inspector on click', async function(assert) {
+    let messageSent = null;
+    port.reopen({
+      send(name, message) {
+        messageSent = { name, message };
+      }
+    });
+
+    await visit('/component-tree');
+    let tree = defaultViewTree();
+    run(() => {
+      port.trigger('view:viewTree', { tree });
+    });
+    await wait();
+
+    await click('.component-tree-item--component code');
+    assert.equal(messageSent.name, 'objectInspector:inspectById');
+    assert.equal(messageSent.message.objectId, 'ember392');
+  });
+});
diff --git a/tests/acceptance/container-test.js b/tests/acceptance/container-test.js
index 6690994bca..7be09d78fc 100644
--- a/tests/acceptance/container-test.js
+++ b/tests/acceptance/container-test.js
@@ -62,10 +62,10 @@ module('Container Tab', function(hooks) {
     await visit('/container-types');
     let rows = findAll('.js-container-type');
     assert.equal(rows.length, 2);
-    assert.equal(findAll('.js-container-type-name')[0].textContent.trim(), 'controller');
-    assert.equal(findAll('.js-container-type-count')[0].textContent.trim(), '2');
-    assert.equal(findAll('.js-container-type-name')[1].textContent.trim(), 'route');
-    assert.equal(findAll('.js-container-type-count')[1].textContent.trim(), '5');
+    assert.dom(findAll('.js-container-type-name')[0]).hasText('controller');
+    assert.dom(findAll('.js-container-type-count')[0]).hasText('2');
+    assert.dom(findAll('.js-container-type-name')[1]).hasText('route');
+    assert.dom(findAll('.js-container-type-count')[1]).hasText('5');
   });
 
 
@@ -91,8 +91,8 @@ module('Container Tab', function(hooks) {
 
     rows = findAll('.js-container-instance-list-item');
 
-    assert.equal(rows[0].textContent.trim(), 'first');
-    assert.equal(rows[1].textContent.trim(), 'second');
+    assert.dom(rows[0]).hasText('first');
+    assert.dom(rows[1]).hasText('second');
     name = null;
     message = null;
 
@@ -107,7 +107,39 @@ module('Container Tab', function(hooks) {
 
     rows = findAll('.js-container-instance-list-item');
     assert.equal(rows.length, 1);
-    assert.equal(rows[0].textContent.trim(), 'first');
+    assert.dom(rows[0]).hasText('first');
+  });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    let instances = getInstances();
+
+    port.reopen({
+      send(n, m) {
+        name = n;
+        message = m;
+        if (name === 'container:getTypes') {
+          this.trigger('container:types', { types: getTypes() });
+        }
+
+        if (name === 'container:getInstances' && message.containerType === 'controller') {
+          this.trigger('container:instances', { instances, status: 200 });
+        }
+      }
+    });
+
+    await visit('/container-types/controller');
+    let rows;
+
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 2, 'expected all rows');
+
+    await fillIn('.js-container-instance-search input', 'xxxxx');
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 0, 'expected filtered rows');
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-container-instance-list-item');
+    assert.equal(rows.length, 2, 'expected all rows');
   });
 
   test("Successfully redirects if the container type is not found", async function(assert) {
@@ -154,14 +186,14 @@ module('Container Tab', function(hooks) {
 
     await visit('/container-types/controller');
 
-    assert.equal(findAll('.js-container-type').length, 0);
-    assert.equal(findAll('.js-container-instance-list-item').length, 0);
+    assert.dom('.js-container-type').doesNotExist();
+    assert.dom('.js-container-instance-list-item').doesNotExist();
     types = getTypes();
     instances = getInstances();
 
     await click('.js-reload-container-btn');
 
-    assert.equal(findAll('.js-container-type').length, 2);
-    assert.equal(findAll('.js-container-instance-list-item').length, 2);
+    assert.dom('.js-container-type').exists({ count: 2 });
+    assert.dom('.js-container-instance-list-item').exists({ count: 2 });
   });
 });
diff --git a/tests/acceptance/data-test.js b/tests/acceptance/data-test.js
index c2050e99e2..68ed69bb6b 100644
--- a/tests/acceptance/data-test.js
+++ b/tests/acceptance/data-test.js
@@ -93,20 +93,20 @@ module('Data Tab', function(hooks) {
   test('Model types are successfully listed and bound', async function t(assert) {
     await visit('/data/model-types');
 
-    assert.equal(findAll('.js-model-type').length, 2);
+    assert.dom('.js-model-type').exists({ count: 2 });
     // they should be sorted alphabetically
-    assert.equal(findAll('.js-model-type-name')[0].textContent.trim(), 'App.Comment');
-    assert.equal(findAll('.js-model-type-name')[1].textContent.trim(), 'App.Post');
+    assert.dom(findAll('.js-model-type-name')[0]).hasText('App.Comment');
+    assert.dom(findAll('.js-model-type-name')[1]).hasText('App.Post');
 
-    assert.equal(findAll('.js-model-type-count')[0].textContent.trim(), 1);
-    assert.equal(findAll('.js-model-type-count')[1].textContent.trim(), 2);
+    assert.dom(findAll('.js-model-type-count')[0]).hasText('1');
+    assert.dom(findAll('.js-model-type-count')[1]).hasText('2');
 
     await triggerPort(this, 'data:modelTypesUpdated', {
       modelTypes: [
         modelTypeFactory({ name: 'App.Post', count: 3 })
       ]
     });
-    assert.equal(findAll('.js-model-type-count')[1].textContent.trim(), 3);
+    assert.dom(findAll('.js-model-type-count')[1]).hasText('3');
   });
 
   test('Records are successfully listed and bound', async function t(assert) {
@@ -115,24 +115,24 @@ module('Data Tab', function(hooks) {
     await click(findAll('.js-model-type a')[1]);
 
     let columns = findAll('.js-header-column');
-    assert.equal(columns[0].textContent.trim(), 'Id');
-    assert.equal(columns[1].textContent.trim(), 'Title');
-    assert.equal(columns[2].textContent.trim(), 'Body');
+    assert.dom(columns[0]).hasText('Id');
+    assert.dom(columns[1]).hasText('Title');
+    assert.dom(columns[2]).hasText('Body');
 
     let recordRows = findAll('.js-record-list-item');
     assert.equal(recordRows.length, 2);
 
     let firstRow = recordRows[0];
     let firstRowColumns = firstRow.querySelectorAll('.js-record-column');
-    assert.equal(firstRowColumns[0].textContent.trim(), 1);
-    assert.equal(firstRowColumns[1].textContent.trim(), 'My Post');
-    assert.equal(firstRowColumns[2].textContent.trim(), 'This is my first post');
+    assert.dom(firstRowColumns[0]).hasText('1');
+    assert.dom(firstRowColumns[1]).hasText('My Post');
+    assert.dom(firstRowColumns[2]).hasText('This is my first post');
 
     let secondRow = recordRows[1];
     let secondRowColumns = secondRow.querySelectorAll('.js-record-column');
-    assert.equal(secondRowColumns[0].textContent.trim(), 2);
-    assert.equal(secondRowColumns[1].textContent.trim(), 'Hello');
-    assert.equal(secondRowColumns[2].textContent.trim(), '');
+    assert.dom(secondRowColumns[0]).hasText('2');
+    assert.dom(secondRowColumns[1]).hasText('Hello');
+    assert.dom(secondRowColumns[2]).hasText('');
 
     await triggerPort(this, 'data:recordsAdded', {
       records: [recordFactory({ objectId: 'new-post', id: 3, title: 'Added Post', body: 'I am new here' })]
@@ -140,9 +140,9 @@ module('Data Tab', function(hooks) {
 
     let addedRow = findAll('.js-record-list-item')[2];
     let addedRowColumns = addedRow.querySelectorAll('.js-record-column');
-    assert.equal(addedRowColumns[0].textContent.trim(), 3);
-    assert.equal(addedRowColumns[1].textContent.trim(), 'Added Post');
-    assert.equal(addedRowColumns[2].textContent.trim(), 'I am new here');
+    assert.dom(addedRowColumns[0]).hasText('3');
+    assert.dom(addedRowColumns[1]).hasText('Added Post');
+    assert.dom(addedRowColumns[2]).hasText('I am new here');
 
     await triggerPort(this, 'data:recordsUpdated', {
       records: [recordFactory({ objectId: 'new-post', id: 3, title: 'Modified Post', body: 'I am no longer new' })]
@@ -151,9 +151,9 @@ module('Data Tab', function(hooks) {
     let rows = findAll('.js-record-list-item');
     let modifiedRow = rows[rows.length - 1];
     let modifiedRowColumns = modifiedRow.querySelectorAll('.js-record-column');
-    assert.equal(modifiedRowColumns[0].textContent.trim(), 3);
-    assert.equal(modifiedRowColumns[1].textContent.trim(), 'Modified Post');
-    assert.equal(modifiedRowColumns[2].textContent.trim(), 'I am no longer new');
+    assert.dom(modifiedRowColumns[0]).hasText('3');
+    assert.dom(modifiedRowColumns[1]).hasText('Modified Post');
+    assert.dom(modifiedRowColumns[2]).hasText('I am no longer new');
 
     await triggerPort(this, 'data:recordsRemoved', {
       index: 2,
@@ -161,11 +161,11 @@ module('Data Tab', function(hooks) {
     });
     await wait();
 
-    assert.equal(findAll('.js-record-list-item').length, 2);
+    assert.dom('.js-record-list-item').exists({ count: 2 });
     rows = findAll('.js-record-list-item');
     let lastRow = rows[rows.length - 1];
     let lastRowColumns = lastRow.querySelectorAll('.js-record-column');
-    assert.equal(lastRowColumns[0].textContent.trim(), 2, 'Records successfully removed.');
+    assert.dom(lastRowColumns[0]).hasText('2', 'Records successfully removed.');
   });
 
   test('Filtering records', async function t(assert) {
@@ -182,7 +182,7 @@ module('Data Tab', function(hooks) {
 
     rows = findAll('.js-record-list-item');
     assert.equal(rows.length, 1);
-    assert.equal(findAll('.js-record-column', rows[0])[0].textContent.trim(), '2');
+    assert.dom(findAll('.js-record-column', rows[0])[0]).hasText('2');
   });
 
   test('Searching records', async function t(assert) {
@@ -197,13 +197,13 @@ module('Data Tab', function(hooks) {
 
     rows = findAll('.js-record-list-item');
     assert.equal(rows.length, 1);
-    assert.equal(findAll('.js-record-column', rows[0])[0].textContent.trim(), '2');
+    assert.dom(findAll('.js-record-column', rows[0])[0]).hasText('2');
 
     await fillIn('.js-records-search input', 'my first post');
 
     rows = findAll('.js-record-list-item');
     assert.equal(rows.length, 1);
-    assert.equal(findAll('.js-record-column', rows[0])[0].textContent.trim(), '1');
+    assert.dom(findAll('.js-record-column', rows[0])[0]).hasText('1');
 
     await fillIn('.js-records-search input', '');
 
@@ -211,12 +211,29 @@ module('Data Tab', function(hooks) {
     assert.equal(rows.length, 2);
   });
 
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    await visit('/data/model-types');
+    await click(findAll('.js-model-type a')[1]);
+
+    let rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 2);
+
+    await fillIn('.js-records-search input', 'Hello');
+
+    rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 1);
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-record-list-item');
+    assert.equal(rows.length, 2);
+  });
+
   test('Columns successfully updated when switching model types', async function t(assert) {
     await visit('/data/model-types/App.Post/records');
     let columns = findAll('.js-header-column');
-    assert.equal(columns[columns.length - 1].textContent.trim(), 'Body');
+    assert.dom(columns[columns.length - 1]).hasText('Body');
     await visit('/data/model-types/App.Comment/records');
     columns = findAll('.js-header-column');
-    assert.equal(columns[columns.length - 1].textContent.trim(), 'Content');
+    assert.dom(columns[columns.length - 1]).hasText('Content');
   });
 });
diff --git a/tests/acceptance/deprecation-test.js b/tests/acceptance/deprecation-test.js
index 719ce2adec..f57487bbb4 100644
--- a/tests/acceptance/deprecation-test.js
+++ b/tests/acceptance/deprecation-test.js
@@ -1,4 +1,4 @@
-import { visit, find, findAll, click } from '@ember/test-helpers';
+import { visit, findAll, fillIn, click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
@@ -71,10 +71,10 @@ module('Deprecation Tab', function(hooks) {
 
     await visit('/deprecations');
 
-    assert.notOk(find('.js-deprecation-source'), 'no sources');
-    assert.equal(findAll('.js-deprecation-message')[0].textContent.trim(), 'Deprecation 1', 'message shown');
-    assert.equal(findAll('.js-deprecation-count')[0].textContent.trim(), 2, 'Count correct');
-    assert.ok(find('.js-deprecation-full-trace'), 'Full trace button shown');
+    assert.dom('.js-deprecation-source').doesNotExist('no sources');
+    assert.dom(findAll('.js-deprecation-message')[0]).hasText('Deprecation 1', 'message shown');
+    assert.dom(findAll('.js-deprecation-count')[0]).hasText('2', 'Count correct');
+    assert.dom('.js-deprecation-full-trace').exists('Full trace button shown');
     await click('.js-full-trace-deprecations-btn');
 
     assert.equal(name, 'deprecation:sendStackTraces');
@@ -96,16 +96,16 @@ module('Deprecation Tab', function(hooks) {
 
     await visit('/deprecations');
 
-    assert.equal(find('.js-deprecation-message').textContent.trim(), 'Deprecation 1', 'message shown');
-    assert.equal(find('.js-deprecation-count').textContent.trim(), 2, 'Count correct');
-    assert.notOk(find('.js-deprecation-full-trace'), 'Full trace button not shown');
+    assert.dom('.js-deprecation-message').hasText('Deprecation 1', 'message shown');
+    assert.dom('.js-deprecation-count').hasText('2', 'Count correct');
+    assert.dom('.js-deprecation-full-trace').doesNotExist('Full trace button not shown');
 
     let sources = findAll('.js-deprecation-source');
     assert.equal(sources.length, 2, 'shows all sources');
     assert.notOk(sources[0].querySelector('.js-deprecation-source-link'), 'source not clickable');
-    assert.equal(sources[0].querySelector('.js-deprecation-source-text').textContent.trim(), 'path-to-file.js:1');
+    assert.dom(sources[0].querySelector('.js-deprecation-source-text')).hasText('path-to-file.js:1');
     assert.notOk(sources[1].querySelector('.js-deprecation-source-link'), 'source not clickable');
-    assert.equal(sources[1].querySelector('.js-deprecation-source-text').textContent.trim(), 'path-to-second-file.js:2');
+    assert.dom(sources[1].querySelector('.js-deprecation-source-text')).hasText('path-to-second-file.js:2');
 
     await click('.js-trace-deprecations-btn', sources[0]);
 
@@ -142,16 +142,16 @@ module('Deprecation Tab', function(hooks) {
 
     await visit('/deprecations');
 
-    assert.equal(find('.js-deprecation-message').textContent.trim(), 'Deprecation 1', 'message shown');
-    assert.equal(find('.js-deprecation-count').textContent.trim(), 2, 'Count correct');
-    assert.notOk(find('.js-deprecation-full-trace'), 'Full trace button not shown');
+    assert.dom('.js-deprecation-message').hasText('Deprecation 1', 'message shown');
+    assert.dom('.js-deprecation-count').hasText('2', 'Count correct');
+    assert.dom('.js-deprecation-full-trace').doesNotExist('Full trace button not shown');
 
     let sources = findAll('.js-deprecation-source');
     assert.equal(sources.length, 2, 'shows all sources');
     assert.notOk(sources[0].querySelector('.js-deprecation-source-text'), 'source clickable');
-    assert.equal(sources[0].querySelector('.js-deprecation-source-link').textContent.trim(), 'path-to-file.js:1');
+    assert.dom(sources[0].querySelector('.js-deprecation-source-link')).hasText('path-to-file.js:1');
     assert.notOk(sources[1].querySelector('.js-deprecation-source-text'), 'source clickable');
-    assert.equal(sources[1].querySelector('.js-deprecation-source-link').textContent.trim(), 'path-to-second-file.js:2');
+    assert.dom(sources[1].querySelector('.js-deprecation-source-link')).hasText('path-to-second-file.js:2');
 
     openResourceArgs = false;
     await click('.js-deprecation-source-link', sources[0]);
@@ -174,4 +174,30 @@ module('Deprecation Tab', function(hooks) {
     assert.equal(message.deprecation.message, 'Deprecation 1');
     assert.equal(message.deprecation.sources.length, 1);
   });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    port.reopen({
+      send(name) {
+        if (name === 'deprecation:watch') {
+          port.trigger('deprecation:deprecationsAdded', {
+            deprecations: deprecationsWithSource()
+          });
+        }
+        return this._super(...arguments);
+      }
+    });
+
+    await visit('/deprecations');
+
+    let sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 2, 'shows all sources');
+
+    await fillIn('.js-deprecations-search input', 'xxxx');
+    sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 0, 'sources filtered');
+
+    await click('.js-search-field-clear-button');
+    sources = findAll('.js-deprecation-source');
+    assert.equal(sources.length, 2, 'show all sources');
+  });
 });
diff --git a/tests/acceptance/info-test.js b/tests/acceptance/info-test.js
index 5c6e713c41..ec4ea6bf42 100644
--- a/tests/acceptance/info-test.js
+++ b/tests/acceptance/info-test.js
@@ -29,11 +29,11 @@ module('Info Tab', function(hooks) {
 
     let libraries = findAll('.js-library-row');
     assert.equal(libraries.length, 3, "The correct number of libraries is displayed");
-    assert.equal(libraries[0].querySelector('.js-lib-name').textContent.trim(), 'Ember Inspector', 'Ember Inspector is added automatically');
-    assert.equal(libraries[0].querySelector('.js-lib-version').textContent.trim(), '9.9.9');
-    assert.equal(libraries[1].querySelector('.js-lib-name').textContent.trim(), 'Ember');
-    assert.equal(libraries[1].querySelector('.js-lib-version').textContent.trim(), '1.0');
-    assert.equal(libraries[2].querySelector('.js-lib-name').textContent.trim(), 'Handlebars');
-    assert.equal(libraries[2].querySelector('.js-lib-version').textContent.trim(), '2.1');
+    assert.dom(libraries[0].querySelector('.js-lib-name')).hasText('Ember Inspector', 'Ember Inspector is added automatically');
+    assert.dom(libraries[0].querySelector('.js-lib-version')).hasText('9.9.9');
+    assert.dom(libraries[1].querySelector('.js-lib-name')).hasText('Ember');
+    assert.dom(libraries[1].querySelector('.js-lib-version')).hasText('1.0');
+    assert.dom(libraries[2].querySelector('.js-lib-name')).hasText('Handlebars');
+    assert.dom(libraries[2].querySelector('.js-lib-version')).hasText('2.1');
   });
 });
diff --git a/tests/acceptance/object-inspector-test.js b/tests/acceptance/object-inspector-test.js
index da1608c52b..d5b6285458 100644
--- a/tests/acceptance/object-inspector-test.js
+++ b/tests/acceptance/object-inspector-test.js
@@ -89,9 +89,12 @@ module('Object Inspector', function(hooks) {
 
     await triggerPort(this, 'objectInspector:updateObject', obj);
 
-    assert.equal(find('.js-object-name').textContent, 'My Object');
-    assert.equal(find('.js-object-detail-name').textContent, 'Own Properties');
-    assert.ok(find('.js-object-detail').classList.contains('mixin_state_expanded'), 'The "Own Properties" detail is expanded by default');
+    assert.dom('.js-object-name').hasText('My Object');
+    assert.dom('.js-object-detail-name').hasText('Own Properties');
+    assert.dom('.js-object-detail').hasClass(
+      'mixin_state_expanded',
+      'The "Own Properties" detail is expanded by default'
+    );
   });
 
   test("Object details", async function (assert) {
@@ -99,30 +102,29 @@ module('Object Inspector', function(hooks) {
 
     await triggerPort(this, 'objectInspector:updateObject', objectToInspect());
 
-    assert.equal(find('.js-object-name').textContent, 'My Object');
+    assert.dom('.js-object-name').hasText('My Object');
     let [firstDetail, secondDetail] = findAll('.js-object-detail');
-    assert.equal(firstDetail.querySelector('.js-object-detail-name').textContent, 'First Detail');
-    assert.notOk(firstDetail.classList.contains('mixin_state_expanded'), 'Detail not expanded by default');
+    assert.dom(firstDetail.querySelector('.js-object-detail-name')).hasText('First Detail');
+    assert.dom(firstDetail).hasNoClass('mixin_state_expanded', 'Detail not expanded by default');
 
     await click('.js-object-detail-name', firstDetail);
 
-    assert.ok(firstDetail.classList.contains('mixin_state_expanded'), 'Detail expands on click.');
-    assert.notOk(secondDetail.classList.contains('mixin_state_expanded'), 'Second detail does not expand.');
+    assert.dom(firstDetail).hasClass('mixin_state_expanded', 'Detail expands on click.');
+    assert.dom(secondDetail).hasNoClass('mixin_state_expanded', 'Second detail does not expand.');
     assert.equal(firstDetail.querySelectorAll('.js-object-property').length, 1);
-    assert.equal(firstDetail.querySelector('.js-object-property-name').textContent, 'numberProperty');
-    assert.equal(firstDetail.querySelector('.js-object-property-value').textContent, '1');
-
+    assert.dom(firstDetail.querySelector('.js-object-property-name')).hasText('numberProperty');
+    assert.dom(firstDetail.querySelector('.js-object-property-value')).hasText('1');
     await click(firstDetail.querySelector('.js-object-detail-name'));
 
-    assert.notOk(firstDetail.classList.contains('mixin_state_expanded'), 'Expanded detail minimizes on click.');
+    assert.dom(firstDetail).hasNoClass('mixin_state_expanded', 'Expanded detail minimizes on click.');
     await click(secondDetail.querySelector('.js-object-detail-name'));
 
-    assert.ok(secondDetail.classList.contains('mixin_state_expanded'));
+    assert.dom(secondDetail).hasClass('mixin_state_expanded');
     assert.equal(secondDetail.querySelectorAll('.js-object-property').length, 2);
-    assert.equal(secondDetail.querySelectorAll('.js-object-property-name')[0].textContent, 'objectProperty');
-    assert.equal(secondDetail.querySelectorAll('.js-object-property-value')[0].textContent, 'Ember Object Name');
-    assert.equal(secondDetail.querySelectorAll('.js-object-property-name')[1].textContent, 'stringProperty');
-    assert.equal(secondDetail.querySelectorAll('.js-object-property-value')[1].textContent, 'String Value');
+    assert.dom(secondDetail.querySelectorAll('.js-object-property-name')[0]).hasText('objectProperty');
+    assert.dom(secondDetail.querySelectorAll('.js-object-property-value')[0]).hasText('Ember Object Name');
+    assert.dom(secondDetail.querySelectorAll('.js-object-property-name')[1]).hasText('stringProperty');
+    assert.dom(secondDetail.querySelectorAll('.js-object-property-value')[1]).hasText('String Value');
   });
 
   test("Digging deeper into objects", async function (assert) {
@@ -159,17 +161,17 @@ module('Object Inspector', function(hooks) {
 
     await triggerPort(this, 'objectInspector:updateObject', nestedObject);
 
-    assert.equal(find('.js-object-name').textContent, 'My Object', 'Title stays as the initial object.');
-    assert.equal(find('.js-object-trail').textContent, '.objectProperty', 'Nested property shows below title');
-    assert.equal(find('.js-object-detail-name').textContent, 'Nested Detail');
+    assert.dom('.js-object-name').hasText('My Object', 'Title stays as the initial object.');
+    assert.dom('.js-object-trail').hasText('.objectProperty', 'Nested property shows below title');
+    assert.dom('.js-object-detail-name').hasText('Nested Detail');
     await click('.js-object-detail-name');
 
-    assert.ok(find('.js-object-detail').classList.contains('mixin_state_expanded'));
-    assert.equal(find('.js-object-property-name').textContent, 'nestedProp');
-    assert.equal(find('.js-object-property-value').textContent, 'Nested Prop');
+    assert.dom('.js-object-detail').hasClass('mixin_state_expanded');
+    assert.dom('.js-object-property-name').hasText('nestedProp');
+    assert.dom('.js-object-property-value').hasText('Nested Prop');
     await click('.js-object-inspector-back');
 
-    assert.notOk(find('.js-object-trail'), 0);
+    assert.dom('.js-object-trail').doesNotExist(0);
   });
 
   test("Computed properties", async function (assert) {
@@ -207,7 +209,138 @@ module('Object Inspector', function(hooks) {
       mixinIndex: 0
     });
 
-    assert.equal(find('.js-object-property-value').textContent, 'Computed value');
+    assert.dom('.js-object-property-value').hasText('Computed value');
+  });
+
+  test("Service highlight", async function(assert) {
+    await visit('/');
+
+    let obj = {
+      name: 'My Object',
+      objectId: 'myObject',
+      details: [{
+        name: 'Detail',
+        properties: [{
+          name: 'serviceProp',
+          isService: true,
+          value: {
+            inspect: '<service>',
+            computed: true
+          }
+        }]
+      }]
+    };
+
+    await triggerPort(this, 'objectInspector:updateObject', obj);
+    await click('.js-object-detail-name');
+
+    assert.equal(findAll('.mixin__property--group').length, 1);
+    assert.equal(findAll('.mixin__property-icon--service').length, 1);
+    assert.equal(findAll('.js-property-name-service').length, 1);
+    assert.equal(findAll('.mixin__property-dependency-list').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 0);
+  });
+
+  test("Computed properties no dependency", async function (assert) {
+    await visit('/');
+
+    let obj = {
+      name: 'My Object',
+      objectId: 'myObject',
+      details: [{
+        name: 'Detail',
+        properties: [{
+          name: 'computedProp',
+          dependentKeys: [],
+          value: {
+            inspect: '<computed>',
+            type: 'type-descriptor',
+            computed: true
+          }
+        }]
+      }]
+    };
+
+    await triggerPort(this, 'objectInspector:updateObject', obj);
+    await click('.js-object-detail-name');
+    await click('.js-calculate');
+
+    assert.equal(name, 'objectInspector:calculate');
+    assert.deepEqual(message, { objectId: 'myObject', property: 'computedProp', mixinIndex: 0 });
+    await triggerPort(this, 'objectInspector:updateProperty', {
+      objectId: 'myObject',
+      property: 'computedProp',
+      value: {
+        inspect: 'Computed value',
+        computed: 'foo-bar'
+      },
+      mixinIndex: 0
+    });
+
+    assert.equal(findAll('.mixin__property--group').length, 0);
+
+    await click('.mixin__property-icon--computed');
+
+    assert.equal(findAll('.mixin__property-dependency-list').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 0);
+
+    await click('.mixin__property-icon--computed');
+
+    assert.equal(findAll('.mixin__property-dependency-list').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 0);
+  });
+
+  test("Computed properties dependency expand", async function (assert) {
+    await visit('/');
+
+    let obj = {
+      name: 'My Object',
+      objectId: 'myObject',
+      details: [{
+        name: 'Detail',
+        properties: [{
+          name: 'computedProp',
+          dependentKeys: ['foo.@each.bar'],
+          value: {
+            inspect: '<computed>',
+            type: 'type-descriptor',
+            computed: true
+          }
+        }]
+      }]
+    };
+    await triggerPort(this, 'objectInspector:updateObject', obj);
+    await click('.js-object-detail-name');
+    await click('.js-calculate');
+
+    assert.equal(name, 'objectInspector:calculate');
+    assert.deepEqual(message, { objectId: 'myObject', property: 'computedProp', mixinIndex: 0 });
+    await triggerPort(this, 'objectInspector:updateProperty', {
+      objectId: 'myObject',
+      property: 'computedProp',
+      value: {
+        inspect: 'Computed value',
+        computed: 'foo-bar'
+      },
+      mixinIndex: 0
+    });
+
+    assert.equal(findAll('.mixin__property--group').length, 1);
+
+    await click('.mixin__property-icon--computed');
+
+    assert.equal(findAll('.mixin__property-dependency-list').length, 1);
+    assert.equal(findAll('.mixin__property-dependency-item').length, 1);
+    assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 1);
+
+    await click('.mixin__property-icon--computed');
+
+    assert.equal(findAll('.mixin__property-dependency-list').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item').length, 0);
+    assert.equal(findAll('.mixin__property-dependency-item > .mixin__property-dependency-name').length, 0);
   });
 
   test("Properties are bound to the application properties", async function (assert) {
@@ -232,7 +365,7 @@ module('Object Inspector', function(hooks) {
     };
     await triggerPort(this, 'objectInspector:updateObject', obj);
 
-    assert.equal(find('.js-object-property-value').textContent, 'Teddy');
+    assert.dom('.js-object-property-value').hasText('Teddy');
     await triggerPort(this, 'objectInspector:updateProperty', {
       objectId: 'object-id',
       mixinIndex: 0,
@@ -267,7 +400,7 @@ module('Object Inspector', function(hooks) {
       }
     });
 
-    assert.equal(find('.js-object-property-value').textContent, 'Joey');
+    assert.dom('.js-object-property-value').hasText('Joey');
   });
 
   test("Stringified json should not get double parsed", async function (assert) {
@@ -370,12 +503,12 @@ module('Object Inspector', function(hooks) {
     };
     await triggerPort(this, 'objectInspector:updateObject', obj);
     await click('.js-object-property-value');
-    assert.notOk(find('.js-object-property-value-txt'));
+    assert.dom('.js-object-property-value-txt').doesNotExist();
 
     let valueElements = findAll('.js-object-property-value');
     await click(valueElements[valueElements.length - 1]);
 
-    assert.ok(find('.js-object-property-value-txt'));
+    assert.dom('.js-object-property-value-txt').exists();
   });
 
   test("Dropping an object due to destruction", async function (assert) {
@@ -392,10 +525,10 @@ module('Object Inspector', function(hooks) {
 
     await triggerPort(this, 'objectInspector:updateObject', obj);
 
-    assert.equal(find('.js-object-name').textContent.trim(), 'My Object');
+    assert.dom('.js-object-name').hasText('My Object');
     await triggerPort(this, 'objectInspector:droppedObject', { objectId: 'myObject' });
 
-    assert.notOk(find('.js-object-name'));
+    assert.dom('.js-object-name').doesNotExist();
   });
 
   test("Date fields are editable", async function (assert) {
@@ -450,9 +583,9 @@ module('Object Inspector', function(hooks) {
     await visit('/');
     await triggerPort(this, 'objectInspector:updateObject', obj);
 
-    assert.equal(find('.js-object-name').textContent, 'My Object');
-    assert.equal(findAll('.js-object-inspector-errors').length, 1);
-    assert.equal(findAll('.js-object-inspector-error').length, 2);
+    assert.dom('.js-object-name').hasText('My Object');
+    assert.dom('.js-object-inspector-errors').exists({ count: 1 });
+    assert.dom('.js-object-inspector-error').exists({ count: 2 });
 
     await click('.js-send-errors-to-console');
 
@@ -466,13 +599,13 @@ module('Object Inspector', function(hooks) {
       ]
     });
 
-    assert.ok(find('.js-object-inspector-error'));
+    assert.dom('.js-object-inspector-error').exists();
 
     await triggerPort(this, 'objectInspector:updateErrors', {
       objectId: '1',
       errors: []
     });
 
-    assert.notOk(find('.js-object-inspector-errors'));
+    assert.dom('.js-object-inspector-errors').doesNotExist();
   });
 });
diff --git a/tests/acceptance/promise-test.js b/tests/acceptance/promise-test.js
index 7ea8386421..14e7b947e1 100644
--- a/tests/acceptance/promise-test.js
+++ b/tests/acceptance/promise-test.js
@@ -1,4 +1,4 @@
-import { visit, find, findAll, click } from '@ember/test-helpers';
+import { visit, find, findAll, fillIn, click } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { triggerPort } from '../helpers/trigger-port';
@@ -51,8 +51,8 @@ module('Promise Tab', function(hooks) {
       promises: []
     });
 
-    assert.notOk(find('.js-promise-tree'), "no promise list");
-    assert.ok(find('.js-page-refresh'), "page refresh hint seen");
+    assert.dom('.js-promise-tree').doesNotExist("no promise list");
+    assert.dom('.js-page-refresh').exists("page refresh hint seen");
 
     await click('.js-page-refresh-btn');
 
@@ -68,16 +68,16 @@ module('Promise Tab', function(hooks) {
       ]
     });
 
-    assert.ok(find('.js-promise-tree'), 'promise tree is seen after being populated');
-    assert.equal(findAll('.js-promise-tree-item').length, 1, '1 promise item can be seen');
-    assert.notOk(find('.js-page-refresh'), 'page refresh hint hidden');
+    assert.dom('.js-promise-tree').exists('promise tree is seen after being populated');
+    assert.dom('.js-promise-tree-item').exists({ count: 1 }, '1 promise item can be seen');
+    assert.dom('.js-page-refresh').doesNotExist('page refresh hint hidden');
 
     // make sure clearing does not show the refresh hint
     await click('.js-clear-promises-btn');
 
-    assert.ok(find('.js-promise-tree'), 'promise-tree can be seen');
-    assert.notOk(find('.js-promise-tree-item'), 'promise items cleared');
-    assert.notOk(find('.js-page-refresh'), 'page refresh hint hidden');
+    assert.dom('.js-promise-tree').exists('promise-tree can be seen');
+    assert.dom('.js-promise-tree-item').doesNotExist('promise items cleared');
+    assert.dom('.js-page-refresh').doesNotExist('page refresh hint hidden');
   });
 
   test("Pending promise", async function(assert) {
@@ -94,10 +94,10 @@ module('Promise Tab', function(hooks) {
     });
     await wait();
 
-    assert.equal(findAll('.js-promise-tree-item').length, 1);
+    assert.dom('.js-promise-tree-item').exists({ count: 1 });
     let row = find('.js-promise-tree-item');
-    assert.equal(row.querySelector('.js-promise-label').textContent.trim(), 'Promise 1');
-    assert.equal(row.querySelector('.js-promise-state').textContent.trim(), 'Pending');
+    assert.dom(row.querySelector('.js-promise-label')).hasText('Promise 1');
+    assert.dom(row.querySelector('.js-promise-state')).hasText('Pending');
   });
 
 
@@ -123,12 +123,12 @@ module('Promise Tab', function(hooks) {
     });
     await wait();
 
-    assert.equal(findAll('.js-promise-tree-item').length, 1);
+    assert.dom('.js-promise-tree-item').exists({ count: 1 });
     let row = find('.js-promise-tree-item');
-    assert.equal(row.querySelector('.js-promise-label').textContent.trim(), 'Promise 1');
-    assert.equal(row.querySelector('.js-promise-state').textContent.trim(), 'Fulfilled');
-    assert.equal(row.querySelector('.js-promise-value').textContent.trim(), 'value');
-    assert.equal(row.querySelector('.js-promise-time').textContent.trim(), '10.00ms');
+    assert.dom(row.querySelector('.js-promise-label')).hasText('Promise 1');
+    assert.dom(row.querySelector('.js-promise-state')).hasText('Fulfilled');
+    assert.dom(row.querySelector('.js-promise-value')).hasText('value');
+    assert.dom(row.querySelector('.js-promise-time')).hasText('10.00ms');
   });
 
 
@@ -153,12 +153,12 @@ module('Promise Tab', function(hooks) {
       ]
     });
 
-    assert.equal(findAll('.js-promise-tree-item').length, 1);
+    assert.dom('.js-promise-tree-item').exists({ count: 1 });
     let row = find('.js-promise-tree-item');
-    assert.equal(row.querySelector('.js-promise-label').textContent.trim(), 'Promise 1');
-    assert.equal(row.querySelector('.js-promise-state').textContent.trim(), 'Rejected');
-    assert.equal(row.querySelector('.js-promise-value').textContent.trim(), 'reason');
-    assert.equal(row.querySelector('.js-promise-time').textContent.trim(), '20.00ms');
+    assert.dom(row.querySelector('.js-promise-label')).hasText('Promise 1');
+    assert.dom(row.querySelector('.js-promise-state')).hasText('Rejected');
+    assert.dom(row.querySelector('.js-promise-value')).hasText('reason');
+    assert.dom(row.querySelector('.js-promise-time')).hasText('20.00ms');
   });
 
   test("Chained promises", async function(assert) {
@@ -181,12 +181,12 @@ module('Promise Tab', function(hooks) {
 
     let rows = findAll('.js-promise-tree-item');
     assert.equal(rows.length, 1, 'Collpased by default');
-    assert.equal(rows[0].querySelector('.js-promise-label').textContent.trim(), 'Parent');
+    assert.dom(rows[0].querySelector('.js-promise-label')).hasText('Parent');
     await click(rows[0].querySelector('.js-promise-label'));
 
     rows = findAll('.js-promise-tree-item');
     assert.equal(rows.length, 2, 'Chain now expanded');
-    assert.equal(rows[1].querySelector('.js-promise-label').textContent.trim(), 'Child');
+    assert.dom(rows[1].querySelector('.js-promise-label')).hasText('Child');
   });
 
   test("Can trace promise when there is a stack", async function(assert) {
@@ -210,7 +210,7 @@ module('Promise Tab', function(hooks) {
       promises: [generatePromise({ guid: 1, hasStack: false })]
     });
 
-    assert.notOk(find('.js-trace-promise-btn'));
+    assert.dom('.js-trace-promise-btn').doesNotExist();
   });
 
   test("Toggling promise trace option", async function(assert) {
@@ -241,7 +241,7 @@ module('Promise Tab', function(hooks) {
     });
 
     let row = find('.js-promise-tree-item');
-    assert.equal(find('.js-send-to-console-btn').textContent.trim(), 'Stack trace');
+    assert.dom('.js-send-to-console-btn').hasText('Stack trace');
     await click(row.querySelector('.js-send-to-console-btn'));
 
     assert.equal(name, 'promise:sendValueToConsole');
@@ -291,4 +291,25 @@ module('Promise Tab', function(hooks) {
     assert.equal(name, 'objectInspector:inspectById');
     assert.deepEqual(message, { objectId: 100 });
   });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    await visit('/promise-tree');
+
+    await triggerPort(this, 'promise:promisesUpdated', {
+      promises: [
+        generatePromise({
+          guid: 1,
+          label: 'Promise 1',
+          state: 'created'
+        })
+      ]
+    });
+    await wait();
+
+    assert.dom('.js-promise-tree-item').exists({ count: 1 });
+    await fillIn('.js-promise-search input', 'xxxxx');
+    assert.dom('.js-promise-tree-item').doesNotExist();
+    await click('.js-search-field-clear-button');
+    assert.dom('.js-promise-tree-item').exists({ count: 1 });
+  });
 });
diff --git a/tests/acceptance/render-tree-test.js b/tests/acceptance/render-tree-test.js
index f01b0cc7ea..122c8a5414 100644
--- a/tests/acceptance/render-tree-test.js
+++ b/tests/acceptance/render-tree-test.js
@@ -1,4 +1,4 @@
-import { visit, find, findAll, click, fillIn } from '@ember/test-helpers';
+import { visit, findAll, click, fillIn } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
@@ -51,8 +51,8 @@ module('Render Tree Tab', function(hooks) {
 
     await visit('/render-tree');
 
-    assert.notOk(find('.js-render-tree'), "no render tree");
-    assert.ok(find('.js-render-tree-empty'), "Message about empty render tree shown");
+    assert.dom('.js-render-tree').doesNotExist("no render tree");
+    assert.dom('.js-render-tree-empty').exists("Message about empty render tree shown");
   });
 
   test("Renders the list correctly", async function(assert) {
@@ -68,26 +68,26 @@ module('Render Tree Tab', function(hooks) {
 
     await visit('/render-tree');
 
-    assert.ok(find('.js-render-tree'));
+    assert.dom('.js-render-tree').exists();
     let rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 2, "Two rows are rendered initially");
 
-    assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "First View Rendering");
-    assert.equal(rows[0].querySelector('.js-render-profile-duration').textContent.trim(), "476.87ms");
-    assert.equal(rows[0].querySelector('.js-render-profile-timestamp').textContent.trim(), "13:16:22:715");
+    assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering');
+    assert.dom(rows[0].querySelector('.js-render-profile-duration')).hasText('476.87ms');
+    assert.dom(rows[0].querySelector('.js-render-profile-timestamp')).hasText('13:16:22:715');
 
-    assert.equal(rows[1].querySelector('.js-render-profile-name').textContent.trim(), "Second View Rendering");
-    assert.equal(rows[1].querySelector('.js-render-profile-duration').textContent.trim(), "10.00ms");
-    assert.equal(rows[1].querySelector('.js-render-profile-timestamp').textContent.trim(), "13:16:22:759");
+    assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Second View Rendering');
+    assert.dom(rows[1].querySelector('.js-render-profile-duration')).hasText('10.00ms');
+    assert.dom(rows[1].querySelector('.js-render-profile-timestamp')).hasText('13:16:22:759');
 
     await click('.js-render-main-cell', rows[0]);
 
     rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 3, "Child is shown below the parent");
 
-    assert.equal(rows[1].querySelector('.js-render-profile-name').textContent.trim(), "Child view");
-    assert.equal(rows[1].querySelector('.js-render-profile-duration').textContent.trim(), "0.36ms");
-    assert.equal(rows[1].querySelector('.js-render-profile-timestamp').textContent.trim(), "13:16:22:581");
+    assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Child view');
+    assert.dom(rows[1].querySelector('.js-render-profile-duration')).hasText('0.36ms');
+    assert.dom(rows[1].querySelector('.js-render-profile-timestamp')).hasText('13:16:22:581');
 
     await click('.js-render-main-cell', rows[0]);
 
@@ -111,15 +111,15 @@ module('Render Tree Tab', function(hooks) {
     let rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 2, "Two rows are rendered initially");
 
-    assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "First View Rendering");
-    assert.equal(rows[1].querySelector('.js-render-profile-name').textContent.trim(), "Second View Rendering");
+    assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering');
+    assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Second View Rendering');
 
     await fillIn('.js-render-profiles-search input', 'first');
 
     rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 2, "The first parent is rendered with the child");
-    assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "First View Rendering");
-    assert.equal(rows[1].querySelector('.js-render-profile-name').textContent.trim(), "Child view");
+    assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering');
+    assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Child view');
 
     // Minimize to hide child view
     await click('.js-render-main-cell');
@@ -129,13 +129,38 @@ module('Render Tree Tab', function(hooks) {
     rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 2, "filter is reset");
 
-    assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "First View Rendering");
-    assert.equal(rows[1].querySelector('.js-render-profile-name').textContent.trim(), "Second View Rendering");
+    assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering');
+    assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Second View Rendering');
 
     await fillIn('.js-render-profiles-search input', 'Second');
 
     rows = findAll('.js-render-profile-item');
     assert.equal(rows.length, 1, "The second row is the only one showing");
-    assert.equal(rows[0].querySelector('.js-render-profile-name').textContent.trim(), "Second View Rendering");
+    assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('Second View Rendering');
+  });
+
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    port.reopen({
+      send(n/*, m*/) {
+        if (n === 'render:watchProfiles') {
+          this.trigger('render:profilesAdded', {
+            profiles: generateProfiles()
+          });
+        }
+      }
+    });
+
+    await visit('/render-tree');
+
+    let rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 2, "expected all rows");
+
+    await fillIn('.js-render-profiles-search input', 'xxxxxx');
+    rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 0, 'expected filtered rows');
+
+    await click('.js-search-field-clear-button');
+    rows = findAll('.js-render-profile-item');
+    assert.equal(rows.length, 2, 'expected all rows');
   });
 });
diff --git a/tests/acceptance/view-tree-test.js b/tests/acceptance/view-tree-test.js
index c70aceb632..30bf12e38a 100644
--- a/tests/acceptance/view-tree-test.js
+++ b/tests/acceptance/view-tree-test.js
@@ -240,6 +240,27 @@ module('View Tree Tab', function(hooks) {
     ], 'expected title tips');
   });
 
+  test("It should clear the search filter when the clear button is clicked", async function(assert) {
+    let viewTree = defaultViewTree();
+
+    await visit('/');
+    run(() => {
+      port.trigger('view:viewTree', { tree: viewTree });
+    });
+    await wait();
+
+    let treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 3, 'expected all tree nodes');
+
+    await fillIn('.js-filter-views input', 'post');
+    treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 1, 'expected filtered tree nodes');
+
+    await click('.js-search-field-clear-button');
+    treeNodes = findAll('.js-view-tree-item');
+    assert.equal(treeNodes.length, 3, 'expected all tree nodes');
+  });
+
   test("It should update the view tree when the port triggers a change", async function(assert) {
     assert.expect(4);
     let treeNodes, viewTree = defaultViewTree();
@@ -251,7 +272,7 @@ module('View Tree Tab', function(hooks) {
     treeNodes = findAll('.js-view-tree-item');
     assert.equal(treeNodes.length, 3);
     let viewControllersEls = findAll('.js-view-controller');
-    assert.equal(viewControllersEls[viewControllersEls.length - 1].textContent.trim(), 'App.CommentsController');
+    assert.dom(viewControllersEls[viewControllersEls.length - 1]).hasText('App.CommentsController');
 
     viewTree = defaultViewTree();
     viewTree.children.splice(0, 1);
@@ -261,7 +282,7 @@ module('View Tree Tab', function(hooks) {
     treeNodes = findAll('.js-view-tree-item');
     assert.equal(treeNodes.length, 2);
     viewControllersEls = findAll('.js-view-controller');
-    assert.equal(viewControllersEls[viewControllersEls.length - 1].textContent.trim(), 'App.SomeController');
+    assert.dom(viewControllersEls[viewControllersEls.length - 1]).hasText('App.SomeController');
   });
 
   test("Previewing / showing a view on the client", async function(assert) {
diff --git a/tests/ember_debug/object-inspector-test.js b/tests/ember_debug/object-inspector-test.js
index b586011b51..f39ab4f886 100644
--- a/tests/ember_debug/object-inspector-test.js
+++ b/tests/ember_debug/object-inspector-test.js
@@ -4,6 +4,7 @@ import Component from '@ember/component';
 import { run } from '@ember/runloop';
 import { guidFor } from '@ember/object/internals';
 import EmberObject, { computed } from '@ember/object';
+import Service from '@ember/service';
 import Ember from 'ember';
 import { module, test } from 'qunit';
 import { settings as nativeDomHelpersSettings } from 'ember-native-dom-helpers';
@@ -368,6 +369,44 @@ module('Ember Debug - Object Inspector', function(hooks) {
     assert.ok(message.details[4].name !== 'MixinToSkip', 'Correctly skips properties');
   });
 
+
+  test("Service should be successfully tagged as service on serialization", function(assert) {
+    let inspectedService = Service.extend({
+      fooBoo() {
+        return true;
+      }
+    }).create();
+
+    let inspected = EmberObject.extend({
+      service: inspectedService
+    }).create();
+
+    objectInspector.sendObject(inspected);
+
+    let serializedServiceProperty = message.details[1].properties[0];
+
+    assert.equal(serializedServiceProperty.isService, true);
+  });
+
+  test("Computed property dependent keys and code should be successfully serialized", function(assert) {
+    let compuedFn = function() {
+      return this.get("foo") + this.get("bar");
+    };
+
+    let inspected = EmberObject.extend({
+      foo: true,
+      bar: false,
+      fooAndBar: computed("foo", "bar", compuedFn)
+    }).create();
+
+    objectInspector.sendObject(inspected);
+    let serializedComputedProperty = message.details[1].properties[2];
+
+    assert.equal(serializedComputedProperty.code, compuedFn.toString());
+    assert.equal(serializedComputedProperty.dependentKeys[0], "foo");
+    assert.equal(serializedComputedProperty.dependentKeys[1], "bar");
+  });
+
   test('Read Only Computed properties mush have a readOnly property', function(assert) {
     let inspected = EmberObject.extend({
       readCP: computed(function() {}).property().readOnly(),
diff --git a/tests/ember_debug/view-debug-test.js b/tests/ember_debug/view-debug-test.js
index 5355cc1840..33cf13bb7e 100644
--- a/tests/ember_debug/view-debug-test.js
+++ b/tests/ember_debug/view-debug-test.js
@@ -174,15 +174,15 @@ module('Ember Debug - View', function(hooks) {
     let previewDiv = find('[data-label=preview-div]');
 
     assert.ok(isVisible(previewDiv));
-    assert.notOk(find('[data-label=layer-component]'), 'Component layer not shown on outlet views');
-    assert.equal(previewDiv.querySelector('[data-label=layer-controller]').textContent, 'App.ApplicationController');
-    assert.equal(previewDiv.querySelector('[data-label=layer-model]').textContent, 'Application model');
+    assert.dom('[data-label=layer-component]').doesNotExist('Component layer not shown on outlet views');
+    assert.dom(previewDiv.querySelector('[data-label=layer-controller]')).hasText('App.ApplicationController');
+    assert.dom(previewDiv.querySelector('[data-label=layer-model]')).hasText('Application model');
 
     let layerDiv = find('[data-label=layer-div]');
     await triggerEvent(layerDiv, 'mouseup');
 
     assert.ok(isVisible(layerDiv));
-    assert.equal(layerDiv.querySelector('[data-label=layer-model]').textContent, 'Application model');
+    assert.dom(layerDiv.querySelector('[data-label=layer-model]')).hasText('Application model');
     await click(layerDiv.querySelector('[data-label=layer-controller]'));
 
     let controller = this.owner.lookup('controller:application');
@@ -249,7 +249,10 @@ module('Ember Debug - View', function(hooks) {
 
     await visit('/simple');
 
-    assert.ok(rootElement.classList.contains('ember-application'), 'The rootElement has the .ember-application CSS class');
+    assert.dom(rootElement).hasClass(
+      'ember-application',
+      'The rootElement has the .ember-application CSS class'
+    );
     rootElement.classList.remove('ember-application');
 
     // Restart the inspector
diff --git a/yarn.lock b/yarn.lock
index ffd1f1be86..118dda3ca3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -129,6 +129,10 @@
     "@types/acorn" "*"
     source-map "^0.6.1"
 
+abab@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -147,12 +151,22 @@ accepts@~1.3.4:
     mime-types "~2.1.16"
     negotiator "0.6.1"
 
+acorn-globals@^1.0.4:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
+  dependencies:
+    acorn "^2.1.0"
+
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
   dependencies:
     acorn "^3.0.4"
 
+acorn@^2.1.0, acorn@^2.4.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -1199,6 +1213,10 @@ basic-auth@~2.0.0:
   dependencies:
     safe-buffer "5.1.1"
 
+basiccontext@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/basiccontext/-/basiccontext-3.5.1.tgz#e1f512d447c8c19c48d0a616f77a725d6b181ee0"
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
@@ -1284,6 +1302,10 @@ body@^5.1.0:
     raw-body "~1.1.0"
     safe-json-parse "~1.0.1"
 
+boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+
 boom@2.x.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
@@ -1432,6 +1454,17 @@ broccoli-builder@^0.18.8:
     rsvp "^3.0.17"
     silent-error "^1.0.1"
 
+broccoli-caching-writer@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/broccoli-caching-writer/-/broccoli-caching-writer-2.3.1.tgz#b93cf58f9264f003075868db05774f4e7f25bd07"
+  dependencies:
+    broccoli-kitchen-sink-helpers "^0.2.5"
+    broccoli-plugin "1.1.0"
+    debug "^2.1.1"
+    rimraf "^2.2.8"
+    rsvp "^3.0.17"
+    walk-sync "^0.2.5"
+
 broccoli-caching-writer@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/broccoli-caching-writer/-/broccoli-caching-writer-3.0.3.tgz#0bd2c96a9738d6a6ab590f07ba35c5157d7db476"
@@ -1452,6 +1485,19 @@ broccoli-clean-css@^1.1.0:
     inline-source-map-comment "^1.0.5"
     json-stable-stringify "^1.0.0"
 
+broccoli-concat@^2.2.0:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/broccoli-concat/-/broccoli-concat-2.3.8.tgz#590cdcc021bb905b6c121d87c2d1d57df44a2a48"
+  dependencies:
+    broccoli-caching-writer "^2.3.1"
+    broccoli-kitchen-sink-helpers "^0.3.1"
+    broccoli-stew "^1.3.3"
+    fast-sourcemap-concat "^1.0.1"
+    fs-extra "^0.30.0"
+    lodash.merge "^4.3.0"
+    lodash.omit "^4.1.0"
+    lodash.uniq "^4.2.0"
+
 broccoli-concat@^3.0.1, broccoli-concat@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/broccoli-concat/-/broccoli-concat-3.2.2.tgz#86ffdc52606eb590ba9f6b894c5ec7a016f5b7b9"
@@ -1561,16 +1607,16 @@ broccoli-funnel@^2.0.0, broccoli-funnel@^2.0.1:
     symlink-or-copy "^1.0.0"
     walk-sync "^0.3.1"
 
-broccoli-kitchen-sink-helpers@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.3.1.tgz#77c7c18194b9664163ec4fcee2793444926e0c06"
+broccoli-kitchen-sink-helpers@^0.2.5, broccoli-kitchen-sink-helpers@~0.2.0:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.9.tgz#a5e0986ed8d76fb5984b68c3f0450d3a96e36ecc"
   dependencies:
     glob "^5.0.10"
     mkdirp "^0.5.1"
 
-broccoli-kitchen-sink-helpers@~0.2.0:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.9.tgz#a5e0986ed8d76fb5984b68c3f0450d3a96e36ecc"
+broccoli-kitchen-sink-helpers@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.3.1.tgz#77c7c18194b9664163ec4fcee2793444926e0c06"
   dependencies:
     glob "^5.0.10"
     mkdirp "^0.5.1"
@@ -1621,7 +1667,7 @@ broccoli-middleware@^1.0.0:
     handlebars "^4.0.4"
     mime "^1.2.11"
 
-broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.0, broccoli-persistent-filter@^1.4.2, broccoli-persistent-filter@^1.4.3:
+broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.2.0, broccoli-persistent-filter@^1.4.0, broccoli-persistent-filter@^1.4.2, broccoli-persistent-filter@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.3.tgz#3511bc52fc53740cda51621f58a28152d9911bc1"
   dependencies:
@@ -1639,6 +1685,15 @@ broccoli-persistent-filter@^1.0.3, broccoli-persistent-filter@^1.1.5, broccoli-p
     symlink-or-copy "^1.0.1"
     walk-sync "^0.3.1"
 
+broccoli-plugin@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-1.1.0.tgz#73e2cfa05f8ea1e3fc1420c40c3d9e7dc724bf02"
+  dependencies:
+    promise-map-series "^0.2.1"
+    quick-temp "^0.1.3"
+    rimraf "^2.3.4"
+    symlink-or-copy "^1.0.1"
+
 broccoli-plugin@^1.0.0, broccoli-plugin@^1.1.0, broccoli-plugin@^1.2.0, broccoli-plugin@^1.2.1, broccoli-plugin@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-1.3.0.tgz#bee704a8e42da08cb58e513aaa436efb7f0ef1ee"
@@ -1703,13 +1758,32 @@ broccoli-stew@^1.2.0, broccoli-stew@^1.3.2, broccoli-stew@^1.3.3, broccoli-stew@
     symlink-or-copy "^1.1.8"
     walk-sync "^0.3.0"
 
-broccoli-string-replace@^0.1.1:
+broccoli-string-replace@^0.1.1, broccoli-string-replace@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/broccoli-string-replace/-/broccoli-string-replace-0.1.2.tgz#1ed92f85680af8d503023925e754e4e33676b91f"
   dependencies:
     broccoli-persistent-filter "^1.1.5"
     minimatch "^3.0.3"
 
+broccoli-svg-optimizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/broccoli-svg-optimizer/-/broccoli-svg-optimizer-1.0.2.tgz#b12e84e65912f3134939cbf766c3fa0b4d0d92d9"
+  dependencies:
+    broccoli-persistent-filter "^1.2.0"
+    json-stable-stringify "^1.0.1"
+    rsvp "^3.2.1"
+    svgo "^0.6.6"
+
+broccoli-symbolizer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/broccoli-symbolizer/-/broccoli-symbolizer-0.5.0.tgz#c666d4158ff4484263daaee9a6284d684b6eb3a2"
+  dependencies:
+    broccoli-concat "^2.2.0"
+    broccoli-persistent-filter "^1.2.0"
+    cheerio "^0.20.0"
+    json-stable-stringify "^1.0.1"
+    lodash "^4.13.1"
+
 broccoli-uglify-sourcemap@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/broccoli-uglify-sourcemap/-/broccoli-uglify-sourcemap-2.0.2.tgz#f4a73112f1f56b46043e2e89cba5ce7762cddeb3"
@@ -1951,6 +2025,18 @@ charm@^1.0.0:
   dependencies:
     inherits "^2.0.1"
 
+cheerio@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "~3.8.1"
+    lodash "^4.1.0"
+  optionalDependencies:
+    jsdom "^7.0.2"
+
 chokidar@1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1970,6 +2056,12 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
+clap@^1.0.9:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
+  dependencies:
+    chalk "^1.1.3"
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -2075,6 +2167,12 @@ co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
+coa@~1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
+  dependencies:
+    q "^1.1.2"
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -2104,7 +2202,7 @@ colors@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
 
-colors@^1.1.2:
+colors@^1.1.2, colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
@@ -2351,6 +2449,36 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
+css-select@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
+css-what@2.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+
+csso@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.0.0.tgz#178b43a44621221c27756086f531e02f42900ee8"
+  dependencies:
+    clap "^1.0.9"
+    source-map "^0.5.3"
+
+cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+
+"cssstyle@>= 0.2.29 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  dependencies:
+    cssom "0.3.x"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2556,6 +2684,34 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@0, dom-serializer@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  dependencies:
+    domelementtype "~1.1.1"
+    entities "~1.1.1"
+
+domelementtype@1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5, domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dot-prop@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -2729,20 +2885,20 @@ ember-cli-lodash-subset@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ember-cli-lodash-subset/-/ember-cli-lodash-subset-2.0.1.tgz#20cb68a790fe0fde2488ddfd8efbb7df6fe766f2"
 
-ember-cli-moment-shim@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/ember-cli-moment-shim/-/ember-cli-moment-shim-3.5.0.tgz#7ea8d42b0a04c767258287b30447681e52fba0c4"
+ember-cli-moment-shim@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-moment-shim/-/ember-cli-moment-shim-3.6.0.tgz#a6ce858e99b285eb9c539c8cebb698435f8d043a"
   dependencies:
     broccoli-funnel "^2.0.0"
     broccoli-merge-trees "^2.0.0"
     broccoli-source "^1.1.0"
     broccoli-stew "^1.5.0"
     chalk "^1.1.3"
-    ember-cli-babel "^6.8.2"
+    ember-cli-babel "^6.6.0"
     ember-cli-import-polyfill "^0.2.0"
     exists-sync "^0.0.4"
     lodash.defaults "^4.2.0"
-    moment "^2.18.1"
+    moment "^2.19.3"
     moment-timezone "^0.5.13"
 
 ember-cli-node-assets@^0.2.2:
@@ -2955,6 +3111,19 @@ ember-export-application-global@^2.0.0:
   dependencies:
     ember-cli-babel "^6.0.0-beta.7"
 
+ember-factory-for-polyfill@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/ember-factory-for-polyfill/-/ember-factory-for-polyfill-1.3.1.tgz#b446ed64916d293c847a4955240eb2c993b86eae"
+  dependencies:
+    ember-cli-version-checker "^2.1.0"
+
+ember-getowner-polyfill@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ember-getowner-polyfill/-/ember-getowner-polyfill-2.2.0.tgz#38e7dccbcac69d5ec694000329ec0b2be651d2b2"
+  dependencies:
+    ember-cli-version-checker "^2.1.0"
+    ember-factory-for-polyfill "^1.3.1"
+
 ember-load-initializers@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-1.0.0.tgz#4919eaf06f6dfeca7e134633d8c05a6c9921e6e7"
@@ -3025,6 +3194,13 @@ ember-rfc176-data@^0.3.0, ember-rfc176-data@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.1.tgz#6a5a4b8b82ec3af34f3010965fa96b936ca94519"
 
+ember-route-action-helper@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/ember-route-action-helper/-/ember-route-action-helper-2.0.6.tgz#1d50454350d7112be326ab44058f06cf291d5fd9"
+  dependencies:
+    ember-cli-babel "^6.8.1"
+    ember-getowner-polyfill "^2.0.0"
+
 ember-router-generator@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/ember-router-generator/-/ember-router-generator-1.2.3.tgz#8ed2ca86ff323363120fc14278191e9e8f1315ee"
@@ -3055,6 +3231,22 @@ ember-source@~3.0.0:
     jquery "^3.2.1"
     resolve "^1.3.3"
 
+ember-svg-jar@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ember-svg-jar/-/ember-svg-jar-1.1.1.tgz#d95d4c335ed98984ba4c5808280404a5968b78b3"
+  dependencies:
+    broccoli-caching-writer "^2.3.1"
+    broccoli-funnel "^1.0.1"
+    broccoli-merge-trees "^1.1.1"
+    broccoli-string-replace "^0.1.2"
+    broccoli-svg-optimizer "^1.0.2"
+    broccoli-symbolizer "^0.5.0"
+    cheerio "^0.20.0"
+    ember-cli-babel "^6.6.0"
+    lodash "^4.13.1"
+    mkdirp "^0.5.1"
+    path-posix "^1.0.0"
+
 ember-truth-helpers@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ember-truth-helpers/-/ember-truth-helpers-2.0.0.tgz#f3e2eef667859197f1328bb4f83b0b35b661c1ac"
@@ -3145,6 +3337,10 @@ ensure-posix-path@^1.0.0, ensure-posix-path@^1.0.1, ensure-posix-path@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/ensure-posix-path/-/ensure-posix-path-1.0.2.tgz#a65b3e42d0b71cfc585eb774f9943c8d9b91b0c2"
 
+entities@1.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
+
 entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -3170,6 +3366,17 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+escodegen@^1.6.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-plugin-ember@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-ember/-/eslint-plugin-ember-5.0.3.tgz#9f5e2048ab3ddc1548d4d17bf318cf1bb5cf37f1"
@@ -3246,6 +3453,10 @@ esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
+esprima@^3.1.3, esprima@~3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+
 esprima@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
@@ -3258,10 +3469,6 @@ esprima@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
 
-esprima@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
-
 esquery@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
@@ -3275,7 +3482,7 @@ esrecurse@^4.1.0:
     estraverse "^4.1.0"
     object-assign "^4.0.1"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
@@ -4463,6 +4670,16 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
 
+htmlparser2@~3.8.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.3"
+    domutils "1.5"
+    entities "1.0"
+    readable-stream "1.1"
+
 http-cache-semantics@3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
@@ -5026,10 +5243,37 @@ js-yaml@~2.0.5:
     argparse "~ 0.1.11"
     esprima "~ 1.0.2"
 
+js-yaml@~3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^2.6.0"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jsdom@^7.0.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-7.2.2.tgz#40b402770c2bda23469096bee91ab675e3b1fc6e"
+  dependencies:
+    abab "^1.0.0"
+    acorn "^2.4.0"
+    acorn-globals "^1.0.4"
+    cssom ">= 0.3.0 < 0.4.0"
+    cssstyle ">= 0.2.29 < 0.3.0"
+    escodegen "^1.6.1"
+    nwmatcher ">= 1.3.7 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.55.0"
+    sax "^1.1.4"
+    symbol-tree ">= 3.1.0 < 4.0.0"
+    tough-cookie "^2.2.0"
+    webidl-conversions "^2.0.0"
+    whatwg-url-compat "~0.6.5"
+    xml-name-validator ">= 2.0.1 < 3.0.0"
+
 jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
@@ -5689,7 +5933,7 @@ lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lod
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.2.0, lodash@^4.6.1:
+lodash@^4.1.0, lodash@^4.13.1, lodash@^4.2.0, lodash@^4.6.1:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -6032,7 +6276,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5, mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
+mkdirp@0.5, mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -6069,10 +6313,14 @@ moment-timezone@^0.5.13:
   dependencies:
     moment ">= 2.9.0"
 
-moment@2.x, "moment@>= 2.9.0", moment@^2.18.1:
+moment@2.x:
   version "2.20.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
 
+"moment@>= 2.9.0", moment@^2.19.3:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
+
 morgan@^1.8.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.0.tgz#d01fa6c65859b76fcf31b3cb53a3821a311d8051"
@@ -6331,10 +6579,20 @@ npm-run-path@^2.0.0:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+  dependencies:
+    boolbase "~1.0.0"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
+"nwmatcher@>= 1.3.7 < 2.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
+
 oauth-sign@~0.8.0, oauth-sign@~0.8.1, oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
@@ -6419,7 +6677,7 @@ optimist@^0.6.1:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-optionator@^0.8.2:
+optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
   dependencies:
@@ -6556,6 +6814,10 @@ parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
 
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+
 parsejson@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
@@ -6812,6 +7074,13 @@ quick-temp@^0.1.0, quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quic
     rimraf "^2.5.4"
     underscore.string "~3.3.4"
 
+qunit-dom@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/qunit-dom/-/qunit-dom-0.6.2.tgz#0b37012cbbc838f09eba760b3d39924ad5ccbccb"
+  dependencies:
+    broccoli-funnel "^2.0.0"
+    broccoli-merge-trees "^2.0.0"
+
 qunit@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/qunit/-/qunit-2.5.0.tgz#64cbe30a1193ef02edc5b278efcdf1d0bae96b22"
@@ -6891,6 +7160,15 @@ read@1, read@1.0.7:
   dependencies:
     mute-stream "~0.0.4"
 
+readable-stream@1.1:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readable-stream@^1.0.27-1:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
@@ -7191,6 +7469,33 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
+request@^2.55.0:
+  version "2.85.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.85.0.tgz#5a03615a47c61420b3eb99b7dba204f83603e1fa"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@~2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
@@ -7310,7 +7615,7 @@ rollup@^0.51.6:
   version "0.51.8"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.51.8.tgz#58bd0b642885f4770b5f93cc64f14e4233c2236d"
 
-rsvp@^3.0.14, rsvp@^3.0.16, rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.0.21, rsvp@^3.0.6, rsvp@^3.3.3, rsvp@^3.5.0:
+rsvp@^3.0.14, rsvp@^3.0.16, rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.0.21, rsvp@^3.0.6, rsvp@^3.2.1, rsvp@^3.3.3, rsvp@^3.5.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
 
@@ -7397,7 +7702,7 @@ sax@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
-sax@>=0.6.0:
+sax@>=0.6.0, sax@^1.1.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
@@ -7698,7 +8003,7 @@ source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -7928,6 +8233,22 @@ supports-color@^5.2.0:
   dependencies:
     has-flag "^3.0.0"
 
+svgo@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.6.6.tgz#b340889036f20f9b447543077d0f5573ed044c08"
+  dependencies:
+    coa "~1.0.1"
+    colors "~1.1.2"
+    csso "~2.0.0"
+    js-yaml "~3.6.0"
+    mkdirp "~0.5.1"
+    sax "~1.2.1"
+    whet.extend "~0.9.9"
+
+"symbol-tree@>= 3.1.0 < 4.0.0":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+
 symlink-or-copy@^1.0.0, symlink-or-copy@^1.0.1, symlink-or-copy@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/symlink-or-copy/-/symlink-or-copy-1.1.8.tgz#cabe61e0010c1c023c173b25ee5108b37f4b4aa3"
@@ -8126,6 +8447,12 @@ to-utf8@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/to-utf8/-/to-utf8-0.0.1.tgz#d17aea72ff2fba39b9e43601be7b3ff72e089852"
 
+tough-cookie@^2.2.0:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
+  dependencies:
+    punycode "^1.4.1"
+
 tough-cookie@~2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.2.2.tgz#c83a1830f4e5ef0b93ef2a3488e724f8de016ac7"
@@ -8136,6 +8463,10 @@ tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   dependencies:
     punycode "^1.4.1"
 
+tr46@~0.0.1:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+
 "traverse@>=0.3.0 <0.4":
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
@@ -8430,7 +8761,7 @@ walk-sync@0.3.2, walk-sync@^0.3.0, walk-sync@^0.3.1, walk-sync@^0.3.2:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
 
-walk-sync@^0.2.7:
+walk-sync@^0.2.5, walk-sync@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.2.7.tgz#b49be4ee6867657aeb736978b56a29d10fa39969"
   dependencies:
@@ -8470,6 +8801,10 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+webidl-conversions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"
+
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
@@ -8481,6 +8816,12 @@ websocket-extensions@>=0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
+whatwg-url-compat@~0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/whatwg-url-compat/-/whatwg-url-compat-0.6.5.tgz#00898111af689bb097541cd5a45ca6c8798445bf"
+  dependencies:
+    tr46 "~0.0.1"
+
 when@3.6.4:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
@@ -8489,6 +8830,10 @@ when@3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.2.tgz#06bed1296df3a0bfd83f7f31c5e1d779bd97eae8"
 
+whet.extend@~0.9.9:
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
@@ -8583,6 +8928,10 @@ xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
+"xml-name-validator@>= 2.0.1 < 3.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+
 xml2js@0.2.x:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.2.8.tgz#9b81690931631ff09d1957549faf54f4f980b3c2"