Bug 1706679 - [devtools] Fix local/session storage intermittents due to TableWidget error while sorting r=jdescottes

There is a race condition in which the TableWidget was trying to sort values that are no longer available in the table itself, if we change the contents of the table too quickly. This patch should also fix Bug 1696727

Differential Revision: https://phabricator.services.mozilla.com/D122970

devtools/client/shared/widgets/TableWidget.js

@@ -1539,11 +1539,18 @@ Column.prototype = {
     }
     this.items = {};
     // Otherwise, just use the sorted array passed to update the cells value.
-    items.forEach((item, i) => {
+    for (const [i, item] of items.entries()) {
+      // See Bug 1706679 (Intermittent)
+      // Sometimes we would reach the situation in which we were trying to sort
+      // and item that was no longer available in the TableWidget.
+      // We should find exactly what is triggering it.
+      if (!this.cells[i]) {
+        continue;
+      }
       this.items[item[this.uniqueId]] = i;
       this.cells[i].value = item[this.id];
       this.cells[i].id = item[this.uniqueId];
-    });
+    }
     if (this.selectedRow) {
       this.cells[this.items[this.selectedRow]].classList.add("theme-selected");
     }

devtools/client/storage/test/browser_storage_fission_local_storage.js

@@ -25,9 +25,9 @@ add_task(async function() {
   checkTree(doc, ["localStorage", "http://example.com"]);
   // check the table for values
   await selectTreeItem(["localStorage", "http://example.com"]);
-  checkStorageData("foo", "bar");
+  await waitForStorageData("foo", "bar");
   await selectTreeItem(["localStorage", "http://example.net"]);
-  checkStorageData("lorem", "ipsum");
+  await waitForStorageData("lorem", "ipsum");
 
   // add more storage data to the main wrapper
   await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
@@ -39,7 +39,7 @@ add_task(async function() {
   });
   // check that the new data is shown in the table
   await selectTreeItem(["localStorage", "http://example.com"]);
-  checkStorageData("foo2", "bar2");
+  await waitForStorageData("foo2", "bar2");
   await selectTreeItem(["localStorage", "http://example.net"]);
-  checkStorageData("lorem2", "ipsum2");
+  await waitForStorageData("lorem2", "ipsum2");
 });

devtools/client/storage/test/browser_storage_fission_session_storage.js

@@ -25,9 +25,9 @@ add_task(async function() {
   checkTree(doc, ["sessionStorage", "http://example.com"]);
   // check the table for values
   await selectTreeItem(["sessionStorage", "http://example.com"]);
-  checkStorageData("foo", "bar");
+  await waitForStorageData("foo", "bar");
   await selectTreeItem(["sessionStorage", "http://example.net"]);
-  checkStorageData("lorem", "ipsum");
+  await waitForStorageData("lorem", "ipsum");
 
   // add more storage data to the main wrapper
   await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function() {
@@ -39,7 +39,7 @@ add_task(async function() {
   });
   // check that the new data is shown in the table
   await selectTreeItem(["sessionStorage", "http://example.com"]);
-  checkStorageData("foo2", "bar2");
+  await waitForStorageData("foo2", "bar2");
   await selectTreeItem(["sessionStorage", "http://example.net"]);
-  checkStorageData("lorem2", "ipsum2");
+  await waitForStorageData("lorem2", "ipsum2");
 });

devtools/client/storage/test/head.js

@@ -1122,6 +1122,12 @@ function checkStorageData(name, value) {
   );
 }
 
+async function waitForStorageData(name, value) {
+  info("Waiting for data to appear in the table");
+  await waitFor(() => hasStorageData(name, value));
+  ok(true, `Table row has an entry for: ${name} with value: ${value}`);
+}
+
 /**
  * Returns whether the pair <name, value> is displayed at the data table
  * @param {String} name