Changeset 194116 in webkit
- Timestamp:
- Dec 15, 2015 2:33:55 PM (8 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 14 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r194083 r194116 1 2015-12-15 Matt Baker <mattbaker@apple.com> 2 3 Web Inspector: Convert Sidebar classes to use View 4 https://bugs.webkit.org/show_bug.cgi?id=152274 5 6 Reviewed by Brian Burg. 7 8 Updated Sidebar and SidebarPanel to inherit from View. Mostly mechanical changes. 9 Once the DetailsSection class family inherits from View (https://webkit.org/b/152269), 10 directly modifying a sidebar's 'contentView' element will rarely be necessary. 11 12 * UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js: 13 (WebInspector.ApplicationCacheDetailsSidebarPanel): 14 15 * UserInterface/Views/CSSStyleDetailsSidebarPanel.js: 16 (WebInspector.CSSStyleDetailsSidebarPanel): 17 (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh): 18 (WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels): 19 Add/remove panels as subviews of the sidebar. 20 (WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange): 21 22 * UserInterface/Views/DOMNodeDetailsSidebarPanel.js: 23 (WebInspector.DOMNodeDetailsSidebarPanel): 24 25 * UserInterface/Views/DebuggerSidebarPanel.js: 26 (WebInspector.DebuggerSidebarPanel): 27 (WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause): 28 29 * UserInterface/Views/LayerTreeDetailsSidebarPanel.js: 30 (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection): 31 (WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection): 32 33 * UserInterface/Views/NavigationSidebarPanel.js: 34 (WebInspector.NavigationSidebarPanel): 35 (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline): 36 (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility): 37 38 * UserInterface/Views/ProbeDetailsSidebarPanel.js: 39 (WebInspector.ProbeDetailsSidebarPanel.prototype.set inspectedProbeSets): 40 41 * UserInterface/Views/ResourceDetailsSidebarPanel.js: 42 (WebInspector.ResourceDetailsSidebarPanel): 43 (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL): 44 (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection): 45 (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection): 46 47 * UserInterface/Views/ScopeChainDetailsSidebarPanel.js: 48 (WebInspector.ScopeChainDetailsSidebarPanel): 49 (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.): 50 (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh): 51 52 * UserInterface/Views/SidebarPanel.js: 53 Inherit from View. 54 (WebInspector.SidebarPanel): 55 Replace the content element (the portion of the view excluding navigation 56 bars, filter bars, etc.) with a View object. A sidebar's content can be a mixture 57 of unwrapped DOM elements and View objects. For now, the content view's element 58 will be mutated directly, but once the DetailsSection class family inherits from 59 the View class the handling of details sections will be simplified. 60 (WebInspector.SidebarPanel.prototype.get contentView): 61 (WebInspector.SidebarPanel.prototype.shown): 62 (WebInspector.SidebarPanel.prototype.hidden): 63 (WebInspector.SidebarPanel.prototype.get contentElement): Deleted. 64 Replaced by WebInspector.SidebarPanel.prototype.get contentView. 65 66 * UserInterface/Views/StyleDetailsPanel.js: 67 Inherit from View. 68 (WebInspector.StyleDetailsPanel): 69 (WebInspector.StyleDetailsPanel.prototype.get element): Deleted. 70 Defer to View.element getter. 71 72 * UserInterface/Views/TimelineSidebarPanel.js: 73 (WebInspector.TimelineSidebarPanel.prototype._updateTimelineOverviewHeight): 74 75 * UserInterface/Views/VisualStyleDetailsPanel.js: 76 (WebInspector.VisualStyleDetailsPanel): 77 (WebInspector.VisualStyleDetailsPanel.prototype._updateSections): 78 1 79 2015-12-14 Joseph Pecoraro <pecoraro@apple.com> 2 80 -
trunk/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js
r183327 r194116 48 48 this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]); 49 49 50 this.content Element.appendChild(this._locationSection.element);51 this.content Element.appendChild(this._statusSection.element);50 this.contentView.element.appendChild(this._locationSection.element); 51 this.contentView.element.appendChild(this._statusSection.element); 52 52 53 53 WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this); -
trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
r189002 r194116 64 64 }, this); 65 65 66 this.content Element.appendChild(this._forcedPseudoClassContainer);66 this.contentView.element.appendChild(this._forcedPseudoClassContainer); 67 67 } 68 68 … … 121 121 return; 122 122 123 this.content Element.scrollTop = this._initialScrollOffset;123 this.contentView.element.scrollTop = this._initialScrollOffset; 124 124 125 125 for (var panel of this._panels) { … … 228 228 if (this._selectedPanel) { 229 229 this._selectedPanel.hidden(); 230 this._selectedPanel.element._savedScrollTop = this.content Element.scrollTop;231 this. _selectedPanel.element.remove();230 this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop; 231 this.contentView.removeSubview(this._selectedPanel); 232 232 } 233 233 234 234 this._selectedPanel = selectedPanel; 235 236 if (this._selectedPanel) {237 this.contentElement.appendChild(this._selectedPanel.element); 238 239 if (typeof this._selectedPanel.element._savedScrollTop === "number") 240 this.contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;241 else242 this.contentElement.scrollTop = this._initialScrollOffset;243 244 var hasFilter = typeof this._selectedPanel.filterDidChange === "function"; 245 this.contentElement.classList.toggle("has-filter-bar", hasFilter);246 if (this._filterBar)247 this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());248 249 this.contentElement.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function"); 250 this._selectedPanel.shown();251 252 this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier; 253 }235 if (!this._selectedPanel) 236 return; 237 238 this.contentView.addSubview(this._selectedPanel); 239 240 if (typeof this._selectedPanel.element._savedScrollTop === "number") 241 this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop; 242 else 243 this.contentView.element.scrollTop = this._initialScrollOffset; 244 245 let hasFilter = typeof this._selectedPanel.filterDidChange === "function"; 246 this.contentView.element.classList.toggle("has-filter-bar", hasFilter); 247 if (this._filterBar) 248 this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters()); 249 250 this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function"); 251 this._selectedPanel.shown(); 252 253 this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier; 254 254 } 255 255 … … 287 287 _filterDidChange() 288 288 { 289 this.content Element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());289 this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters()); 290 290 291 291 this._selectedPanel.filterDidChange(this._filterBar); -
trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
r189642 r194116 56 56 var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]); 57 57 58 this.content Element.appendChild(identitySection.element);59 this.content Element.appendChild(attributesSection.element);60 this.content Element.appendChild(propertiesSection.element);61 this.content Element.appendChild(eventListenersSection.element);58 this.contentView.element.appendChild(identitySection.element); 59 this.contentView.element.appendChild(attributesSection.element); 60 this.contentView.element.appendChild(propertiesSection.element); 61 this.contentView.element.appendChild(eventListenersSection.element); 62 62 63 63 if (this._accessibilitySupported()) { … … 90 90 var accessibilitySection = new WebInspector.DetailsSection("dom-node-accessibility", WebInspector.UIString("Accessibility"), [this._accessibilityGroup]); 91 91 92 this.content Element.appendChild(accessibilitySection.element);93 } 94 92 this.contentView.element.appendChild(accessibilitySection.element); 93 } 94 } 95 95 96 96 // Public -
trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
r193771 r194116 130 130 var breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]); 131 131 var breakpointsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Scripts"), [breakpointsGroup]); 132 this.content Element.appendChild(breakpointsSection.element);132 this.contentView.element.appendChild(breakpointsSection.element); 133 133 134 134 this._callStackContentTreeOutline = this.createContentTreeOutline(true, true); … … 249 249 _debuggerDidPause(event) 250 250 { 251 this.content Element.insertBefore(this._callStackSection.element, this.contentElement.firstChild);251 this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild); 252 252 if (this._updatePauseReason()) 253 this.content Element.insertBefore(this._pauseReasonSection.element, this.contentElement.firstChild);253 this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild); 254 254 255 255 this._debuggerPauseResumeButtonItem.enabled = true; -
trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js
r191612 r194116 118 118 this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]); 119 119 120 this.content Element.appendChild(this._layerInfoSection.element);120 this.contentView.element.appendChild(this._layerInfoSection.element); 121 121 } 122 122 … … 155 155 var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true); 156 156 157 var element = this.contentElement.appendChild(section.element); 158 element.classList.add(section.identifier); 157 this.contentView.element.appendChild(section.element); 159 158 } 160 159 -
trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
r193791 r194116 34 34 this._visibleContentTreeOutlines = new Set; 35 35 36 this.content Element.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));36 this.contentView.element.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this)); 37 37 38 38 this._contentTreeOutline = this.createContentTreeOutline(true); … … 163 163 contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName); 164 164 165 this.content Element.appendChild(contentTreeOutline.element);165 this.contentView.element.appendChild(contentTreeOutline.element); 166 166 167 167 if (!suppressFiltering) { … … 480 480 this._updateContentOverflowShadowVisibilityIdentifier = undefined; 481 481 482 var scrollHeight = this.contentElement.scrollHeight;483 var offsetHeight = this.contentElement.offsetHeight;482 let scrollHeight = this.contentView.element.scrollHeight; 483 let offsetHeight = this.contentView.element.offsetHeight; 484 484 485 485 if (scrollHeight < offsetHeight) { … … 490 490 } 491 491 492 varedgeThreshold = 1;493 var scrollTop = this.contentElement.scrollTop;494 495 vartopCoverage = Math.min(scrollTop, edgeThreshold);496 varbottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));492 let edgeThreshold = 1; 493 let scrollTop = this.contentView.element.scrollTop; 494 495 let topCoverage = Math.min(scrollTop, edgeThreshold); 496 let bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold)); 497 497 498 498 if (this._topOverflowShadowElement) -
trunk/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js
r183327 r194116 51 51 set inspectedProbeSets(newProbeSets) 52 52 { 53 for ( varprobeSet of this._inspectedProbeSets) {54 varremovedSection = this._probeSetSections.get(probeSet);55 this.contentElement.removeChild(removedSection.element);53 for (let probeSet of this._inspectedProbeSets) { 54 let removedSection = this._probeSetSections.get(probeSet); 55 removedSection.element.remove(); 56 56 } 57 57 58 58 this._inspectedProbeSets = newProbeSets; 59 59 60 for ( varprobeSet of newProbeSets) {61 varshownSection = this._probeSetSections.get(probeSet);62 this.content Element.appendChild(shownSection.element);60 for (let probeSet of newProbeSets) { 61 let shownSection = this._probeSetSections.get(probeSet); 62 this.contentView.element.appendChild(shownSection.element); 63 63 } 64 64 } -
trunk/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
r187402 r194116 103 103 this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])]; 104 104 105 this.content Element.appendChild(this._typeSection.element);106 this.content Element.appendChild(this._locationSection.element);107 this.content Element.appendChild(this._requestAndResponseSection.element);108 this.content Element.appendChild(this._requestHeadersSection.element);109 this.content Element.appendChild(this._responseHeadersSection.element);105 this.contentView.element.appendChild(this._typeSection.element); 106 this.contentView.element.appendChild(this._locationSection.element); 107 this.contentView.element.appendChild(this._requestAndResponseSection.element); 108 this.contentView.element.appendChild(this._requestHeadersSection.element); 109 this.contentView.element.appendChild(this._responseHeadersSection.element); 110 110 } 111 111 … … 226 226 if (urlComponents.queryString) { 227 227 // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section. 228 this.content Element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);228 this.contentView.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling); 229 229 230 230 this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true)); … … 383 383 var imageSectionElement = this._imageSizeSection.element; 384 384 if (imageSectionElement.parentNode) 385 this.content Element.removeChild(imageSectionElement);385 this.contentView.element.removeChild(imageSectionElement); 386 386 return; 387 387 } 388 388 389 389 // Ensure the section is displayed, right before the "Location" section. 390 this.content Element.insertBefore(this._imageSizeSection.element, this._locationSection.element);390 this.contentView.element.insertBefore(this._imageSizeSection.element, this._locationSection.element); 391 391 392 392 // Get the metrics for this resource and fill in the metrics rows with that information. … … 417 417 418 418 // Ensure the section is displayed, right before the "Request Headers" section. 419 this.content Element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);419 this.contentView.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element); 420 420 421 421 var requestDataContentType = resource.requestDataContentType || ""; -
trunk/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js
r193425 r194116 55 55 this._watchExpressionsSectionGroup = new WebInspector.DetailsSectionGroup; 56 56 this._watchExpressionsSection = new WebInspector.DetailsSection("watch-expressions", WebInspector.UIString("Watch Expressions"), [this._watchExpressionsSectionGroup], this._watchExpressionOptionsElement); 57 this.content Element.appendChild(this._watchExpressionsSection.element);57 this.contentView.element.appendChild(this._watchExpressionsSection.element); 58 58 59 59 this._updateWatchExpressionsNavigationBar(); … … 126 126 } 127 127 128 this.content Element.removeChildren();129 this.content Element.appendChild(this._watchExpressionsSection.element);128 this.contentView.element.removeChildren(); 129 this.contentView.element.appendChild(this._watchExpressionsSection.element); 130 130 131 131 // Bail if the call frame changed while we were waiting for the async response. … … 137 137 138 138 for (let callFrameSection of callFrameSections) 139 this.content Element.appendChild(callFrameSection.element);139 this.contentView.element.appendChild(callFrameSection.element); 140 140 } 141 141 -
trunk/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js
r192327 r194116 41 41 this.element.setAttribute("aria-label", label || displayName); 42 42 43 this._content Element = document.createElement("div");44 this._content Element.className = "content";45 this. element.appendChild(this._contentElement);43 this._contentView = new WebInspector.View; 44 this._contentView.element.classList.add("content"); 45 this.addSubview(this._contentView); 46 46 } 47 47 … … 53 53 } 54 54 55 get content Element()55 get contentView() 56 56 { 57 return this._content Element;57 return this._contentView; 58 58 } 59 59 … … 129 129 shown() 130 130 { 131 this._content Element.scrollTop = this._savedScrollPosition;131 this._contentView.element.scrollTop = this._savedScrollPosition; 132 132 133 133 // Implemented by subclasses. … … 136 136 hidden() 137 137 { 138 this._savedScrollPosition = this._content Element.scrollTop;138 this._savedScrollPosition = this._contentView.element.scrollTop; 139 139 140 140 // Implemented by subclasses. -
trunk/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js
r187895 r194116 24 24 */ 25 25 26 WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector. Object26 WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.View 27 27 { 28 28 constructor(delegate, className, identifier, label) … … 32 32 this._delegate = delegate || null; 33 33 34 this._element = document.createElement("div");35 this._element.className = className;36 37 34 // Add this offset-sections class name so the sticky headers don't overlap the navigation bar. 38 this.element.classList.add( "offset-sections");35 this.element.classList.add(className, "offset-sections"); 39 36 40 37 this._navigationInfo = {identifier, label}; … … 45 42 46 43 // Public 47 48 get element()49 {50 return this._element;51 }52 44 53 45 get navigationInfo() -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
r194009 r194116 874 874 875 875 this._timelineEventsTitleBarContainer.style.top = (overviewHeight + eventTitleBarOffset) + "px"; 876 this.content Element.style.top = (overviewHeight + contentElementOffset) + "px";876 this.contentView.element.style.top = (overviewHeight + contentElementOffset) + "px"; 877 877 } 878 878 -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
r192705 r194116 61 61 this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this); 62 62 this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.StyleTextChanged, this._prepareForChange, this); 63 this. _element.appendChild(this._selectorSection.element);63 this.element.appendChild(this._selectorSection.element); 64 64 65 65 // Layout Section … … 74 74 75 75 this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section, this._groups.alignment.section]); 76 this. _element.appendChild(this._sections.layout.element);76 this.element.appendChild(this._sections.layout.element); 77 77 78 78 // Text Section … … 83 83 84 84 this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.textStyle.section, this._groups.font.section, this._groups.textSpacing.section, this._groups.textShadow.section]); 85 this. _element.appendChild(this._sections.text.element);85 this.element.appendChild(this._sections.text.element); 86 86 87 87 // Background Section … … 92 92 93 93 this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section]); 94 this. _element.appendChild(this._sections.background.element);94 this.element.appendChild(this._sections.background.element); 95 95 96 96 // Animation Section … … 98 98 99 99 this._sections.animation = new WebInspector.DetailsSection("animation", WebInspector.UIString("Animation"), [this._groups.transition.section]); 100 this. _element.appendChild(this._sections.animation.element);100 this.element.appendChild(this._sections.animation.element); 101 101 } 102 102 … … 156 156 157 157 let disabled = this._currentStyle[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol]; 158 this. _element.classList.toggle("disabled", !!disabled);158 this.element.classList.toggle("disabled", !!disabled); 159 159 if (disabled) 160 160 return;
Note: See TracChangeset
for help on using the changeset viewer.