1/* 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com> 4 * Copyright (C) 2009 Joseph Pecoraro 5 * 6 * Redistribution and use in source and binary forms, with or without 7 * modification, are permitted provided that the following conditions 8 * are met: 9 * 10 * 1. Redistributions of source code must retain the above copyright 11 * notice, this list of conditions and the following disclaimer. 12 * 2. Redistributions in binary form must reproduce the above copyright 13 * notice, this list of conditions and the following disclaimer in the 14 * documentation and/or other materials provided with the distribution. 15 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of 16 * its contributors may be used to endorse or promote products derived 17 * from this software without specific prior written permission. 18 * 19 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY 20 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 23 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 26 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31importScript("CSSNamedFlowCollectionsView.js"); 32importScript("CSSNamedFlowView.js"); 33importScript("EventListenersSidebarPane.js"); 34importScript("MetricsSidebarPane.js"); 35importScript("OverridesView.js"); 36importScript("PlatformFontsSidebarPane.js"); 37importScript("PropertiesSidebarPane.js"); 38importScript("RenderingOptionsView.js"); 39importScript("StylesSidebarPane.js"); 40 41/** 42 * @constructor 43 * @implements {WebInspector.ViewFactory} 44 * @implements {WebInspector.Searchable} 45 * @extends {WebInspector.Panel} 46 */ 47WebInspector.ElementsPanel = function() 48{ 49 WebInspector.Panel.call(this, "elements"); 50 this.registerRequiredCSS("breadcrumbList.css"); 51 this.registerRequiredCSS("elementsPanel.css"); 52 this.registerRequiredCSS("textPrompt.css"); 53 this.setHideOnDetach(); 54 55 const initialSidebarWidth = 325; 56 const minimumContentWidthPercent = 0.34; 57 const initialSidebarHeight = 325; 58 const minimumContentHeightPercent = 0.34; 59 this.createSidebarView(this.element, WebInspector.SidebarView.SidebarPosition.End, initialSidebarWidth, initialSidebarHeight); 60 this.splitView.sidebarElement.classList.add("vbox"); 61 this.splitView.setSidebarElementConstraints(Preferences.minElementsSidebarWidth, Preferences.minElementsSidebarHeight); 62 this.splitView.setMainElementConstraints(minimumContentWidthPercent, minimumContentHeightPercent); 63 this.splitView.addEventListener(WebInspector.SidebarView.EventTypes.Resized, this._updateTreeOutlineVisibleWidth.bind(this)); 64 65 this._searchableView = new WebInspector.SearchableView(this); 66 this.splitView.mainElement.classList.add("vbox"); 67 this._searchableView.show(this.splitView.mainElement); 68 var stackElement = this._searchableView.element; 69 70 this.contentElement = stackElement.createChild("div"); 71 this.contentElement.id = "elements-content"; 72 this.contentElement.classList.add("outline-disclosure"); 73 this.contentElement.classList.add("source-code"); 74 if (!WebInspector.settings.domWordWrap.get()) 75 this.contentElement.classList.add("nowrap"); 76 WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this)); 77 78 this.contentElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true); 79 this.splitView.sidebarElement.addEventListener("contextmenu", this._sidebarContextMenuEventFired.bind(this), false); 80 81 this.treeOutline = new WebInspector.ElementsTreeOutline(true, true, this._populateContextMenu.bind(this), this._setPseudoClassForNodeId.bind(this)); 82 this.treeOutline.wireToDomAgent(); 83 84 this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this); 85 this.treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this); 86 87 var crumbsContainer = stackElement.createChild("div"); 88 crumbsContainer.id = "elements-crumbs"; 89 this.crumbsElement = crumbsContainer.createChild("div", "crumbs"); 90 this.crumbsElement.addEventListener("mousemove", this._mouseMovedInCrumbs.bind(this), false); 91 this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false); 92 93 this.sidebarPanes = {}; 94 this.sidebarPanes.platformFonts = new WebInspector.PlatformFontsSidebarPane(); 95 this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane(); 96 this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle, this._setPseudoClassForNodeId.bind(this)); 97 this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane(); 98 this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane(); 99 this.sidebarPanes.domBreakpoints = WebInspector.domBreakpointsSidebarPane.createProxy(this); 100 this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane(); 101 102 this.sidebarPanes.styles.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateStyles.bind(this, false)); 103 this.sidebarPanes.metrics.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateMetrics.bind(this)); 104 this.sidebarPanes.platformFonts.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updatePlatformFonts.bind(this)); 105 this.sidebarPanes.properties.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateProperties.bind(this)); 106 this.sidebarPanes.eventListeners.addEventListener(WebInspector.SidebarPane.EventTypes.wasShown, this.updateEventListeners.bind(this)); 107 108 this.sidebarPanes.styles.addEventListener("style edited", this._stylesPaneEdited, this); 109 this.sidebarPanes.styles.addEventListener("style property toggled", this._stylesPaneEdited, this); 110 this.sidebarPanes.metrics.addEventListener("metrics edited", this._metricsPaneEdited, this); 111 this._extensionSidebarPanes = []; 112 113 WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._dockSideChanged.bind(this)); 114 WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this)); 115 this._dockSideChanged(); 116 117 this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this)); 118 this._popoverHelper.setTimeout(0); 119 120 WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.DocumentUpdated, this._documentUpdatedEvent, this); 121 WebInspector.settings.showShadowDOM.addChangeListener(this._showShadowDOMChanged.bind(this)); 122 123 if (WebInspector.domAgent.existingDocument()) 124 this._documentUpdated(WebInspector.domAgent.existingDocument()); 125 126 WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.ModelWasEnabled, this._updateSidebars, this); 127} 128 129WebInspector.ElementsPanel.prototype = { 130 _updateTreeOutlineVisibleWidth: function() 131 { 132 if (!this.treeOutline) 133 return; 134 135 var width = this.splitView.element.offsetWidth; 136 if (this.splitView.isVertical()) 137 width -= this.splitView.sidebarWidth(); 138 this.treeOutline.setVisibleWidth(width); 139 this.updateBreadcrumbSizes(); 140 }, 141 142 defaultFocusedElement: function() 143 { 144 return this.treeOutline.element; 145 }, 146 147 /** 148 * @return {!WebInspector.SearchableView} 149 */ 150 searchableView: function() 151 { 152 return this._searchableView; 153 }, 154 155 statusBarResized: function() 156 { 157 this.updateBreadcrumbSizes(); 158 }, 159 160 wasShown: function() 161 { 162 // Attach heavy component lazily 163 if (this.treeOutline.element.parentElement !== this.contentElement) 164 this.contentElement.appendChild(this.treeOutline.element); 165 166 WebInspector.Panel.prototype.wasShown.call(this); 167 168 this.updateBreadcrumb(); 169 this.treeOutline.updateSelection(); 170 this.treeOutline.setVisible(true); 171 172 if (!this.treeOutline.rootDOMNode) 173 WebInspector.domAgent.requestDocument(); 174 }, 175 176 willHide: function() 177 { 178 WebInspector.domAgent.hideDOMNodeHighlight(); 179 this.treeOutline.setVisible(false); 180 this._popoverHelper.hidePopover(); 181 182 // Detach heavy component on hide 183 this.contentElement.removeChild(this.treeOutline.element); 184 185 WebInspector.Panel.prototype.willHide.call(this); 186 }, 187 188 onResize: function() 189 { 190 this.treeOutline.updateSelection(); 191 this.updateBreadcrumbSizes(); 192 }, 193 194 /** 195 * @param {string=} id 196 * @return {?WebInspector.View} 197 */ 198 createView: function(id) 199 { 200 if (id === "emulation") { 201 if (!this._overridesView) 202 this._overridesView = new WebInspector.OverridesView(); 203 return this._overridesView; 204 } 205 if (id === "rendering") { 206 if (!this._renderingView) 207 this._renderingView = new WebInspector.RenderingOptionsView(); 208 return this._renderingView; 209 } 210 return null; 211 }, 212 213 /** 214 * @param {!DOMAgent.NodeId} nodeId 215 * @param {string} pseudoClass 216 * @param {boolean} enable 217 */ 218 _setPseudoClassForNodeId: function(nodeId, pseudoClass, enable) 219 { 220 var node = WebInspector.domAgent.nodeForId(nodeId); 221 if (!node) 222 return; 223 224 var pseudoClasses = node.getUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName); 225 if (enable) { 226 pseudoClasses = pseudoClasses || []; 227 if (pseudoClasses.indexOf(pseudoClass) >= 0) 228 return; 229 pseudoClasses.push(pseudoClass); 230 node.setUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName, pseudoClasses); 231 } else { 232 if (!pseudoClasses || pseudoClasses.indexOf(pseudoClass) < 0) 233 return; 234 pseudoClasses.remove(pseudoClass); 235 if (!pseudoClasses.length) 236 node.removeUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName); 237 } 238 239 this.treeOutline.updateOpenCloseTags(node); 240 WebInspector.cssModel.forcePseudoState(node.id, node.getUserProperty(WebInspector.ElementsTreeOutline.PseudoStateDecorator.PropertyName)); 241 this._metricsPaneEdited(); 242 this._stylesPaneEdited(); 243 244 WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction, { 245 action: WebInspector.UserMetrics.UserActionNames.ForcedElementState, 246 selector: WebInspector.DOMPresentationUtils.appropriateSelectorFor(node, false), 247 enabled: enable, 248 state: pseudoClass 249 }); 250 }, 251 252 _selectedNodeChanged: function() 253 { 254 var selectedNode = this.selectedDOMNode(); 255 if (!selectedNode && this._lastValidSelectedNode) 256 this._selectedPathOnReset = this._lastValidSelectedNode.path(); 257 258 this.updateBreadcrumb(false); 259 260 this._updateSidebars(); 261 262 if (selectedNode) { 263 ConsoleAgent.addInspectedNode(selectedNode.id); 264 this._lastValidSelectedNode = selectedNode; 265 } 266 WebInspector.notifications.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged); 267 }, 268 269 _updateSidebars: function() 270 { 271 for (var pane in this.sidebarPanes) 272 this.sidebarPanes[pane].needsUpdate = true; 273 274 this.updateStyles(true); 275 this.updateMetrics(); 276 this.updatePlatformFonts(); 277 this.updateProperties(); 278 this.updateEventListeners(); 279 }, 280 281 _reset: function() 282 { 283 delete this.currentQuery; 284 }, 285 286 _documentUpdatedEvent: function(event) 287 { 288 this._documentUpdated(event.data); 289 }, 290 291 _documentUpdated: function(inspectedRootDocument) 292 { 293 this._reset(); 294 this.searchCanceled(); 295 296 this.treeOutline.rootDOMNode = inspectedRootDocument; 297 298 if (!inspectedRootDocument) { 299 if (this.isShowing()) 300 WebInspector.domAgent.requestDocument(); 301 return; 302 } 303 304 WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(); 305 306 /** 307 * @this {WebInspector.ElementsPanel} 308 * @param {?WebInspector.DOMNode} candidateFocusNode 309 */ 310 function selectNode(candidateFocusNode) 311 { 312 if (!candidateFocusNode) 313 candidateFocusNode = inspectedRootDocument.body || inspectedRootDocument.documentElement; 314 315 if (!candidateFocusNode) 316 return; 317 318 this.selectDOMNode(candidateFocusNode); 319 if (this.treeOutline.selectedTreeElement) 320 this.treeOutline.selectedTreeElement.expand(); 321 } 322 323 /** 324 * @param {?DOMAgent.NodeId} nodeId 325 * @this {WebInspector.ElementsPanel} 326 */ 327 function selectLastSelectedNode(nodeId) 328 { 329 if (this.selectedDOMNode()) { 330 // Focused node has been explicitly set while reaching out for the last selected node. 331 return; 332 } 333 var node = nodeId ? WebInspector.domAgent.nodeForId(nodeId) : null; 334 selectNode.call(this, node); 335 } 336 337 if (this._selectedPathOnReset) 338 WebInspector.domAgent.pushNodeByPathToFrontend(this._selectedPathOnReset, selectLastSelectedNode.bind(this)); 339 else 340 selectNode.call(this, null); 341 delete this._selectedPathOnReset; 342 }, 343 344 searchCanceled: function() 345 { 346 delete this._searchQuery; 347 this._hideSearchHighlights(); 348 349 this._searchableView.updateSearchMatchesCount(0); 350 351 delete this._currentSearchResultIndex; 352 delete this._searchResults; 353 WebInspector.domAgent.cancelSearch(); 354 }, 355 356 /** 357 * @param {string} query 358 * @param {boolean} shouldJump 359 */ 360 performSearch: function(query, shouldJump) 361 { 362 // Call searchCanceled since it will reset everything we need before doing a new search. 363 this.searchCanceled(); 364 365 const whitespaceTrimmedQuery = query.trim(); 366 if (!whitespaceTrimmedQuery.length) 367 return; 368 369 this._searchQuery = query; 370 371 /** 372 * @param {number} resultCount 373 * @this {WebInspector.ElementsPanel} 374 */ 375 function resultCountCallback(resultCount) 376 { 377 this._searchableView.updateSearchMatchesCount(resultCount); 378 if (!resultCount) 379 return; 380 381 this._searchResults = new Array(resultCount); 382 this._currentSearchResultIndex = -1; 383 if (shouldJump) 384 this.jumpToNextSearchResult(); 385 } 386 WebInspector.domAgent.performSearch(whitespaceTrimmedQuery, resultCountCallback.bind(this)); 387 }, 388 389 _contextMenuEventFired: function(event) 390 { 391 function toggleWordWrap() 392 { 393 WebInspector.settings.domWordWrap.set(!WebInspector.settings.domWordWrap.get()); 394 } 395 396 var contextMenu = new WebInspector.ContextMenu(event); 397 this.treeOutline.populateContextMenu(contextMenu, event); 398 399 if (WebInspector.experimentsSettings.cssRegions.isEnabled()) { 400 contextMenu.appendSeparator(); 401 contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "CSS named flows\u2026" : "CSS Named Flows\u2026"), this._showNamedFlowCollections.bind(this)); 402 } 403 404 contextMenu.appendSeparator(); 405 contextMenu.appendCheckboxItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Word wrap" : "Word Wrap"), toggleWordWrap.bind(this), WebInspector.settings.domWordWrap.get()); 406 407 contextMenu.show(); 408 }, 409 410 _showNamedFlowCollections: function() 411 { 412 if (!WebInspector.cssNamedFlowCollectionsView) 413 WebInspector.cssNamedFlowCollectionsView = new WebInspector.CSSNamedFlowCollectionsView(); 414 WebInspector.cssNamedFlowCollectionsView.showInDrawer(); 415 }, 416 417 _domWordWrapSettingChanged: function(event) 418 { 419 if (event.data) 420 this.contentElement.classList.remove("nowrap"); 421 else 422 this.contentElement.classList.add("nowrap"); 423 424 var selectedNode = this.selectedDOMNode(); 425 if (!selectedNode) 426 return; 427 428 var treeElement = this.treeOutline.findTreeElement(selectedNode); 429 if (treeElement) 430 treeElement.updateSelection(); // Recalculate selection highlight dimensions. 431 }, 432 433 switchToAndFocus: function(node) 434 { 435 // Reset search restore. 436 this._searchableView.cancelSearch(); 437 WebInspector.inspectorView.setCurrentPanel(this); 438 this.selectDOMNode(node, true); 439 }, 440 441 _populateContextMenu: function(contextMenu, node) 442 { 443 // Add debbuging-related actions 444 contextMenu.appendSeparator(); 445 var pane = WebInspector.domBreakpointsSidebarPane; 446 pane.populateNodeContextMenu(node, contextMenu); 447 }, 448 449 _getPopoverAnchor: function(element) 450 { 451 var anchor = element.enclosingNodeOrSelfWithClass("webkit-html-resource-link"); 452 if (anchor) { 453 if (!anchor.href) 454 return null; 455 456 var resource = WebInspector.resourceTreeModel.resourceForURL(anchor.href); 457 if (!resource || resource.type !== WebInspector.resourceTypes.Image) 458 return null; 459 460 anchor.removeAttribute("title"); 461 } 462 return anchor; 463 }, 464 465 _loadDimensionsForNode: function(treeElement, callback) 466 { 467 // We get here for CSS properties, too, so bail out early for non-DOM treeElements. 468 if (treeElement.treeOutline !== this.treeOutline) { 469 callback(); 470 return; 471 } 472 473 var node = /** @type {!WebInspector.DOMNode} */ (treeElement.representedObject); 474 475 if (!node.nodeName() || node.nodeName().toLowerCase() !== "img") { 476 callback(); 477 return; 478 } 479 480 WebInspector.RemoteObject.resolveNode(node, "", resolvedNode); 481 482 function resolvedNode(object) 483 { 484 if (!object) { 485 callback(); 486 return; 487 } 488 489 object.callFunctionJSON(dimensions, undefined, callback); 490 object.release(); 491 492 /** 493 * @return {{ offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number }} 494 * @this {!Element} 495 */ 496 function dimensions() 497 { 498 return { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight, naturalWidth: this.naturalWidth, naturalHeight: this.naturalHeight }; 499 } 500 } 501 }, 502 503 /** 504 * @param {!Element} anchor 505 * @param {!WebInspector.Popover} popover 506 */ 507 _showPopover: function(anchor, popover) 508 { 509 var listItem = anchor.enclosingNodeOrSelfWithNodeName("li"); 510 if (listItem && listItem.treeElement) 511 this._loadDimensionsForNode(listItem.treeElement, WebInspector.DOMPresentationUtils.buildImagePreviewContents.bind(WebInspector.DOMPresentationUtils, anchor.href, true, showPopover)); 512 else 513 WebInspector.DOMPresentationUtils.buildImagePreviewContents(anchor.href, true, showPopover); 514 515 /** 516 * @param {!Element=} contents 517 */ 518 function showPopover(contents) 519 { 520 if (!contents) 521 return; 522 popover.setCanShrink(false); 523 popover.show(contents, anchor); 524 } 525 }, 526 527 jumpToNextSearchResult: function() 528 { 529 if (!this._searchResults) 530 return; 531 532 this._hideSearchHighlights(); 533 if (++this._currentSearchResultIndex >= this._searchResults.length) 534 this._currentSearchResultIndex = 0; 535 536 this._highlightCurrentSearchResult(); 537 }, 538 539 jumpToPreviousSearchResult: function() 540 { 541 if (!this._searchResults) 542 return; 543 544 this._hideSearchHighlights(); 545 if (--this._currentSearchResultIndex < 0) 546 this._currentSearchResultIndex = (this._searchResults.length - 1); 547 548 this._highlightCurrentSearchResult(); 549 }, 550 551 _highlightCurrentSearchResult: function() 552 { 553 var index = this._currentSearchResultIndex; 554 var searchResults = this._searchResults; 555 var searchResult = searchResults[index]; 556 557 if (searchResult === null) { 558 this._searchableView.updateCurrentMatchIndex(index); 559 return; 560 } 561 562 /** 563 * @param {?WebInspector.DOMNode} node 564 * @this {WebInspector.ElementsPanel} 565 */ 566 function searchCallback(node) 567 { 568 searchResults[index] = node; 569 this._highlightCurrentSearchResult(); 570 } 571 572 if (typeof searchResult === "undefined") { 573 // No data for slot, request it. 574 WebInspector.domAgent.searchResult(index, searchCallback.bind(this)); 575 return; 576 } 577 578 this._searchableView.updateCurrentMatchIndex(index); 579 580 var treeElement = this.treeOutline.findTreeElement(searchResult); 581 if (treeElement) { 582 treeElement.highlightSearchResults(this._searchQuery); 583 treeElement.reveal(); 584 var matches = treeElement.listItemElement.getElementsByClassName("highlighted-search-result"); 585 if (matches.length) 586 matches[0].scrollIntoViewIfNeeded(); 587 } 588 }, 589 590 _hideSearchHighlights: function() 591 { 592 if (!this._searchResults) 593 return; 594 var searchResult = this._searchResults[this._currentSearchResultIndex]; 595 if (!searchResult) 596 return; 597 var treeElement = this.treeOutline.findTreeElement(searchResult); 598 if (treeElement) 599 treeElement.hideSearchHighlights(); 600 }, 601 602 /** 603 * @return {?WebInspector.DOMNode} 604 */ 605 selectedDOMNode: function() 606 { 607 return this.treeOutline.selectedDOMNode(); 608 }, 609 610 /** 611 * @param {boolean=} focus 612 */ 613 selectDOMNode: function(node, focus) 614 { 615 this.treeOutline.selectDOMNode(node, focus); 616 }, 617 618 /** 619 * @param {!WebInspector.Event} event 620 */ 621 _updateBreadcrumbIfNeeded: function(event) 622 { 623 var nodes = /** @type {!Array.<!WebInspector.DOMNode>} */ (event.data || []); 624 if (!nodes.length) 625 return; 626 627 var crumbs = this.crumbsElement; 628 for (var crumb = crumbs.firstChild; crumb; crumb = crumb.nextSibling) { 629 if (nodes.indexOf(crumb.representedObject) !== -1) { 630 this.updateBreadcrumb(true); 631 return; 632 } 633 } 634 }, 635 636 _stylesPaneEdited: function() 637 { 638 // Once styles are edited, the Metrics pane should be updated. 639 this.sidebarPanes.metrics.needsUpdate = true; 640 this.updateMetrics(); 641 this.sidebarPanes.platformFonts.needsUpdate = true; 642 this.updatePlatformFonts(); 643 }, 644 645 _metricsPaneEdited: function() 646 { 647 // Once metrics are edited, the Styles pane should be updated. 648 this.sidebarPanes.styles.needsUpdate = true; 649 this.updateStyles(true); 650 }, 651 652 _mouseMovedInCrumbs: function(event) 653 { 654 var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY); 655 var crumbElement = nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb"); 656 657 WebInspector.domAgent.highlightDOMNode(crumbElement ? crumbElement.representedObject.id : 0); 658 659 if ("_mouseOutOfCrumbsTimeout" in this) { 660 clearTimeout(this._mouseOutOfCrumbsTimeout); 661 delete this._mouseOutOfCrumbsTimeout; 662 } 663 }, 664 665 _mouseMovedOutOfCrumbs: function(event) 666 { 667 var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY); 668 if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.crumbsElement)) 669 return; 670 671 WebInspector.domAgent.hideDOMNodeHighlight(); 672 673 this._mouseOutOfCrumbsTimeout = setTimeout(this.updateBreadcrumbSizes.bind(this), 1000); 674 }, 675 676 /** 677 * @param {boolean=} forceUpdate 678 */ 679 updateBreadcrumb: function(forceUpdate) 680 { 681 if (!this.isShowing()) 682 return; 683 684 var crumbs = this.crumbsElement; 685 686 var handled = false; 687 var crumb = crumbs.firstChild; 688 while (crumb) { 689 if (crumb.representedObject === this.selectedDOMNode()) { 690 crumb.classList.add("selected"); 691 handled = true; 692 } else { 693 crumb.classList.remove("selected"); 694 } 695 696 crumb = crumb.nextSibling; 697 } 698 699 if (handled && !forceUpdate) { 700 // We don't need to rebuild the crumbs, but we need to adjust sizes 701 // to reflect the new focused or root node. 702 this.updateBreadcrumbSizes(); 703 return; 704 } 705 706 crumbs.removeChildren(); 707 708 var panel = this; 709 710 function selectCrumbFunction(event) 711 { 712 var crumb = event.currentTarget; 713 if (crumb.classList.contains("collapsed")) { 714 // Clicking a collapsed crumb will expose the hidden crumbs. 715 if (crumb === panel.crumbsElement.firstChild) { 716 // If the focused crumb is the first child, pick the farthest crumb 717 // that is still hidden. This allows the user to expose every crumb. 718 var currentCrumb = crumb; 719 while (currentCrumb) { 720 var hidden = currentCrumb.classList.contains("hidden"); 721 var collapsed = currentCrumb.classList.contains("collapsed"); 722 if (!hidden && !collapsed) 723 break; 724 crumb = currentCrumb; 725 currentCrumb = currentCrumb.nextSibling; 726 } 727 } 728 729 panel.updateBreadcrumbSizes(crumb); 730 } else 731 panel.selectDOMNode(crumb.representedObject, true); 732 733 event.preventDefault(); 734 } 735 736 for (var current = this.selectedDOMNode(); current; current = current.parentNode) { 737 if (current.nodeType() === Node.DOCUMENT_NODE) 738 continue; 739 740 crumb = document.createElement("span"); 741 crumb.className = "crumb"; 742 crumb.representedObject = current; 743 crumb.addEventListener("mousedown", selectCrumbFunction, false); 744 745 var crumbTitle = ""; 746 switch (current.nodeType()) { 747 case Node.ELEMENT_NODE: 748 if (current.pseudoType()) 749 crumbTitle = "::" + current.pseudoType(); 750 else 751 WebInspector.DOMPresentationUtils.decorateNodeLabel(current, crumb); 752 break; 753 754 case Node.TEXT_NODE: 755 crumbTitle = WebInspector.UIString("(text)"); 756 break; 757 758 case Node.COMMENT_NODE: 759 crumbTitle = "<!-->"; 760 break; 761 762 case Node.DOCUMENT_TYPE_NODE: 763 crumbTitle = "<!DOCTYPE>"; 764 break; 765 766 case Node.DOCUMENT_FRAGMENT_NODE: 767 crumbTitle = current.shadowRootType() ? "#shadow-root" : current.nodeNameInCorrectCase(); 768 break; 769 770 default: 771 crumbTitle = current.nodeNameInCorrectCase(); 772 } 773 774 if (!crumb.childNodes.length) { 775 var nameElement = document.createElement("span"); 776 nameElement.textContent = crumbTitle; 777 crumb.appendChild(nameElement); 778 crumb.title = crumbTitle; 779 } 780 781 if (current === this.selectedDOMNode()) 782 crumb.classList.add("selected"); 783 if (!crumbs.childNodes.length) 784 crumb.classList.add("end"); 785 786 crumbs.insertBefore(crumb, crumbs.firstChild); 787 } 788 789 if (crumbs.hasChildNodes()) 790 crumbs.lastChild.classList.add("start"); 791 792 this.updateBreadcrumbSizes(); 793 }, 794 795 /** 796 * @param {!Element=} focusedCrumb 797 */ 798 updateBreadcrumbSizes: function(focusedCrumb) 799 { 800 if (!this.isShowing()) 801 return; 802 803 if (document.body.offsetWidth <= 0) { 804 // The stylesheet hasn't loaded yet or the window is closed, 805 // so we can't calculate what is need. Return early. 806 return; 807 } 808 809 var crumbs = this.crumbsElement; 810 if (!crumbs.childNodes.length || crumbs.offsetWidth <= 0) 811 return; // No crumbs, do nothing. 812 813 // A Zero index is the right most child crumb in the breadcrumb. 814 var selectedIndex = 0; 815 var focusedIndex = 0; 816 var selectedCrumb; 817 818 var i = 0; 819 var crumb = crumbs.firstChild; 820 while (crumb) { 821 // Find the selected crumb and index. 822 if (!selectedCrumb && crumb.classList.contains("selected")) { 823 selectedCrumb = crumb; 824 selectedIndex = i; 825 } 826 827 // Find the focused crumb index. 828 if (crumb === focusedCrumb) 829 focusedIndex = i; 830 831 // Remove any styles that affect size before 832 // deciding to shorten any crumbs. 833 if (crumb !== crumbs.lastChild) 834 crumb.classList.remove("start"); 835 if (crumb !== crumbs.firstChild) 836 crumb.classList.remove("end"); 837 838 crumb.classList.remove("compact"); 839 crumb.classList.remove("collapsed"); 840 crumb.classList.remove("hidden"); 841 842 crumb = crumb.nextSibling; 843 ++i; 844 } 845 846 // Restore the start and end crumb classes in case they got removed in coalesceCollapsedCrumbs(). 847 // The order of the crumbs in the document is opposite of the visual order. 848 crumbs.firstChild.classList.add("end"); 849 crumbs.lastChild.classList.add("start"); 850 851 var contentElement = this.contentElement; 852 function crumbsAreSmallerThanContainer() 853 { 854 const rightPadding = 10; 855 return crumbs.offsetWidth + rightPadding < contentElement.offsetWidth; 856 } 857 858 if (crumbsAreSmallerThanContainer()) 859 return; // No need to compact the crumbs, they all fit at full size. 860 861 var BothSides = 0; 862 var AncestorSide = -1; 863 var ChildSide = 1; 864 865 /** 866 * @param {boolean=} significantCrumb 867 */ 868 function makeCrumbsSmaller(shrinkingFunction, direction, significantCrumb) 869 { 870 if (!significantCrumb) 871 significantCrumb = (focusedCrumb || selectedCrumb); 872 873 if (significantCrumb === selectedCrumb) 874 var significantIndex = selectedIndex; 875 else if (significantCrumb === focusedCrumb) 876 var significantIndex = focusedIndex; 877 else { 878 var significantIndex = 0; 879 for (var i = 0; i < crumbs.childNodes.length; ++i) { 880 if (crumbs.childNodes[i] === significantCrumb) { 881 significantIndex = i; 882 break; 883 } 884 } 885 } 886 887 function shrinkCrumbAtIndex(index) 888 { 889 var shrinkCrumb = crumbs.childNodes[index]; 890 if (shrinkCrumb && shrinkCrumb !== significantCrumb) 891 shrinkingFunction(shrinkCrumb); 892 if (crumbsAreSmallerThanContainer()) 893 return true; // No need to compact the crumbs more. 894 return false; 895 } 896 897 // Shrink crumbs one at a time by applying the shrinkingFunction until the crumbs 898 // fit in the container or we run out of crumbs to shrink. 899 if (direction) { 900 // Crumbs are shrunk on only one side (based on direction) of the signifcant crumb. 901 var index = (direction > 0 ? 0 : crumbs.childNodes.length - 1); 902 while (index !== significantIndex) { 903 if (shrinkCrumbAtIndex(index)) 904 return true; 905 index += (direction > 0 ? 1 : -1); 906 } 907 } else { 908 // Crumbs are shrunk in order of descending distance from the signifcant crumb, 909 // with a tie going to child crumbs. 910 var startIndex = 0; 911 var endIndex = crumbs.childNodes.length - 1; 912 while (startIndex != significantIndex || endIndex != significantIndex) { 913 var startDistance = significantIndex - startIndex; 914 var endDistance = endIndex - significantIndex; 915 if (startDistance >= endDistance) 916 var index = startIndex++; 917 else 918 var index = endIndex--; 919 if (shrinkCrumbAtIndex(index)) 920 return true; 921 } 922 } 923 924 // We are not small enough yet, return false so the caller knows. 925 return false; 926 } 927 928 function coalesceCollapsedCrumbs() 929 { 930 var crumb = crumbs.firstChild; 931 var collapsedRun = false; 932 var newStartNeeded = false; 933 var newEndNeeded = false; 934 while (crumb) { 935 var hidden = crumb.classList.contains("hidden"); 936 if (!hidden) { 937 var collapsed = crumb.classList.contains("collapsed"); 938 if (collapsedRun && collapsed) { 939 crumb.classList.add("hidden"); 940 crumb.classList.remove("compact"); 941 crumb.classList.remove("collapsed"); 942 943 if (crumb.classList.contains("start")) { 944 crumb.classList.remove("start"); 945 newStartNeeded = true; 946 } 947 948 if (crumb.classList.contains("end")) { 949 crumb.classList.remove("end"); 950 newEndNeeded = true; 951 } 952 953 continue; 954 } 955 956 collapsedRun = collapsed; 957 958 if (newEndNeeded) { 959 newEndNeeded = false; 960 crumb.classList.add("end"); 961 } 962 } else 963 collapsedRun = true; 964 crumb = crumb.nextSibling; 965 } 966 967 if (newStartNeeded) { 968 crumb = crumbs.lastChild; 969 while (crumb) { 970 if (!crumb.classList.contains("hidden")) { 971 crumb.classList.add("start"); 972 break; 973 } 974 crumb = crumb.previousSibling; 975 } 976 } 977 } 978 979 function compact(crumb) 980 { 981 if (crumb.classList.contains("hidden")) 982 return; 983 crumb.classList.add("compact"); 984 } 985 986 function collapse(crumb, dontCoalesce) 987 { 988 if (crumb.classList.contains("hidden")) 989 return; 990 crumb.classList.add("collapsed"); 991 crumb.classList.remove("compact"); 992 if (!dontCoalesce) 993 coalesceCollapsedCrumbs(); 994 } 995 996 if (!focusedCrumb) { 997 // When not focused on a crumb we can be biased and collapse less important 998 // crumbs that the user might not care much about. 999 1000 // Compact child crumbs. 1001 if (makeCrumbsSmaller(compact, ChildSide)) 1002 return; 1003 1004 // Collapse child crumbs. 1005 if (makeCrumbsSmaller(collapse, ChildSide)) 1006 return; 1007 } 1008 1009 // Compact ancestor crumbs, or from both sides if focused. 1010 if (makeCrumbsSmaller(compact, (focusedCrumb ? BothSides : AncestorSide))) 1011 return; 1012 1013 // Collapse ancestor crumbs, or from both sides if focused. 1014 if (makeCrumbsSmaller(collapse, (focusedCrumb ? BothSides : AncestorSide))) 1015 return; 1016 1017 if (!selectedCrumb) 1018 return; 1019 1020 // Compact the selected crumb. 1021 compact(selectedCrumb); 1022 if (crumbsAreSmallerThanContainer()) 1023 return; 1024 1025 // Collapse the selected crumb as a last resort. Pass true to prevent coalescing. 1026 collapse(selectedCrumb, true); 1027 }, 1028 1029 /** 1030 * @param {boolean=} forceUpdate 1031 */ 1032 updateStyles: function(forceUpdate) 1033 { 1034 if (!WebInspector.cssModel.isEnabled()) 1035 return; 1036 var stylesSidebarPane = this.sidebarPanes.styles; 1037 var computedStylePane = this.sidebarPanes.computedStyle; 1038 if ((!stylesSidebarPane.isShowing() && !computedStylePane.isShowing()) || !stylesSidebarPane.needsUpdate) 1039 return; 1040 1041 stylesSidebarPane.update(this.selectedDOMNode(), forceUpdate); 1042 stylesSidebarPane.needsUpdate = false; 1043 }, 1044 1045 updateMetrics: function() 1046 { 1047 if (!WebInspector.cssModel.isEnabled()) 1048 return; 1049 var metricsSidebarPane = this.sidebarPanes.metrics; 1050 if (!metricsSidebarPane.isShowing() || !metricsSidebarPane.needsUpdate) 1051 return; 1052 1053 metricsSidebarPane.update(this.selectedDOMNode()); 1054 metricsSidebarPane.needsUpdate = false; 1055 }, 1056 1057 updatePlatformFonts: function() 1058 { 1059 if (!WebInspector.cssModel.isEnabled()) 1060 return; 1061 var platformFontsSidebar = this.sidebarPanes.platformFonts; 1062 if (!platformFontsSidebar.isShowing() || !platformFontsSidebar.needsUpdate) 1063 return; 1064 1065 platformFontsSidebar.update(this.selectedDOMNode()); 1066 platformFontsSidebar.needsUpdate = false; 1067 }, 1068 1069 updateProperties: function() 1070 { 1071 var propertiesSidebarPane = this.sidebarPanes.properties; 1072 if (!propertiesSidebarPane.isShowing() || !propertiesSidebarPane.needsUpdate) 1073 return; 1074 1075 propertiesSidebarPane.update(this.selectedDOMNode()); 1076 propertiesSidebarPane.needsUpdate = false; 1077 }, 1078 1079 updateEventListeners: function() 1080 { 1081 var eventListenersSidebarPane = this.sidebarPanes.eventListeners; 1082 if (!eventListenersSidebarPane.isShowing() || !eventListenersSidebarPane.needsUpdate) 1083 return; 1084 1085 eventListenersSidebarPane.update(this.selectedDOMNode()); 1086 eventListenersSidebarPane.needsUpdate = false; 1087 }, 1088 1089 /** 1090 * @param {!KeyboardEvent} event 1091 */ 1092 handleShortcut: function(event) 1093 { 1094 /** 1095 * @this {WebInspector.ElementsPanel} 1096 */ 1097 function handleUndoRedo() 1098 { 1099 if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key 1100 WebInspector.domAgent.undo(this._updateSidebars.bind(this)); 1101 event.handled = true; 1102 return; 1103 } 1104 1105 var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && event.keyIdentifier === "U+005A" : // Z key 1106 event.ctrlKey && event.keyIdentifier === "U+0059"; // Y key 1107 if (isRedoKey) { 1108 DOMAgent.redo(this._updateSidebars.bind(this)); 1109 event.handled = true; 1110 } 1111 } 1112 1113 if (!this.treeOutline.editing()) { 1114 handleUndoRedo.call(this); 1115 if (event.handled) 1116 return; 1117 } 1118 1119 this.treeOutline.handleShortcut(event); 1120 }, 1121 1122 handleCopyEvent: function(event) 1123 { 1124 var currentFocusElement = WebInspector.currentFocusElement(); 1125 if (currentFocusElement && WebInspector.isBeingEdited(currentFocusElement)) 1126 return; 1127 1128 // Don't prevent the normal copy if the user has a selection. 1129 if (!window.getSelection().isCollapsed) 1130 return; 1131 event.clipboardData.clearData(); 1132 event.preventDefault(); 1133 this.selectedDOMNode().copyNode(); 1134 }, 1135 1136 sidebarResized: function(event) 1137 { 1138 this.treeOutline.updateSelection(); 1139 }, 1140 1141 revealAndSelectNode: function(nodeId) 1142 { 1143 WebInspector.inspectorView.setCurrentPanel(this); 1144 1145 var node = WebInspector.domAgent.nodeForId(nodeId); 1146 if (!node) 1147 return; 1148 1149 while (!WebInspector.ElementsTreeOutline.showShadowDOM() && node && node.isInShadowTree()) 1150 node = node.parentNode; 1151 1152 WebInspector.domAgent.highlightDOMNodeForTwoSeconds(nodeId); 1153 this.selectDOMNode(node, true); 1154 }, 1155 1156 /** 1157 * @param {!WebInspector.ContextMenu} contextMenu 1158 * @param {!Object} target 1159 */ 1160 appendApplicableItems: function(event, contextMenu, target) 1161 { 1162 /** 1163 * @param {?DOMAgent.NodeId} nodeId 1164 */ 1165 function selectNode(nodeId) 1166 { 1167 if (nodeId) 1168 WebInspector.domAgent.inspectElement(nodeId); 1169 } 1170 1171 /** 1172 * @param {!WebInspector.RemoteObject} remoteObject 1173 */ 1174 function revealElement(remoteObject) 1175 { 1176 remoteObject.pushNodeToFrontend(selectNode); 1177 } 1178 1179 var commandCallback; 1180 if (target instanceof WebInspector.RemoteObject) { 1181 var remoteObject = /** @type {!WebInspector.RemoteObject} */ (target); 1182 if (remoteObject.subtype === "node") 1183 commandCallback = revealElement.bind(this, remoteObject); 1184 } else if (target instanceof WebInspector.DOMNode) { 1185 var domNode = /** @type {!WebInspector.DOMNode} */ (target); 1186 if (domNode.id) 1187 commandCallback = WebInspector.domAgent.inspectElement.bind(WebInspector.domAgent, domNode.id); 1188 } 1189 if (!commandCallback) 1190 return; 1191 // Skip adding "Reveal..." menu item for our own tree outline. 1192 if (this.treeOutline.element.isAncestor(event.target)) 1193 return; 1194 contextMenu.appendItem(WebInspector.useLowerCaseMenuTitles() ? "Reveal in Elements panel" : "Reveal in Elements Panel", commandCallback); 1195 }, 1196 1197 _sidebarContextMenuEventFired: function(event) 1198 { 1199 var contextMenu = new WebInspector.ContextMenu(event); 1200 contextMenu.show(); 1201 }, 1202 1203 _dockSideChanged: function() 1204 { 1205 var dockSide = WebInspector.dockController.dockSide(); 1206 var vertically = dockSide === WebInspector.DockController.State.DockedToRight && WebInspector.settings.splitVerticallyWhenDockedToRight.get(); 1207 this._splitVertically(vertically); 1208 }, 1209 1210 _showShadowDOMChanged: function() 1211 { 1212 this.treeOutline.update(); 1213 }, 1214 1215 /** 1216 * @param {boolean} vertically 1217 */ 1218 _splitVertically: function(vertically) 1219 { 1220 if (this.sidebarPaneView && vertically === !this.splitView.isVertical()) 1221 return; 1222 1223 if (this.sidebarPaneView) 1224 this.sidebarPaneView.detach(); 1225 1226 this.splitView.setVertical(!vertically); 1227 1228 var computedPane = new WebInspector.SidebarPane(WebInspector.UIString("Computed")); 1229 computedPane.element.classList.add("composite"); 1230 computedPane.element.classList.add("fill"); 1231 var expandComputed = computedPane.expand.bind(computedPane); 1232 1233 computedPane.bodyElement.appendChild(this.sidebarPanes.computedStyle.titleElement); 1234 computedPane.bodyElement.classList.add("metrics-and-computed"); 1235 this.sidebarPanes.computedStyle.show(computedPane.bodyElement); 1236 this.sidebarPanes.computedStyle.setExpandCallback(expandComputed); 1237 1238 this.sidebarPanes.platformFonts.show(computedPane.bodyElement); 1239 1240 /** 1241 * @param {!WebInspector.SidebarPane} pane 1242 * @param {!Element=} beforeElement 1243 * @this {WebInspector.ElementsPanel} 1244 */ 1245 function showMetrics(pane, beforeElement) 1246 { 1247 this.sidebarPanes.metrics.show(pane.bodyElement, beforeElement); 1248 } 1249 1250 /** 1251 * @param {!WebInspector.Event} event 1252 * @this {WebInspector.ElementsPanel} 1253 */ 1254 function tabSelected(event) 1255 { 1256 var tabId = /** @type {string} */ (event.data.tabId); 1257 if (tabId === computedPane.title()) 1258 showMetrics.call(this, computedPane, this.sidebarPanes.computedStyle.element); 1259 if (tabId === stylesPane.title()) 1260 showMetrics.call(this, stylesPane); 1261 } 1262 1263 this.sidebarPaneView = new WebInspector.SidebarTabbedPane(); 1264 1265 if (vertically) { 1266 this.sidebarPanes.metrics.show(computedPane.bodyElement, this.sidebarPanes.computedStyle.element); 1267 this.sidebarPanes.metrics.setExpandCallback(expandComputed); 1268 1269 var compositePane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title()); 1270 compositePane.element.classList.add("composite"); 1271 compositePane.element.classList.add("fill"); 1272 var expandComposite = compositePane.expand.bind(compositePane); 1273 1274 var splitView = new WebInspector.SplitView(true, "StylesPaneSplitRatio", 0.5); 1275 splitView.show(compositePane.bodyElement); 1276 1277 this.sidebarPanes.styles.show(splitView.firstElement()); 1278 splitView.firstElement().appendChild(this.sidebarPanes.styles.titleElement); 1279 this.sidebarPanes.styles.setExpandCallback(expandComposite); 1280 1281 computedPane.show(splitView.secondElement()); 1282 computedPane.setExpandCallback(expandComposite); 1283 1284 this.sidebarPaneView.addPane(compositePane); 1285 } else { 1286 var stylesPane = new WebInspector.SidebarPane(this.sidebarPanes.styles.title()); 1287 stylesPane.element.classList.add("composite"); 1288 stylesPane.element.classList.add("fill"); 1289 var expandStyles = stylesPane.expand.bind(stylesPane); 1290 stylesPane.bodyElement.classList.add("metrics-and-styles"); 1291 this.sidebarPanes.styles.show(stylesPane.bodyElement); 1292 this.sidebarPanes.styles.setExpandCallback(expandStyles); 1293 this.sidebarPanes.metrics.setExpandCallback(expandStyles); 1294 stylesPane.bodyElement.appendChild(this.sidebarPanes.styles.titleElement); 1295 1296 this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, tabSelected, this); 1297 1298 showMetrics.call(this, stylesPane); 1299 this.sidebarPaneView.addPane(stylesPane); 1300 this.sidebarPaneView.addPane(computedPane); 1301 } 1302 1303 this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners); 1304 this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints); 1305 this.sidebarPaneView.addPane(this.sidebarPanes.properties); 1306 this._extensionSidebarPanesContainer = this.sidebarPaneView; 1307 1308 for (var i = 0; i < this._extensionSidebarPanes.length; ++i) 1309 this._extensionSidebarPanesContainer.addPane(this._extensionSidebarPanes[i]); 1310 1311 this.sidebarPaneView.show(this.splitView.sidebarElement); 1312 this.sidebarPanes.styles.expand(); 1313 }, 1314 1315 /** 1316 * @param {string} id 1317 * @param {!WebInspector.SidebarPane} pane 1318 */ 1319 addExtensionSidebarPane: function(id, pane) 1320 { 1321 this._extensionSidebarPanes.push(pane); 1322 this._extensionSidebarPanesContainer.addPane(pane); 1323 }, 1324 1325 __proto__: WebInspector.Panel.prototype 1326} 1327