[DevTools] Restore tree selection after reload

third_party/WebKit/Source/devtools/front_end/resources/ApplicationPanelSidebar.js

 /*
  * Copyright (C) 2007, 2008, 2010 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  * Copyright (C) 2013 Samsung Electronics. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 85 matching lines @@
     this._databaseTableViews = new Map();
     /** @type {!Map.<!Resources.Database, !Resources.DatabaseQueryView>} */
     this._databaseQueryViews = new Map();
     /** @type {!Map.<!Resources.Database, !Resources.DatabaseTreeElement>} */
     this._databaseTreeElements = new Map();
     /** @type {!Map.<!Resources.DOMStorage, !Resources.DOMStorageTreeElement>} */
     this._domStorageTreeElements = new Map();
     /** @type {!Object.<string, boolean>} */
     this._domains = {};
 
+    /** @type {!Array<string>} */
+    this._storedSelection = [];
+
     this._sidebarTree.contentElement.addEventListener('mousemove', this._onmousemove.bind(this), false);
     this._sidebarTree.contentElement.addEventListener('mouseleave', this._onmouseleave.bind(this), false);
+    this._sidebarTree.addEventListener(UI.TreeOutline.Events.ElementAttached, event => this._elementAdded(event));

[dgozman, 2017/05/11 23:08:41]

this._elementAdded.bind(this)

[eostroukhov, 2017/05/12 19:36:36]

Done. Waiting for "::" operator :)

 
     SDK.targetManager.observeTargets(this);
     SDK.targetManager.addModelListener(
         SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated, this._frameNavigated, this);
+    SDK.targetManager.addModelListener(
+        SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.WillReloadPage, this._storeSelection, this);
   }
 
   /**
    * @param {string} title
    * @return {!UI.TreeElement}
    */
   _addSidebarSection(title) {
     var treeElement = new UI.TreeElement(title, true);
     treeElement.listItemElement.classList.add('storage-group-list-item');
     treeElement.setCollapsible(false);
@@ skipping 110 matching lines @@
     this.databasesListTreeElement.removeChildren();
     this.databasesListTreeElement.setExpandable(false);
   }
 
   _resetAppCache() {
     for (var frameId of Object.keys(this._applicationCacheFrameElements))
       this._applicationCacheFrameManifestRemoved({data: frameId});
     this.applicationCacheListTreeElement.setExpandable(false);
   }
 
+  _storeSelection() {
+    this._storedSelection = [];
+    for (var element = this._sidebarTree.selectedTreeElement; element; element = element.parent)
+      this._storedSelection.push(element.itemURL);
+    // "Forget" the selection if the item was not restored in a timely manner.
+    // This is to prevent selection jumping on slow page loads.

[dgozman, 2017/05/11 23:08:41]

Why not on first user interaction?

[eostroukhov, 2017/05/12 19:36:36]

Done.

+    setTimeout(() => this._storedSelection = [], 1000);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _elementAdded(event) {
+    if (!this._storedSelection.length)
+      return;
+    var element = event.data;
+    var index = this._storedSelection.indexOf(element.itemURL);
+    if (index > 0)
+      element.expand();
+    if (index !== 0)

[dgozman, 2017/05/11 23:08:41]

if (index)

[eostroukhov, 2017/05/12 19:36:36]

Done.

(Node.js has opposite convention ;) )

+      return;
+    for (var parent = element.parent; parent; parent = parent.parent)
+      parent.expand();
+    var selected = this._sidebarTree.selectedTreeElement;
+    if (!selected || this._storedSelection.indexOf(selected.itemURL) < 0)
+      return;
+    element.select();
+    this._storedSelection = [];
+  }
+
   _reset() {
     this._domains = {};
     this._resetWebSQL();
     this.cookieListTreeElement.removeChildren();
   }
 
   _frameNavigated(event) {
     var frame = event.data;
 
     if (!frame.parentFrame)
@@ skipping 341 matching lines @@
 
   /**
    * @override
    * @return {boolean}
    */
   onselect(selectedByUser) {
     if (!selectedByUser)
       return false;
     var itemURL = this.itemURL;
     if (itemURL)
       this._storagePanel.setLastSelectedItemURL(itemURL);

[dgozman, 2017/05/11 23:08:41]

I still think we should combine with this one.

[eostroukhov, 2017/05/12 19:36:36]

Did that. It now actually better restores selection on reload.

     return false;
   }
 
   /**
    * @protected
    * @param {?UI.Widget} view
    */
   showView(view) {
     this._storagePanel.showView(view);
   }
@@ skipping 625 matching lines @@
     this.removeChild(objectStoreTreeElement);
     delete this._idbObjectStoreTreeElements[objectStoreName];
   }
 
   clear() {
     for (var objectStoreName in this._idbObjectStoreTreeElements)
       this._objectStoreRemoved(objectStoreName);
   }
 };
 
-/**
- * @unrestricted
- */
 Resources.IDBObjectStoreTreeElement = class extends Resources.BaseStorageTreeElement {
   /**
    * @param {!Resources.ResourcesPanel} storagePanel
    * @param {!Resources.IndexedDBModel} model
    * @param {!Resources.IndexedDBModel.DatabaseId} databaseId
    * @param {!Resources.IndexedDBModel.ObjectStore} objectStore
    */
   constructor(storagePanel, model, databaseId, objectStore) {
     super(storagePanel, objectStore.name, false);
     this._model = model;
     this._databaseId = databaseId;
     this._idbIndexTreeElements = {};
+    this._objectStore = objectStore;
+    /** @type {?Resources.IDBDataView} */
+    this._view = null;
     var icon = UI.Icon.create('mediumicon-table', 'resource-tree-item');
     this.setLeadingIcons([icon]);
   }
 
   get itemURL() {
     return 'indexedDB://' + this._databaseId.securityOrigin + '/' + this._databaseId.name + '/' +
         this._objectStore.name;
   }
 
   /**
@@ skipping 46 matching lines @@
       if (!indexNames[indexName]) {
         this.removeChild(this._idbIndexTreeElements[indexName]);
         delete this._idbIndexTreeElements[indexName];
       }
     }
 
     if (this.childCount())
       this.expand();
 
     if (this._view)
-      this._view.update(this._objectStore);
+      this._view.update(this._objectStore, null);
 
     this._updateTooltip();
   }
 
   _updateTooltip() {
     var keyPathString = this._objectStore.keyPathString;
     var tooltipString = keyPathString !== null ? (Common.UIString('Key path: ') + keyPathString) : '';
     if (this._objectStore.autoIncrement)
       tooltipString += '\n' + Common.UIString('autoIncrement');
     this.tooltip = tooltipString;
@@ skipping 285 matching lines @@
 
     this.element.classList.add('storage-view');
     this._emptyWidget = new UI.EmptyWidget('');
     this._emptyWidget.show(this.element);
   }
 
   setText(text) {
     this._emptyWidget.text = text;
   }
 };