[Scopes] expanded properties are not updated while stepping (firefox-…

…devtools#2509)

* Fix expanded properties are not updated while stepping

* Revert yarn.lock

* Move code logic to ObjectInspector

* Made a few corrections

* Retrieve property values

* Remove code from previous commit

* Revert to previous implementation

* Revert yarn.lock

* Move code logic to object-inspector and add a unit test

* Simplify code

src/utils/object-inspector.js

@@ -181,6 +181,10 @@ function getChildren(
   // node would be a new instance every render.
   const key = item.path;
   if (actors && actors[key]) {
+    if (item.contents.value && item.contents.value.preview) {
+      actors[key] = updateActor(item, actors, key);
+    }
+
     return actors[key];
   }
 
@@ -203,6 +207,21 @@ function getChildren(
   return children;
 }
 
+function updateActor(item, actors, key) {
+  const properties = item.contents.value.preview.ownProperties;
+  for (let pKey in properties) {
+    if (properties.hasOwnProperty(pKey)) {
+      const cacheObject = actors[key].filter(a => a.name == pKey)[0];
+      const cacheObjectIndex = actors[key].findIndex(a => a.name == pKey);
+      // Assign new values to the cache actor if it goes stale
+      if (cacheObject && cacheObject.contents.value != properties[pKey].value) {
+        actors[key][cacheObjectIndex].contents = properties[pKey];
+      }
+    }
+  }
+  return actors[key];
+}
+
 module.exports = {
   nodeHasChildren,
   nodeIsOptimizedOut,

src/utils/tests/object-inspector.js

@@ -3,7 +3,8 @@ const expect = require("expect.js");
 const {
   makeNodesForProperties,
   isPromise,
-  getPromiseProperties
+  getPromiseProperties,
+  getChildren
 } = require("../object-inspector");
 
 const objProperties = {
@@ -221,4 +222,37 @@ describe("promises", () => {
     const node = getPromiseProperties(promise);
     expect(node.contents.value.type).to.eql("3");
   });
+
+  it("update actors when necessary", () => {
+    const item = {
+      contents: {
+        value: {
+          preview: {
+            ownProperties: {
+              color: {
+                value: "red"
+              }
+            }
+          },
+          type: "object"
+        }
+      },
+      name: "car",
+      path: "Block/car"
+    };
+
+    let actors = new Object();
+    actors["Block/car"] = [
+      {
+        contents: {
+          value: "white"
+        },
+        name: "color",
+        path: "Block/car/color"
+      }
+    ];
+
+    const children = getChildren({ function() {}, actors, item });
+    expect(children[0].contents.value).to.eql("red");
+  });
 });