capybara-ember-inspector 1.6.2

data/lib/capybara/ember/inspector/extension/images/arrow_down.svg

@@ -0,0 +1,52 @@
+<?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>

data/lib/capybara/ember/inspector/extension/images/calculate.svg

@@ -0,0 +1,15 @@
+<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>

data/lib/capybara/ember/inspector/extension/in-page-script.js

@@ -0,0 +1,14 @@
+(function($) {
+  "use strict";
+  if (!$) { return; }
+  $(function() {
+    var libraries = window.Ember && window.Ember.libraries;
+    if (libraries) {
+      var versions = Array.prototype.slice.call(libraries, 0);
+      window.postMessage({
+        type: 'emberVersion',
+        versions: versions
+      }, '*');
+    }
+  });
+}(window.jQuery));

data/lib/capybara/ember/inspector/extension/manifest.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 2,
+
+  "name": "Ember Inspector",
+  "description": "Tool for debugging Ember applications.",
+  "version": "1.6.2",
+
+  "icons": {
+    "16":  "images/icon16.png",
+    "48":  "images/icon48.png",
+    "128": "images/icon128.png"
+  },
+  "permissions": [
+    "<all_urls>",
+    "storage"
+  ],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "devtools_page": "devtools.html",
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "js": ["content-script.js"],
+    "run_at": "document_end",
+    "all_frames": true
+  }],
+  "background": {
+    "scripts": ["background-script.js"]
+  },
+  "page_action": {
+    "default_icon": {
+      "19": "images/icon19.png",
+      "38": "images/icon38.png"
+    },
+    "default_title": "This webpage is running Ember.js"
+  },
+  "web_accessible_resources": [
+    "in-page-script.js"
+  ],
+  "options_page": "options.html"
+}

data/lib/capybara/ember/inspector/extension/options.html

@@ -0,0 +1,62 @@
+<html>
+<head>
+  <title>Settings | Ember Inspector</title>
+  <link rel="stylesheet" href="vendor/chrome-bootstrap.css">
+
+  <style>
+    .navigation img {
+      margin-left: 20px;
+      margin-top: 20px;
+      width: 100px;
+    }
+    .tomster-toggle {
+      line-height: 19px;
+    }
+    .tomster-toggle img {
+      margin-bottom: -5px;
+    }
+  </style>
+</head>
+
+<body class="chrome-bootstrap">
+
+  <div class="frame">
+    <div class="navigation">
+      <img src="/images/tomster.png" width="100" height="95">
+      <ul class="menu">
+        <li class="selected">
+          <a href="#">Settings</a>
+        </li>
+      </ul>
+      <ul class="menu">
+        <li class="">
+          <a href="https://github.com/tildeio/ember-extension">Fork me on GitHub</a>
+        </li>
+      </ul>
+
+    </div>
+
+    <div class="main-view view">
+      <div class="Settings">
+        <header>
+          <h1>Settings</h1>
+        </header>
+
+        <div class="content">
+          <br />
+          <form action="submit">
+            <label class="tomster-toggle">
+              <input type="checkbox" data-settings="tomster">
+              Display the Tomster
+              <img src="/images/icon19.png" width="19" height="19">
+              when a site runs Ember.js
+            </label>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+<script src="options.js"></script>
+</html>

data/lib/capybara/ember/inspector/extension/options.js

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+
+  function loadOptions() {
+    chrome.storage.sync.get('options', function(data) {
+      var options = data.options;
+
+      document.querySelector('[data-settings=tomster]').checked = options.showTomster;
+    });
+  }
+
+  function storeOptions() {
+    /*jshint validthis:true */
+    var showTomster = this.checked;
+
+    chrome.storage.sync.set({
+      options: { showTomster: showTomster }
+    }, function optionsSaved() {
+      console.log("saved!");
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', loadOptions);
+  document.querySelector('[data-settings=tomster]').addEventListener('click', storeOptions);
+
+}());

data/lib/capybara/ember/inspector/extension/panes/ember_extension.css

@@ -0,0 +1,1411 @@
+/**
+ APP
+ ===
+ The layout of the entire
+ application.
+*/
+
+.app {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: auto;
+  flex: auto;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  font-size: 12px;
+}
+
+.app.is-dragging {
+  cursor: col-resize;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+html, body {
+  height: 100%;
+}
+
+body, input {
+  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333;
+}
+
+body, div, nav {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+}
+
+code {
+  font-family: Menlo, Monaco, monospace;
+}
+
+.ember-list-view {
+  overflow: auto !important;
+  overflow-y: scroll !important;
+  position: relative;
+}
+.ember-list-item-view {
+  position: absolute;
+}
+
+/**
+ DRAG-HANDLE
+ ===========
+ The drag handle used for resizing elements
+*/
+
+.drag-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  z-index: 500;
+  cursor: col-resize;
+}
+
+.drag-handle--right {
+  margin-right: -3px;
+}
+
+.drag-handle--left {
+  margin-left: -3px;
+}
+
+.drag-handle__border {
+  height: 100%;
+  margin-left: 3px;
+  width: 1px;
+  border-left: 1px solid #A3A3A3;
+  pointer-events: none;
+}
+
+/**
+ DROP-DOWN
+ =========
+*/
+
+.dropdown {
+  position: relative;
+  -webkit-flex: auto;
+  flex: auto;
+}
+
+.dropdown__select {
+  -webkit-appearance: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 18px;
+  padding: 0 15px 0 5px;
+  font-size: 12px;
+  color: rgb(48, 48, 48);
+  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+  border: 0;
+  background-color: transparent;
+}
+
+.dropdown__select:focus {
+  outline: none;
+}
+
+.dropdown__arrow {
+  position: absolute;
+  right: 4px;
+  top: 7px;
+  background-image: url(../images/arrow_down.svg);
+  background-size: 100%;
+  opacity: 0.7;
+  width: 7px;
+  height: 7px;
+  display: inline-block;
+  pointer-events: none;
+}
+
+/**
+  ERROR-PAGE
+  ===========
+  An error with possible reaons
+  and solutions.
+  For example when application
+  is not detected.
+*/
+
+.data-error-page-container {
+  position: relative;
+  min-height: 100%;
+  padding: 10px;
+}
+
+.error-page {
+  padding: 10px;
+  background: #ededed;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  color: #505050;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error-page__content {
+  position: relative;
+  width: 530px;
+  padding: 25px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: solid 1px #d1d1d1;
+  border-radius: 5px;
+  margin: auto;
+}
+
+.error-page__content a {
+  color: #f23818;
+  text-decoration: none;
+}
+
+.error-page__header {
+  font-weight: bold;
+  font-size: 19px;
+  padding-top: 15px;
+  padding-bottom: 30px;
+  margin-bottom: 10px;
+  border-bottom: solid 1px #d1d1d1;
+  position: relative;
+}
+
+.error-page__header:after {
+  content: ' ';
+  width: 128px;
+  height: 89px;
+  background: url("../images/fishy_tomster.png") left center no-repeat;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+
+.error-page__title {
+  width: 345px;
+}
+
+.error-page__reasons {
+  font-size: 13px;
+}
+
+.error-page__reasons-title {
+  font-weight: bold;
+}
+
+.error-page__reasons ul {
+  list-style-type: disc;
+}
+
+.error-page__list {
+  padding-left: 16px;
+  padding-bottom: 5px;
+  border-bottom: solid 1px #d1d1d1;;
+}
+
+.error-page__list li {
+  padding: 2px 0;
+}
+
+.row {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+
+.cell {
+  -webkit-flex: 1;
+  flex: 1;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  line-height: 30px;
+  height: 30px;
+  opacity: 0.7;
+  padding-left: 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.row:hover .cell {
+  opacity: 1;
+}
+
+/* ARROW FOR COLLAPSING AND EXPANDING */
+
+.cell__arrow {
+  cursor: pointer;
+  display: block;
+  float: left;
+  width: 15px;
+  height: 30px;
+  position: relative;
+}
+
+.cell__arrow:before {
+  position: absolute;
+  right: 5px;
+  top: 0px;
+  font-size: 75%;
+  color: #737373;
+}
+
+.row_arrow_collapsed .cell__arrow:before {
+  content: "\25B6";
+}
+
+.row_arrow_expanded .cell__arrow:before {
+    content: "\25BC";
+}
+
+.row_arrow_collapsed .cell_type_main, .row_arrow_expanded .cell_type_main {
+  cursor: pointer;
+}
+ /* -------------------------------- */
+
+
+.row-wrapper {
+  width: 100%;
+  background: #f3f3f3;
+}
+
+.row-wrapper:nth-of-type(2n) {
+  background: #fff;
+}
+
+
+.row.row_highlight .cell {
+  opacity: 1;
+}
+
+
+.cell.cell_size_small {
+  flex: none;
+  width: 50px;
+}
+
+.cell.cell_size_medium {
+  flex: none;
+  width: 130px;
+}
+
+.cell.cell_size_large {
+  flex: none;
+  width: 250px;
+}
+
+.cell.cell_size_huge {
+  flex: none;
+  width: 450px;
+}
+
+.cell.cell_type_main {
+  font-weight: bold;
+}
+
+.cell.cell_value_numeric {
+  min-width: 65px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+.cell.cell_type_header {
+  color: inherit;
+  padding: 0;
+  padding-left: 5px;
+  opacity: 1;
+
+
+  font-weight: normal;
+  border-left: 1px solid #cacaca;
+}
+
+.cell.cell_type_header:first-of-type {
+  border-left: none;
+}
+
+.cell_clickable {
+  cursor: pointer;
+
+}
+
+.row:hover .cell_clickable {
+  text-decoration: underline;
+}
+
+.cell.spacer {
+  border: none;
+  width:0px;
+  flex: none;
+}
+
+.list-tree_scrollable {
+  overflow-y: scroll;
+}
+
+.list-tree__right-helper {
+  float: right;
+  margin-right: 5px;
+}
+
+.list-tree__limited {
+  max-width: calc(100% - 40px);
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  float: left;
+}
+
+.list-tree__limited_helper_large {
+  max-width: calc(100% - 70px);
+}
+
+.list-tree__limited_helper_very-large {
+  max-width: calc(100% - 80px);
+}
+
+
+ .list-view {
+  position: relative;
+  font-size: 11px;
+  height: 100%;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 700px;
+  background: white
+}
+
+.list-view__header {
+  text-align: left;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  border-bottom: 1px solid #cacaca;
+}
+
+
+.list-view.list-view_compact {
+  min-width: 0;
+}
+
+.no-results {
+  padding: 5px 10px;
+}
+
+/**
+ MIXIN
+ =====
+ A single mixin inside the object inspector
+ It could be the object's own properties
+ or a mixin the object extends
+*/
+
+.mixin__name {
+  margin-top: -1px;
+  padding: 2px 2px 2px 5px;
+  border-top: 1px solid #bdbdbd;
+  border-bottom: 1px solid #bdbdbd;
+  background-color: #f0f0f0;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.mixin__name:active {
+  background-color: #ccc;
+  border-top: 1px solid #b2b2b2;
+  border-bottom: 1px solid #b2b2b2;
+}
+
+  .mixin_props_no .mixin__name:before {
+    opacity: 0;
+  }
+
+  .mixin.ember-mixin .mixin__name {
+    color: #888;
+  }
+
+.mixin__name:before {
+  content: "\25B6";
+  color: #737373;
+  margin-right: 4px;
+  position: relative;
+  top: -1px;
+  font-size: 75%;
+}
+
+  .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;
+  }
+
+.mixin__properties {
+  margin: 5px;
+  list-style-type: none;
+  padding: 0;
+  font-size: 12px;
+  font-family: Menlo, Monaco, monospace;
+}
+
+.mixin__property {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-direction: row;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.mixin__property button {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mixin__property button img, .mixin__property span.pad {
+  margin-right: 3px;
+  width: 20px;
+}
+
+.mixin__property-overridden-by {
+  display: none;
+}
+
+.mixin__property-name {
+  color: #909;
+}
+
+.mixin__property-value {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-height: 14px;
+}
+
+.mixin__property-value-txt {
+  flex: 1;
+  border: solid 1px #ccc;
+  /*border: none;*/
+  box-shadow: 2px 2px 2px #888;
+  /*box-shadow: none;*/
+  outline: none;
+}
+
+.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;
+}
+
+.mixin__property .type-object {
+  color: #999;
+}
+
+.mixin__property .type-ember-object,
+.mixin__property .type-array {
+  cursor: pointer;
+}
+
+.mixin__property-calculated-value {
+  flex: 1;
+  color: #999;
+}
+
+.mixin__property .type-null, .mixin__property .type-boolean {
+  color: #009;
+}
+
+.mixin__property .type-descriptor {
+  cursor: pointer;
+  color: #900;
+}
+
+
+
+.mixin__property_state_overridden {
+  text-decoration: line-through;
+}
+
+
+.mixin__property:not(.mixin__property_state_overridden):hover {
+  background-color: #ffe;
+}
+
+
+.mixin__property_state_overridden:hover .mixin__property-overridden-by {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.95);
+  right: 0;
+  display: inline;
+  text-decoration: none;
+}
+
+.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
+    opacity: 1;
+}
+
+.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
+  opacity: 0.5;
+}
+
+/**
+ Nav
+ ===
+ Navigation lists and links
+*/
+.nav__title {
+  padding: 3px 5px;
+  line-height: 11px;
+  height: 15px;
+}
+
+.nav__title h3 {
+  white-space: nowrap;
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #6e6e6e;
+  text-transform: uppercase;
+  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+  float: left;
+  padding: 0;
+  margin: 0;
+}
+
+/* List */
+
+.nav ul {
+  clear: both;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.nav li {
+  display: block;
+  margin-top: 2px;
+}
+
+.nav li svg {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  margin-top: -10px;
+}
+
+/* List anchor */
+
+.nav li > a {
+  display: block;
+  height: 18px;
+  line-height: 15px;
+  margin-top: 1px;
+  padding: 2px 5px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: default;
+}
+
+.app.is-dragging .nav li > a {
+  cursor: col-resize;
+}
+
+.nav li > a polygon,
+.nav li > a path,
+.nav li > a rect,
+.nav li > a circle {
+  fill: #222;
+}
+
+.nav li > a:focus {
+  outline: none;
+}
+
+.nav li > a.active {
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0,0,0, 0.33);
+  background: #3879D9;
+}
+
+.nav li > a.active polygon,
+.nav li > a.active path,
+.nav li > a.active rect,
+.nav li > a.active circle {
+  fill: #fff;
+}
+
+.app.inactive .nav li > a.active {
+  background: #b4b4b4;
+}
+
+/* Custom navs */
+
+.nav--main li > a {
+  position: relative;
+  height: 33px;
+  padding-left: 40px;
+  color: #333;
+  line-height: 33px;
+}
+
+.nav.nav--main .nav__title {
+  padding-left: 15px;
+}
+
+/* Custom nav title */
+
+.nav__title--middle {
+  line-height: 21px;
+}
+
+/**
+  NOTICE
+  ===========
+*/
+
+.notice {
+  margin-top: 20px;
+  font-size: 14px;
+  text-align: center;
+  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+}
+
+/**
+ OBJECT-INSPECTOR
+ ================
+ The Object inspector
+ at the far right of the screen
+*/
+
+.object-trail {
+  margin-left: 39px;
+  word-break: break-all;
+}
+
+/**
+ PILL
+ ====
+*/
+
+.pill {
+  font-size: 12;
+  position: relative;
+  cursor: default;
+  display: inline-block;
+  margin: 0 2px;
+  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);
+}
+
+.pill_text_clear {
+  text-shadow: none;
+  font-weight: bold;
+}
+
+.pill_not-clickable {
+  cursor: inherit;
+}
+
+/** MODIFIER: SIZE = SMALL **/
+.pill_size_small {
+  font-size: 10px;
+
+  padding: 2px 4px;
+}
+
+/**
+ SEND-TO-CONSOLE
+ ================
+ Button to send an object
+ to the console
+*/
+
+.send-to-console {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+  width: 23px;
+  opacity: 1;
+  cursor: pointer;
+  outline: none;
+}
+
+.send-to-console img {
+  margin-right: 3px;
+  width: 20px;
+  vertical-align: top;
+}
+
+.send-to-console:hover {
+  border-bottom: solid 1px rgb(43, 127, 179);
+}
+
+.send-to-console:active {
+  opacity: 0.5;
+}
+
+.send-trace-to-console {
+  background: url("../images/send_arrow.png") left center no-repeat;
+  background-size: 6px 6px;
+  padding-left: 9px;
+  font-size: 9px;
+  cursor: pointer;
+  margin-right: 10px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+
+.send-trace-to-console:hover {
+  color: black;
+}
+
+.send-trace-to-console:active {
+  opacity: 0.5;
+}
+
+/**
+ SIDEBAR TOGGLE
+ ==============
+ Button that expands or collapses sidebars
+*/
+
+.sidebar-toggle {
+  position: absolute;
+  top: 2px;
+}
+
+.sidebar-toggle--right {
+  right: -6px;
+}
+
+.sidebar-toggle--left {
+  left: -5px;
+}
+/**
+ SPLIT
+ =====
+ Vertically split panels
+*/
+
+/* .split: The container for one or more panels */
+
+.split {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex: auto;
+  flex: auto;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* .split__panel: Contains a body, and optional header and footer elements */
+
+.split__panel {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: auto;
+  flex: auto;
+  position: relative;
+}
+
+.split__panel__hd,
+.split__panel__bd,
+.split__panel__ft {
+  position: relative;
+}
+
+.split__panel__hd,
+.split__panel__ft {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex: none;
+  flex: none;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 1px 2px;
+  min-height: 23px;
+  line-height: 20px;
+  border-color: #cacaca;
+}
+
+.split__panel__hd {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  background: #fff;
+}
+
+.split__panel__bd {
+  -webkit-flex: auto;
+  flex: auto;
+  overflow: auto;
+}
+
+.split__panel__ft {
+  border-top-width: 1px;
+  border-top-style: solid;
+  background: #e8e8e8;
+}
+
+/* Fix visibility issue with phantomjs test runner
+   https://github.com/emberjs/ember-inspector/pull/206#issuecomment-55292354 */
+
+.split__panel,
+.split__panel__bd {
+  z-index: 1; /* Fixes bug where empty list-view appears over the top */
+  height: 100%;
+}
+
+/* Custom panels */
+
+.split__panel--sidebar-1 .split__panel__bd {
+  background: #e8e8e8;
+}
+
+.split__panel--sidebar-1 > .split__panel__ft {
+  text-align: center;
+}
+
+.split__panel--sidebar-2 .split__panel__bd {
+  background: #f3f3f3;
+}
+
+/* Fix main list-view scrolling */
+.split--main > .split__panel > .split__panel__bd {
+  overflow-y: hidden;
+}
+
+.split--main > .split__panel--sidebar-1 > .split__panel__bd {
+  overflow-y: auto;
+}
+
+/**
+ TABLE-TREE
+ ==========
+ Displays a tree in a table.
+ Used for route tree.
+*/
+
+.table-tree {
+  position: relative;
+  padding-top: 30px;
+  font-size: 11px;
+  height: 100%;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  float: left;
+  min-width: 100%;
+}
+
+.table-tree:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 30px;
+  border-bottom: 1px solid #a3a3a3;
+  background: linear-gradient(to bottom, #ebebeb, #dadada);
+  border-right: 1px solid #b3b3b3;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  content: ' ';
+}
+
+.table-tree__table-container {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  height: 100%;
+  float: left;
+  min-width: 100%;
+}
+
+.table-tree table {
+  min-width: 100%;
+}
+
+.table-tree thead {
+  text-align: left;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.table-tree td {
+  border-right: 1px solid #dadada;
+  white-space: nowrap;
+  padding: 8px 0px 8px 5px;
+}
+
+.table-tree th {
+  font-weight: normal;
+  padding: 0;
+  min-width: 30px;
+}
+
+.table-tree__cell {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-tree__th-inner {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  line-height: 30px;
+  border-left: 1px solid #b3b3b3;
+  padding-left: 5px;
+  margin-left: -1px;
+  z-index: 2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table-tree th:first-of-type .table-tree__th-inner {
+  border-left: none;
+}
+
+.table-tree tr:nth-of-type(2n) td {
+  background: #f3f3f3;
+}
+
+.table-tree td.table-tree__main-cell {
+  font-weight: bold;
+}
+
+.table-tree td.table-tree__main-cell_state_current {
+  opacity: 1;
+}
+
+.table-tree tbody tr:hover td {
+  opacity: 1;
+}
+
+.table-tree tbody tr:hover .table-tree__clickable {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+
+.table-tree_color_faded .table-tree__main-cell,
+.table-tree_color_faded td {
+  opacity: 0.7;
+}
+
+
+
+/* MODIFIER: state = collapsed */
+.table-tree_state_collapsed {
+  float: none;
+  overflow: hidden;
+}
+
+.table-tree_state_collapsed .table-tree__table-container {
+  float: none;
+}
+
+.table-tree.table-tree_state_collapsed tr td {
+  color: #666;
+  background: #fff;
+}
+
+.table-tree.table-tree_state_collapsed .table-tree__row_selected td {
+  color: #333;
+  font-weight: bold;
+  background: #e0e0e0;
+}
+
+
+/* MODIFIER: type = advanced */
+
+.table-tree_type_advanced {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+.table-tree_type_advanced  .table-tree__table-container {
+  height: auto;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.table-tree_type_advanced  .table-tree__filter {}
+
+/* Firefox Tweaks */
+.table-tree__table-container {
+    flex: 1;
+}
+
+.table-tree__filter {
+    flex: 0 1 24px;
+}
+
+.table-tree__right-helper {
+  float: right;
+  margin-right: 5px;
+}
+
+.table-tree__numeric {
+  min-width: 65px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+.table-tree__limited {
+  max-width: 150px;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toolbar {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  align-items: center;
+}
+
+.toolbar > * {
+  -webkit-flex: none;
+  flex: none;
+}
+
+/**
+ Toolbar Title
+ =============
+*/
+
+.toolbar__title {
+  -webkit-flex: auto;
+  flex: auto;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/**
+ Toolbar Icon Buttons
+ ====================
+*/
+
+.toolbar__icon-button {
+  display: inline-block;
+  width: 32px;
+  height: 20px;
+  margin-left: 0;
+  padding: 0;
+  vertical-align: top;
+  border: 0 transparent none;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.toolbar__icon-button:first-child {
+  margin-left: -2px;
+}
+
+.toolbar__icon-button:focus {
+  outline: none;
+}
+
+.toolbar__icon-button .svg-stroke {
+  stroke: rgb(103,103,103);
+}
+
+.toolbar__icon-button .svg-fill {
+  fill: rgb(103,103,103);
+}
+
+.toolbar__icon-button:hover .svg-stroke {
+  stroke: rgb(64,64,64);
+}
+
+.toolbar__icon-button:hover .svg-fill {
+  fill: rgb(64,64,64);
+}
+
+.toolbar__icon-button:active {
+  transform: translate(1px, 1px);
+}
+
+/* active (highlighted) */
+.toolbar__icon-button.active .svg-stroke {
+  stroke: #4281eb;
+}
+
+.toolbar__icon-button.active .svg-fill {
+  fill: #4281eb;
+}
+
+/* disabled */
+.toolbar__icon-button.disabled {
+  pointer-events: none;
+}
+
+.toolbar__icon-button.disabled:active {
+  transform: none;
+}
+
+.toolbar__icon-button.disabled .svg-stroke {
+  stroke: #cacaca;
+}
+
+.toolbar__icon-button.disabled .svg-fill {
+  fill: #cacaca;
+}
+
+/**
+ Toolbar Checkboxes
+ ==================
+*/
+
+.toolbar__checkbox {
+  margin: auto 6px auto 0;
+  height: auto;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/**
+ Toolbar Radio Button Pills
+ ==========================
+*/
+
+.toolbar__radio {
+  font-size: 12px;
+  line-height: 18px;
+  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;
+  border: none;
+  border-radius: 8px;
+  vertical-align: middle;
+}
+
+.toolbar__radio:active,
+.toolbar__radio:hover,
+.toolbar__radio:focus,
+.toolbar__radio.active {
+  outline: none;
+  color: white;
+  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+}
+
+
+.toolbar__radio:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.toolbar__radio:active {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.toolbar__radio.active {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/**
+ Toolbar Search
+ ==============
+*/
+
+.toolbar__search {
+  margin-right: 6px;
+}
+
+.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;
+  margin: 0;
+  -webkit-appearance: none;
+  font-size: 12px;
+  background-color: #FFF;
+  height: 20px;
+  line-height: normal;
+  width: 179px;
+}
+
+.toolbar__search input:focus {
+  outline: none;
+}
+
+.toolbar__search--small input {
+  width: 150px;
+}
+
+/**
+ Toolbar Divider
+ ===============
+*/
+
+.toolbar .divider {
+  display: inline-block;
+  width: 1px;
+  height: 16px;
+  position: relative;
+  margin-right: 6px;
+  background-color: #cacaca;
+}
+
+/**
+ TREE
+ ====
+ Displays a tree.
+ Used for view tree.
+*/
+
+.tree {
+  font-family: Menlo, sans-serif;
+  font-size: 14px;
+}
+
+.tree__node {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 10px;
+}
+
+.tree__node-child {
+  margin-top: 5px;
+}
+
+.tree__node-header {
+  margin: 0;
+  padding: 0;
+}
+
+.tree__node-name {
+  color: #939;
+  cursor: pointer;
+}
+
+.tree__node-controller {
+  color: #939;
+  cursor: pointer;
+}
+
+.tree__node-controller.is-pinned,
+.tree__node-controller:hover,
+.tree__node-name:hover {
+  color: #606;
+}
+
+
+.tree__node-template, .tree__node-hint {
+  color: #595455;
+  display: none;
+}
+
+.tree__node-header:hover .tree__node-hint {
+  display: inline;
+}
+
+
+.tree__node-details {
+  font-size: 13px;
+  color: #999;
+}
+
+
+
+
+.tree__node-details td {
+  padding: 0px 5px;
+  color: #666;
+}
+
+
+.tree__node-details .clickable {
+  /*color: #4896ab;*/
+  color: rgb(153, 153, 0);
+  cursor: pointer;
+}