Bug 1378306 - Force update in grid-inspector's reflow handler when nodes have been removed; r=gl

MozReview-Commit-ID: 45fHGmuKhkD

devtools/client/inspector/grids/grid-inspector.js

@@ -300,6 +300,7 @@ GridInspector.prototype = {
 
       grids.push({
         id: i,
+        actorID: grid.actorID,
         color,
         gridFragments: grid.gridFragments,
         highlighted: nodeFront == this.highlighters.gridHighlighterShown,
@@ -410,8 +411,18 @@ GridInspector.prototype = {
       return;
     }
 
-    // Compare the list of DOM nodes which define these grids.
+    // Get the node front(s) from the current grid(s) so we can compare them to them to
+    // node(s) of the new grids.
     const oldNodeFronts = grids.map(grid => grid.nodeFront.actorID);
+
+    // In some cases, the nodes for current grids may have been removed from the DOM in
+    // which case we need to update.
+    if (grids.length && grids.some(grid => !grid.nodeFront.actorID)) {
+      this.updateGridPanel(newGridFronts);
+      return;
+    }
+
+    // Otherwise, continue comparing with the new grids.
     const newNodeFronts = newGridFronts.filter(grid => grid.containerNodeFront)
                                        .map(grid => grid.containerNodeFront.actorID);
     if (grids.length === newGridFronts.length &&

devtools/client/inspector/grids/test/browser.ini

@@ -2,6 +2,7 @@
 tags = devtools
 subsuite = devtools
 support-files =
+  doc_iframe_reloaded.html
   head.js
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
@@ -20,6 +21,7 @@ support-files =
 [browser_grids_grid-list-color-picker-on-RETURN.js]
 [browser_grids_grid-list-element-rep.js]
 [browser_grids_grid-list-no-grids.js]
+[browser_grids_grid-list-on-iframe-reloaded.js]
 [browser_grids_grid-list-on-mutation-element-added.js]
 [browser_grids_grid-list-on-mutation-element-removed.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]

devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js

@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the list of grids does refresh when an iframe containing a grid is removed
+// and re-created.
+// See bug 1378306 where this happened with jsfiddle.
+
+const TEST_URI = URL_ROOT + "doc_iframe_reloaded.html";
+
+add_task(function* () {
+  yield addTab(TEST_URI);
+
+  const { inspector, gridInspector, testActor } = yield openLayoutView();
+  const { document: doc } = gridInspector;
+  const { store, highlighters } = inspector;
+  const gridList = doc.querySelector("#grid-list");
+
+  info("Clicking on the first checkbox to highlight the grid");
+  yield enableTheFirstGrid(doc, inspector);
+
+  is(gridList.childNodes.length, 1, "There's one grid in the list");
+  let checkbox = gridList.querySelector("input");
+  ok(checkbox.checked, "The checkbox is checked");
+  ok(highlighters.gridHighlighterShown, "There's a highlighter shown");
+
+  info("Reload the iframe in content and expect the grid list to update");
+  const oldGrid = store.getState().grids[0];
+  const onNewListUnchecked = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    state.grids[0].actorID !== oldGrid.actorID &&
+    !state.grids[0].highlighted);
+  testActor.eval("window.wrappedJSObject.reloadIFrame();");
+  yield onNewListUnchecked;
+
+  is(gridList.childNodes.length, 1, "There's still one grid in the list");
+  checkbox = gridList.querySelector("input");
+  ok(!checkbox.checked, "The checkbox is now unchecked");
+  ok(!highlighters.gridHighlighterShown, "There's no highlighter shown");
+
+  info("Highlight the first grid again to make sure this still works");
+  yield enableTheFirstGrid(doc, inspector);
+
+  is(gridList.childNodes.length, 1, "There's again one grid in the list");
+  checkbox = gridList.querySelector("input");
+  ok(checkbox.checked, "The checkbox is checked");
+  ok(highlighters.gridHighlighterShown, "There's a highlighter shown");
+});
+
+function* enableTheFirstGrid(doc, { highlighters, store }) {
+  const checkbox = doc.querySelector("#grid-list input");
+
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 && state.grids[0].highlighted);
+
+  checkbox.click();
+
+  yield onHighlighterShown;
+  yield onCheckboxChange;
+}

devtools/client/inspector/grids/test/doc_iframe_reloaded.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<iframe srcdoc="<style>.grid{display:grid;}</style><div class='grid'><span>a</span><span>b</span></div>"></iframe>
+<script>
+function reloadIFrame() {
+  const iFrame = document.querySelector("iframe");
+  iFrame.setAttribute("srcdoc", iFrame.getAttribute("srcdoc"));
+}
+</script>