DevTools: remove section editing state, manual height in SSP

A) SSP used to manually set height, 'contain: strict' during edits
   for performance. This CL removes them, since there is no
   noticeable gain. See crbug.com/684341

B) Removes unnecessary 'editing state tracking', once used to
   manually focus sections before ShadowDOM-delegatesFocus.
   See also crbug.com/791494

Pre-keyboard navigation) SSP has tabIndex 0. On editingCommitted,
we ensure focus goes back to the pane.

After-keynav) Individual sections have tabIndex -1. On stopEditing,
parent pane has focus, but we manually move focus to the section.

After ShadowDOM V1) parent pane no longer has tabIndex, but uses
'delegatesFocus'. This makes moving focus around unnecessary.
However, it also introduces 'blue flickering' when users 'Tab'
navigate through properties, since focus is first delegated to
the section. This bug is not addressed in this CL.

Bug: 931145
Change-Id: If24177344ec975478fd91937daea58630b396069
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1574366
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652667}

third_party/blink/renderer/devtools/front_end/elements/StylePropertyTreeElement.js

@@ -614,10 +614,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     if (!isEditingName && (!this._parentPane.node().pseudoType() || this.name !== 'content'))
       this._prompt.addEventListener(UI.TextPrompt.Events.TextChanged, this._applyFreeFlowStyleTextEdit.bind(this));
 
-    // Attach prompt before `section.startEditing()`, which manually sets height. crbug.com/949383
     const proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
-    if (section)
-      section.startEditing();
     this._navigateToSource(selectElement, true);
 
     proxyElement.addEventListener('keydown', this._editingNameValueKeyDown.bind(this, context), false);
@@ -781,7 +778,6 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
    * @param {string} moveDirection
    */
   async _editingCommitted(userInput, context, moveDirection) {
-    const hadFocus = this._parentPane.element.hasFocus();
     this._removePrompt();
     this.editingEnded(context);
     const isEditingName = context.isEditingName;
@@ -815,8 +811,6 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
         (isPropertySplitPaste || moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
     const section = /** @type {!Elements.StylePropertiesSection} */ (this.section());
     if (((userInput !== context.previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
-      if (hadFocus)
-        this._parentPane.element.focus();
       let propertyText;
       if (blankInput || (this._newProperty && this.valueElement.textContent.isWhitespace())) {
         propertyText = '';
@@ -914,9 +908,6 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
       this._prompt.detach();
       this._prompt = null;
     }
-    const section = this.section();
-    if (section)
-      section.stopEditing();
   }
 
   styleTextAppliedForTest() {

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -819,7 +819,6 @@ Elements.StylePropertiesSection = class {
     this.element = createElementWithClass('div', 'styles-section matched-styles monospace');
     this.element.tabIndex = -1;
     UI.ARIAUtils.markAsTreeitem(this.element);
-    this._editing = false;
     this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
     this.element._section = this;
     this._innerElement = this.element.createChild('div');
@@ -889,9 +888,6 @@ Elements.StylePropertiesSection = class {
       this.propertiesTreeOutline.element.classList.add('read-only');
     }
 
-    const throttler = new Common.Throttler(100);
-    this._scheduleHeightUpdate = () => throttler.schedule(this._manuallySetHeight.bind(this));
-
     this._hoverableSelectorsMode = false;
     this._markSelectorMatches();
     this.onpopulate();
@@ -954,7 +950,7 @@ Elements.StylePropertiesSection = class {
    * @param {!Event} event
    */
   _onKeyDown(event) {
-    if (this._editing || !this.editable || event.altKey || event.ctrlKey || event.metaKey)
+    if (UI.isEditing() || !this.editable || event.altKey || event.ctrlKey || event.metaKey)
       return;
     switch (event.key) {
       case 'Enter':
@@ -1604,7 +1600,6 @@ Elements.StylePropertiesSection = class {
         this._editingMediaCommitted.bind(this, media), this._editingMediaCancelled.bind(this, element), undefined,
         this._editingMediaBlurHandler.bind(this));
     UI.InplaceEditor.startEditing(element, config);
-    this.startEditing();
 
     element.getComponentSelection().selectAllChildren(element);
     this._parentPane.setEditingStyle(true);
@@ -1621,7 +1616,6 @@ Elements.StylePropertiesSection = class {
     this._parentPane.setEditingStyle(false);
     const parentMediaElement = element.enclosingNodeOrSelfWithClass('media');
     parentMediaElement.classList.remove('editing-media');
-    this.stopEditing();
   }
 
   /**
@@ -1736,7 +1730,6 @@ Elements.StylePropertiesSection = class {
     const config =
         new UI.InplaceEditor.Config(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this));
     UI.InplaceEditor.startEditing(this._selectorElement, config);
-    this.startEditing();
 
     element.getComponentSelection().selectAllChildren(element);
     this._parentPane.setEditingStyle(true);
@@ -1853,7 +1846,6 @@ Elements.StylePropertiesSection = class {
 
   _editingSelectorEnded() {
     this._parentPane.setEditingStyle(false);
-    this.stopEditing();
   }
 
   editingSelectorCancelled() {
@@ -1863,30 +1855,6 @@ Elements.StylePropertiesSection = class {
     // This is overridden by BlankStylePropertiesSection.
     this._markSelectorMatches();
   }
-
-  startEditing() {
-    this._manuallySetHeight();
-    this.element.addEventListener('input', this._scheduleHeightUpdate, true);
-    this._editing = true;
-  }
-
-  /**
-   * @return {!Promise}
-   */
-  _manuallySetHeight() {
-    this.element.style.height = (this._innerElement.clientHeight + 1) + 'px';
-    this.element.style.contain = 'strict';
-    return Promise.resolve();
-  }
-
-  stopEditing() {
-    this.element.style.removeProperty('height');
-    this.element.style.removeProperty('contain');
-    this.element.removeEventListener('input', this._scheduleHeightUpdate, true);
-    this._editing = false;
-    if (this._parentPane.element === this._parentPane.element.ownerDocument.deepActiveElement())
-      this.element.focus();
-  }
 };
 
 Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSection {