Adjust component tree colors

.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
       files: [
         '.ember-cli.js',
         '.eslintrc.js',
+        '.prettierrc.js',
         '.stylelintrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',

.prettierrc.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  overrides: [
+    {
+      files: '**/*.hbs',
+      options: {
+        parser: 'glimmer',
+        singleQuote: false
+      }
+    }
+  ]
+};

app/controllers/component-tree.js

@@ -195,10 +195,18 @@ class RenderItem {
     this.renderNode = renderNode;
   }
 
+  get args() {
+    return this.renderNode.args;
+  }
+
   get id() {
     return this.renderNode.id;
   }
 
+  get isCurlyInvocation() {
+    return this.renderNode && this.renderNode.args && this.renderNode.args.positional;
+  }
+
   get isOutlet() {
     return this.renderNode.type === 'outlet';
   }

app/helpers/component-argument.js

@@ -0,0 +1,20 @@
+import { helper } from '@ember/component/helper';
+
+/**
+ * Determine the type of the component argument for display
+ *
+ * @method componentArgumentDisplay
+ * @param {*} argument
+ * @return {*} The argument with the correct type for display
+ */
+export function componentArgumentDisplay([argument]) {
+  if (typeof argument === 'string') {
+    return JSON.stringify(argument).replace(/^\"|\"$/g, '');
+  } else if (typeof argument === 'object' && argument !== null) {
+    return '...';
+  }
+
+  return String(argument);
+}
+
+export default helper(componentArgumentDisplay);

app/helpers/is-string.js

@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function isString([str]) {
+  return typeof str === 'string';
+}
+
+export default helper(isString);

app/styles/colors.scss

@@ -32,8 +32,10 @@
   --transparent: transparent;
   --focus: #3F81EE;
   --focus-text: var(--white);
-  --component-text: #7c027c;
+  --component-name: #1171E8;
   --component-brackets-selected: rgba(255, 255, 255, 0.4);
+  --component-attr: #DB00A9;
+  --component-highlighted-bg: rgba(0, 0, 0, 0.05);
   --pill-bg: rgba(0, 0, 0, 0.1);
   --pill-bg-active: rgba(255, 255, 255, 0.3);
   --warning-text: #735c0f;
@@ -74,8 +76,10 @@
   --transparent: transparent;
   --focus: #2270EC;
   --focus-text: var(--white);
-  --component-text: #FF8BC9;
+  --component-name: #77BEFF;
   --component-brackets-selected: rgba(255, 255, 255, 0.4);
+  --component-attr: #FE7AE9;
+  --component-highlighted-bg: rgba(255, 255, 255, 0.075);
   --pill-bg: rgba(255, 255, 255, 0.2);
   --pill-bg-active: rgba(255, 255, 255, 0.3);
   --warning-text: #8ca3f0;

app/styles/component_tree.scss

@@ -9,7 +9,7 @@
   position: relative;
 
   &:hover {
-    background-color: var(--spec06);
+    background-color: var(--base05);
 
     .component-tree-item__action {
       opacity: 1;
@@ -57,33 +57,79 @@
 .component-tree-item__tag {
   cursor: default;
   display: flex;
+  white-space: nowrap;
+
+  .component-name {
+    color: var(--component-name);
+  }
+
+  .arg-token {
+    display: flex;
+    margin-left: 0.5rem;
+  }
+
+  .bracket-token {
+    color: var(--base09);
+  }
+
+  .at-token,
+  .key-token {
+    color: var(--component-attr);
+  }
+
+  .value-token {
+    color: var(--spec03);
+  }
 }
 
 .component-tree-item--has-instance .component-tree-item__tag {
   cursor: pointer;
 }
 
+.component-tree-item--selected .component-tree-item__tag {
+  .component-name,
+  .at-token,
+  .bracket-token,
+  .key-token,
+  .value-token {
+    color: var(--focus-text);
+  }
+}
+
+.component-tree-item__bracket:before,
+.component-tree-item__bracket:after,
+.component-tree-item-classic__bracket:before,
+.component-tree-item-classic__bracket:after {
+  color: var(--base09);
+}
+
 .component-tree-item__bracket:before {
-  color: var(--base07);
   content: '<';
 }
 
 .component-tree-item__bracket:after {
-  color: var(--base07);
   content: '>';
 }
 
 .component-tree-item__bracket.component-tree-item__bracket--self-closing:after {
   content: '/>';
 }
 
+.component-tree-item-classic__bracket:before {
+  content: '{{';
+}
+
+.component-tree-item-classic__bracket:after {
+  content: '}}';
+}
+
 /**
  * Modifier
  * highlighted - children of selected component
  */
 
 .component-tree-item.component-tree-item--highlighted {
-  background-color: var(--spec06);
+  background-color: var(--component-highlighted-bg);
   border-radius: 0;
 }
 
@@ -122,5 +168,5 @@
 }
 
 .component-tree-item--component {
-  color: var(--component-text);
+  color: var(--base09);
 }

app/templates/components/component-tree-item.hbs

@@ -5,8 +5,7 @@
     {{if @item.isComponent "component-tree-item--component"}}
     {{if @item.hasInstance "component-tree-item--has-instance"}}
     {{if @item.isSelected "component-tree-item--selected"}}
-    {{if @item.isHighlighted "component-tree-item--highlighted"}}
-  "
+    {{if @item.isHighlighted "component-tree-item--highlighted"}}"
   {{on "click" @item.toggleInspection}}
   {{on "mouseenter" @item.showPreview}}
   {{on "mouseleave" @item.hidePreview}}
@@ -21,10 +20,81 @@
   {{/if}}
 
   <code
-    class="component-tree-item__tag {{if @item.isComponent "component-tree-item__bracket"}} {{if (not @item.hasChildren) "component-tree-item__bracket--self-closing"}}"
+    class="component-tree-item__tag
+      {{if
+        (and (not @item.isCurlyInvocation) @item.isComponent)
+        "component-tree-item__bracket"
+      }}
+      {{if
+        (and (not @item.isCurlyInvocation) (not @item.hasChildren) @item.isComponent)
+        "component-tree-item__bracket--self-closing"
+      }}
+      {{if
+        (and @item.isCurlyInvocation @item.isComponent)
+        "component-tree-item-classic__bracket"
+      }}"
   >
     {{#if @item.isComponent}}
-      {{classify @item.name}}
+      {{#if @item.args.positional}}
+        <span class="component-name">
+          {{@item.name}}
+        </span>
+
+        {{#each @item.args.positional as |value|}}
+          <div class="arg-token">
+            <span class="value-token">
+              {{component-argument value}}
+            </span>
+          </div>
+        {{/each}}
+
+        {{#each-in @item.args.named as |name value|}}
+          <div class="arg-token">
+            <span class="key-token">
+              {{name}}
+            </span>
+            =
+            <span class="value-token">
+              {{component-argument value}}
+            </span>
+          </div>
+        {{/each-in}}
+      {{else}}
+        <span class="component-name">
+          {{classify @item.name}}
+        </span>
+
+        {{#each-in @item.args.named as |name value|}}
+          <div class="arg-token">
+            {{#if (is-string value)}}
+              <span class="at-token">
+                @
+              </span>
+              <span class="key-token">
+                {{name}}
+              </span>
+              ="
+              <span class="value-token">
+                {{component-argument value}}
+              </span>
+              "
+            {{else}}
+              <span class="at-token">
+                @
+              </span>
+              <span class="key-token">
+                {{name}}
+              </span>
+              =
+              <span class="bracket-token">\{{</span>
+              <span class="value-token">
+                {{component-argument value}}
+              </span>
+              <span class="bracket-token">}}</span>
+            {{/if}}
+          </div>
+        {{/each-in}}
+      {{/if}}
     {{else if @item.isOutlet}}
       \{{outlet "{{@item.name}}"}}
     {{else if @item.isEngine}}
@@ -51,4 +121,4 @@
       {{svg-jar "code-line" width="20px" height="20px"}}
     </button>
   {{/if}}
-</div>
+</div>

lib/ui/addon/styles/_list.scss

@@ -8,8 +8,7 @@
 }
 
 .list__content {
-  overflow: hidden;
-  overflow-y: scroll;
+  overflow: scroll;
   transform: translateZ(0);
 }
 

lib/ui/addon/styles/_split.scss

@@ -24,6 +24,7 @@
   flex: auto;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 }
 
 .split__panel__hd,
@@ -51,7 +52,9 @@
 .split__panel__bd {
   background: var(--base00);
   flex: auto;
-  overflow: auto;
+  overflow: scroll;
+  max-width: 100%;
+  width: auto;
 }
 
 .split__panel__ft {
@@ -83,7 +86,7 @@
 
 /* Fix main list-view scrolling */
 .split--main > .split__panel > .split__panel__bd {
-  overflow-y: hidden;
+  overflow: hidden;
 }
 
 .split--main > .split__panel--sidebar-1 > .split__panel__bd {