Changeset 196207 in webkit

Timestamp:

Feb 5, 2016 5:15:13 PM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Visual Styles sidebar should be more forgiving to long labels
​https://bugs.webkit.org/show_bug.cgi?id=153927
<rdar://problem/24343897>

Patch by Devin Rousso <Devin Rousso> on 2016-02-05
Reviewed by Timothy Hatcher.

If a label is too long for it's container, it overflows and is visible
above the rest of the elements nearby.

• UserInterface/Views/VisualStylePropertyEditor.css:

(.visual-style-property-container > .visual-style-property-title):
Adds text overflow to properties that extend beyond the container's width.

• UserInterface/Views/VisualStylePropertyEditor.js:

(WebInspector.VisualStylePropertyEditor):
Now also adds the label value as a title attribute to the element, just in
case the content overflows.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/VisualStylePropertyEditor.css (modified) (1 diff)
• UserInterface/Views/VisualStylePropertyEditor.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-02-05  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Visual Styles sidebar should be more forgiving to long labels
+        https://bugs.webkit.org/show_bug.cgi?id=153927
+        <rdar://problem/24343897>
+
+        Reviewed by Timothy Hatcher.
+
+        If a label is too long for it's container, it overflows and is visible
+        above the rest of the elements nearby.
+
+        * UserInterface/Views/VisualStylePropertyEditor.css:
+        (.visual-style-property-container > .visual-style-property-title):
+        Adds text overflow to properties that extend beyond the container's width.
+
+        * UserInterface/Views/VisualStylePropertyEditor.js:
+        (WebInspector.VisualStylePropertyEditor):
+        Now also adds the label value as a title attribute to the element, just in
+        case the content overflows.
+
 2016-02-05  Saam barati  <sbarati@apple.com>
 

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

@@ -33 +33 @@
     margin: 4px;
     text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 

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

@@ -74 +74 @@
             this._titleElement = titleContainer.createChild("span");
             this._titleElement.append(label);
+            this._titleElement.title = label;
             this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
             this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));