[DevTools] Add header for OOPIF's elements trees.

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 61 matching lines @@
     this._computedStyleWidget = new Elements.ComputedStyleWidget();
     this._metricsWidget = new Elements.MetricsSidebarPane();
 
     this._stylesSidebarToolbar = this._createStylesSidebarToolbar();
 
     Common.moduleSetting('sidebarPosition').addChangeListener(this._updateSidebarPosition.bind(this));
     this._updateSidebarPosition();
 
     /** @type {!Array.<!Elements.ElementsTreeOutline>} */
     this._treeOutlines = [];
+    /** @type {!Map<!Elements.ElementsTreeOutline, !Element>} */
+    this._treeOutlineHeaders = new Map();

[pfeldman, 2017/02/23 23:49:41]

Why you no use symbols?

     SDK.targetManager.observeTargets(this);
+    SDK.targetManager.addEventListener(
+        SDK.TargetManager.Events.NameChanged,

[pfeldman, 2017/02/23 23:49:41]

What is TargetManager name?

+        event => this._targetNameChanged(/** @type {!SDK.Target} */ (event.data)));
     Common.moduleSetting('showUAShadowDOM').addChangeListener(this._showUAShadowDOMChanged.bind(this));
     SDK.targetManager.addModelListener(
         SDK.DOMModel, SDK.DOMModel.Events.DocumentUpdated, this._documentUpdatedEvent, this);
     Extensions.extensionServer.addEventListener(
         Extensions.ExtensionServer.Events.SidebarPaneAdded, this._extensionSidebarPaneAdded, this);
   }
 
   /**
    * @return {!Elements.ElementsPanel}
    */
@@ skipping 117 matching lines @@
       return;
     var treeOutline = new Elements.ElementsTreeOutline(domModel, true, true);
     treeOutline.setWordWrap(Common.moduleSetting('domWordWrap').get());
     treeOutline.wireToDOMModel();
     treeOutline.addEventListener(
         Elements.ElementsTreeOutline.Events.SelectedNodeChanged, this._selectedNodeChanged, this);
     treeOutline.addEventListener(
         Elements.ElementsTreeOutline.Events.ElementsTreeUpdated, this._updateBreadcrumbIfNeeded, this);
     new Elements.ElementsTreeElementHighlighter(treeOutline);
     this._treeOutlines.push(treeOutline);
+    if (target.parentTarget()) {
+      this._treeOutlineHeaders.set(treeOutline, createElementWithClass('div', 'elements-tree-header'));
+      this._targetNameChanged(target);
+    }
 
     // Perform attach if necessary.
     if (this.isShowing())
       this.wasShown();
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     var domModel = SDK.DOMModel.fromTarget(target);
     if (!domModel)
       return;
     var treeOutline = Elements.ElementsTreeOutline.forDOMModel(domModel);
     treeOutline.unwireFromDOMModel();
     this._treeOutlines.remove(treeOutline);
+    var header = this._treeOutlineHeaders.get(treeOutline);
+    if (header)
+      header.remove();
+    this._treeOutlineHeaders.delete(treeOutline);
     treeOutline.element.remove();
   }
 
+  /**
+   * @param {!SDK.Target} target
+   */
+  _targetNameChanged(target) {
+    var domModel = SDK.DOMModel.fromTarget(target);
+    if (!domModel)
+      return;
+    var treeOutline = Elements.ElementsTreeOutline.forDOMModel(domModel);
+    if (!treeOutline)
+      return;
+    var header = this._treeOutlineHeaders.get(treeOutline);
+    if (!header)
+      return;
+    header.removeChildren();
+    header.createChild('div', 'elements-tree-header-frame').textContent = Common.UIString('Frame');

[pfeldman, 2017/02/24 19:39:38]

You can use .formatLocalized.

+    header.appendChild(Components.Linkifier.linkifyURL(target.inspectedURL(), target.name()));
+  }
+
   _updateTreeOutlineVisibleWidth() {
     if (!this._treeOutlines.length)
       return;
 
     var width = this._splitWidget.element.offsetWidth;
     if (this._splitWidget.isVertical())
       width -= this._splitWidget.sidebarSize();
     for (var i = 0; i < this._treeOutlines.length; ++i)
       this._treeOutlines[i].setVisibleWidth(width);
 
@@ skipping 18 matching lines @@
 
   /**
    * @override
    */
   wasShown() {
     UI.context.setFlavor(Elements.ElementsPanel, this);
 
     for (var i = 0; i < this._treeOutlines.length; ++i) {
       var treeOutline = this._treeOutlines[i];
       // Attach heavy component lazily
-      if (treeOutline.element.parentElement !== this._contentElement)
+      if (treeOutline.element.parentElement !== this._contentElement) {
+        var header = this._treeOutlineHeaders.get(treeOutline);
+        if (header)
+          this._contentElement.appendChild(header);
         this._contentElement.appendChild(treeOutline.element);
+      }
     }
     super.wasShown();
     this._breadcrumbs.update();
 
     for (var i = 0; i < this._treeOutlines.length; ++i) {
       var treeOutline = this._treeOutlines[i];
       treeOutline.setVisible(true);
 
       if (!treeOutline.rootDOMNode) {
         if (treeOutline.domModel().existingDocument())
@@ skipping 10 matching lines @@
    */
   willHide() {
     UI.context.setFlavor(Elements.ElementsPanel, null);
 
     SDK.DOMModel.hideDOMNodeHighlight();
     for (var i = 0; i < this._treeOutlines.length; ++i) {
       var treeOutline = this._treeOutlines[i];
       treeOutline.setVisible(false);
       // Detach heavy component on hide
       this._contentElement.removeChild(treeOutline.element);
+      var header = this._treeOutlineHeaders.get(treeOutline);
+      if (header)
+        this._contentElement.removeChild(header);
     }
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
     super.willHide();
   }
 
   /**
    * @override
    */
   onResize() {
@@ skipping 749 matching lines @@
    * @param {!SDK.DOMNode} node
    * @return {?{title: string, color: string}}
    */
   decorate(node) {
     return {
       color: 'orange',
       title: Common.UIString('Element state: %s', ':' + SDK.CSSModel.fromNode(node).pseudoState(node).join(', :'))
     };
   }
 };