Skip to content
Permalink
Browse files
Web Inspector: Convert Sidebar classes to use View
https://bugs.webkit.org/show_bug.cgi?id=152274

Reviewed by Brian Burg.

Updated Sidebar and SidebarPanel to inherit from View. Mostly mechanical changes.
Once the DetailsSection class family inherits from View (https://webkit.org/b/152269),
directly modifying a sidebar's 'contentView' element will rarely be necessary.

* UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
(WebInspector.ApplicationCacheDetailsSidebarPanel):

* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
Add/remove panels as subviews of the sidebar.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange):

* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel):

* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause):

* UserInterface/Views/LayerTreeDetailsSidebarPanel.js:
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):

* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):

* UserInterface/Views/ProbeDetailsSidebarPanel.js:
(WebInspector.ProbeDetailsSidebarPanel.prototype.set inspectedProbeSets):

* UserInterface/Views/ResourceDetailsSidebarPanel.js:
(WebInspector.ResourceDetailsSidebarPanel):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):

* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):

* UserInterface/Views/SidebarPanel.js:
Inherit from View.
(WebInspector.SidebarPanel):
Replace the content element (the portion of the view excluding navigation
bars, filter bars, etc.) with a View object. A sidebar's content can be a mixture
of unwrapped DOM elements and View objects. For now, the content view's element
will be mutated directly, but once the DetailsSection class family inherits from
the View class the handling of details sections will be simplified.
(WebInspector.SidebarPanel.prototype.get contentView):
(WebInspector.SidebarPanel.prototype.shown):
(WebInspector.SidebarPanel.prototype.hidden):
(WebInspector.SidebarPanel.prototype.get contentElement): Deleted.
Replaced by WebInspector.SidebarPanel.prototype.get contentView.

* UserInterface/Views/StyleDetailsPanel.js:
Inherit from View.
(WebInspector.StyleDetailsPanel):
(WebInspector.StyleDetailsPanel.prototype.get element): Deleted.
Defer to View.element getter.

* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype._updateTimelineOverviewHeight):

* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype._updateSections):


Canonical link: https://commits.webkit.org/170421@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@194116 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
LuckyKobold committed Dec 15, 2015
1 parent 86f5f15 commit c7c56e569def79bf0d9ed080d261212fa95ced44
@@ -1,3 +1,81 @@
2015-12-15 Matt Baker <mattbaker@apple.com>

Web Inspector: Convert Sidebar classes to use View
https://bugs.webkit.org/show_bug.cgi?id=152274

Reviewed by Brian Burg.

Updated Sidebar and SidebarPanel to inherit from View. Mostly mechanical changes.
Once the DetailsSection class family inherits from View (https://webkit.org/b/152269),
directly modifying a sidebar's 'contentView' element will rarely be necessary.

* UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js:
(WebInspector.ApplicationCacheDetailsSidebarPanel):

* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._switchPanels):
Add/remove panels as subviews of the sidebar.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._filterDidChange):

* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:
(WebInspector.DOMNodeDetailsSidebarPanel):

* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause):

* UserInterface/Views/LayerTreeDetailsSidebarPanel.js:
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildLayerInfoSection):
(WebInspector.LayerTreeDetailsSidebarPanel.prototype._buildDataGridSection):

* UserInterface/Views/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
(WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):

* UserInterface/Views/ProbeDetailsSidebarPanel.js:
(WebInspector.ProbeDetailsSidebarPanel.prototype.set inspectedProbeSets):

* UserInterface/Views/ResourceDetailsSidebarPanel.js:
(WebInspector.ResourceDetailsSidebarPanel):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
(WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):

* UserInterface/Views/ScopeChainDetailsSidebarPanel.js:
(WebInspector.ScopeChainDetailsSidebarPanel):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.):
(WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh):

* UserInterface/Views/SidebarPanel.js:
Inherit from View.
(WebInspector.SidebarPanel):
Replace the content element (the portion of the view excluding navigation
bars, filter bars, etc.) with a View object. A sidebar's content can be a mixture
of unwrapped DOM elements and View objects. For now, the content view's element
will be mutated directly, but once the DetailsSection class family inherits from
the View class the handling of details sections will be simplified.
(WebInspector.SidebarPanel.prototype.get contentView):
(WebInspector.SidebarPanel.prototype.shown):
(WebInspector.SidebarPanel.prototype.hidden):
(WebInspector.SidebarPanel.prototype.get contentElement): Deleted.
Replaced by WebInspector.SidebarPanel.prototype.get contentView.

* UserInterface/Views/StyleDetailsPanel.js:
Inherit from View.
(WebInspector.StyleDetailsPanel):
(WebInspector.StyleDetailsPanel.prototype.get element): Deleted.
Defer to View.element getter.

* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype._updateTimelineOverviewHeight):

* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype._updateSections):

2015-12-14 Joseph Pecoraro <pecoraro@apple.com>

Web Inspector: Stack traces in console incorrectly show "(anonymous function)" for global code
@@ -47,8 +47,8 @@ WebInspector.ApplicationCacheDetailsSidebarPanel = class ApplicationCacheDetails

this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);

this.contentElement.appendChild(this._locationSection.element);
this.contentElement.appendChild(this._statusSection.element);
this.contentView.element.appendChild(this._locationSection.element);
this.contentView.element.appendChild(this._statusSection.element);

WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
@@ -63,7 +63,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
groupElement.appendChild(labelElement);
}, this);

this.contentElement.appendChild(this._forcedPseudoClassContainer);
this.contentView.element.appendChild(this._forcedPseudoClassContainer);
}

this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
@@ -120,7 +120,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext
if (!domNode)
return;

this.contentElement.scrollTop = this._initialScrollOffset;
this.contentView.element.scrollTop = this._initialScrollOffset;

for (var panel of this._panels) {
panel.element._savedScrollTop = undefined;
@@ -227,30 +227,30 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext

if (this._selectedPanel) {
this._selectedPanel.hidden();
this._selectedPanel.element._savedScrollTop = this.contentElement.scrollTop;
this._selectedPanel.element.remove();
this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop;
this.contentView.removeSubview(this._selectedPanel);
}

this._selectedPanel = selectedPanel;
if (!this._selectedPanel)
return;

if (this._selectedPanel) {
this.contentElement.appendChild(this._selectedPanel.element);
this.contentView.addSubview(this._selectedPanel);

if (typeof this._selectedPanel.element._savedScrollTop === "number")
this.contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
else
this.contentElement.scrollTop = this._initialScrollOffset;
if (typeof this._selectedPanel.element._savedScrollTop === "number")
this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop;
else
this.contentView.element.scrollTop = this._initialScrollOffset;

var hasFilter = typeof this._selectedPanel.filterDidChange === "function";
this.contentElement.classList.toggle("has-filter-bar", hasFilter);
if (this._filterBar)
this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
let hasFilter = typeof this._selectedPanel.filterDidChange === "function";
this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
if (this._filterBar)
this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());

this.contentElement.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
this._selectedPanel.shown();
this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
this._selectedPanel.shown();

this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
}
this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
}

_forcedPseudoClassCheckboxChanged(pseudoClass, event)
@@ -286,7 +286,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel ext

_filterDidChange()
{
this.contentElement.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());

this._selectedPanel.filterDidChange(this._filterBar);
}
@@ -55,10 +55,10 @@ WebInspector.DOMNodeDetailsSidebarPanel = class DOMNodeDetailsSidebarPanel exten
this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);

this.contentElement.appendChild(identitySection.element);
this.contentElement.appendChild(attributesSection.element);
this.contentElement.appendChild(propertiesSection.element);
this.contentElement.appendChild(eventListenersSection.element);
this.contentView.element.appendChild(identitySection.element);
this.contentView.element.appendChild(attributesSection.element);
this.contentView.element.appendChild(propertiesSection.element);
this.contentView.element.appendChild(eventListenersSection.element);

if (this._accessibilitySupported()) {
this._accessibilityEmptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Accessibility Information"));
@@ -89,9 +89,9 @@ WebInspector.DOMNodeDetailsSidebarPanel = class DOMNodeDetailsSidebarPanel exten
this._accessibilityGroup = new WebInspector.DetailsSectionGroup([this._accessibilityEmptyRow]);
var accessibilitySection = new WebInspector.DetailsSection("dom-node-accessibility", WebInspector.UIString("Accessibility"), [this._accessibilityGroup]);

this.contentElement.appendChild(accessibilitySection.element);
}
this.contentView.element.appendChild(accessibilitySection.element);
}
}

// Public

@@ -129,7 +129,7 @@ WebInspector.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WebInspec

var breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
var breakpointsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Scripts"), [breakpointsGroup]);
this.contentElement.appendChild(breakpointsSection.element);
this.contentView.element.appendChild(breakpointsSection.element);

this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
@@ -248,9 +248,9 @@ WebInspector.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WebInspec

_debuggerDidPause(event)
{
this.contentElement.insertBefore(this._callStackSection.element, this.contentElement.firstChild);
this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
if (this._updatePauseReason())
this.contentElement.insertBefore(this._pauseReasonSection.element, this.contentElement.firstChild);
this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);

this._debuggerPauseResumeButtonItem.enabled = true;
this._debuggerPauseResumeButtonItem.toggled = true;
@@ -117,7 +117,7 @@ WebInspector.LayerTreeDetailsSidebarPanel = class LayerTreeDetailsSidebarPanel e

this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);

this.contentElement.appendChild(this._layerInfoSection.element);
this.contentView.element.appendChild(this._layerInfoSection.element);
}

_buildDataGridSection()
@@ -154,8 +154,7 @@ WebInspector.LayerTreeDetailsSidebarPanel = class LayerTreeDetailsSidebarPanel e
var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);

var element = this.contentElement.appendChild(section.element);
element.classList.add(section.identifier);
this.contentView.element.appendChild(section.element);
}

_buildBottomBar()
@@ -33,7 +33,7 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn

this._visibleContentTreeOutlines = new Set;

this.contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
this.contentView.element.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));

this._contentTreeOutline = this.createContentTreeOutline(true);

@@ -162,7 +162,7 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
contentTreeOutline.hidden = !dontHideByDefault;
contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);

this.contentElement.appendChild(contentTreeOutline.element);
this.contentView.element.appendChild(contentTreeOutline.element);

if (!suppressFiltering) {
contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAddedOrChanged, this);
@@ -479,8 +479,8 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
{
this._updateContentOverflowShadowVisibilityIdentifier = undefined;

var scrollHeight = this.contentElement.scrollHeight;
var offsetHeight = this.contentElement.offsetHeight;
let scrollHeight = this.contentView.element.scrollHeight;
let offsetHeight = this.contentView.element.offsetHeight;

if (scrollHeight < offsetHeight) {
if (this._topOverflowShadowElement)
@@ -489,11 +489,11 @@ WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebIn
return;
}

var edgeThreshold = 1;
var scrollTop = this.contentElement.scrollTop;
let edgeThreshold = 1;
let scrollTop = this.contentView.element.scrollTop;

var topCoverage = Math.min(scrollTop, edgeThreshold);
var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
let topCoverage = Math.min(scrollTop, edgeThreshold);
let bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));

if (this._topOverflowShadowElement)
this._topOverflowShadowElement.style.opacity = (topCoverage / edgeThreshold).toFixed(1);
@@ -50,16 +50,16 @@ WebInspector.ProbeDetailsSidebarPanel = class ProbeDetailsSidebarPanel extends W

set inspectedProbeSets(newProbeSets)
{
for (var probeSet of this._inspectedProbeSets) {
var removedSection = this._probeSetSections.get(probeSet);
this.contentElement.removeChild(removedSection.element);
for (let probeSet of this._inspectedProbeSets) {
let removedSection = this._probeSetSections.get(probeSet);
removedSection.element.remove();
}

this._inspectedProbeSets = newProbeSets;

for (var probeSet of newProbeSets) {
var shownSection = this._probeSetSections.get(probeSet);
this.contentElement.appendChild(shownSection.element);
for (let probeSet of newProbeSets) {
let shownSection = this._probeSetSections.get(probeSet);
this.contentView.element.appendChild(shownSection.element);
}
}

@@ -102,11 +102,11 @@ WebInspector.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel ext
this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];

this.contentElement.appendChild(this._typeSection.element);
this.contentElement.appendChild(this._locationSection.element);
this.contentElement.appendChild(this._requestAndResponseSection.element);
this.contentElement.appendChild(this._requestHeadersSection.element);
this.contentElement.appendChild(this._responseHeadersSection.element);
this.contentView.element.appendChild(this._typeSection.element);
this.contentView.element.appendChild(this._locationSection.element);
this.contentView.element.appendChild(this._requestAndResponseSection.element);
this.contentView.element.appendChild(this._requestHeadersSection.element);
this.contentView.element.appendChild(this._responseHeadersSection.element);
}

// Public
@@ -225,7 +225,7 @@ WebInspector.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel ext

if (urlComponents.queryString) {
// Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
this.contentElement.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
this.contentView.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);

this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
} else {
@@ -382,12 +382,12 @@ WebInspector.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel ext
if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
var imageSectionElement = this._imageSizeSection.element;
if (imageSectionElement.parentNode)
this.contentElement.removeChild(imageSectionElement);
this.contentView.element.removeChild(imageSectionElement);
return;
}

// Ensure the section is displayed, right before the "Location" section.
this.contentElement.insertBefore(this._imageSizeSection.element, this._locationSection.element);
this.contentView.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);

// Get the metrics for this resource and fill in the metrics rows with that information.
resource.getImageSize(function(size) {
@@ -416,7 +416,7 @@ WebInspector.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel ext
}

// Ensure the section is displayed, right before the "Request Headers" section.
this.contentElement.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
this.contentView.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);

var requestDataContentType = resource.requestDataContentType || "";
if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {

0 comments on commit c7c56e5

Please sign in to comment.