From 485edbd9c621402f976aff8a4b96af34c370d79d Mon Sep 17 00:00:00 2001 From: lushnikov Date: Fri, 9 Dec 2016 19:33:20 -0800 Subject: [PATCH] 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} --- front_end/accessibility/AXTreePane.js | 23 +++++---- front_end/accessibility/accessibilityNode.css | 18 ------- front_end/ui/Icon.js | 2 + front_end/ui/treeoutline.css | 5 ++ front_end/ui/treeoutline.js | 49 ++++++++++++++++++- 5 files changed, 69 insertions(+), 28 deletions(-) diff --git a/front_end/accessibility/AXTreePane.js b/front_end/accessibility/AXTreePane.js index f56fdaa3b8..6f50e90778 100644 --- 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 index 55782db63c..b70d60e7b9 100644 --- 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 index e45c10896e..41232aed10 100644 --- 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 index 42a899db6a..4d7c9b8e86 100644 --- 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 index 55b61a2726..8755e42582 100644 --- 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} 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() {