Changeset 194879 in webkit
- Timestamp:
- Jan 11, 2016 5:40:24 PM (8 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 12 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r194878 r194879 1 2016-01-11 Devin Rousso <dcrousso+webkit@gmail.com> 2 3 Web Inspector: Storage tab navigation bar should fit on a single line 4 https://bugs.webkit.org/show_bug.cgi?id=152473 5 6 Reviewed by Timothy Hatcher. 7 8 The wrapping of the navigation bar on the Storage tab was caused by the 9 fact that Sidebar.js used a minimum width of 200px, regardless of the 10 content within the sidebar (unless it had a NavigationBar). Logic has 11 been added that causes the sidebar to use the selected panel's own 12 minimum width calculation if it is greater than 200px. 13 14 * UserInterface/Views/DebuggerSidebarPanel.js: 15 (WebInspector.DebuggerSidebarPanel.prototype.get minimumWidth): 16 17 * UserInterface/Views/MultipleScopeBarItem.js: 18 (WebInspector.MultipleScopeBarItem.prototype.set selectedScopeBarItem): 19 (WebInspector.MultipleScopeBarItem.prototype.displaySelectedItem): 20 Sets the displayed text to the currently selected item. 21 22 (WebInspector.MultipleScopeBarItem.prototype.displayWidestItem): 23 Sets the displayed text to the widest (pixel wise) item in the select element. 24 25 * UserInterface/Views/NavigationBar.js: 26 (WebInspector.NavigationBar.prototype._calculateMinimumWidth): 27 Now uses NavigationItem.prototype.get minimumWidth. 28 29 * UserInterface/Views/NavitationItem.js: 30 (WebInspector.NavitationItem.prototype.get minimumWidth): 31 Returns the element's realOffsetWidth. 32 33 * UserInterface/Views/NetworkSidebarPanel.js: 34 (WebInspector.NetworkSidebarPanel.prototype.get minimumWidth): 35 36 * UserInterface/Views/ResourceSidebarPanel.js: 37 (WebInspector.ResourceSidebarPanel.prototype.get minimumWidth): 38 39 * UserInterface/Views/ScopeBar.js: 40 (WebInspector.ScopeBar): 41 (WebInspector.ScopeBar.prototype.get minimumWidth): 42 43 * UserInterface/Views/Sidebar.js: 44 (WebInspector.Sidebar.prototype.set selectedSidebarPanel): 45 (WebInspector.Sidebar.prototype.get minimumWidth): 46 (WebInspector.Sidebar.prototype.set width): 47 (WebInspector.Sidebar.prototype.set collapsed): 48 (WebInspector.Sidebar.prototype._recalculateWidth): 49 Whenever the sidebar changes (e.g. tab change, sidebar becomes 50 visible/hidden, etc.), a width recalculation is necessary to ensure 51 that the navigation bar never wraps. 52 53 * UserInterface/Views/SidebarPanel.js: 54 (WebInspector.SidebarPanel.prototype.get minimumWidth): 55 56 * UserInterface/Views/StorageSidebarPanel.js: 57 (WebInspector.StorageSidebarPanel.prototype.get minimumWidth): 58 59 * UserInterface/Views/TimelineSidebarPanel.js: 60 (WebInspector.TimelineSidebarPanel.prototype.get minimumWidth): 61 1 62 2016-01-11 Devin Rousso <dcrousso+webkit@gmail.com> 2 63 -
trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
r194460 r194879 165 165 // Public 166 166 167 get minimumWidth() 168 { 169 return this._navigationBar.minimumWidth; 170 } 171 167 172 closed() 168 173 { -
trunk/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js
r191693 r194879 134 134 135 135 if (this._selectedScopeBarItem) { 136 this. _titleElement.textContent = this._selectedScopeBarItem.label;136 this.displaySelectedItem(); 137 137 this._selectedScopeBarItem.selected = true; 138 138 } … … 142 142 143 143 this._ignoreItemSelectedEvent = false; 144 } 145 146 displaySelectedItem() 147 { 148 this._titleElement.textContent = this._selectedScopeBarItem.label; 149 } 150 151 displayWidestItem() 152 { 153 let widestLabel = null; 154 let widestSize = 0; 155 for (let option of Array.from(this._selectElement.options)) { 156 this._titleElement.textContent = option.label; 157 if (this._titleElement.realOffsetWidth > widestSize) { 158 widestSize = this._titleElement.realOffsetWidth; 159 widestLabel = option.label; 160 } 161 } 162 this._titleElement.textContent = widestLabel; 144 163 } 145 164 -
trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
r191976 r194879 362 362 this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName); 363 363 364 vartotalItemWidth = 0;365 for ( var i = 0; i < this._navigationItems.length; ++i) {364 let totalItemWidth = 0; 365 for (let item of this._navigationItems) { 366 366 // Skip flexible space items since they can take up no space at the minimum width. 367 if ( this._navigationItems[i]instanceof WebInspector.FlexibleSpaceNavigationItem)367 if (item instanceof WebInspector.FlexibleSpaceNavigationItem) 368 368 continue; 369 totalItemWidth += this._navigationItems[i].element.realOffsetWidth; 369 370 totalItemWidth += item.minimumWidth; 370 371 } 371 372 -
trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js
r191976 r194879 61 61 } 62 62 63 get minimumWidth() 64 { 65 return this._element.realOffsetWidth; 66 } 67 63 68 updateLayout(expandOnly) 64 69 { -
trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
r192327 r194879 72 72 // Public 73 73 74 get minimumWidth() 75 { 76 return this._navigationBar.minimumWidth; 77 } 78 74 79 closed() 75 80 { -
trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
r194311 r194879 76 76 // Public 77 77 78 get minimumWidth() 79 { 80 return this._navigationBar.minimumWidth; 81 } 82 78 83 closed() 79 84 { -
trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js
r186536 r194879 36 36 this._shouldGroupNonExclusiveItems = shouldGroupNonExclusiveItems || false; 37 37 38 this._minimumWidth = 0; 39 38 40 this._populate(); 39 41 } 40 42 41 43 // Public 44 45 get minimumWidth() 46 { 47 if (!this._minimumWidth) { 48 // If a "display: flex;" element is too small for its contents and 49 // has "flex-wrap: wrap;" set as well, this will cause the contents 50 // to wrap (potentially overflowing), thus preventing a proper 51 // measurement of the width of the element. Removing the "flex-wrap" 52 // property will ensure that the contents are rendered on one line. 53 this.element.style.flexWrap = "initial !important"; 54 55 if (this._multipleItem) 56 this._multipleItem.displayWidestItem(); 57 58 this._minimumWidth = this.element.realOffsetWidth; 59 this.element.style.flexWrap = null; 60 61 if (this._multipleItem) 62 this._multipleItem.displaySelectedItem(); 63 } 64 return this._minimumWidth; 65 } 42 66 43 67 get defaultItem() -
trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js
r192612 r194879 148 148 this._selectedSidebarPanel.shown(); 149 149 this._selectedSidebarPanel.visibilityDidChange(); 150 this._recalculateWidth(); 150 151 } 151 152 } … … 158 159 if (this._navigationBar) 159 160 return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth); 161 if (this._selectedSidebarPanel) 162 return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._selectedSidebarPanel.minimumWidth); 160 163 return WebInspector.Sidebar.AbsoluteMinimumWidth; 161 164 } … … 178 181 return; 179 182 180 newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth)); 181 182 this.element.style.width = newWidth + "px"; 183 184 if (!this.collapsed && this._navigationBar) 185 this._navigationBar.needsLayout(); 186 187 if (!this.collapsed && this._selectedSidebarPanel) 188 this._selectedSidebarPanel.widthDidChange(); 189 190 this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange); 183 this._recalculateWidth(newWidth); 191 184 } 192 185 … … 214 207 215 208 this._selectedSidebarPanel.visibilityDidChange(); 216 217 209 this._selectedSidebarPanel.widthDidChange(); 210 this._recalculateWidth(); 218 211 } 219 212 … … 272 265 // Private 273 266 267 _recalculateWidth(newWidth = this.width) 268 { 269 // Need to add 1 because of the 1px border-right. 270 newWidth = Number.constrain(newWidth, this.minimumWidth + 1, this.maximumWidth); 271 this.element.style.width = Math.ceil(newWidth) + "px"; 272 273 if (!this.collapsed && this._navigationBar) 274 this._navigationBar.needsLayout(); 275 276 if (!this.collapsed && this._selectedSidebarPanel) 277 this._selectedSidebarPanel.widthDidChange(); 278 279 this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange); 280 } 281 274 282 _navigationItemSelected(event) 275 283 { -
trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js
r194116 r194879 82 82 } 83 83 84 get minimumWidth() 85 { 86 // Implemented by subclasses. 87 return 0; 88 } 89 84 90 show() 85 91 { -
trunk/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js
r192936 r194879 107 107 // Public 108 108 109 get minimumWidth() 110 { 111 return this._navigationBar.minimumWidth; 112 } 113 109 114 showDefaultContentView() 110 115 { -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
r194460 r194879 219 219 // Public 220 220 221 get minimumWidth() 222 { 223 if (this._viewModeNavigationBar) 224 return Math.max(this._replayNavigationBar.minimumWidth, this._viewModeNavigationBar.minimumWidth); 225 return this._replayNavigationBar.minimumWidth; 226 } 227 221 228 shown() 222 229 {
Note: See TracChangeset
for help on using the changeset viewer.