Web Inspector: Reduce synchronous view layouts
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ButtonNavigationItem.js
1 /*
2  * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspector.NavigationItem
27 {
28     constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, role, label)
29     {
30         super(identifier);
31
32         console.assert(identifier);
33         console.assert(toolTipOrLabel);
34
35         this.toolTip = toolTipOrLabel;
36
37         this._element.addEventListener("click", this._mouseClicked.bind(this));
38
39         this._element.setAttribute("role", role || "button");
40
41         if (label)
42             this._element.setAttribute("aria-label", label);
43
44         this._imageWidth = imageWidth || 16;
45         this._imageHeight = imageHeight || 16;
46
47         if (image)
48             this.image = image;
49         else
50             this.label = toolTipOrLabel;
51     }
52
53     // Public
54
55     get toolTip()
56     {
57         return this._element.title;
58     }
59
60     set toolTip(newToolTip)
61     {
62         console.assert(newToolTip);
63         if (!newToolTip)
64             return;
65
66         this._element.title = newToolTip;
67     }
68
69     get label()
70     {
71         return this._element.textContent;
72     }
73
74     set label(newLabel)
75     {
76         this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
77         this._element.textContent = newLabel || "";
78         if (this.parentNavigationBar)
79             this.parentNavigationBar.needsLayout();
80     }
81
82     get image()
83     {
84         return this._image;
85     }
86
87     set image(newImage)
88     {
89         if (!newImage) {
90             this._element.removeChildren();
91             return;
92         }
93
94         this._element.removeChildren();
95         this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
96
97         this._image = newImage;
98
99         this._glyphElement = useSVGSymbol(this._image, "glyph");
100         this._glyphElement.style.width = this._imageWidth + "px";
101         this._glyphElement.style.height = this._imageHeight + "px";
102         this._element.appendChild(this._glyphElement);
103     }
104
105     get enabled()
106     {
107         return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
108     }
109
110     set enabled(flag)
111     {
112         if (flag)
113             this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
114         else
115             this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
116     }
117
118     // Protected
119
120     get additionalClassNames()
121     {
122         return ["button"];
123     }
124
125     // Private
126
127     _mouseClicked(event)
128     {
129         if (!this.enabled)
130             return;
131         this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
132     }
133 }
134
135 WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
136 WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
137
138 WebInspector.ButtonNavigationItem.Event = {
139     Clicked: "button-navigation-item-clicked"
140 };