Web Inspector: show a debugging-oriented dashboard when scripts pause
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / ButtonNavigationItem.js
1 /*
2  * Copyright (C) 2013 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 = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
27     WebInspector.NavigationItem.call(this, identifier);
28
29     console.assert(identifier);
30     console.assert(toolTipOrLabel);
31
32     this.toolTip = toolTipOrLabel;
33
34     this._element.addEventListener("click", this._mouseClicked.bind(this));
35     
36     this._element.setAttribute("role", role || "button");
37     
38     if (label) 
39         this._element.setAttribute("aria-label", label);
40
41     this._imageWidth = imageWidth || 16;
42     this._imageHeight = imageHeight || 16;
43     this._suppressEmboss = suppressEmboss || false;
44
45     if (suppressEmboss)
46         this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
47
48     if (image)
49         this.image = image;
50     else
51         this.label = toolTipOrLabel;
52 };
53
54 WebInspector.ButtonNavigationItem.StyleClassName = "button";
55 WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
56 WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
57 WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName = "suppress-emboss";
58 WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
59
60 WebInspector.ButtonNavigationItem.States = {};
61 WebInspector.ButtonNavigationItem.States.Normal = "normal";
62 WebInspector.ButtonNavigationItem.States.Active = "active";
63 WebInspector.ButtonNavigationItem.States.Focus = "focus";
64 WebInspector.ButtonNavigationItem.States.ActiveFocus = "active-focus";
65
66 WebInspector.ButtonNavigationItem.Event = {
67     Clicked: "button-navigation-item-clicked"
68 };
69
70 WebInspector.ButtonNavigationItem.prototype = {
71     constructor: WebInspector.ButtonNavigationItem,
72
73     // Public
74
75     get toolTip()
76     {
77         return this._element.title;
78     },
79
80     set toolTip(newToolTip)
81     {
82         console.assert(newToolTip);
83         if (!newToolTip)
84             return;
85
86         this._element.title = newToolTip;
87     },
88
89     get label()
90     {
91         return this._element.textContent;
92     },
93
94     set label(newLabel)
95     {
96         this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
97         this._element.textContent = newLabel || "";
98         if (this.parentNavigationBar)
99             this.parentNavigationBar.updateLayout();
100     },
101
102     get image()
103     {
104         return this._image;
105     },
106
107     set image(newImage)
108     {
109         if (!newImage) {
110             this._element.removeChildren();
111             return;
112         }
113
114         this._element.removeChildren();
115         this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
116
117         this._image = newImage;
118
119         this._glyphElement = document.createElement("div");
120         this._glyphElement.className = "glyph";
121         this._element.appendChild(this._glyphElement);
122
123         this._updateImage();
124     },
125
126     get enabled()
127     {
128         return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
129     },
130
131     set enabled(flag)
132     {
133         if (flag)
134             this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
135         else
136             this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
137     },
138
139     get suppressBezel()
140     {
141         return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
142     },
143
144     set suppressBezel(flag)
145     {
146         if (flag)
147             this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
148         else
149             this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
150     },
151
152     generateStyleText: function(parentSelector)
153     {
154         var classNames = this._classNames.join(".");
155
156         if (this._suppressEmboss)
157             var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
158         else {
159             // Default state.
160             var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
161
162             // Pressed state.
163             styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
164
165             // Focused state.
166             styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
167         }
168
169         return styleText;
170     },
171
172     // Private
173
174     _additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
175     _embossedImageStates: WebInspector.ButtonNavigationItem.States,
176     _imageCacheable: true,
177
178     _mouseClicked: function(event)
179     {
180         if (!this.enabled)
181             return;
182         this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
183     },
184
185     _canvasIdentifier: function(state)
186     {
187         console.assert(!this._suppressEmboss);
188         return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
189     },
190
191     _updateImage: function()
192     {
193         if (this._suppressEmboss)
194             this._glyphElement.style.webkitMask = "url(" + this._image + ")";
195         else
196             this._generateImages();
197     },
198
199     _generateImages: function()
200     {
201         console.assert(!this._suppressEmboss);
202         if (this._suppressEmboss)
203             return;
204         generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
205     }
206 };
207
208 WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;