Add args to tree (emberjs#1112)

* Add args to tree Rebasing seemed hard, so opening a new PR * Adjust component tree colors Co-Authored-By: Jerry Nummi <[email protected]> * Update app/helpers/component-argument.js Co-Authored-By: Godfrey Chan <[email protected]> * Remove at-token Co-Authored-By: Jerry Nummi <[email protected]> * Use suggested class ifs * Apply changes based on feedback * Fix lint * Fix component list overflow (emberjs#1129) * Fix component list overflow background color * Gradient on component-tree-item actions * Update app/controllers/component-tree.js Co-Authored-By: Godfrey Chan <[email protected]> * Update app/templates/components/component-tree-item.hbs Co-Authored-By: Godfrey Chan <[email protected]> * Bring back hover highlight in component tree (emberjs#1135) * Bring back hover highlight in component tree * Update comment in app/styles/component_tree.scss Co-Authored-By: Godfrey Chan <[email protected]> Co-authored-by: Godfrey Chan <[email protected]> * Truncate, add quotes * Update truncate.js Co-authored-by: Jerry Nummi <[email protected]> Co-authored-by: Godfrey Chan <[email protected]>
patricklx · Sep 19, 2022 · 17af5f5 · 17af5f5
1 parent 9d7f07c
commit 17af5f5
Show file tree

Hide file tree

Showing 13 changed files with 365 additions and 111 deletions.
diff --git a/.eslintrc.js b/.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',

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  overrides: [
+    {
+      files: '**/*.hbs',
+      options: {
+        parser: 'glimmer',
+        singleQuote: false
+      }
+    }
+  ]
+};
diff --git a/app/controllers/component-tree.js b/app/controllers/component-tree.js
@@ -218,6 +218,14 @@ class RenderItem {
     return this.renderNode.name;
   }
 
+  get args() {
+    return this.renderNode.args;
+  }
+
+  get isCurlyInvocation() {
+    return this.renderNode.args && this.renderNode.args.positional;
+  }
+
   get hasInstance() {
     let { instance } = this.renderNode;
     return typeof instance === 'object' && instance !== null;

diff --git a/app/helpers/component-argument.js b/app/helpers/component-argument.js
@@ -0,0 +1,22 @@
+import { helper } from '@ember/component/helper';
+import truncate from 'ember-inspector/utils/truncate';
+
+/**
+ * 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') {
+    // Escape any interior quotes – we will add the surrounding quotes in the template
+    return truncate(argument.replace(/"/g, '\\"'));
+  } else if (typeof argument === 'object' && argument !== null) {
+    return '...';
+  }
+
+  return String(argument);
+}
+
+export default helper(componentArgumentDisplay);
diff --git a/app/helpers/is-string.js b/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);
diff --git a/app/styles/colors.scss b/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: #F2F2F3;
   --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: #333333;
   --pill-bg: rgba(255, 255, 255, 0.2);
   --pill-bg-active: rgba(255, 255, 255, 0.3);
   --warning-text: #8ca3f0;

diff --git a/app/styles/component_tree.scss b/app/styles/component_tree.scss
@@ -1,95 +1,157 @@
 .component-tree-item {
-  align-items: center;
-  border-radius: 4px;
   color: var(--base12);
-  display: flex;
   font-size: 12px;
-  margin: 0 3px;
   min-height: 22px;
-  position: relative;
-}
 
-.component-tree-item__expand {
-  align-self: stretch;
-  cursor: pointer;
-  padding-left: 3px;
-  padding-right: 3px;
-}
+  &__actions {
+    min-height: 22px;
+    opacity: 0;
+    right: var(--unit1);
+
+    /**
+      * __actions is position:sticky so it is always visible and on top.
+      * Due to margins and padding on various elements, it was
+      * difficult to keep the background of __actions on top
+      * of .tree-item text and align with the .tree-item background.
+      * This pseudo element is 100% of the width of __actions plus
+      * a little extra to guarantee alignment.
+    */
+    &:after {
+      border-bottom-right-radius: var(--unit1);
+      border-top-right-radius: var(--unit1);
+      bottom: 0;
+      content: '';
+      left: calc(var(--unit1) * -1);
+      position: absolute;
+      right: calc(var(--unit1) * -1);
+      top: 0;
+    }
 
-.component-tree-item__action {
-  align-items: center;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
-  height: 100%;
-  margin-left: 10px;
-  opacity: 0;
-  padding: 0;
-
-  &:focus {
-    outline: none;
+    /**
+      * __actions is position:sticky so it is always visible and on top.
+      * :before is a gradient to soften the edge when overlaying text.
+    */
+    &:before {
+      bottom: 0;
+      content: '';
+      left: calc(var(--unit3) * -1);
+      position: absolute;
+      top: 0;
+      width: var(--unit3);
+    }
   }
 
-  &.disabled {
-    cursor: not-allowed;
+  &__action {
+    &:focus {
+      outline: none;
+    }
+
+    polygon,
+    rect,
+    path {
+      fill: var(--base15);
+    }
   }
 
-  polygon,
-  rect,
-  path {
-    fill: var(--base15);
+  /**
+    * This element helps with a visual bug.
+    * When an item overflows the bounds of the list,
+    * the item background color clips at the point of the overflow.
+    * This child of the item has the same background color
+    * and will extend past the overflow point.
+  */
+  .component-tree-item-background {
+    min-height: 22px;
+  }
+
+  &:hover {
+    background-color: var(--component-highlighted-bg);
+
+    .component-tree-item-background {
+      background-color: var(--component-highlighted-bg);
+    }
+
+    .component-tree-item__actions {
+      opacity: 1;
+
+      &:after {
+        background-color: var(--component-highlighted-bg);
+      }
+
+      &:before {
+        background: linear-gradient(to right, var(--transparent), var(--component-highlighted-bg) 75%);
+      }
+    }
   }
 }
 
 .component-tree-item__tag {
-  cursor: default;
-  display: flex;
+  .component-name {
+    color: var(--component-name);
+  }
+
+  .bracket-token {
+    color: var(--base09);
+  }
+
+  .key-token {
+    color: var(--component-attr);
+  }
+
+  .value-token {
+    color: var(--spec03);
+  }
 }
 
-.component-tree-item--has-instance .component-tree-item__tag {
-  cursor: pointer;
+/**
+ * Modifier
+ * highlighted - the component currently being previewed
+ */
+
+.component-tree-item.component-tree-item--highlighted {
+  background-color: var(--component-highlighted-bg);
+  border-radius: 0;
+}
+
+.component-tree-item--selected .component-tree-item__tag {
+  .component-name,
+  .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:hover {
-  background-color: var(--spec06);
-
-  .component-tree-item__action {
-    opacity: 1;
-  }
-
-  .component-tree-item__action.disabled {
-    opacity: 0.65;
-  }
+.component-tree-item-classic__bracket:before {
+  content: '{{';
 }
 
-/**
- * Modifier
- * highlighted - children of selected component
- */
-
-.component-tree-item.component-tree-item--highlighted {
-  background-color: var(--spec06);
-  border-radius: 0;
+.component-tree-item-classic__bracket:after {
+  content: '}}';
 }
 
 /**
  * Modifier
- * selected
+ * selected - user clicked on component
  */
 
 .component-tree-item.component-tree-item--selected {
@@ -100,6 +162,22 @@
     background: var(--focus);
   }
 
+  .component-tree-item-background {
+    background: var(--focus);
+  }
+
+  .component-tree-item__actions {
+    opacity: 1;
+
+    &:after {
+      background: var(--focus);
+    }
+
+    &:before {
+      background: linear-gradient(to right, var(--transparent), var(--focus) 75%);
+    }
+  }
+
   .component-tree-item__bracket:before,
   .component-tree-item__bracket:after {
     color: var(--component-backets-selected);
@@ -115,12 +193,8 @@
       fill: var(--focus-text);
     }
   }
-
-  .component-tree-item__action.disabled {
-    opacity: 0.65;
-  }
 }
 
 .component-tree-item--component {
-  color: var(--component-text);
+  color: var(--base09);
 }