Changeset 251466 in webkit

Timestamp:

Oct 22, 2019, 5:33:37 PM (6 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Sources: keep the function/object name sticky in the object preview popover
​https://bugs.webkit.org/show_bug.cgi?id=203259

Reviewed by Matt Baker.

• UserInterface/Views/SourceCodeTextEditor.css:

(.popover .debugger-popover-content):
(.popover .debugger-popover-content.expandable): Added.
(.popover .debugger-popover-content > .title):
(.popover .debugger-popover-content > .body):
(.popover .debugger-popover-content.formatted): Added.
(.popover .expandable): Deleted.
Use flexbox to ensure that only the function/object body is scrollable.
Adjust the min/max width/height to take less space for smaller objects.

• UserInterface/Views/SourceCodeTextEditor.js:

(WI.SourceCodeTextEditor.prototype._showPopoverWithFormattedValue):
Wrap formatted values in a <div> so we can apply special styling to them.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/SourceCodeTextEditor.css (modified) (3 diffs)
• UserInterface/Views/SourceCodeTextEditor.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-10-22  Devin Rousso  <[email protected]>
+
+        Web Inspector: Sources: keep the function/object name sticky in the object preview popover
+        https://bugs.webkit.org/show_bug.cgi?id=203259
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/SourceCodeTextEditor.css:
+        (.popover .debugger-popover-content):
+        (.popover .debugger-popover-content.expandable): Added.
+        (.popover .debugger-popover-content > .title):
+        (.popover .debugger-popover-content > .body):
+        (.popover .debugger-popover-content.formatted): Added.
+        (.popover .expandable): Deleted.
+        Use flexbox to ensure that only the function/object body is scrollable.
+        Adjust the min/max width/height to take less space for smaller objects.
+
+        * UserInterface/Views/SourceCodeTextEditor.js:
+        (WI.SourceCodeTextEditor.prototype._showPopoverWithFormattedValue):
+        Wrap formatted values in a `<div>` so we can apply special styling to them.
+
 2019-10-22  Devin Rousso  <[email protected]>
 

trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css

@@ -113 +113 @@
 
 .popover .debugger-popover-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
     font-family: Menlo, monospace;
     font-size: 11px;
     white-space: pre;
-}
-
-.popover .expandable {
-    min-width: 300px;
-    min-height: 250px;
-
-    max-width: 350px;
-    max-height: 450px;
+    overflow: hidden;
+}
+
+.popover .debugger-popover-content.expandable {
+    min-width: 200px;
+    max-width: 400px;
+    min-height: 150px;
+    max-height: 300px;
 }
 
 .popover .debugger-popover-content > .title {
+    flex-shrink: 0;
+    padding: 2px 6px 4px 6px;
     font-family: -webkit-system-font, sans-serif;
     font-weight: 500;
-
-    padding: 2px 6px 4px 6px;
     text-overflow: ellipsis;
+    white-space: nowrap;
     overflow: hidden;
-    white-space: nowrap;
 }
 
@@ -145 +149 @@
 
 .popover .debugger-popover-content > .body {
+    padding-top: 2px;
     border-top: 1px solid var(--text-color-quaternary);
-    overflow: auto;
-    padding-top: 2px;
+    overflow: scroll;
 }
 
@@ -163 +167 @@
 .popover .debugger-popover-content.function > .body .CodeMirror pre {
     padding-left: 0;
+}
+
+.popover .debugger-popover-content.formatted {
+    justify-content: center;
+    align-items: center;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js

@@ -1964 +1964 @@
     _showPopoverWithFormattedValue(remoteObject)
     {
-        var content = WI.FormattedValue.createElementForRemoteObject(remoteObject);
-        this._showPopover(content);
+        let wrapper = document.createElement("div");
+        wrapper.className = "formatted";
+        wrapper.appendChild(WI.FormattedValue.createElementForRemoteObject(remoteObject));
+        this._showPopover(wrapper);
     }