DevTools: use expandable fragment for long Object property values

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

Bug: 754216
Change-Id: Id7f04637f85ad776e4c61b0cedf500351723342d
Reviewed-on: https://chromium-review.googlesource.com/1081677
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#564286}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d96b9f46eafdd0145393b5fe3e188e9bedb2da72

front_end/console/ConsoleViewMessage.js

@@ -567,7 +567,7 @@ Console.ConsoleViewMessage = class {
     const result = createElement('span');
     const description = obj.description || '';
     if (description.length > Console.ConsoleViewMessage._MaxTokenizableStringLength)
-      result.appendChild(Console.ConsoleViewMessage._createExpandableFragment(description));
+      result.appendChild(UI.createExpandableText(description, Console.ConsoleViewMessage._LongStringVisibleLength));
     else
       result.createTextChild(description);
     if (obj.objectId)
@@ -1368,7 +1368,7 @@ Console.ConsoleViewMessage = class {
    */
   static linkifyWithCustomLinkifier(string, linkifier) {
     if (string.length > Console.ConsoleViewMessage._MaxTokenizableStringLength)
-      return Console.ConsoleViewMessage._createExpandableFragment(string);
+      return UI.createExpandableText(string, Console.ConsoleViewMessage._LongStringVisibleLength);
     const container = createDocumentFragment();
     const tokens = this._tokenizeMessageText(string);
     for (const token of tokens) {
@@ -1392,31 +1392,6 @@ Console.ConsoleViewMessage = class {
     return container;
   }
 
-  /**
-   * @param {string} text
-   * @return {!DocumentFragment}
-   */
-  static _createExpandableFragment(text) {
-    const fragment = createDocumentFragment();
-    fragment.textContent = text.slice(0, Console.ConsoleViewMessage._LongStringVisibleLength);
-    const hiddenText = text.slice(Console.ConsoleViewMessage._LongStringVisibleLength);
-
-    const expandButton = fragment.createChild('span', 'console-inline-button');
-    expandButton.setAttribute('data-text', ls`Show ${Number.withThousandsSeparator(hiddenText.length)} more`);
-    expandButton.addEventListener('click', () => {
-      if (expandButton.parentElement)
-        expandButton.parentElement.insertBefore(createTextNode(hiddenText), expandButton);
-      expandButton.remove();
-    });
-
-    const copyButton = fragment.createChild('span', 'console-inline-button');
-    copyButton.setAttribute('data-text', ls`Copy`);
-    copyButton.addEventListener('click', () => {
-      InspectorFrontendHost.copyText(text);
-    });
-    return fragment;
-  }
-
   /**
    * @param {string} string
    * @return {!DocumentFragment}

front_end/console/consoleView.css

@@ -432,27 +432,6 @@
     margin-bottom: -2px;
 }
 
-.console-inline-button {
-    background-color: #dedede;
-    padding: 2px 4px;
-    margin: 0 2px;
-    color: #333;
-    cursor: pointer;
-    border-radius: 3px;
-    font-size: 12px;
-    font-family: sans-serif;
-    white-space: nowrap;
-    display: inline-block;
-}
-
-.console-inline-button::after {
-    content: attr(data-text);
-}
-
-.console-inline-button:hover {
-    background-color: #d5d5d5;
-}
-
 .console-searchable-view {
     max-height: 100%;
 }

front_end/console_test_runner/ConsoleTestRunner.js

@@ -379,6 +379,15 @@ ConsoleTestRunner.expandConsoleMessages = function(callback, deepFilter, section
   }
 };
 
+/**
+ * @param {function(!Element):boolean} deepFilter
+ * @param {function(!ObjectUI.ObjectPropertiesSection):boolean} sectionFilter
+ * @return {!Promise}
+ */
+ConsoleTestRunner.expandConsoleMessagesPromise = function(deepFilter, sectionFilter) {
+  return new Promise(fulfill => ConsoleTestRunner.expandConsoleMessages(fulfill, deepFilter, sectionFilter));
+};
+
 /**
  * @param {!Function} callback
  */

front_end/object_ui/ObjectPropertiesSection.js

@@ -262,8 +262,10 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
       if (value.preview && showPreview) {
         const previewFormatter = new ObjectUI.RemoteObjectPreviewFormatter();
         previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
+      } else if (description.length > ObjectUI.ObjectPropertiesSection._maxRenderableStringLength) {
+        valueElement.appendChild(UI.createExpandableText(description, 50));
       } else {
-        valueElement.setTextContentTruncatedIfNeeded(description);
+        valueElement.textContent = description;
       }
     }
 
@@ -292,8 +294,12 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
      */
     function createStringElement() {
       const valueElement = createElementWithClass('span', 'object-value-string');
+      const text = description.replace(/\n/g, '\u21B5');
       valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
-      valueElement.createTextChild('').setTextContentTruncatedIfNeeded(description.replace(/\n/g, '\u21B5'));
+      if (description.length > ObjectUI.ObjectPropertiesSection._maxRenderableStringLength)
+        valueElement.appendChild(UI.createExpandableText(text, 50));
+      else
+        valueElement.createTextChild(text);
       valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
       valueElement.title = description || '';
       return valueElement;
@@ -404,6 +410,8 @@ ObjectUI.ObjectPropertiesSection = class extends UI.TreeOutlineInShadow {
 
 /** @const */
 ObjectUI.ObjectPropertiesSection._arrayLoadThreshold = 100;
+/** @const */
+ObjectUI.ObjectPropertiesSection._maxRenderableStringLength = 10000;
 
 
 /**

front_end/ui/UIUtils.js

@@ -2019,3 +2019,29 @@ UI.createInlineButton = function(toolbarButton) {
   shadowRoot.appendChild(toolbar.element);
   return element;
 };
+
+/**
+ * @param {string} text
+ * @param {number} maxLength
+ * @return {!DocumentFragment}
+ */
+UI.createExpandableText = function(text, maxLength) {
+  const fragment = createDocumentFragment();
+  fragment.textContent = text.slice(0, maxLength);
+  const hiddenText = text.slice(maxLength);
+
+  const expandButton = fragment.createChild('span', 'expandable-inline-button');
+  expandButton.setAttribute('data-text', ls`Show ${Number.withThousandsSeparator(hiddenText.length)} more`);
+  expandButton.addEventListener('click', () => {
+    if (expandButton.parentElement)
+      expandButton.parentElement.insertBefore(createTextNode(hiddenText), expandButton);
+    expandButton.remove();
+  });
+
+  const copyButton = fragment.createChild('span', 'expandable-inline-button');
+  copyButton.setAttribute('data-text', ls`Copy`);
+  copyButton.addEventListener('click', () => {
+    InspectorFrontendHost.copyText(text);
+  });
+  return fragment;
+};

front_end/ui/inspectorCommon.css

@@ -396,3 +396,24 @@ label[is=dt-icon-label] {
     -webkit-mask-position: var(--spritesheet-position);
     background: #fafafa !important;
 }
+
+.expandable-inline-button {
+    background-color: #dedede;
+    padding: 2px 4px;
+    margin: 0 2px;
+    color: #333;
+    cursor: pointer;
+    border-radius: 3px;
+    font-size: 12px;
+    font-family: sans-serif;
+    white-space: nowrap;
+    display: inline-block;
+}
+
+.expandable-inline-button::after {
+    content: attr(data-text);
+}
+
+.expandable-inline-button:hover {
+    background-color: #d5d5d5;
+}