Feature: ComputedProperty Dependent keys in debugger & services highl…

…ighting (#781)
emberjs · Apr 29, 2018 · e6015b1 · e6015b1
1 parent e3023ae
commit e6015b1
Show file tree

Hide file tree

Showing 12 changed files with 481 additions and 59 deletions.
diff --git 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/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,7 +16,7 @@ html, body {
 }
 
 body, input {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Cantarell', 'Oxygen', 'Ubuntu', 'Helvetica Neue', helvetica, arial, sans-serif;
+  font-family: var(--font-sans-serif);
   color: var(--base26);
 }
 
@@ -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
@@ -48,6 +48,10 @@
   --spec12: #7c027c;
   --spec13: #4977d2;
   --spec14: #ecf1fa;
+  --spec15: #cd61a7;
+  --spec16: #7fb56d;
+  --spec17: #328509;
+  --spec18: #9c0f9c;
 }
 
 .theme--dark {

diff --git a/app/styles/mixin.scss b/app/styles/mixin.scss
@@ -39,15 +39,17 @@ $mixin-left-padding: 22px;
 .mixin__name:before {
   position: absolute;
   top: 5px;
-  left: 7px;
+  left: 6px;
   content: "\25B6";
   color: var(--base18);
   margin-right: 5px;
   font-size: 90%;
+  transform: rotate(0deg);
+  transition: all 0.1s;
 }
 
   .mixin_state_expanded .mixin__name:before {
-    content: "\25BC";
+    transform: rotate(90deg);
   }
 
 .mixin__properties {
@@ -56,7 +58,7 @@ $mixin-left-padding: 22px;
   margin: 0;
   padding: 3px 0 5px 0;
   font-size: 12px;
-  font-family: 'SF Mono', Menlo, Monaco, monospace;
+  font-family: var(--font-monospace);
 }
 
 .mixin__property {
@@ -68,6 +70,25 @@ $mixin-left-padding: 22px;
   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 */
@@ -97,16 +118,9 @@ $mixin-left-padding: 22px;
   }
 
   .pad { width: $mixin-left-padding; }
-  .mixin__calc-btn {
-    width: $mixin-left-padding;
-
-    img {
-      max-height: 16px;
-    }
-  }
 
-  .mixin__calc-btn--calculated {
-    opacity: 0.4;
+  .mixin__calc-btn svg {
+    path, circle { fill: var(--spec18); }
   }
 
   .mixin__send-btn {
@@ -120,7 +134,7 @@ $mixin-left-padding: 22px;
 }
 
 .mixin__property-name {
-  color: var(--spec04);
+  color: var(--base26);
 }
 
 .mixin__property-value {
@@ -149,20 +163,16 @@ $mixin-left-padding: 22px;
 }
 
 .mixin__property .type-object {
-  color: var(--base15);
+  color: var(--base20);
 }
 
 .mixin__property .type-ember-object,
 .mixin__property .type-array {
   cursor: pointer;
 }
 
-.mixin__property-calculated-value {
-  flex: 1;
-  color: var(--base15);
-}
-
-.mixin__property .type-null, .mixin__property .type-boolean {
+.mixin__property .type-null,
+.mixin__property .type-boolean {
   color: var(--spec10);
 }
 
@@ -171,6 +181,9 @@ $mixin-left-padding: 22px;
   color: var(--spec05);
 }
 
+.mixin__property .type-service {
+  color: var(--spec17);
+}
 
 
 .mixin__property_state_overridden {

diff --git a/app/styles/object_inspector.scss b/app/styles/object_inspector.scss
@@ -10,3 +10,94 @@
   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: #888;
+  }
+
+  svg {
+    position: absolute;
+    bottom: 2px;
+    left: -13px;
+
+    ellipse {
+      stroke: #888;
+      fill: #fff;
+    }
+  }
+}
+
+.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";
+  }
+}