Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(56)

Unified Diff: third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js

Issue 2773583002: [DevTools] Introduce a sidebar with a drop-down
Patch Set: [DevTools] Introduce a sidebar with a drop-down Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js b/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
index a856c09d17fb1bfb1235a4d50d48cfb6ac070076..dbd4606dc527cbae577b3d6483545c90d9de296b 100644
--- a/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
@@ -21,7 +21,10 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
this.contentElement.addEventListener('keydown', this._onKeyDown.bind(this), true);
this.registerRequiredCSS('quick_open/filteredListWidget.css');
- this._promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
+ var promptContainer = this.contentElement.createChild('div', 'filtered-list-widget-input-container');
+ this._iconContainer = promptContainer.createChild('div');
+ var container = promptContainer.createChild('div', 'filtered-list-widget-input');
+ this._promptElement = container.createChild('div');
this._promptElement.setAttribute('spellcheck', 'false');
this._promptElement.setAttribute('contenteditable', 'plaintext-only');
this._prompt = new UI.TextPrompt();
@@ -38,6 +41,8 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
/** @type {!UI.ListControl<number>} */
this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
this._itemElementsContainer = this._list.element;
+ this._itemElementsContainer.addEventListener('mousemove', event => this._updateHover(event));
+ this._itemElementsContainer.addEventListener('mouseout', event => this._updateHover(event));
this._itemElementsContainer.classList.add('container');
this._bottomElementsContainer.appendChild(this._itemElementsContainer);
this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
@@ -50,6 +55,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
this._prefix = '';
this._provider = provider;
this._queryChangedCallback = queryChangedCallback;
+
+ /** @type {?number} */
+ this._selectedItemIndex = null;
}
/**
@@ -111,11 +119,20 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
return false;
}
- showAsDialog() {
+ /**
+ * @param {!AnchorBox=} anchorBox
+ * @param {!UI.GlassPane.AnchorBehavior=} anchorBehavior
+ */
+ showAsDialog(anchorBox, anchorBehavior) {
this._dialog = new UI.Dialog();
+ if (anchorBox)
+ this._dialog.setContentAnchorBox(anchorBox);
+ else
+ this._dialog.setContentPosition(null, 22);
this._dialog.setMaxContentSize(new UI.Size(504, 340));
this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
- this._dialog.setContentPosition(null, 22);
+ if (anchorBehavior)
+ this._dialog.setAnchorBehavior(anchorBehavior);
this.show(this._dialog.contentElement);
this._dialog.show();
}
@@ -143,6 +160,15 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
this._attachProvider();
}
+ /**
+ * @param {?string} icon
+ */
+ setInputIcon(icon) {
+ this._iconContainer.removeChildren();
+ if (icon)
+ this._iconContainer.appendChild(UI.Icon.create(icon, 'filtered-list-input-icon'));
+ }
+
_attachProvider() {
if (this._provider) {
this._provider.setRefreshCallback(this._itemsLoaded.bind(this, this._provider));
@@ -163,6 +189,22 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
}
/**
+ * @param {!Event} event
+ */
+ _updateHover(event) {
+ var element = event.deepElementFromPoint();
dgozman 2017/04/05 20:52:55 Implement this similarly to click? var item = thi
eostroukhov 2017/05/03 00:33:46 Done.
+ var listItemElement = element && element.enclosingNodeOrSelfWithClass('filtered-list-widget-item');
+ if (listItemElement && listItemElement.classList.contains('hovered'))
+ return;
+ for (var child of this._list.element.getElementsByClassName('hovered'))
dgozman 2017/04/05 20:52:55 Introduce |this._hoverElement| and remove the clas
eostroukhov 2017/05/03 00:33:46 Done.
+ child.classList.remove('hovered');
+ var item = listItemElement && this._list.itemForNode(listItemElement);
+ if (listItemElement)
+ listItemElement.classList.add('hovered');
dgozman 2017/04/05 20:52:56 This should go to _hover.
eostroukhov 2017/05/03 00:33:46 Done.
+ this._hover(item);
+ }
+
+ /**
* @override
*/
wasShown() {
@@ -174,6 +216,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
* @override
*/
willHide() {
+ this._hover(null);
if (this._provider)
this._provider.detach();
this._clearTimers();
@@ -264,6 +307,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
fromElement.classList.remove('selected');
if (toElement)
toElement.classList.add('selected');
+ this._hover(to);
dgozman 2017/04/05 20:52:55 Why this?
eostroukhov 2017/05/03 00:33:46 For keyboard navigation. It is extremely confusing
+ }
+
+ /**
+ * @param {number} item
+ */
+ selectItem(item) {
dgozman 2017/04/05 20:52:55 setInitialSelection
eostroukhov 2017/05/03 00:33:46 Done.
+ if (this._list.length() > 0)
+ this._list.selectItem(item, true);
+ else
+ this._selectedItemIndex = item;
dgozman 2017/04/05 20:52:55 _initialSelectedItem
eostroukhov 2017/05/03 00:33:46 Done.
}
/**
@@ -425,8 +479,13 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
this._updateNotFoundMessage(!!filteredItems.length);
var oldHeight = this._list.element.offsetHeight;
this._list.replaceAllItems(filteredItems);
- if (filteredItems.length)
- this._list.selectItem(filteredItems[0]);
+ if (filteredItems.length) {
+ var selection = filteredItems[0];
+ if (this._selectedItemIndex !== null && filteredItems.includes(this._selectedItemIndex))
+ selection = this._selectedItemIndex;
+ this._selectedItemIndex = null;
+ this._list.selectItem(selection, true);
+ }
if (this._list.element.offsetHeight !== oldHeight)
this._list.viewportResized();
this._itemsFilteredForTest();
@@ -498,6 +557,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
this._promptHistory.shift();
this._provider.selectItem(itemIndex, this._cleanValue());
}
+
+ /**
+ * @param {?number} item
+ */
+ _hover(item) {
+ if (this._provider)
+ this._provider.hoverItem(item);
+ }
};
@@ -540,6 +607,12 @@ QuickOpen.FilteredListWidget.Provider = class {
}
/**
+ * @param {?number} itemIndex
+ */
+ hoverItem(itemIndex) {
+ }
+
+ /**
* @param {number} itemIndex
* @param {string} query
* @param {!Element} titleElement

Powered by Google App Engine
This is Rietveld 408576698