DevTools: expanded Objects hide overflow

All ObjectPropertiesSections call 'hideOverflow()', to avoid overflow
in the OPS's title (to adress crbugs 571759,571767).

However, hideOverflow does not hide overflow due to children, which
causes horizontal scrolling in Console.  This CL makes hide overflow
in properties for all OPS except JSONView.

Screenshot: https://imgur.com/a/x51xJNJ

Bug: none
Change-Id: Ie78f48cd873fd1d61b27c17e76683a4f7031aee8
Reviewed-on: https://chromium-review.googlesource.com/1162913Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580726}

third_party/blink/renderer/devtools/front_end/object_ui/ObjectPropertiesSection.js

@@ -35,12 +35,14 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
    * @param {?string=} emptyPlaceholder
    * @param {boolean=} ignoreHasOwnProperty
    * @param {!Array.<!SDK.RemoteObjectProperty>=} extraProperties
+   * @param {boolean=} showOverflow
    */
-  constructor(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties) {
+  constructor(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, showOverflow) {
     super();
     this._object = object;
     this._editable = true;
-    this.hideOverflow();
+    if (!showOverflow)
+      this.hideOverflow();
     this.setFocusable(false);
     this._objectTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
         object, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties);
@@ -792,7 +794,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
       this.expandedValueElement = this._createExpandedValueElement(this.property.value);
 
     this.listItemElement.removeChildren();
-    this._rowContainer = UI.html`<span>${this.nameElement}: ${this.valueElement}</span>`;
+    this._rowContainer = UI.html`<span class='name-and-value'>${this.nameElement}: ${this.valueElement}</span>`;
     this.listItemElement.appendChild(this._rowContainer);
   }
 
@@ -864,6 +866,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
 
     const proxyElement =
         this._prompt.attachAndStartEditing(this._editableDiv, this._editingCommitted.bind(this, originalContent));
+    proxyElement.classList.add('property-prompt');
     this.listItemElement.getComponentSelection().selectAllChildren(this._editableDiv);
     proxyElement.addEventListener('keydown', this._promptKeyDown.bind(this, originalContent), false);
   }

third_party/blink/renderer/devtools/front_end/object_ui/objectPropertiesSection.css

@@ -50,3 +50,17 @@
 .object-properties-section .editable-div {
     overflow: hidden;
 }
+
+.name-and-value {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.editing-sub-part .name-and-value {
+    overflow: visible;
+    display: inline-flex;
+}
+
+.property-prompt {
+    margin-left: 4px;
+}

third_party/blink/renderer/devtools/front_end/source_frame/JSONView.js

@@ -166,7 +166,8 @@ SourceFrame.JSONView = class extends UI.VBox {
 
     const obj = SDK.RemoteObject.fromLocalObject(this._parsedJSON.data);
     const title = this._parsedJSON.prefix + obj.description + this._parsedJSON.suffix;
-    this._treeOutline = new ObjectUI.ObjectPropertiesSection(obj, title);
+    this._treeOutline = new ObjectUI.ObjectPropertiesSection(
+        obj, title, undefined, undefined, undefined, undefined, true /* showOverflow */);
     this._treeOutline.enableContextMenu();
     this._treeOutline.setEditable(false);
     this._treeOutline.expand();