Web Inspector: start adding UI components to the compilation process.
[WebKit-https.git] / Source / WebCore / inspector / front-end / Section.js
1 /*
2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Google Inc.  All rights reserved.
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  *
9  * 1.  Redistributions of source code must retain the above copyright
10  *     notice, this list of conditions and the following disclaimer.
11  * 2.  Redistributions in binary form must reproduce the above copyright
12  *     notice, this list of conditions and the following disclaimer in the
13  *     documentation and/or other materials provided with the distribution.
14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
15  *     its contributors may be used to endorse or promote products derived
16  *     from this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28  */
29
30 /**
31  * @constructor
32  */
33 WebInspector.Section = function(title, subtitle)
34 {
35     this.element = document.createElement("div");
36     this.element.className = "section";
37     this.element._section = this;
38
39     this.headerElement = document.createElement("div");
40     this.headerElement.className = "header";
41
42     this.titleElement = document.createElement("div");
43     this.titleElement.className = "title";
44
45     this.subtitleElement = document.createElement("div");
46     this.subtitleElement.className = "subtitle";
47
48     this.headerElement.appendChild(this.subtitleElement);
49     this.headerElement.appendChild(this.titleElement);
50
51     this.headerElement.addEventListener("click", this.handleClick.bind(this), false);
52     this.element.appendChild(this.headerElement);
53
54     this.title = title;
55     this.subtitle = subtitle;
56     this._expanded = false;
57 }
58
59 WebInspector.Section.prototype = {
60     get title()
61     {
62         return this._title;
63     },
64
65     set title(x)
66     {
67         if (this._title === x)
68             return;
69         this._title = x;
70
71         if (x instanceof Node) {
72             this.titleElement.removeChildren();
73             this.titleElement.appendChild(x);
74         } else
75           this.titleElement.textContent = x;
76     },
77
78     get subtitle()
79     {
80         return this._subtitle;
81     },
82
83     set subtitle(x)
84     {
85         if (this._subtitle === x)
86             return;
87         this._subtitle = x;
88         this.subtitleElement.textContent = x;
89     },
90
91     get subtitleAsTextForTest()
92     {
93         var result = this.subtitleElement.textContent;
94         var child = this.subtitleElement.querySelector("[data-uncopyable]");
95         if (child) {
96             var linkData = child.getAttribute("data-uncopyable");
97             if (linkData)
98                 result += linkData;
99         }
100         return result;
101     },
102
103     get expanded()
104     {
105         return this._expanded;
106     },
107
108     set expanded(x)
109     {
110         if (x)
111             this.expand();
112         else
113             this.collapse();
114     },
115
116     get populated()
117     {
118         return this._populated;
119     },
120
121     set populated(x)
122     {
123         this._populated = x;
124         if (!x && this._expanded) {
125             this.onpopulate();
126             this._populated = true;
127         }
128     },
129
130     onpopulate: function()
131     {
132         // Overriden by subclasses.
133     },
134
135     get firstSibling()
136     {
137         var parent = this.element.parentElement;
138         if (!parent)
139             return null;
140
141         var childElement = parent.firstChild;
142         while (childElement) {
143             if (childElement._section)
144                 return childElement._section;
145             childElement = childElement.nextSibling;
146         }
147
148         return null;
149     },
150
151     get lastSibling()
152     {
153         var parent = this.element.parentElement;
154         if (!parent)
155             return null;
156
157         var childElement = parent.lastChild;
158         while (childElement) {
159             if (childElement._section)
160                 return childElement._section;
161             childElement = childElement.previousSibling;
162         }
163
164         return null;
165     },
166
167     get nextSibling()
168     {
169         var curElement = this.element;
170         do {
171             curElement = curElement.nextSibling;
172         } while (curElement && !curElement._section);
173
174         return curElement ? curElement._section : null;
175     },
176
177     get previousSibling()
178     {
179         var curElement = this.element;
180         do {
181             curElement = curElement.previousSibling;
182         } while (curElement && !curElement._section);
183
184         return curElement ? curElement._section : null;
185     },
186
187     expand: function()
188     {
189         if (this._expanded)
190             return;
191         this._expanded = true;
192         this.element.addStyleClass("expanded");
193
194         if (!this._populated) {
195             this.onpopulate();
196             this._populated = true;
197         }
198     },
199
200     collapse: function()
201     {
202         if (!this._expanded)
203             return;
204         this._expanded = false;
205         this.element.removeStyleClass("expanded");
206     },
207
208     toggleExpanded: function()
209     {
210         this.expanded = !this.expanded;
211     },
212
213     handleClick: function(e)
214     {
215         this.toggleExpanded();
216         e.stopPropagation();
217     }
218 }