[Devtools] Fix left margin for selection element

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.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 214 matching lines @@
   }
 
   _createSelection() {
     var listItemElement = this.listItemElement;
     if (!listItemElement)
       return;
 
     if (!this.selectionElement) {
       this.selectionElement = createElement('div');
       this.selectionElement.className = 'selection fill';
-      this.selectionElement.style.setProperty('margin-left', (-this._computeLeftIndent()) + 'px');
+      this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
       listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
     }
   }
 
   /**
    * @override
    */
   onbind() {
     if (!this._elementCloseTag)
       this._node[this.treeOutline.treeElementSymbol()] = this;
@@ skipping 550 matching lines @@
         initialValue, {name: 'xml', htmlMode: true}, 'web-inspector-html', Common.moduleSetting('domWordWrap').get(),
         true);
     UI.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
 
     /**
      * @param {!Object} controller
      * @this {Elements.ElementsTreeElement}
      */
     function markAsBeingEdited(controller) {
       this._editing = /** @type {!UI.InplaceEditor.Controller} */ (controller);
-      this._editing.setWidth(this.treeOutline.visibleWidth() - this._computeLeftIndent());
+      this._editing.setWidth(this.treeOutline.visibleWidth() - this.computeLeftIndent());
       this.treeOutline.setMultilineEditing(this._editing);
     }
   }
 
   _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection) {
     delete this._editing;
 
     var treeOutline = this.treeOutline;
 
     /**
@@ skipping 191 matching lines @@
     }
 
     delete this.selectionElement;
     if (this.selected)
       this._createSelection();
     this._highlightSearchResults();
   }
 
   /**
    * @return {number}
+   * @override
    */
-  _computeLeftIndent() {
+  computeLeftIndent() {

[dgozman, 2017/01/13 01:53:42]

I'm worried that this clashes with treeoutline's one, since we do a lot of
custom things here. Let's keep them separate.

[aboxhall, 2017/01/13 02:22:03]

Done.

     var treeElement = this.parent;
     var depth = 0;
     while (treeElement !== null) {
       depth++;
       treeElement = treeElement.parent;
     }
 
     /** Keep it in sync with elementsTreeOutline.css **/
     return 12 * (depth - 2) + (this.isExpandable() ? 1 : 12);
   }
 
   updateDecorations() {
-    this._gutterContainer.style.left = (-this._computeLeftIndent()) + 'px';
+    this._gutterContainer.style.left = (-this.computeLeftIndent()) + 'px';
 
     if (this.isClosingTag())
       return;
 
     var node = this._node;
     if (node.nodeType() !== Node.ELEMENT_NODE)
       return;
 
     if (!this.treeOutline._decoratorExtensions)
       /** @type {!Array.<!Runtime.Extension>} */
@@ skipping 520 matching lines @@
 
 // A union of HTML4 and HTML5-Draft elements that explicitly
 // or implicitly (for HTML5) forbid the closing tag.
 Elements.ElementsTreeElement.ForbiddenClosingTagElements = new Set([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr'
 ]);
 
 // These tags we do not allow editing their tag name.
 Elements.ElementsTreeElement.EditTagBlacklist = new Set(['html', 'head', 'body']);