DevTools: Improve text selection in ObjectPropertiesSection

This consolidates the name, colon, and value into a single flex item,
which removes extraneous line breaks when copying text, improves
paragraph selection, and fixes some overlapping selection highlights.

Bug: 824625
Change-Id: I90e01990cbf8c2e90da4aba8a9a9bd0f035a8e67
Reviewed-on: https://chromium-review.googlesource.com/976329
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562082}

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-log-object-with-getter-expected.txt

@@ -3,7 +3,7 @@ Tests that console logging dumps object values defined by getters and allows to
 console-log-object-with-getter.js:30 {}
 console-log-object-with-getter.js:31 (2) [(...), empty]
 console-log-object-with-getter.js:32 {}
-console-log-object-with-getter.js:30 {}foo: Objecta: 1b: 2__proto__: Objectget foo: ƒ ()set bar: ƒ (x)__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-properties-preview > object-state-note info-note > children expanded > parent expanded > name > object-properties-section-separator > object-value-object value > children expanded > selection fill > name > object-properties-section-separator > object-value-number value > children > selection fill > name > object-properties-section-separator > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
-console-log-object-with-getter.js:31 (2) [(...), empty]0: 1length: 2get 0: ƒ ()set 1: ƒ (x)__proto__: Array(0) console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-array source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > object-value-accessor > object-value-undefined > object-state-note info-note > children expanded > name > object-properties-section-separator > object-value-number value > children > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-array value > children
-console-log-object-with-getter.js:32 {}error: [Exception: Error: myError]function: [Exception: ƒ ()]number: [Exception: 123]string: [Exception: "myString"]get error: ƒ error()get function: ƒ ()get number: ƒ number()get string: ƒ string()__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-properties-preview > object-state-note info-note > children expanded > name > object-properties-section-separator > error value > object-value-error > children > name > object-properties-section-separator > error value > object-value-function > object-value-function-prefix > children > name > object-properties-section-separator > error value > object-value-number > children > name > object-properties-section-separator > error value > object-value-string > object-value-string-quote > object-value-string-quote > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
+console-log-object-with-getter.js:30 {}foo: Objectget foo: ƒ ()set bar: ƒ (x)__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-properties-preview > object-state-note info-note > children expanded > parent > name > object-value-object value > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-object value > children
+console-log-object-with-getter.js:31 (2) [(...), empty]0: 1length: 2get 0: ƒ ()set 1: ƒ (x)__proto__: Array(0) console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-array source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > object-value-accessor > object-value-undefined > object-state-note info-note > children expanded > name > object-value-number value > children > selection fill > name object-properties-section-dimmed > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-array value > children
+console-log-object-with-getter.js:32 {}error: [Exception: Error: myError]function: [Exception: ƒ ()]number: [Exception: 123]string: [Exception: "myString"]get error: ƒ error()get function: ƒ ()get number: ƒ number()get string: ƒ string()__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-properties-preview > object-state-note info-note > children expanded > name > error value > object-value-error > children > name > error value > object-value-function > object-value-function-prefix > children > name > error value > object-value-number > children > name > error value > object-value-string > object-value-string-quote > object-value-string-quote > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-function value > object-value-function-prefix > children > parent > selection fill > name object-properties-section-dimmed > object-value-object value > children
 

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-proxy-expected.txt

@@ -4,7 +4,7 @@ console-proxy.js:25 Proxy {boo: 42, foo: 43} console-message > source-code > co
 console-proxy.js:27 Proxy {boo: 42, foo: 43} console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-proxy source-code > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element > selection fill > console-object console-object-preview > object-description > object-properties-preview > name > object-value-number > name > object-value-number > object-state-note info-note > children
 window.accessedGet = false
 info-note display: inline-block
-console-proxy.js:25 Proxy {boo: 42, foo: 43}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > name > object-value-number > name > object-value-number > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > selection fill > name > object-properties-section-separator > object-value-boolean value > children
-console-proxy.js:27 Proxy {boo: 42, foo: 43}[[Handler]]: Object[[Target]]: Proxy[[IsRevoked]]: false console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > name > object-value-number > name > object-value-number > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-object value > children > parent > selection fill > name > object-properties-section-separator > object-value-proxy value > children > selection fill > name > object-properties-section-separator > object-value-boolean value > children
+console-proxy.js:25 Proxy {boo: 42, foo: 43}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > name > object-value-number > name > object-value-number > object-state-note info-note > children expanded > parent > selection fill > name > object-value-object value > children > parent > selection fill > name > object-value-object value > children > selection fill > name > object-value-boolean value > children
+console-proxy.js:27 Proxy {boo: 42, foo: 43}[[Handler]]: Object[[Target]]: Proxy[[IsRevoked]]: false console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-proxy source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object console-object-preview > object-description > object-properties-preview > name > object-value-number > name > object-value-number > object-state-note info-note > children expanded > parent > selection fill > name > object-value-object value > children > parent > selection fill > name > object-value-proxy value > children > selection fill > name > object-value-boolean value > children
 window.accessedGet = false
 

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

@@ -734,9 +734,9 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
     if (!this.expandedValueElement)
       return;
     if (value)
-      this.listItemElement.replaceChild(this.expandedValueElement, this.valueElement);
+      this._rowContainer.replaceChild(this.expandedValueElement, this.valueElement);
     else
-      this.listItemElement.replaceChild(this.valueElement, this.expandedValueElement);
+      this._rowContainer.replaceChild(this.valueElement, this.expandedValueElement);
   }
 
   /**
@@ -768,9 +768,6 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
 
     this._updatePropertyPath();
 
-    const separatorElement = createElementWithClass('span', 'object-properties-section-separator');
-    separatorElement.textContent = ': ';
-
     if (this.property.value) {
       const showPreview = this.property.name !== '__proto__';
       this.valueElement = ObjectUI.ObjectPropertiesSection.createValueElementWithCustomSupport(
@@ -789,7 +786,8 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
       this.expandedValueElement = this._createExpandedValueElement(this.property.value);
 
     this.listItemElement.removeChildren();
-    this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
+    this._rowContainer = UI.html`<span>${this.nameElement}: ${this.valueElement}</span>`;
+    this.listItemElement.appendChild(this._rowContainer);
   }
 
   _updatePropertyPath() {
@@ -833,7 +831,7 @@ ObjectUI.ObjectPropertyTreeElement = class extends UI.TreeElement {
     if (this._prompt || !this.treeOutline._editable || this._readOnly)
       return;
 
-    this._editableDiv = this.listItemElement.createChild('span', 'editable-div');
+    this._editableDiv = this._rowContainer.createChild('span', 'editable-div');
 
     let text = this.property.value.description;
     if (this.property.value.type === 'string' && typeof text === 'string')

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

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-.object-properties-section-separator {
-    flex-shrink: 0;
-    padding-right: 5px;
-}
-
 .object-properties-section-dimmed {
     opacity: 0.6;
 }