diff options
author | Allan Sandfeld Jensen <allan.jensen@digia.com> | 2013-09-13 12:51:20 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-09-19 20:50:05 +0200 |
commit | d441d6f39bb846989d95bcf5caf387b42414718d (patch) | |
tree | e367e64a75991c554930278175d403c072de6bb8 /Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js | |
parent | 0060b2994c07842f4c59de64b5e3e430525c4b90 (diff) | |
download | qtwebkit-d441d6f39bb846989d95bcf5caf387b42414718d.tar.gz |
Import Qt5x2 branch of QtWebkit for Qt 5.2
Importing a new snapshot of webkit.
Change-Id: I2d01ad12cdc8af8cb015387641120a9d7ea5f10c
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@digia.com>
Diffstat (limited to 'Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js')
-rw-r--r-- | Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js | 339 |
1 files changed, 339 insertions, 0 deletions
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js new file mode 100644 index 000000000..33286840a --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js @@ -0,0 +1,339 @@ +/* + * Copyright (C) 2013 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 + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * + * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' + * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, + * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS + * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR + * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF + * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS + * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN + * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF + * THE POSSIBILITY OF SUCH DAMAGE. + */ + +WebInspector.HierarchicalPathComponent = function(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows) +{ + WebInspector.Object.call(this); + + console.assert(displayName); + console.assert(styleClassNames); + + this._representedObject = representedObject || null; + + this._element = document.createElement("div"); + this._element.className = WebInspector.HierarchicalPathComponent.StyleClassName; + + if (!(styleClassNames instanceof Array)) + styleClassNames = [styleClassNames]; + + for (var i = 0; i < styleClassNames.length; ++i) { + if (!styleClassNames[i]) + continue; + this._element.classList.add(styleClassNames[i]); + } + + if (!textOnly) { + this._iconElement = document.createElement("img"); + this._iconElement.className = WebInspector.HierarchicalPathComponent.IconElementStyleClassName; + this._element.appendChild(this._iconElement); + } else + this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName); + + this._titleElement = document.createElement("div"); + this._titleElement.className = WebInspector.HierarchicalPathComponent.TitleElementStyleClassName; + this._element.appendChild(this._titleElement); + + this._titleContentElement = document.createElement("div"); + this._titleContentElement.className = WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName; + this._titleElement.appendChild(this._titleContentElement); + + this._separatorElement = document.createElement("div"); + this._separatorElement.className = WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName; + this._element.appendChild(this._separatorElement); + + this._selectElement = document.createElement("select"); + this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this)); + this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this)); + this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this)); + this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this)); + this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this)); + this._element.appendChild(this._selectElement); + + this._previousSibling = null; + this._nextSibling = null; + + this._truncatedDisplayNameLength = 0; + + this.selectorArrows = showSelectorArrows; + this.displayName = displayName; +}; + +WebInspector.HierarchicalPathComponent.StyleClassName = "hierarchical-path-component"; +WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden"; +WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed"; +WebInspector.HierarchicalPathComponent.IconElementStyleClassName = "icon"; +WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only"; +WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows"; +WebInspector.HierarchicalPathComponent.TitleElementStyleClassName = "title"; +WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName = "content"; +WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName = "selector-arrows"; +WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName = "separator"; + +WebInspector.HierarchicalPathComponent.MinimumWidth = 32; +WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24; +WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54; +WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12; + +WebInspector.HierarchicalPathComponent.Event = { + SiblingWasSelected: "hierarchical-path-component-sibling-was-selected", + Clicked: "hierarchical-path-component-clicked" +}; + +WebInspector.HierarchicalPathComponent.prototype = { + constructor: WebInspector.HierarchicalPathComponent, + + // Public + + get element() + { + return this._element; + }, + + get representedObject() + { + return this._representedObject; + }, + + get displayName() + { + return this._displayName; + }, + + set displayName(newDisplayName) + { + console.assert(newDisplayName); + if (newDisplayName === this._displayName) + return; + + this._displayName = newDisplayName; + + this._updateElementTitleAndText(); + }, + + get truncatedDisplayNameLength() + { + return this._truncatedDisplayNameLength; + }, + + set truncatedDisplayNameLength(truncatedDisplayNameLength) + { + truncatedDisplayNameLength = truncatedDisplayNameLength || 0; + + if (truncatedDisplayNameLength === this._truncatedDisplayNameLength) + return; + + this._truncatedDisplayNameLength = truncatedDisplayNameLength; + + this._updateElementTitleAndText(); + }, + + get minimumWidth() + { + if (this.collapsed) + return WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed; + if (this.selectorArrows) + return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth; + return WebInspector.HierarchicalPathComponent.MinimumWidth; + }, + + get forcedWidth() + { + var maxWidth = this._element.style.getProperty("width"); + if (typeof maxWidth === "string") + return parseInt(maxWidth); + return null; + }, + + set forcedWidth(width) + { + if (typeof width === "number") { + var minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle; + if (this.selectorArrows) + minimumWidthForOneCharacterTruncatedTitle += WebInspector.HierarchicalPathComponent.SelectorArrowsWidth; + + // If the width is less than the minimum width required to show a single character and ellipsis, then + // just collapse down to the bare minimum to show only the icon. + if (width < minimumWidthForOneCharacterTruncatedTitle) + width = 0; + + // Ensure the width does not go less than 1px. If the width is 0 the layout gets funky. There is a min-width + // in the CSS too, so as long the width is less than min-width we get the desired effect of only showing the icon. + this._element.style.setProperty("width", Math.max(1, width) + "px"); + } else + this._element.style.removeProperty("width"); + }, + + get hidden() + { + return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName); + }, + + set hidden(flag) + { + if (flag) + this._element.classList.add(WebInspector.HierarchicalPathComponent.HiddenStyleClassName); + else + this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName); + }, + + get collapsed() + { + return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName); + }, + + set collapsed(flag) + { + if (flag) + this._element.classList.add(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName); + else + this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName); + }, + + get selectorArrows() + { + return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName); + }, + + set selectorArrows(flag) + { + if (flag) { + this._selectorArrowsElement = document.createElement("img"); + this._selectorArrowsElement.className = WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName; + this._element.insertBefore(this._selectorArrowsElement, this._separatorElement); + + this._element.classList.add(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName); + } else { + if (this._selectorArrowsElement) { + this._selectorArrowsElement.remove(); + delete this._selectorArrowsElement; + } + + this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName); + } + }, + + get previousSibling() + { + return this._previousSibling; + }, + + set previousSibling(newSlibling) + { + this._previousSibling = newSlibling || null; + }, + + get nextSibling() + { + return this._nextSibling; + }, + + set nextSibling(newSlibling) + { + this._nextSibling = newSlibling || null; + }, + + // Private + + _updateElementTitleAndText: function() + { + var truncatedDisplayName = this._displayName; + if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength) + truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + "\u2026"; + + this._element.title = this._displayName; + this._titleContentElement.textContent = truncatedDisplayName; + }, + + _updateSelectElement: function() + { + this._selectElement.removeChildren(); + + function createOption(component) + { + var optionElement = document.createElement("option"); + const maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide + optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + "\u2026"; + optionElement._pathComponent = component; + return optionElement; + } + + var previousSiblingCount = 0; + var sibling = this.previousSibling; + while (sibling) { + this._selectElement.insertBefore(createOption(sibling), this._selectElement.firstChild); + sibling = sibling.previousSibling; + ++previousSiblingCount; + } + + this._selectElement.appendChild(createOption(this)); + + sibling = this.nextSibling; + while (sibling) { + this._selectElement.appendChild(createOption(sibling)); + sibling = sibling.nextSibling; + } + + // Since the change event only fires when the selection actually changes we are + // stuck with either not showing the current selection in the menu or accepting that + // the user can't select what is already selected again. Selecting the same item + // again can be desired (for selecting the main resource while looking at an image). + // So if there is only one option, don't make it be selected by default. This lets + // you select the top level item which usually has no siblings to go back. + // FIXME: Make this work when there are multiple options with a selectedIndex. + if (this._selectElement.options.length === 1) + this._selectElement.selectedIndex = -1; + else + this._selectElement.selectedIndex = previousSiblingCount; + }, + + _selectElementMouseOver: function(event) + { + if (typeof this.mouseOver === "function") + this.mouseOver(); + }, + + _selectElementMouseOut: function(event) + { + if (typeof this.mouseOut === "function") + this.mouseOut(); + }, + + _selectElementMouseDown: function(event) + { + this._updateSelectElement(); + }, + + _selectElementMouseUp: function(event) + { + this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.Clicked); + }, + + _selectElementSelectionChanged: function(event) + { + this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, {pathComponent: this._selectElement[this._selectElement.selectedIndex]._pathComponent}); + } +}; + +WebInspector.HierarchicalPathComponent.prototype.__proto__ = WebInspector.Object.prototype; |