DevTools: avoid using stale front-end node ids.

When a node is removed and then re-added to the document,
the back-end node id remains the same and the front-end id
is new. This means that if we keep resolved front-end nodes,
we should check if these still exist and re-resolve the ids
to new nodes if these are detached and re-attached to the document.

BUG=
R=vsevik@chromium.org

Review URL: https://codereview.chromium.org/195813010

git-svn-id: svn://svn.chromium.org/blink/trunk@169526 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/TestExpectations

@@ -833,7 +833,6 @@ crbug.com/340150 [ Mac Debug ] plugins/plugin-document-back-forward.html [ Pass
 crbug.com/339174 fast/writing-mode/Kusa-Makura-background-canvas.html [ Pass Failure ]
 crbug.com/339252 inspector/timeline/timeline-window-filter.html [ Pass Timeout ]
 crbug.com/339259 fast/flexbox/box-orient-button.html [ Pass Failure ]
-crbug.com/339238 inspector/layers/layer-tree-model.html [ Pass Failure ]
 crbug.com/339394 [ Win Debug ] virtual/threaded/animations/animation-matrix-negative-scale-unmatrix.html [ Pass Failure ]
 crbug.com/339592 media/track/opera/interfaces/TextTrackList/onaddtrack.html [ Pass Crash ]
 crbug.com/339597 http/tests/navigation/back-to-redirect-with-frame.php [ Pass Timeout ]

third_party/WebKit/LayoutTests/http/tests/inspector/layers-test.js

@@ -11,7 +11,7 @@ function initialize_LayerTreeTests()
     InspectorTest.labelForLayer = function(layer)
     {
         var node = WebInspector.domAgent.nodeForId(layer.nodeIdForSelfOrAncestor());
-        var label = WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false);
+        var label = node ? WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false) : "<invalid node id>";
         var height = layer.height();
         var width = layer.width();
         if (height <= 200 && width <= 200)

third_party/WebKit/LayoutTests/inspector/layers/layer-tree-model-expected.txt

 
 Initial layer tree
-#document (4)
-    iframe#frame (5)
-        iframe#frame 0x0 (6)
-            iframe#frame 200x200 (7)
-                iframe#frame 0x0 (8)
-                    iframe#frame 200x200 (9)
-                        #document 200x200 (10)
-                            div#subframe1 80x80 (11)
-    div#a 200x200 (5)
-        div#b1 100x150 (6)
-        div#b2 110x140 (6)
-            div#c 90x100 (7)
-        div#b3 110x140 (6)
+#document (5)
+    iframe#frame (6)
+        iframe#frame 0x0 (7)
+            iframe#frame 200x200 (8)
+                iframe#frame 200x200 (9)
+                    iframe#frame 200x200 (10)
+                        #document 200x200 (11)
+                            div#subframe1 80x80 (12)
+    div#a 200x200 (6)
+        div#b1 100x150 (7)
+        div#b2 110x140 (7)
+            div#c 90x100 (8)
+        div#b3 110x140 (7)
 Updated layer tree
-#document (4)
-    iframe#frame (5)
-        iframe#frame 0x0 (6)
-            iframe#frame 200x200 (7)
-                iframe#frame 0x0 (8)
-                    iframe#frame 200x200 (9)
-                        #document 200x200 (10)
-                            div#subframe1 80x80 (11)
-    div#a 200x200 (5)
-        div#b2 110x140 (6)
-            div#c 90x100 (7)
+#document (5)
+    iframe#frame (6)
+        iframe#frame 0x0 (7)
+            iframe#frame 200x200 (8)
+                iframe#frame 200x200 (9)
+                    iframe#frame 200x200 (10)
+                        #document 200x200 (11)
+                            div#subframe1 80x80 (12)
+    div#a 200x200 (6)
+        div#b2 110x140 (7)
+            div#c 90x100 (8)
                 div#b1 100x150
         div#b4 0x200
 Updated layer geometry
-#document (4)
-    iframe#frame (5)
-        iframe#frame 0x0 (6)
-            iframe#frame 200x200 (7)
-                iframe#frame 0x0 (8)
-                    iframe#frame 200x200 (9)
-                        #document 200x200 (10)
-                            div#subframe1 80x80 (11)
-    div#a 200x200 (5)
-        div#b2 110x140 (6)
-            div#c 90x80 (7)
+#document (5)
+    iframe#frame (6)
+        iframe#frame 0x0 (7)
+            iframe#frame 200x200 (8)
+                iframe#frame 200x200 (9)
+                    iframe#frame 200x200 (10)
+                        #document 200x200 (11)
+                            div#subframe1 80x80 (12)
+    div#a 200x200 (6)
+        div#b2 110x140 (7)
+            div#c 90x80 (8)
                 div#b1 100x150
         div#b4 0x200
 

third_party/WebKit/LayoutTests/inspector/layers/layer-tree-model.html

@@ -39,7 +39,7 @@ function test()
     function step1()
     {
         // Assure layer objects are not re-created during updates.
-        InspectorTest._layerTreeModel.forEachLayer(addDepthMarker);
+        InspectorTest.layerTreeModel.forEachLayer(addDepthMarker);
         InspectorTest.addResult("Initial layer tree");
         InspectorTest.dumpLayerTree();
         InspectorTest.evaluateAndRunWhenTreeChanges("requestAnimationFrame(updateTree)", step2);

third_party/WebKit/Source/devtools/front_end/LayerTreeModel.js

@@ -201,8 +201,10 @@ WebInspector.LayerTreeModel.prototype = {
         var requestedIds = [];
         for (var i = 0; i < layers.length; ++i) {
             var backendNodeId = layers[i].backendNodeId;
-            if (!backendNodeId || this._backendNodeIdToNodeId[backendNodeId] || idsToResolve[backendNodeId])
+            if (!backendNodeId || idsToResolve[backendNodeId] ||
+                (this._backendNodeIdToNodeId[backendNodeId] && WebInspector.domAgent.nodeForId(this._backendNodeIdToNodeId[backendNodeId]))) {
                 continue;
+            }
             idsToResolve[backendNodeId] = true;
             requestedIds.push(backendNodeId);
         }

third_party/WebKit/Source/devtools/front_end/TimelineUIUtils.js

@@ -444,13 +444,13 @@ WebInspector.TimelineUIUtils.createStyleRuleForCategory = function(category)
 WebInspector.TimelineUIUtils.generatePopupContent = function(record, linkifier, callback)
 {
     var imageElement = /** @type {?Element} */ (record.getUserObject("TimelineUIUtils::preview-element") || null);
-    var relatedNode = /** @type {?WebInspector.DOMNode} */ (record.getUserObject("TimelineUIUtils::related-node") || null);
+    var relatedNode = null;
 
     var barrier = new CallbackBarrier();
     if (!imageElement && WebInspector.TimelineUIUtils.needsPreviewElement(record.type))
         WebInspector.DOMPresentationUtils.buildImagePreviewContents(record.url, false, barrier.createCallback(saveImage));
-    if (!relatedNode && record.relatedBackendNodeId())
-        WebInspector.domAgent.pushNodesByBackendIdsToFrontend([record.relatedBackendNodeId()], barrier.createCallback(saveNode));
+    if (record.relatedBackendNodeId())
+        WebInspector.domAgent.pushNodesByBackendIdsToFrontend([record.relatedBackendNodeId()], barrier.createCallback(setRelatedNode));
     barrier.callWhenDone(callbackWrapper);
 
     /**
@@ -465,12 +465,10 @@ WebInspector.TimelineUIUtils.generatePopupContent = function(record, linkifier,
     /**
      * @param {?Array.<!DOMAgent.NodeId>} nodeIds
      */
-    function saveNode(nodeIds)
+    function setRelatedNode(nodeIds)
     {
-        if (nodeIds !== null) {
+        if (nodeIds)
             relatedNode = WebInspector.domAgent.nodeForId(nodeIds[0]);
-            record.setUserObject("TimelineUIUtils::related-node", relatedNode);
-        }
     }
 
     function callbackWrapper()