DevTools: Split SoftDropdown out of ConsoleContextSelector

third_party/WebKit/Source/devtools/front_end/ui/SoftDropDown.js

+// Copyright 2015 The Chromium Authors. All rights reserved.

[caseq, 2017/05/30 23:40:08]

2017 :-)

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/**
+ * @template T
+ * @implements {UI.ListDelegate<T>}
+ */
+UI.SoftDropDown = class {
+  /**
+   * @param {!UI.SoftDropDown.Delegate} delegate
+   */
+  constructor(delegate) {
+    this._delegate = delegate;
+    this._selectedItem = null;
+
+    this.element = createElementWithClass('button', 'soft-dropdown');
+    var shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'ui/softDropDownButton.css');
+    this._titleElement = shadowRoot.createChild('span', 'title');
+    this.element.tabIndex = 0;
+
+    this._glassPane = new UI.GlassPane();
+    this._glassPane.setMarginBehavior(UI.GlassPane.MarginBehavior.NoMargin);
+    this._glassPane.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferBottom);
+    this._glassPane.setOutsideClickCallback(this._hide.bind(this));
+    this._glassPane.setPointerEventsBehavior(UI.GlassPane.PointerEventsBehavior.BlockedByGlassPane);
+    this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
+    this._list.element.classList.add('item-list');
+    this._list.element.tabIndex = -1;

[caseq, 2017/05/30 23:40:07]

This belongs to UI.ListControl, I'm already moving it there
(https://chromium-review.googlesource.com/c/517295)

[einbinder, 2017/05/31 21:14:27]

I guess that is ok. It removes the ability to have a list inside something
focusable but I don't think we do that anywhere.

+    this._rowHeight = 36;

[caseq, 2017/05/30 23:40:08]

Can I have a different rowHeight in my control?

[einbinder, 2017/05/31 21:14:27]

Yeah, but we will need to figure out who owns what css.

+    UI.createShadowRootWithCoreStyles(this._glassPane.contentElement, 'ui/softDropDown.css')
+        .appendChild(this._list.element);
+
+    this._listWasShowing200msAgo = false;
+    this.element.addEventListener('mousedown', event => {
+      if (this._listWasShowing200msAgo)
+        this._hide(event);
+      else
+        this._show(event);
+    }, false);
+    this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
+    // this.element.addEventListener('focusout', this._hide.bind(this), false);
+    this._list.element.addEventListener('mousedown', event => {
+      event.consume(true);

[caseq, 2017/05/30 23:40:08]

nit: this could be written shorter as event => void event.consume(true);

[einbinder, 2017/05/31 21:14:27]

Done.

+    }, false);
+    this._list.element.addEventListener('mouseup', event => {
+      if (event.target === this._list.element)
+        return;
+
+      if (!this._listWasShowing200msAgo)
+        return;
+      this._selectHighlightedItem();
+      this._hide(event);
+    }, false);
+
+    var dropdownArrowIcon = UI.Icon.create('smallicon-triangle-down');
+    shadowRoot.appendChild(dropdownArrowIcon);

[caseq, 2017/05/30 23:40:08]

please move this up to where we setup this.element for better readability.

[einbinder, 2017/05/31 21:14:26]

Done.

+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _show(event) {
+    if (this._glassPane.isShowing())
+      return;
+    this._glassPane.setContentAnchorBox(this.element.boxInWindow());
+    this._glassPane.show(/** @type {!Document} **/ (this.element.ownerDocument));
+    this._updateGlasspaneSize();
+    if (this._selectedItem) {
+      this._list.selectItem(this._selectedItem);
+      this._list.scrollItemIntoView(this._selectedItem, true);

[caseq, 2017/05/30 23:40:07]

This should not be necessary, selectItem() above should take care of this.

[einbinder, 2017/05/31 21:14:27]

Done.

+    }
+    this.element.focus();

[caseq, 2017/05/30 23:40:08]

Do we need focus on the button after _show()?

[einbinder, 2017/05/31 21:14:27]

Yes, because we cancel the mousedown.

+    event.consume(true);
+    setTimeout(() => this._listWasShowing200msAgo = true, 200);
+  }
+
+  _updateGlasspaneSize() {
+    var maxHeight = this._rowHeight * (Math.min(this._list.length(), 9));
+    this._glassPane.setMaxContentSize(new UI.Size(315, maxHeight));

[caseq, 2017/05/30 23:40:08]

Why 315? Also, some use cases may call for larger width. Perhaps, extract
constant and make it configurable?

[einbinder, 2017/05/31 21:14:26]

Yep.

+    this._list.viewportResized();
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _hide(event) {
+    setTimeout(() => this._listWasShowing200msAgo = false, 200);
+    this._glassPane.hide();
+    this._delegate.itemHighlighted(null);
+    event.consume(true);
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _onKeyDown(event) {
+    var handled = false;
+    switch (event.key) {
+      case 'ArrowUp':

[caseq, 2017/05/30 23:40:07]

This and the one below are actually already handled in the UI.ListControl.

[einbinder, 2017/05/31 21:14:27]

The soft drop down needs to know if the key was handled in order to update the
selection.

+        handled = this._list.selectPreviousItem(false, false);
+        break;
+      case 'ArrowDown':
+        handled = this._list.selectNextItem(false, false);
+        break;
+      case 'ArrowRight':

[caseq, 2017/05/30 23:40:08]

The very notion of depth is rather specific to the usage in
ConsoleContextSelector. One does not generally have a notion of 'depth' in the
list -- can we keep this logic in the context selector?

[einbinder, 2017/05/31 21:14:26]

Putting it back into the ConsoleContextSelector would involve making a lot of
things public on the dropdown. The frames selector will want depth as well, so
it makes sense to me to leave it.

+        var currentItem = this._list.selectedItem();
+        if (!currentItem)
+          break;
+        var nextItem = this._list.itemAtIndex(this._list.selectedIndex() + 1);
+        if (nextItem && this._delegate.depthFor(currentItem) < this._delegate.depthFor(nextItem))
+          handled = this._list.selectNextItem(false, false);
+        break;
+      case 'ArrowLeft':
+        var currentItem = this._list.selectedItem();
+        if (!currentItem)
+          break;
+        var depth = this._delegate.depthFor(currentItem);
+        for (var i = this._list.selectedIndex() - 1; i >= 0; i--) {
+          if (this._delegate.depthFor(this._list.itemAtIndex(i)) < depth) {
+            handled = true;
+            this._list.selectItem(this._list.itemAtIndex(i), false);
+            break;
+          }
+        }
+        break;
+      case 'PageUp':

[caseq, 2017/05/30 23:40:08]

This and the one below are also handled in UI.ListControl.

+        handled = this._list.selectItemPreviousPage(false);
+        break;
+      case 'PageDown':
+        handled = this._list.selectItemNextPage(false);
+        break;
+      case 'Home':

[caseq, 2017/05/30 23:40:08]

Should we add Home/End to UI.ListControl as well?

[einbinder, 2017/05/31 21:14:26]

We can, but that seems like something for a different patch.

+        for (var i = 0; i < this._list.length(); i++) {
+          if (this.isItemSelectable(this._list.itemAtIndex(i))) {
+            this._list.selectItem(this._list.itemAtIndex(i));
+            handled = true;
+            break;
+          }
+        }
+        break;
+      case 'End':
+        for (var i = this._list.length() - 1; i >= 0; i--) {
+          if (this.isItemSelectable(this._list.itemAtIndex(i))) {
+            this._list.selectItem(this._list.itemAtIndex(i));
+            handled = true;
+            break;
+          }
+        }
+        break;
+      case 'Escape':
+        this._hide(event);
+        break;
+      case 'Tab':
+        if (!this._glassPane.isShowing())
+          break;
+        this._selectHighlightedItem();
+        this._hide(event);
+        break;
+      case 'Enter':
+        if (!this._glassPane.isShowing()) {
+          this._show(event);
+          break;
+        }
+        this._selectHighlightedItem();
+        this._hide(event);
+        break;
+      case ' ':
+        this._show(event);
+        break;
+      default:
+        if (event.key.length === 1) {
+          var selectedIndex = this._list.selectedIndex();
+          var letter = event.key.toUpperCase();
+          for (var i = 0; i < this._list.length(); i++) {
+            var item = this._list.itemAtIndex((selectedIndex + i + 1) % this._list.length());
+            if (this._delegate.titleFor(item).toUpperCase().startsWith(letter)) {
+              this._list.selectItem(item);
+              break;
+            }
+          }
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled) {
+      event.consume(true);
+      this._selectHighlightedItem();
+    }
+  }
+
+  /**
+   * @param {T} item
+   * @param {function(T, T):number} comparator
+   */
+  insertItemWithComparator(item, comparator) {
+    this._list.insertItemWithComparator(item, comparator);
+  }
+
+  /**
+   * @param {T} item
+   */
+  removeItem(item) {
+    if (this._list.indexOfItem(item) !== -1)

[caseq, 2017/05/30 23:40:08]

Do we really need this check?

[einbinder, 2017/05/31 21:14:26]

The list asserts that the item exists before it can be removed. The dropdown
doesn't expose its contents at all, which makes it hard to use removeItem
safely.

+      this._list.removeItem(item);
+    if (this._selectedItem === item) {
+      this._selectedItem = null;
+      this._selectHighlightedItem();
+    }
+    this._updateGlasspaneSize();
+  }
+
+  /**
+   * @param {?T} item
+   */
+  selectItem(item) {
+    this._selectedItem = item;

[caseq, 2017/05/30 23:40:08]

Do we need our own copy of the selected item? Perhaps just always get it from
the underlying UI.ListControl?

[einbinder, 2017/05/31 21:14:27]

The selection in the dropdown is separate from that in the list. The
selectedItem in the list corresponds to the highlighted item in the dropdown.

+    this._updateSelectedItem();
+  }
+
+  /**
+   * @override
+   * @param {T} item
+   * @return {!Element}
+   */
+  createElementForItem(item) {
+    var element = this._delegate.elementForItem(item);
+    element.style.paddingLeft = (8 + this._delegate.depthFor(item) * 15) + 'px';

[caseq, 2017/05/30 23:40:08]

This is too specific, let's keep in in the console context selector.

[einbinder, 2017/05/31 21:14:27]

If we go with the SoftDropDown handling depth, it made sense to me to show it in
some standard way.

[einbinder, 2017/06/05 21:03:39]

Removed depth-aware keyboard shortcuts, and moved depth into console console
context selector.

+    element.addEventListener('mousemove', e => {

[caseq, 2017/05/30 23:40:08]

Let's have one mousemove listener for the entire conrtrol instead.

[einbinder, 2017/05/31 21:14:27]

Why?

+      if ((e.movementX || e.movementY) && this._delegate.isItemSelectable(item))
+        this._list.selectItem(item, false, /* Don't scroll */ true);
+    });
+    element.classList.toggle('item', true);
+    element.classList.toggle('disabled', !this._delegate.isItemSelectable(item));
+    element.classList.toggle('selected', this._list.selectedItem() === item);
+    return element;
+  }
+
+  /**
+   * @override
+   * @param {T} item
+   * @return {number}
+   */
+  heightForItem(item) {
+    return this._rowHeight;
+  }
+
+  /**
+   * @override
+   * @param {T} item
+   * @return {boolean}
+   */
+  isItemSelectable(item) {
+    return this._delegate.isItemSelectable(item);
+  }
+
+  /**
+   * @override
+   * @param {?T} from
+   * @param {?T} to
+   * @param {?Element} fromElement
+   * @param {?Element} toElement
+   */
+  selectedItemChanged(from, to, fromElement, toElement) {
+    if (fromElement)
+      fromElement.classList.remove('selected');
+    if (toElement)
+      toElement.classList.add('selected');
+    this._delegate.itemHighlighted(to);
+  }
+
+  _selectHighlightedItem() {
+    this._selectedItem = this._list.selectedItem();
+    this._updateSelectedItem();
+  }
+
+  _updateSelectedItem() {
+    if (this._selectedItem)
+      this._titleElement.textContent = this._delegate.titleFor(this._selectedItem);
+    else
+      this._titleElement.textContent = '';
+    this._delegate.itemSelected(this._selectedItem);
+  }
+
+  /**
+   * @param {T} item
+   */
+  refreshItem(item) {
+    var index = this._list.indexOfItem(item);
+    this._list.refreshItemsInRange(index, index + 1);
+  }
+};
+
+/**
+ * @interface
+ * @template T
+ */
+UI.SoftDropDown.Delegate = class {
+  /**
+   * @param {T} item
+   * @return {string}
+   */
+  titleFor(item) {
+  }
+
+  /**
+   * @param {T} item
+   * @return {number}
+   */
+  depthFor(item) {
+  }
+
+  /**
+   * @param {T} item
+   * @return {!Element}
+   */
+  elementForItem(item) {
+  }
+
+  /**
+   * @param {T} item
+   * @return {boolean}
+   */
+  isItemSelectable(item) {
+  }
+
+  /**
+   * @param {?T} item
+   */
+  itemSelected(item) {
+  }
+
+  /**
+   * @param {?T} item
+   */
+  itemHighlighted(item) {
+  }
+};