Changeset 117273 in webkit

Timestamp:

May 16, 2012 6:25:53 AM (12 years ago)

Author:

apavlov@chromium.org

Message:

Web Inspector: gradient properties are painful to inspect / author.
​https://bugs.webkit.org/show_bug.cgi?id=86379

Reviewed by Pavel Feldman.

The CSS styles layout has been changed to allow property values to wrap onto subsequent lines
to let the users see the entire value text.

• inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylePropertyTreeElement.prototype.updateTitle.): Avoid line breaks between the color swatch and value.

• inspector/front-end/elementsPanel.css:

(.styles-section .properties li.not-parsed-ok img.exclamation-mark):
(.styles-section .properties li):
(.styles-section .properties li .webkit-css-property):
(.styles-section.expanded .properties > li):
(.styles-section .properties > li .webkit-css-property):
(.styles-section .properties > li.child-editing):
(.styles-section .properties > li.child-editing .webkit-css-property):
(.styles-section .properties .enabled-button):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/StylesSidebarPane.js (modified) (1 diff)
• inspector/front-end/elementsPanel.css (modified) (3 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-05-16  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: gradient properties are painful to inspect / author.
+        https://bugs.webkit.org/show_bug.cgi?id=86379
+
+        Reviewed by Pavel Feldman.
+
+        The CSS styles layout has been changed to allow property values to wrap onto subsequent lines
+        to let the users see the entire value text.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.): Avoid line breaks between the color swatch and value.
+        * inspector/front-end/elementsPanel.css:
+        (.styles-section .properties li.not-parsed-ok img.exclamation-mark):
+        (.styles-section .properties li):
+        (.styles-section .properties li .webkit-css-property):
+        (.styles-section.expanded .properties > li):
+        (.styles-section .properties > li .webkit-css-property):
+        (.styles-section .properties > li.child-editing):
+        (.styles-section .properties > li.child-editing .webkit-css-property):
+        (.styles-section .properties .enabled-button):
+
 2012-05-16  Yury Semikhatsky  <yurys@chromium.org>
 

trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js

@@ -1893 +1893 @@
                 }
 
-                var container = document.createDocumentFragment();
+                var container = document.createElement("nobr");
                 container.appendChild(swatchElement);
                 container.appendChild(colorValueElement);

trunk/Source/WebCore/inspector/front-end/elementsPanel.css

@@ -247 +247 @@
     content: url(Images/warningIcon.png);
     opacity: 0.75;
+    position: relative;
+    float: left;
     width: 12px;
     height: 10px;
     margin: 0 6px 0 0;
-    padding: 0 1px;
+    left: -38px; /* outdent to compensate for the top-level property indent */
+    padding-left: 2px;
     vertical-align: baseline;
     -webkit-user-select: none;
     cursor: default;
+    z-index: 1;
 }
 
@@ -321 +325 @@
 .styles-section .properties li {
     margin-left: 12px;
-    white-space: nowrap;
+    padding-left: 22px;
+    white-space: normal;
     text-overflow: ellipsis;
     overflow: hidden;
     cursor: auto;
 }
+
+.styles-section .properties li .webkit-css-property {
+    margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .styles-section .properties li */
+}
+
+.styles-section.expanded .properties > li {
+    padding-left: 38px;
+}
+
+.styles-section .properties > li .webkit-css-property {
+    margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .styles-section .properties > li */
+}
+
+.styles-section .properties > li.child-editing {
+    padding-left: 8px;
+}
+
+.styles-section .properties > li.child-editing .webkit-css-property {
+    margin-left: -8px;
+}
+
 .styles-section.matched-styles .properties li {
     margin-left: 0 !important;
@@ -404 +430 @@
     z-index: 1;
     width: 18px;
-    left: -2px;
+    left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
 }