ecfc1c0663ce4a3c9e0fc62590bc99a710a8982e
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / HierarchicalPathNavigationItem.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 WI.HierarchicalPathNavigationItem = class HierarchicalPathNavigationItem extends WI.NavigationItem
27 {
28     constructor(identifier, components)
29     {
30         super(identifier);
31
32         this._collapsedComponent = null;
33         this._needsUpdate = false;
34
35         this.components = components;
36     }
37
38     // Public
39
40     get components()
41     {
42         return this._components;
43     }
44
45     set components(newComponents)
46     {
47         if (!newComponents)
48             newComponents = [];
49
50         let componentsEqual = function(a, b) {
51             let getRepresentedObjects = (component) => component.representedObject;
52             let representedObjectsA = a.map(getRepresentedObjects);
53             let representedObjectsB = b.map(getRepresentedObjects);
54             if (!Array.shallowEqual(representedObjectsA, representedObjectsB))
55                 return false;
56
57             let getExtraComparisonData = (component) => component.comparisonData;
58             let extraComparisonDataA = a.map(getExtraComparisonData);
59             let extraComparisonDataB = b.map(getExtraComparisonData);
60             return Array.shallowEqual(extraComparisonDataA, extraComparisonDataB);
61         };
62
63         if (this._components && componentsEqual(this._components, newComponents))
64             return;
65
66         if (this._components) {
67             for (let component of this._components)
68                 component.removeEventListener(WI.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
69         }
70
71         this._components = newComponents.slice(0);
72
73         for (let component of this._components)
74             component.addEventListener(WI.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
75
76         // Wait until layout to update the DOM.
77         this._needsUpdate = true;
78
79         // Update layout for the so other items can adjust to the extra space (or lack thereof) too.
80         if (this.parentNavigationBar)
81             this.parentNavigationBar.needsLayout();
82     }
83
84     get lastComponent()
85     {
86         return this._components.lastValue || null;
87     }
88
89     get alwaysShowLastPathComponentSeparator()
90     {
91         return this.element.classList.contains(WI.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
92     }
93
94     set alwaysShowLastPathComponentSeparator(flag)
95     {
96         if (flag)
97             this.element.classList.add(WI.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
98         else
99             this.element.classList.remove(WI.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
100     }
101
102     updateLayout(expandOnly)
103     {
104         this._updateComponentsIfNeeded();
105
106         super.updateLayout(expandOnly);
107
108         var navigationBar = this.parentNavigationBar;
109         if (!navigationBar)
110             return;
111
112         if (this._collapsedComponent) {
113             this.element.removeChild(this._collapsedComponent.element);
114             this._collapsedComponent = null;
115         }
116
117         // Expand our components to full width to test if the items can fit at full width.
118         for (var i = 0; i < this._components.length; ++i) {
119             this._components[i].hidden = false;
120             this._components[i].forcedWidth = null;
121         }
122
123         if (expandOnly)
124             return;
125
126         if (navigationBar.sizesToFit)
127             return;
128
129         // Iterate over all the other navigation items in the bar and calculate their width.
130         var totalOtherItemsWidth = 0;
131         for (var i = 0; i < navigationBar.navigationItems.length; ++i) {
132             // Skip ourself.
133             if (navigationBar.navigationItems[i] === this)
134                 continue;
135
136             // Skip flexible space items since they can take up no space at the minimum width.
137             if (navigationBar.navigationItems[i] instanceof WI.FlexibleSpaceNavigationItem)
138                 continue;
139
140             totalOtherItemsWidth += navigationBar.navigationItems[i].element.realOffsetWidth;
141         }
142
143         // Calculate the width for all the components.
144         var thisItemWidth = 0;
145         var componentWidths = [];
146         for (var i = 0; i < this._components.length; ++i) {
147             var componentWidth = this._components[i].element.realOffsetWidth;
148             componentWidths.push(componentWidth);
149             thisItemWidth += componentWidth;
150         }
151
152         // If all our components fit with the other navigation items in the width of the bar,
153         // then we don't need to collapse any components.
154         var barWidth = navigationBar.element.realOffsetWidth;
155         if (totalOtherItemsWidth + thisItemWidth <= barWidth)
156             return;
157
158         // Calculate the width we need to remove from our components, then iterate over them
159         // and force their width to be smaller.
160         var widthToRemove = totalOtherItemsWidth + thisItemWidth - barWidth;
161         for (var i = 0; i < this._components.length; ++i) {
162             var componentWidth = componentWidths[i];
163
164             // Try to take the whole width we need to remove from each component.
165             var forcedWidth = componentWidth - widthToRemove;
166             this._components[i].forcedWidth = forcedWidth;
167
168             // Since components have a minimum width, we need to see how much was actually
169             // removed and subtract that from what remans to be removed.
170             componentWidths[i] = Math.max(this._components[i].minimumWidth, forcedWidth);
171             widthToRemove -= componentWidth - componentWidths[i];
172
173             // If there is nothing else to remove, then we can stop.
174             if (widthToRemove <= 0)
175                 break;
176         }
177
178         // If there is nothing else to remove, then we can stop.
179         if (widthToRemove <= 0)
180             return;
181
182         // If there are 3 or fewer components, then we can stop. Collapsing the middle of 3 components
183         // does not save more than a few pixels over just the icon, so it isn't worth it unless there
184         // are 4 or more components.
185         if (this._components.length <= 3)
186             return;
187
188         // We want to collapse the middle components, so find the nearest middle index.
189         var middle = this._components.length >> 1;
190         var distance = -1;
191         var i = middle;
192
193         // Create a component that will represent the hidden components with a ellipse as the display name.
194         this._collapsedComponent = new WI.HierarchicalPathComponent(ellipsis, []);
195         this._collapsedComponent.collapsed = true;
196
197         // Insert it in the middle, it doesn't matter exactly where since the elements around it will be hidden soon.
198         this.element.insertBefore(this._collapsedComponent.element, this._components[middle].element);
199
200         // Add the width of the collapsed component to the width we need to remove.
201         widthToRemove += this._collapsedComponent.minimumWidth;
202
203         var hiddenDisplayNames = [];
204
205         // Loop through the components starting at the middle and fanning out in each direction.
206         while (i >= 0 && i <= this._components.length - 1) {
207             // Only hide components in the middle and never the ends.
208             if (i > 0 && i < this._components.length - 1) {
209                 var component = this._components[i];
210                 component.hidden = true;
211
212                 // Remember the displayName so it can be put in the tool tip of the collapsed component.
213                 if (distance > 0)
214                     hiddenDisplayNames.unshift(component.displayName);
215                 else
216                     hiddenDisplayNames.push(component.displayName);
217
218                 // Fully subtract the hidden component's width.
219                 widthToRemove -= componentWidths[i];
220
221                 // If there is nothing else to remove, then we can stop.
222                 if (widthToRemove <= 0)
223                     break;
224             }
225
226             // Calculate the next index.
227             i = middle + distance;
228
229             // Increment the distance when it is in the positive direction.
230             if (distance > 0)
231                 ++distance;
232
233             // Flip the direction of the distance.
234             distance *= -1;
235         }
236
237         // Set the tool tip of the collapsed component.
238         this._collapsedComponent.element.title = hiddenDisplayNames.join("\n");
239     }
240
241     // Protected
242
243     get additionalClassNames()
244     {
245         return ["hierarchical-path"];
246     }
247
248     // Private
249
250     _updateComponentsIfNeeded()
251     {
252         if (!this._needsUpdate)
253             return;
254
255         this._needsUpdate = false;
256
257         this.element.removeChildren();
258         this._collapsedComponent = null;
259
260         for (let component of this._components)
261             this.element.appendChild(component.element);
262     }
263
264     _siblingPathComponentWasSelected(event)
265     {
266         this.dispatchEventToListeners(WI.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, event.data);
267     }
268 };
269
270 WI.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
271
272 WI.HierarchicalPathNavigationItem.Event = {
273     PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
274 };