improve dependent keys ux

Author: patricklx

app/components/object-inspector/dependent-keys.hbs

@@ -1,14 +1,17 @@
 <li class="mixin__property-dependency-list relative">
   {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
   <ul class="m-0 p-0 list-none">
-    {{#each @keys as |depKey|}}
-      <li class="mixin__property-dependency-item relative text-base12 text-sm">
-      {{#if (match depKey "•")}}
+    {{#each @keys as |dep|}}
+      <li
+        class="mixin__property-dependency-item relative text-base12 text-sm {{if dep.changed 'text-spec01'}}"
+        title={{if dep.changed 'this property changed'}}
+      >
+      {{#if dep.child}}
         <span
           class="mixin__property-dependency-name subkey"
           data-label="object-property-name"
         >
-          {{depKey}}
+          • -- {{dep.child}}
         </span>
       {{else}}
         {{svg-jar
@@ -20,9 +23,10 @@
           class="mixin__property-dependency-name"
           data-label="object-property-name"
         >
-          {{depKey}}
+          {{dep.name}}
         </span>
       {{/if}}
+      {{#if dep.changed}}🔸{{/if}}
       </li>
     {{/each}}
   </ul>

ember_debug/object-inspector.js

@@ -238,7 +238,9 @@ function getTrackedDependencies(object, property, tagInfo) {
   const cpDesc = emberMeta(object).peekDescriptors(property);
   const dependentKeys = [];
   if (cpDesc) {
-    dependentKeys.push(...(cpDesc._dependentKeys || []));
+    dependentKeys.push(
+      ...(cpDesc._dependentKeys || []).map((k) => ({ name: k }))
+    );
   }
   if (HAS_GLIMMER_TRACKING) {
     const ownTag = tagForProperty(object, property);
@@ -258,26 +260,44 @@ function getTrackedDependencies(object, property, tagInfo) {
 
     const hasChange = maxRevision !== minRevision;
 
+    const names = new Set();
+
     Object.entries(mapping).forEach(([objName, props]) => {
+      if (names.has(objName)) {
+        return;
+      }
+      names.add(objName);
       if (props.size > 1) {
-        dependentKeys.push(objName);
+        dependentKeys.push({ name: objName });
         props.forEach((p) => {
-          const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
-          dependentKeys.push('  •  --  ' + p[0] + changed);
+          const changed = hasChange && p[1] >= maxRevision;
+          const obj = {
+            child: p[0],
+          };
+          if (changed) {
+            obj.changed = true;
+          }
+          dependentKeys.push(obj);
         });
       }
       if (props.size === 1) {
         const p = [...props][0];
-        const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
-        dependentKeys.push(objName + '.' + p[0] + changed);
+        const changed = hasChange && p[1] >= maxRevision;
+        const obj = {
+          name: objName + '.' + p[0],
+        };
+        if (changed) {
+          obj.changed = true;
+        }
+        dependentKeys.push(obj);
       }
       if (props.size === 0) {
-        dependentKeys.push(objName);
+        dependentKeys.push({ name: objName });
       }
     });
   }
 
-  return [...new Set([...dependentKeys])];
+  return [...dependentKeys];
 }
 
 export default class extends DebugPort {

tests/ember_debug/object-inspector-test.js

@@ -280,9 +280,14 @@ module('Ember Debug - Object Inspector', function (hooks) {
     assert.strictEqual(prop.value.inspect, '"item1item2tracked"');
     let dependentKeys =
       compareVersion(VERSION, '3.16.10') === 0
-        ? 'item1,item2,trackedProperty'
-        : 'ObjectWithTracked,  •  --  item1,  •  --  item2,Object:My Object.trackedProperty';
-    assert.strictEqual(prop.dependentKeys.toString(), dependentKeys);
+        ? [{ name: 'item1' }, { name: 'item2' }, { name: 'trackedProperty' }]
+        : [
+            { name: 'ObjectWithTracked' },
+            { child: 'item1' },
+            { child: 'item2' },
+            { name: 'Object:My Object.trackedProperty' },
+          ];
+    assert.deepEqual(prop.dependentKeys, dependentKeys);
 
     prop = secondDetail.properties[2];
     assert.strictEqual(prop.name, 'get');
@@ -305,9 +310,14 @@ module('Ember Debug - Object Inspector', function (hooks) {
     assert.strictEqual(prop.value.inspect, '"item1-changeditem2tracked"');
     dependentKeys =
       compareVersion(VERSION, '3.16.10') === 0
-        ? 'item1,item2,trackedProperty'
-        : 'ObjectWithTracked,  •  --  item1 🔸,  •  --  item2,Object:My Object.trackedProperty';
-    assert.strictEqual(prop.dependentKeys.toString(), dependentKeys);
+        ? [{ name: 'item1' }, { name: 'item2' }, { name: 'trackedProperty' }]
+        : [
+            { name: 'ObjectWithTracked' },
+            { child: 'item1', changed: true },
+            { child: 'item2' },
+            { name: 'Object:My Object.trackedProperty' },
+          ];
+    assert.deepEqual(prop.dependentKeys, dependentKeys);
   });
 
   skip('Correct mixin order with es6 class', async function (assert) {
@@ -937,8 +947,8 @@ module('Ember Debug - Object Inspector', function (hooks) {
     let serializedComputedProperty = message.details[1].properties[2];
 
     assert.strictEqual(serializedComputedProperty.code, computedFn.toString());
-    assert.strictEqual(serializedComputedProperty.dependentKeys[0], 'foo');
-    assert.strictEqual(serializedComputedProperty.dependentKeys[1], 'bar');
+    assert.strictEqual(serializedComputedProperty.dependentKeys[0].name, 'foo');
+    assert.strictEqual(serializedComputedProperty.dependentKeys[1].name, 'bar');
   });
 
   test('Views are correctly handled when destroyed during transitions', async function (assert) {