DevTools: migrate last usages of samllIcons.png to UI.Icon

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

 /*
  * Copyright (C) 2007 Apple Inc.  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
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 26 matching lines @@
     super();
     this._createRootElement();
 
     this.selectedTreeElement = null;
     this.expandTreeElementsWhenArrowing = false;
     /** @type {?function(!TreeElement, !TreeElement):number} */
     this._comparator = null;
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
+    this.contentElement.addEventListener('focus', setFocused.bind(this, true));

[dgozman, 2016/12/09 22:04:06]

Forgot to pass false for capture here and below.

[lushnikov, 2016/12/10 00:52:50]

Done.

+    this.contentElement.addEventListener('blur', setFocused.bind(this, false));
 
     this.setFocusable(!nonFocusable);
 
     this.element = this.contentElement;
+
+    /**
+     * @param {boolean} isFocused
+     * @this {TreeOutline}
+     */
+    function setFocused(isFocused) {
+      this._focused = isFocused;
+      if (this.selectedTreeElement)
+        this.selectedTreeElement._setFocused(this._focused);
+    }
   }
 
   _createRootElement() {
     this._rootElement = new TreeElement();
     this._rootElement.treeOutline = this;
     this._rootElement.root = true;
     this._rootElement.selectable = false;
     this._rootElement.expanded = true;
     this._rootElement._childrenListNode.classList.remove('children');
   }
@@ skipping 240 matching lines @@
    * @param {boolean=} expandable
    */
   constructor(title, expandable) {
     /** @type {?TreeOutline} */
     this.treeOutline = null;
     this.parent = null;
     this.previousSibling = null;
     this.nextSibling = null;
 
     this._listItemNode = createElement('li');
+    this._titleElement = this._listItemNode.createChild('span', 'tree-element-title');
     this._listItemNode.treeElement = this;
     if (title)
       this.title = title;
     this._listItemNode.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
     this._listItemNode.addEventListener('click', this._treeElementToggled.bind(this), false);
     this._listItemNode.addEventListener('dblclick', this._handleDoubleClick.bind(this), false);
 
     this._childrenListNode = createElement('ol');
     this._childrenListNode.parentTreeElement = this;
     this._childrenListNode.classList.add('children');
@@ skipping 224 matching lines @@
   }
 
   set selectable(x) {
     this._selectable = x;
   }
 
   get listItemElement() {
     return this._listItemNode;
   }
 
+  /**
+   * @return {!Element}
+   */
+  titleElement() {
+    return this._titleElement;
+  }
+
   get childrenListElement() {
     return this._childrenListNode;
   }
 
   /**
    * @return {string|!Node}
    */
   get title() {
     return this._title;
   }
 
   /**
    * @param {string|!Node} x
    */
   set title(x) {
     if (this._title === x)
       return;
     this._title = x;
 
     if (typeof x === 'string') {
-      this._titleElement = createElementWithClass('span', 'tree-element-title');
       this._titleElement.textContent = x;
       this.tooltip = x;
     } else {
       this._titleElement = x;
       this.tooltip = '';
     }
 
     this._listItemNode.removeChildren();
     if (this._iconElement)
       this._listItemNode.appendChild(this._iconElement);
 
     this._listItemNode.appendChild(this._titleElement);
+    if (this._trailingIconsElement)
+      this._listItemNode.appendChild(this._trailingIconsElement);
     this._ensureSelection();
   }
 
   /**
    * @return {string}
    */
   titleAsText() {
     if (!this._title)
       return '';
     if (typeof this._title === 'string')
@@ skipping 11 matching lines @@
 
   createIcon() {
     if (!this._iconElement) {
       this._iconElement = createElementWithClass('div', 'icon');
       this._listItemNode.insertBefore(this._iconElement, this._listItemNode.firstChild);
       this._ensureSelection();
     }
   }
 
   /**
+   * @param {!Array<!UI.Icon>} icons
+   */
+  setTrailingIcons(icons) {
+    if (!this._trailingIconsElement && !icons.length)
+      return;
+    if (!this._trailingIconsElement) {
+      this._trailingIconsElement = createElementWithClass('div', 'icons-container');
+      this._listItemNode.appendChild(this._trailingIconsElement);
+      this._ensureSelection();
+    }
+    this._trailingIconsElement.removeChildren();
+    for (var icon of icons)
+      this._trailingIconsElement.appendChild(icon);
+  }
+
+  /**
+   * @param {boolean} focused
+   */
+  _setFocused(focused) {
+    this._focused = focused;
+    this._listItemNode.classList.toggle('force-white-icons', focused);
+  }
+
+  /**
    * @return {string}
    */
   get tooltip() {
     return this._tooltip || '';
   }
 
   /**
    * @param {string} x
    */
   set tooltip(x) {
@@ skipping 309 matching lines @@
     this.selected = true;
 
     if (!omitFocus)
       this.treeOutline.focus();
 
     // Focusing on another node may detach "this" from tree.
     if (!this.treeOutline)
       return false;
     this.treeOutline.selectedTreeElement = this;
     this._listItemNode.classList.add('selected');
+    this._setFocused(this.treeOutline._focused);
     this.treeOutline.dispatchEventToListeners(TreeOutline.Events.ElementSelected, this);
     return this.onselect(selectedByUser);
   }
 
   /**
    * @param {boolean=} omitFocus
    */
   revealAndSelect(omitFocus) {
     this.reveal(true);
     this.select(omitFocus);
   }
 
   /**
    * @param {boolean=} supressOnDeselect
    */
   deselect(supressOnDeselect) {
     if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
       return;
 
     this.selected = false;
     this.treeOutline.selectedTreeElement = null;
     this._listItemNode.classList.remove('selected');
+    this._setFocused(false);
   }
 
   _populateIfNeeded() {
     if (this.treeOutline && this._expandable && !this._children) {
       this._children = [];
       this.onpopulate();
     }
   }
 
   onpopulate() {
@@ skipping 131 matching lines @@
     var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
     console.assert(paddingLeftValue.endsWith('px'));
     var computedLeftPadding = parseFloat(paddingLeftValue);
     var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
     return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
   }
 };
 
 /** @const */
 TreeElement._ArrowToggleWidth = 10;