DevTools: [Elements] account for the left indent in the width of inplace editor

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 244 matching lines @@
 
     _createSelection: function()
     {
         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: function()
     {
         if (!this._elementCloseTag)
@@ skipping 575 matching lines @@
         config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }, "web-inspector-html", WebInspector.moduleSetting("domWordWrap").get(), true);
         WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement, config).then(markAsBeingEdited.bind(this));
 
         /**
          * @param {!Object} controller
          * @this {WebInspector.ElementsTreeElement}
          */
         function markAsBeingEdited(controller)
         {
             this._editing = /** @type {!WebInspector.InplaceEditor.Controller} */ (controller);
-            this._editing.setWidth(this.treeOutline.visibleWidth());
+            this._editing.setWidth(this.treeOutline.visibleWidth() - this._computeLeftIndent());
             this.treeOutline.setMultilineEditing(this._editing);
         }
     },
 
     _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
     {
         delete this._editing;
 
         var treeOutline = this.treeOutline;
 
@@ skipping 214 matching lines @@
     _computeLeftIndent: function()
     {
         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);
+        return 12 * (depth - 2) + (this.isExpandable() ? 1 : 12);
     },
 
     updateDecorations: function()
     {
-        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 523 matching lines @@
     },
 
     _editAsHTML: function()
     {
         var promise = WebInspector.Revealer.revealPromise(this.node());
         promise.then(() => WebInspector.actionRegistry.action("elements.edit-as-html").execute());
     },
 
     __proto__: TreeElement.prototype
 }