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

This patch migrates the "left thick blue" icon, which points to the inspected node, onto UI.Icon. As a result, the icon is now sharp on retina! This patch also introduces icon support for treeoutline: every TreeElement now has TreeElement.setTrailingIcons(icons) method. Users might call it to add icons after the treeelement's title. In future, a symmetrical method TreeElement.setLeadingIcons(icons) method, which will be used to migrate navigator icons over to the UI.Icon. BUG=669323 Review-Url: https://codereview.chromium.org/2564433004 Cr-Commit-Position: refs/heads/master@{#437738}
binaryage · Dec 10, 2016 · 485edbd · 485edbd
1 parent b219cbd
commit 485edbd
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 28 deletions.
diff --git a/front_end/accessibility/AXTreePane.js b/front_end/accessibility/AXTreePane.js
@@ -176,6 +176,11 @@ Accessibility.AXNodeTreeElement = class extends TreeElement {
    */
   setInspected(inspected) {
     this._inspected = inspected;
+    if (this._inspected)
+      this.setTrailingIcons([UI.Icon.create('smallicon-thick-left-arrow')]);
+    else
+      this.setTrailingIcons([]);
+
     this.listItemElement.classList.toggle('inspected', this._inspected);
   }
 
@@ -211,28 +216,28 @@ Accessibility.AXNodeTreeElement = class extends TreeElement {
   }
 
   _update() {
-    this.listItemElement.removeChildren();
+    this.titleElement().removeChildren();
 
     if (this._axNode.ignored()) {
       this._appendIgnoredNodeElement();
     } else {
       this._appendRoleElement(this._axNode.role());
       if (this._axNode.name().value) {
-        this.listItemElement.createChild('span', 'separator').textContent = '\u00A0';
+        this.titleElement().createChild('span', 'separator').textContent = '\u00A0';
         this._appendNameElement(/** @type {string} */ (this._axNode.name().value));
       }
     }
 
     if (this._axNode.hasOnlyUnloadedChildren()) {
-      this.listItemElement.classList.add('children-unloaded');
+      this.titleElement().classList.add('children-unloaded');
       this.setExpandable(true);
     } else {
       this.setExpandable(!!this._axNode.numChildren());
     }
 
     if (!this._axNode.isDOMNode())
-      this.listItemElement.classList.add('no-dom-node');
-    this.listItemElement.appendChild(this._inspectNodeButton.element);
+      this.titleElement().classList.add('no-dom-node');
+    this.titleElement().appendChild(this._inspectNodeButton.element);
   }
 
   /**
@@ -265,7 +270,7 @@ Accessibility.AXNodeTreeElement = class extends TreeElement {
     var nameElement = createElement('span');
     nameElement.textContent = '"' + name + '"';
     nameElement.classList.add('ax-readable-string');
-    this.listItemElement.appendChild(nameElement);
+    this.titleElement().appendChild(nameElement);
   }
 
   /**
@@ -279,14 +284,14 @@ Accessibility.AXNodeTreeElement = class extends TreeElement {
     roleElement.classList.add(Accessibility.AXNodeTreeElement.RoleStyles[role.type]);
     roleElement.setTextContentTruncatedIfNeeded(role.value || '');
 
-    this.listItemElement.appendChild(roleElement);
+    this.titleElement().appendChild(roleElement);
   }
 
   _appendIgnoredNodeElement() {
     var ignoredNodeElement = createElementWithClass('span', 'monospace');
     ignoredNodeElement.textContent = Common.UIString('Ignored');
     ignoredNodeElement.classList.add('ax-tree-ignored-node');
-    this.listItemElement.appendChild(ignoredNodeElement);
+    this.titleElement().appendChild(ignoredNodeElement);
   }
 
   /**
@@ -359,7 +364,7 @@ Accessibility.AXNodeTreeParentElement = class extends Accessibility.AXNodeTreeEl
     if (this._treePane.isExpanded(this._axNode.backendDOMNodeId()))
       this.listItemElement.classList.add('siblings-expanded');
     if (this._axNode.numChildren() > 1)
-      this.listItemElement.insertBefore(this._expandSiblingsButton.element, this._inspectNodeButton.element);
+      this.titleElement().insertBefore(this._expandSiblingsButton.element, this._inspectNodeButton.element);
   }
 
   /**

diff --git a/front_end/accessibility/accessibilityNode.css b/front_end/accessibility/accessibilityNode.css
@@ -80,24 +80,6 @@ span.ax-internal-role {
     left: -2px;
 }
 
-.tree-outline li.inspected::after {
-    -webkit-mask-image: url(Images/smallIcons.png);
-    -webkit-mask-size: 190px 30px;
-    -webkit-mask-position: -180px 0;
-    background-color: rgb(74, 139, 238);
-    content: "";
-    position: relative;
-    left: 4px;
-    top: 1px;
-    width: 10px;
-    height: 10px;
-    transform: rotate(180deg);
-}
-
-.tree-outline:focus li.inspected.selected::after {
-    background-color: white;
-}
-
 .tree-outline li.selected .selection {
     background-color: inherit;
 }

diff --git a/front_end/ui/Icon.js b/front_end/ui/Icon.js
@@ -100,6 +100,8 @@ UI.Icon.Descriptors = {
   'smallicon-green-ball': {x: -140, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+  'smallicon-thick-left-arrow':
+      {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons', transform: 'rotate(180deg)'},
   'smallicon-user-command': {x: 0, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-command-result': {x: -40, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},

diff --git a/front_end/ui/treeoutline.css b/front_end/ui/treeoutline.css
@@ -88,6 +88,11 @@ ol.tree-outline:focus li.selected * {
     color: inherit;
 }
 
+.tree-outline li .icons-container {
+    margin-left: 4px;
+    align-self: center;
+}
+
 .tree-outline li::before {
     -webkit-user-select: none;
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);

diff --git a/front_end/ui/treeoutline.js b/front_end/ui/treeoutline.js
@@ -44,10 +44,22 @@ var TreeOutline = class extends Common.Object {
 
     this.contentElement = this._rootElement._childrenListNode;
     this.contentElement.addEventListener('keydown', this._treeKeyDown.bind(this), true);
+    this.contentElement.addEventListener('focus', setFocused.bind(this, true), false);
+    this.contentElement.addEventListener('blur', setFocused.bind(this, false), 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() {
@@ -308,6 +320,7 @@ var TreeElement = class {
     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;
@@ -552,6 +565,13 @@ var TreeElement = class {
     return this._listItemNode;
   }
 
+  /**
+   * @return {!Element}
+   */
+  titleElement() {
+    return this._titleElement;
+  }
+
   get childrenListElement() {
     return this._childrenListNode;
   }
@@ -572,7 +592,6 @@ var TreeElement = class {
     this._title = x;
 
     if (typeof x === 'string') {
-      this._titleElement = createElementWithClass('span', 'tree-element-title');
       this._titleElement.textContent = x;
       this.tooltip = x;
     } else {
@@ -585,6 +604,8 @@ var TreeElement = class {
       this._listItemNode.appendChild(this._iconElement);
 
     this._listItemNode.appendChild(this._titleElement);
+    if (this._trailingIconsElement)
+      this._listItemNode.appendChild(this._trailingIconsElement);
     this._ensureSelection();
   }
 
@@ -615,6 +636,30 @@ var TreeElement = class {
     }
   }
 
+  /**
+   * @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}
    */
@@ -945,6 +990,7 @@ var TreeElement = class {
       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);
   }
@@ -967,6 +1013,7 @@ var TreeElement = class {
     this.selected = false;
     this.treeOutline.selectedTreeElement = null;
     this._listItemNode.classList.remove('selected');
+    this._setFocused(false);
   }
 
   _populateIfNeeded() {