* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-importScript("CSSNamedFlowCollectionsView.js");
-importScript("CSSNamedFlowView.js");
importScript("DOMSyntaxHighlighter.js");
importScript("ElementsTreeOutline.js");
importScript("EventListenersSidebarPane.js");
this.registerRequiredCSS("textPrompt.css");
this.setHideOnDetach();
- const initialSidebarWidth = 325;
- const minimumContentWidthPercent = 0.34;
- const initialSidebarHeight = 325;
- const minimumContentHeightPercent = 0.34;
- this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.End, initialSidebarWidth, initialSidebarHeight);
- this.splitView.setSidebarElementConstraints(Preferences.minElementsSidebarWidth, Preferences.minElementsSidebarHeight);
- this.splitView.setMainElementConstraints(minimumContentWidthPercent, minimumContentHeightPercent);
- this.splitView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this._updateTreeOutlineVisibleWidth.bind(this));
+ this._splitView = new WebInspector.SplitView(true, true, "elementsPanelSplitViewState", 325, 325);
+ this._splitView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._updateTreeOutlineVisibleWidth.bind(this));
+ this._splitView.show(this.element);
this._searchableView = new WebInspector.SearchableView(this);
- this.splitView.setMainView(this._searchableView);
+ this._searchableView.setMinimumSize(25, 19);
+ this._searchableView.show(this._splitView.mainElement());
var stackElement = this._searchableView.element;
this.contentElement = stackElement.createChild("div");
WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));
this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
- this.splitView.sidebarElement().addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
+ this._splitView.sidebarElement().addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false);
this.treeOutline = new WebInspector.ElementsTreeOutline(true, true, this._populateContextMenu.bind(this), this._setPseudoClassForNodeId.bind(this));
this.treeOutline.wireToDomAgent();
this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane();
this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this));
+
+ this._matchedStylesFilterBoxContainer = document.createElement("div");
+ this._matchedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
+ this._computedStylesFilterBoxContainer = document.createElement("div");
+ this._computedStylesFilterBoxContainer.className = "sidebar-pane-filter-box";
+ this.sidebarPanes.styles.setFilterBoxContainers(this._matchedStylesFilterBoxContainer, this._computedStylesFilterBoxContainer);
+
this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this);
this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
this._popoverHelper.setTimeout(0);
- WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdatedEvent, this);
- WebInspector.settings.showShadowDOM.addChangeListener(this._showShadowDOMChanged.bind(this));
-
- if (WebInspector.domAgent.existingDocument())
- this._documentUpdated(WebInspector.domAgent.existingDocument());
+ WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
+ WebInspector.settings.showUAShadowDOM.addChangeListener(this._showUAShadowDOMChanged.bind(this));
WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this);
}
if (!this.treeOutline)
return;
- var width = this.splitView.element.offsetWidth;
- if (this.splitView.isVertical())
- width -= this.splitView.sidebarWidth();
+ var width = this._splitView.element.offsetWidth;
+ if (this._splitView.isVertical())
+ width -= this._splitView.sidebarSize();
this.treeOutline.setVisibleWidth(width);
+ this.treeOutline.updateSelection();
this.updateBreadcrumbSizes();
},
return this._searchableView;
},
- statusBarResized: function()
- {
- this.updateBreadcrumbSizes();
- },
-
wasShown: function()
{
// Attach heavy component lazily
this.treeOutline.setVisible(true);
if (!this.treeOutline.rootDOMNode)
- WebInspector.domAgent.requestDocument();
+ if (WebInspector.domModel.existingDocument())
+ this._documentUpdated(WebInspector.domModel.existingDocument());
+ else
+ WebInspector.domModel.requestDocument();
},
willHide: function()
{
- WebInspector.domAgent.hideDOMNodeHighlight();
+ WebInspector.domModel.hideDOMNodeHighlight();
this.treeOutline.setVisible(false);
this._popoverHelper.hidePopover();
onResize: function()
{
- this.treeOutline.updateSelection();
- this.updateBreadcrumbSizes();
+ this._updateTreeOutlineVisibleWidth();
+ },
+
+ omitDefaultSelection: function()
+ {
+ this._omitDefaultSelection = true;
+ },
+
+ stopOmittingDefaultSelection: function()
+ {
+ delete this._omitDefaultSelection;
},
/**
*/
_setPseudoClassForNodeId: function(nodeId, pseudoClass, enable)
{
- var node = WebInspector.domAgent.nodeForId(nodeId);
+ var node = WebInspector.domModel.nodeForId(nodeId);
if (!node)
return;
WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, {
action: WebInspector.UserMetrics.UserActionNames.ForcedElementState,
- selector: WebInspector.DOMPresentationUtils.appropriateSelectorFor(node, false),
+ selector: WebInspector.DOMPresentationUtils.fullQualifiedSelector(node, false),
enabled: enable,
state: pseudoClass
});
ConsoleAgent.addInspectedNode(selectedNode.id);
this._lastValidSelectedNode = selectedNode;
}
- WebInspector.notifications.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged);
+ WebInspector.notifications.dispatchEventToListeners(WebInspector.NotificationService.Events.SelectedNodeChanged);
},
_updateSidebars: function()
if (!inspectedRootDocument) {
if (this.isShowing())
- WebInspector.domAgent.requestDocument();
+ WebInspector.domModel.requestDocument();
return;
}
// Focused node has been explicitly set while reaching out for the last selected node.
return;
}
- var node = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null;
+ var node = nodeId ? WebInspector.domModel.nodeForId(nodeId) : null;
selectNode.call(this, node);
}
+ if (this._omitDefaultSelection)
+ return;
+
if (this._selectedPathOnReset)
- WebInspector.domAgent.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this));
+ WebInspector.domModel.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this));
else
selectNode.call(this, null);
delete this._selectedPathOnReset;
delete this._currentSearchResultIndex;
delete this._searchResults;
- WebInspector.domAgent.cancelSearch();
+ WebInspector.domModel.cancelSearch();
},
/**
if (shouldJump)
this.jumpToNextSearchResult();
}
- WebInspector.domAgent.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this));
+ WebInspector.domModel.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this));
},
_contextMenuEventFired: function(event)
{
- function toggleWordWrap()
- {
- WebInspector.settings.domWordWrap.set(!WebInspector.settings.domWordWrap.get());
- }
-
var contextMenu = new WebInspector.ContextMenu(event);
this.treeOutline.populateContextMenu(contextMenu, event);
-
- if (WebInspector.experimentsSettings.cssRegions.isEnabled()) {
- contextMenu.appendSeparator();
- contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "CSS named flows\u2026" : "CSS Named Flows\u2026"), this._showNamedFlowCollections.bind(this));
- }
-
- contextMenu.appendSeparator();
- contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Word wrap" : "Word Wrap"), toggleWordWrap.bind(this), WebInspector.settings.domWordWrap.get());
-
contextMenu.show();
},
- _showNamedFlowCollections: function()
- {
- if (!WebInspector.cssNamedFlowCollectionsView)
- WebInspector.cssNamedFlowCollectionsView = new WebInspector.CSSNamedFlowCollectionsView();
- WebInspector.cssNamedFlowCollectionsView.showInDrawer();
- },
-
_domWordWrapSettingChanged: function(event)
{
if (event.data)
}
return anchor;
},
-
+
_loadDimensionsForNode: function(treeElement, callback)
{
// We get here for CSS properties, too, so bail out early for non-DOM treeElements.
callback();
return;
}
-
+
var node = /** @type {!WebInspector.DOMNode} */ (treeElement.representedObject);
if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") {
/**
* @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number}}
+ * @suppressReceiverCheck
* @this {!Element}
*/
function dimensions()
if (typeof searchResult === "undefined") {
// No data for slot, request it.
- WebInspector.domAgent.searchResult(index, searchCallback.bind(this));
+ WebInspector.domModel.searchResult(index, searchCallback.bind(this));
return;
}
var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");
- WebInspector.domAgent.highlightDOMNode(crumbElement ? crumbElement.representedObject.id : 0);
+ WebInspector.domModel.highlightDOMNode(crumbElement ? crumbElement.representedObject.id : 0);
if ("_mouseOutOfCrumbsTimeout" in this) {
clearTimeout(this._mouseOutOfCrumbsTimeout);
if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement))
return;
- WebInspector.domAgent.hideDOMNodeHighlight();
+ WebInspector.domModel.hideDOMNodeHighlight();
this._mouseOutOfCrumbsTimeout = setTimeout(this.updateBreadcrumbSizes.bind(this), 1000);
},
if (current === this.selectedDOMNode())
crumb.classList.add("selected");
- if (!crumbs.childNodes.length)
- crumb.classList.add("end");
-
crumbs.insertBefore(crumb, crumbs.firstChild);
}
- if (crumbs.hasChildNodes())
- crumbs.lastChild.classList.add("start");
-
this.updateBreadcrumbSizes();
},
if (!this.isShowing())
return;
- if (document.body.offsetWidth <= 0) {
- // The stylesheet hasn't loaded yet or the window is closed,
- // so we can't calculate what is need. Return early.
- return;
- }
-
var crumbs = this.crumbsElement;
- if (!crumbs.childNodes.length || crumbs.offsetWidth <= 0)
- return; // No crumbs, do nothing.
+ if (!crumbs.firstChild)
+ return;
- // A Zero index is the right most child crumb in the breadcrumb.
var selectedIndex = 0;
var focusedIndex = 0;
var selectedCrumb;
- var i = 0;
- var crumb = crumbs.firstChild;
- while (crumb) {
+ // Reset crumb styles.
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
// Find the selected crumb and index.
if (!selectedCrumb && crumb.classList.contains("selected")) {
selectedCrumb = crumb;
if (crumb === focusedCrumb)
focusedIndex = i;
- // Remove any styles that affect size before
- // deciding to shorten any crumbs.
- if (crumb !== crumbs.lastChild)
- crumb.classList.remove("start");
- if (crumb !== crumbs.firstChild)
- crumb.classList.remove("end");
+ crumb.classList.remove("compact", "collapsed", "hidden");
+ }
- crumb.classList.remove("compact");
- crumb.classList.remove("collapsed");
- crumb.classList.remove("hidden");
+ // Layout 1: Measure total and normal crumb sizes
+ var contentElementWidth = this.contentElement.offsetWidth;
+ var normalSizes = [];
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
+ normalSizes[i] = crumb.offsetWidth;
+ }
- crumb = crumb.nextSibling;
- ++i;
+ // Layout 2: Measure collapsed crumb sizes
+ var compactSizes = [];
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
+ crumb.classList.add("compact");
}
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
+ compactSizes[i] = crumb.offsetWidth;
+ }
+
+ // Layout 3: Measure collapsed crumb size
+ crumbs.firstChild.classList.add("collapsed");
+ var collapsedSize = crumbs.firstChild.offsetWidth;
- // Restore the start and end crumb classes in case they got removed in coalesceCollapsedCrumbs().
- // The order of the crumbs in the document is opposite of the visual order.
- crumbs.firstChild.classList.add("end");
- crumbs.lastChild.classList.add("start");
+ // Clean up.
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
+ crumb.classList.remove("compact", "collapsed");
+ }
- var contentElement = this.contentElement;
function crumbsAreSmallerThanContainer()
{
+ var totalSize = 0;
+ for (var i = 0; i < crumbs.childNodes.length; ++i) {
+ var crumb = crumbs.childNodes[i];
+ if (crumb.classList.contains("hidden"))
+ continue;
+ if (crumb.classList.contains("collapsed")) {
+ totalSize += collapsedSize;
+ continue;
+ }
+ totalSize += crumb.classList.contains("compact") ? compactSizes[i] : normalSizes[i];
+ }
const rightPadding = 10;
- return crumbs.offsetWidth + rightPadding < contentElement.offsetWidth;
+ return totalSize + rightPadding < contentElementWidth;
}
if (crumbsAreSmallerThanContainer())
var ChildSide = 1;
/**
- * @param {boolean=} significantCrumb
+ * @param {function(!Element)} shrinkingFunction
+ * @param {number} direction
*/
- function makeCrumbsSmaller(shrinkingFunction, direction, significantCrumb)
+ function makeCrumbsSmaller(shrinkingFunction, direction)
{
- if (!significantCrumb)
- significantCrumb = (focusedCrumb || selectedCrumb);
-
- if (significantCrumb === selectedCrumb)
- var significantIndex = selectedIndex;
- else if (significantCrumb === focusedCrumb)
- var significantIndex = focusedIndex;
- else {
- var significantIndex = 0;
- for (var i = 0; i < crumbs.childNodes.length; ++i) {
- if (crumbs.childNodes[i] === significantCrumb) {
- significantIndex = i;
- break;
- }
- }
- }
+ var significantCrumb = focusedCrumb || selectedCrumb;
+ var significantIndex = significantCrumb === selectedCrumb ? selectedIndex : focusedIndex;
function shrinkCrumbAtIndex(index)
{
}
}
+ /**
+ * @param {!Element} crumb
+ */
function compact(crumb)
{
if (crumb.classList.contains("hidden"))
crumb.classList.add("compact");
}
+ /**
+ * @param {!Element} crumb
+ * @param {boolean=} dontCoalesce
+ */
function collapse(crumb, dontCoalesce)
{
if (crumb.classList.contains("hidden"))
}
// Compact ancestor crumbs, or from both sides if focused.
- if (makeCrumbsSmaller(compact, (focusedCrumb ? BothSides : AncestorSide)))
+ if (makeCrumbsSmaller(compact, focusedCrumb ? BothSides : AncestorSide))
return;
// Collapse ancestor crumbs, or from both sides if focused.
- if (makeCrumbsSmaller(collapse, (focusedCrumb ? BothSides : AncestorSide)))
+ if (makeCrumbsSmaller(collapse, focusedCrumb ? BothSides : AncestorSide))
return;
if (!selectedCrumb)
function handleUndoRedo()
{
if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key
- WebInspector.domAgent.undo(this._updateSidebars.bind(this));
+ WebInspector.domModel.undo(this._updateSidebars.bind(this));
event.handled = true;
return;
}
this.selectedDOMNode().copyNode();
},
- sidebarResized: function(event)
+ /**
+ * @param {!WebInspector.DOMNode} node
+ * @return {!WebInspector.DOMNode}
+ */
+ _leaveUserAgentShadowDOM: function(node)
{
- this.treeOutline.updateSelection();
+ var userAgentShadowRoot = node.ancestorUserAgentShadowRoot();
+ return userAgentShadowRoot ? /** @type {!WebInspector.DOMNode} */ (userAgentShadowRoot.parentNode) : node;
},
+ /**
+ * @param {!DOMAgent.NodeId} nodeId
+ */
revealAndSelectNode: function(nodeId)
{
WebInspector.inspectorView.setCurrentPanel(this);
- var node = WebInspector.domAgent.nodeForId(nodeId);
+ var node = WebInspector.domModel.nodeForId(nodeId);
if (!node)
return;
- while (!WebInspector.ElementsTreeOutline.showShadowDOM() && node && node.isInShadowTree())
- node = node.parentNode;
-
- WebInspector.domAgent.highlightDOMNodeForTwoSeconds(nodeId);
+ node = WebInspector.settings.showUAShadowDOM.get() ? node : this._leaveUserAgentShadowDOM(node);
+ WebInspector.domModel.highlightDOMNodeForTwoSeconds(nodeId);
this.selectDOMNode(node, true);
},
function selectNode(nodeId)
{
if (nodeId)
- WebInspector.domAgent.inspectElement(nodeId);
+ WebInspector.domModel.inspectElement(nodeId);
}
/**
if (target instanceof WebInspector.RemoteObject) {
var remoteObject = /** @type {!WebInspector.RemoteObject} */ (target);
if (remoteObject.subtype === "node")
- commandCallback = revealElement.bind(this, remoteObject);
+ commandCallback = revealElement.bind(null, remoteObject);
} else if (target instanceof WebInspector.DOMNode) {
var domNode = /** @type {!WebInspector.DOMNode} */ (target);
if (domNode.id)
- commandCallback = WebInspector.domAgent.inspectElement.bind(WebInspector.domAgent, domNode.id);
+ commandCallback = WebInspector.domModel.inspectElement.bind(WebInspector.domModel, domNode.id);
}
if (!commandCallback)
return;
this._splitVertically(vertically);
},
- _showShadowDOMChanged: function()
+ _showUAShadowDOMChanged: function()
{
this.treeOutline.update();
},
*/
_splitVertically: function(vertically)
{
- if (this.sidebarPaneView && vertically === !this.splitView.isVertical())
+ if (this.sidebarPaneView && vertically === !this._splitView.isVertical())
return;
if (this.sidebarPaneView) {
this.sidebarPaneView.detach();
- this.splitView.uninstallResizer(this.sidebarPaneView.headerElement());
+ this._splitView.uninstallResizer(this.sidebarPaneView.headerElement());
}
- this.splitView.setVertical(!vertically);
+ this._splitView.setVertical(!vertically);
var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed"));
computedPane.element.classList.add("composite");
computedPane.element.classList.add("fill");
var expandComputed = computedPane.expand.bind(computedPane);
- computedPane.bodyElement.appendChild(this.sidebarPanes.computedStyle.titleElement);
computedPane.bodyElement.classList.add("metrics-and-computed");
- this.sidebarPanes.computedStyle.show(computedPane.bodyElement);
this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);
- this.sidebarPanes.platformFonts.show(computedPane.bodyElement);
+ var matchedStylePanesWrapper = document.createElement("div");
+ matchedStylePanesWrapper.className = "style-panes-wrapper";
+ var computedStylePanesWrapper = document.createElement("div");
+ computedStylePanesWrapper.className = "style-panes-wrapper";
/**
- * @param {!WebInspector.SidebarPane} pane
- * @param {!Element=} beforeElement
+ * @param {boolean} inComputedStyle
* @this {WebInspector.ElementsPanel}
*/
- function showMetrics(pane, beforeElement)
+ function showMetrics(inComputedStyle)
{
- this.sidebarPanes.metrics.show(pane.bodyElement, beforeElement);
+ if (inComputedStyle)
+ this.sidebarPanes.metrics.show(computedStylePanesWrapper, this.sidebarPanes.computedStyle.element);
+ else
+ this.sidebarPanes.metrics.show(matchedStylePanesWrapper);
}
/**
{
var tabId = /** @type {string} */ (event.data.tabId);
if (tabId === computedPane.title())
- showMetrics.call(this, computedPane, this.sidebarPanes.computedStyle.element);
- if (tabId === stylesPane.title())
- showMetrics.call(this, stylesPane);
+ showMetrics.call(this, true);
+ else if (tabId === stylesPane.title())
+ showMetrics.call(this, false);
}
this.sidebarPaneView = new WebInspector.SidebarTabbedPane();
if (vertically) {
- this.splitView.installResizer(this.sidebarPaneView.headerElement());
- this.sidebarPanes.metrics.show(computedPane.bodyElement, this.sidebarPanes.computedStyle.element);
+ this._splitView.installResizer(this.sidebarPaneView.headerElement());
this.sidebarPanes.metrics.setExpandCallback(expandComputed);
var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
compositePane.element.classList.add("fill");
var expandComposite = compositePane.expand.bind(compositePane);
- var splitView = new WebInspector.SplitView(true, "StylesPaneSplitRatio", 0.5);
+ var splitView = new WebInspector.SplitView(true, true, "stylesPaneSplitViewState", 0.5);
splitView.show(compositePane.bodyElement);
- splitView.setFirstView(this.sidebarPanes.styles);
- splitView.firstElement().appendChild(this.sidebarPanes.styles.titleElement);
+ splitView.mainElement().appendChild(matchedStylePanesWrapper);
+ splitView.sidebarElement().appendChild(computedStylePanesWrapper);
+
this.sidebarPanes.styles.setExpandCallback(expandComposite);
- splitView.setSecondView(computedPane);
+ computedPane.show(computedStylePanesWrapper);
computedPane.setExpandCallback(expandComposite);
+ splitView.mainElement().appendChild(this._matchedStylesFilterBoxContainer);
+ splitView.sidebarElement().appendChild(this._computedStylesFilterBoxContainer);
+
this.sidebarPaneView.addPane(compositePane);
} else {
var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title());
stylesPane.element.classList.add("fill");
var expandStyles = stylesPane.expand.bind(stylesPane);
stylesPane.bodyElement.classList.add("metrics-and-styles");
- this.sidebarPanes.styles.show(stylesPane.bodyElement);
+
+ stylesPane.bodyElement.appendChild(matchedStylePanesWrapper);
+ computedPane.bodyElement.appendChild(computedStylePanesWrapper);
+
this.sidebarPanes.styles.setExpandCallback(expandStyles);
this.sidebarPanes.metrics.setExpandCallback(expandStyles);
- stylesPane.bodyElement.appendChild(this.sidebarPanes.styles.titleElement);
this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this);
- showMetrics.call(this, stylesPane);
+ stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);
+ computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);
+
this.sidebarPaneView.addPane(stylesPane);
this.sidebarPaneView.addPane(computedPane);
}
+ this.sidebarPanes.styles.show(matchedStylePanesWrapper);
+ this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);
+ matchedStylePanesWrapper.appendChild(this.sidebarPanes.styles.titleElement);
+ showMetrics.call(this, vertically);
+ this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);
+
this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);
this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);
this.sidebarPaneView.addPane(this.sidebarPanes.properties);
for (var i = 0; i < this._extensionSidebarPanes.length; ++i)
this._extensionSidebarPanesContainer.addPane(this._extensionSidebarPanes[i]);
- this.splitView.setSidebarView(this.sidebarPaneView);
+ this.sidebarPaneView.show(this._splitView.sidebarElement());
this.sidebarPanes.styles.expand();
},
*/
appendApplicableItems: function(event, contextMenu, target)
{
- WebInspector.panel("elements").appendApplicableItems(event, contextMenu, target);
+ /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).appendApplicableItems(event, contextMenu, target);
}
}
-
-/**
- * @constructor
- * @extends {WebInspector.Drawer.SingletonViewFactory}
- */
-WebInspector.ElementsPanel.OverridesViewFactory = function()
-{
- WebInspector.Drawer.SingletonViewFactory.call(this, WebInspector.OverridesView);
-}
-
-WebInspector.ElementsPanel.OverridesViewFactory.prototype = {
- __proto__: WebInspector.Drawer.SingletonViewFactory.prototype
-}
-
-
-/**
- * @constructor
- * @extends {WebInspector.Drawer.SingletonViewFactory}
- */
-WebInspector.ElementsPanel.RenderingViewFactory = function()
-{
- WebInspector.Drawer.SingletonViewFactory.call(this, WebInspector.RenderingOptionsView);
-}
-
-WebInspector.ElementsPanel.RenderingViewFactory.prototype = {
- __proto__: WebInspector.Drawer.SingletonViewFactory.prototype
-}
-
/**
* @constructor
* @implements {WebInspector.Revealer}
*/
reveal: function(node)
{
- if (node instanceof WebInspector.DOMNode)
- /** @type {!WebInspector.ElementsPanel} */ (WebInspector.showPanel("elements")).revealAndSelectNode(node.id);
+ if (!(node instanceof WebInspector.DOMNode))
+ return;
+
+ if (WebInspector.inspectElementModeController && WebInspector.inspectElementModeController.enabled()) {
+ InspectorFrontendHost.bringToFront();
+ WebInspector.inspectElementModeController.disable();
+ }
+
+ /** @type {!WebInspector.ElementsPanel} */ (WebInspector.inspectorView.panel("elements")).revealAndSelectNode(node.id);
}
}