Devtools: IndexedDB ContextMenu Expand and Collapse Value Objects

This change adds 2 context menu entries for the IndexedDB datagrid
to allow for expanding and collapsing the value objects from the keyboard.

Note: This change does not currently work with the contextMenuKey
due to an existing issue where contextMenuKey on
the data grid will not target the selected
node, but on whichever row happens to be in the center
of the currently visible section of data grid. This issue will be
resolved with this change:
https://chromium-review.googlesource.com/c/chromium/src/+/1729554


Before: https://imgur.com/8Iz96jv

After: https://imgur.com/UwSUVOh

Bug: 963183
Change-Id: Iefb563dc744b524d3282b62141a9da12230e9911
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1725990Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#706603}

third_party/blink/renderer/devtools/front_end/object_ui/ObjectPropertiesSection.js

@@ -74,15 +74,28 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
    * @return {!Element}
    */
   static defaultObjectPresentation(object, linkifier, skipProto, readOnly) {
-    const componentRoot = createElementWithClass('span', 'source-code');
-    const shadowRoot = UI.createShadowRootWithCoreStyles(componentRoot, 'object_ui/objectValue.css');
-    shadowRoot.appendChild(
-        ObjectUI.ObjectPropertiesSection.createValueElement(object, false /* wasThrown */, true /* showPreview */));
+    const objectPropertiesSection =
+        ObjectUI.ObjectPropertiesSection.defaultObjectPropertiesSection(object, linkifier, skipProto, readOnly);
     if (!object.hasChildren) {
-      return componentRoot;
+      return objectPropertiesSection.titleElement;
+    } else {
+      return objectPropertiesSection.element;
     }
+  }
 
-    const objectPropertiesSection = new ObjectUI.ObjectPropertiesSection(object, componentRoot, linkifier);
+  /**
+   * @param {!SDK.RemoteObject} object
+   * @param {!Components.Linkifier=} linkifier
+   * @param {boolean=} skipProto
+   * @param {boolean=} readOnly
+   * @return {!ObjectUI.ObjectPropertiesSection}
+   */
+  static defaultObjectPropertiesSection(object, linkifier, skipProto, readOnly) {
+    const titleElement = createElementWithClass('span', 'source-code');
+    const shadowRoot = UI.createShadowRootWithCoreStyles(titleElement, 'object_ui/objectValue.css');
+    shadowRoot.appendChild(
+        ObjectUI.ObjectPropertiesSection.createValueElement(object, /* wasThrown */ false, /* showPreview */ true));
+    const objectPropertiesSection = new ObjectUI.ObjectPropertiesSection(object, titleElement, linkifier);
     objectPropertiesSection.editable = false;
     if (skipProto) {
       objectPropertiesSection.skipProto();
@@ -91,7 +104,7 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
       objectPropertiesSection.setEditable(false);
     }
 
-    return objectPropertiesSection.element;
+    return objectPropertiesSection;
   }
 
   /**

third_party/blink/renderer/devtools/front_end/resources/IndexedDBViews.js

@@ -252,6 +252,22 @@ Resources.IDBDataView = class extends UI.SimpleView {
     this._updateData(false);
   }
 
+  /**
+   * @param {!UI.ContextMenu} contextMenu
+   * @param {!DataGrid.DataGridNode} gridNode
+   */
+  _populateContextMenu(contextMenu, gridNode) {
+    const node = /** @type {!Resources.IDBDataGridNode} */ (gridNode);
+    if (node.valueObjectPresentation) {
+      contextMenu.revealSection().appendItem(ls`Expand Recursively`, () => {
+        node.valueObjectPresentation.objectTreeElement().expandRecursively();
+      });
+      contextMenu.revealSection().appendItem(ls`Collapse`, () => {
+        node.valueObjectPresentation.objectTreeElement().collapse();
+      });
+    }
+  }
+
   refreshData() {
     this._updateData(true);
   }
@@ -268,6 +284,7 @@ Resources.IDBDataView = class extends UI.SimpleView {
       this._dataGrid.asWidget().detach();
     }
     this._dataGrid = this._createDataGrid();
+    this._dataGrid.setRowContextMenuCallback(this._populateContextMenu.bind(this));
     this._dataGrid.asWidget().show(this.element);
 
     this._skipCount = 0;
@@ -443,6 +460,8 @@ Resources.IDBDataGridNode = class extends DataGrid.DataGridNode {
   constructor(data) {
     super(data, false);
     this.selectable = true;
+    /** @type {?ObjectUI.ObjectPropertiesSection} */
+    this.valueObjectPresentation = null;
   }
 
   /**
@@ -455,10 +474,17 @@ Resources.IDBDataGridNode = class extends DataGrid.DataGridNode {
 
     switch (columnIdentifier) {
       case 'value':
+        cell.removeChildren();
+        const objectPropSection = ObjectUI.ObjectPropertiesSection.defaultObjectPropertiesSection(
+            value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
+        cell.appendChild(objectPropSection.element);
+        this.valueObjectPresentation = objectPropSection;
+        break;
       case 'key':
       case 'primaryKey':
         cell.removeChildren();
-        const objectElement = ObjectUI.ObjectPropertiesSection.defaultObjectPresentation(value, undefined, true, true);
+        const objectElement = ObjectUI.ObjectPropertiesSection.defaultObjectPresentation(
+            value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
         cell.appendChild(objectElement);
         break;
       default:

third_party/blink/renderer/devtools/front_end/resources/resources_strings.grdp

@@ -52,6 +52,9 @@ table is empty.
   <message name="IDS_DEVTOOLS_29104d3ede0231043a4b92a90b9c2873" desc="Title of needs refresh in indexed dbviews of the application panel">
     Some entries may have been modified
   </message>
+  <message name="IDS_DEVTOOLS_2b31634e3cfef1bfdd7d0d2cdfdc3f9d" desc="Text in Context menu for collapsing objects in IndexedDB tables">
+    Collapse
+  </message>
   <message name="IDS_DEVTOOLS_2bf0a735c3ff964861a2b55319edd355" desc="Text in Clear Storage View of the Application panel">
     Unregister service workers
   </message>
@@ -70,6 +73,9 @@ table is empty.
   <message name="IDS_DEVTOOLS_368d9ac76af05f714092bc808a426bfc" desc="Text in App Manifest View of the Application panel">
     Background color
   </message>
+  <message name="IDS_DEVTOOLS_36e256f915286539621b57d8c80f0105" desc="Text in Context menu for expanding objects in IndexedDB tables">
+    Expand Recursively
+  </message>
   <message name="IDS_DEVTOOLS_37acadd70183e7ed00222ff38248a6ff" desc="Quota row text content in Clear Storage View of the Application panel">
     <ph name="NUMBER_BYTESTOSTRING_RESPONSE_USAGE_">$1s<ex>30 MB</ex></ph> used out of <ph name="NUMBER_BYTESTOSTRING_RESPONSE_QUOTA_">$2s<ex>100 MB</ex></ph> storage quota. '''
   </message>