Web Inspector: Styles Redesign: Display warnings
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Nov 2017 01:19:11 +0000 (01:19 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 7 Nov 2017 01:19:11 +0000 (01:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179215

Reviewed by Brian Burg.

Display warning icons on the right of the property.

For now, the warning icons have only three title messages:
- Invalid property name;
- Invalid property value;
- Duplicate property.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property):
(.spreadsheet-style-declaration-editor .property-toggle):
(.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
(.spreadsheet-style-declaration-editor .property.has-warning):
(.spreadsheet-style-declaration-editor .property .warning):
Draw the warning arrow and icon using only one HTML element.
Don't set "top" property so the element remains vertically where it would be if it had "position: static".

(.spreadsheet-style-declaration-editor .property.has-warning .warning):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
(WI.SpreadsheetCSSStyleDeclarationEditor):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration :matches(.header, .header-media)):
(.spreadsheet-css-declaration .close-brace):
Make properties span the entire width of the styles sidebar. Unsupported properties have yellow
background. There should be no gaps between the property element and sidebar left and right edges.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.updateStatus):
(WI.SpreadsheetStyleProperty.prototype._update):
(WI.SpreadsheetStyleProperty.prototype.updateClassNames): Deleted.
Rename updateClassNames to updateStatus since it modifies title attribute of the warning element.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224523 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index 2293093..887a7cd 100644 (file)
@@ -1,3 +1,45 @@
+2017-11-06  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: Display warnings
+        https://bugs.webkit.org/show_bug.cgi?id=179215
+
+        Reviewed by Brian Burg.
+
+        Display warning icons on the right of the property.
+
+        For now, the warning icons have only three title messages:
+        - Invalid property name;
+        - Invalid property value;
+        - Duplicate property.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property):
+        (.spreadsheet-style-declaration-editor .property-toggle):
+        (.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
+        (.spreadsheet-style-declaration-editor .property.has-warning):
+        (.spreadsheet-style-declaration-editor .property .warning):
+        Draw the warning arrow and icon using only one HTML element.
+        Don't set "top" property so the element remains vertically where it would be if it had "position: static".
+
+        (.spreadsheet-style-declaration-editor .property.has-warning .warning):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
+        (WI.SpreadsheetCSSStyleDeclarationEditor):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration):
+        (.spreadsheet-css-declaration :matches(.header, .header-media)):
+        (.spreadsheet-css-declaration .close-brace):
+        Make properties span the entire width of the styles sidebar. Unsupported properties have yellow
+        background. There should be no gaps between the property element and sidebar left and right edges.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype.updateStatus):
+        (WI.SpreadsheetStyleProperty.prototype._update):
+        (WI.SpreadsheetStyleProperty.prototype.updateClassNames): Deleted.
+        Rename updateClassNames to updateStatus since it modifies title attribute of the warning element.
+
 2017-11-06  Ross Kirsling  <ross.kirsling@sony.com>
 
         Web Inspector: Two little Layers tab fixes
index d1d7b87..e28cef1 100644 (file)
@@ -315,6 +315,7 @@ localizedStrings["Domain"] = "Domain";
 localizedStrings["Done"] = "Done";
 localizedStrings["Download Web Archive"] = "Download Web Archive";
 localizedStrings["Duplicate Selector"] = "Duplicate Selector";
+localizedStrings["Duplicate property"] = "Duplicate property";
 localizedStrings["Duplicate property “%s”.\nClick to delete this property."] = "Duplicate property “%s”.\nClick to delete this property.";
 localizedStrings["Duration"] = "Duration";
 localizedStrings["Dynamically calculated for the parent element"] = "Dynamically calculated for the parent element";
@@ -986,6 +987,8 @@ localizedStrings["Undefined custom element"] = "Undefined custom element";
 localizedStrings["Unique"] = "Unique";
 localizedStrings["Unknown error"] = "Unknown error";
 localizedStrings["Unknown node"] = "Unknown node";
+localizedStrings["Unsupported property name"] = "Unsupported property name";
+localizedStrings["Unsupported property value"] = "Unsupported property value";
 localizedStrings["Unsupported property “%s”"] = "Unsupported property “%s”";
 localizedStrings["Untitled"] = "Untitled";
 localizedStrings["Use Default Media Styles"] = "Use Default Media Styles";
index e552ae9..9ce2efb 100644 (file)
@@ -29,7 +29,8 @@
 }
 
 .spreadsheet-style-declaration-editor .property {
-    padding-left: 17px;
+    padding-right: var(--css-declaration-side-padding);
+    padding-left: calc(var(--css-declaration-side-padding) + 17px);
 }
 
 .spreadsheet-style-declaration-editor .name {
@@ -59,7 +60,7 @@
 .spreadsheet-style-declaration-editor .property-toggle {
     visibility: hidden;
     position: absolute;
-    left: 1px;
+    left: calc(var(--css-declaration-side-padding) + 1px);
     width: 10px;
     height: 10px;
     margin: 0;
     -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
 }
 
+.spreadsheet-style-declaration-editor .property.has-warning {
+    background-color: hsl(51, 87%, 93%);
+}
+
+.spreadsheet-style-declaration-editor .property .warning {
+    display: none;
+}
+
+.spreadsheet-style-declaration-editor .property.has-warning .warning {
+    position: absolute;
+    right: 0;
+    display: inline-block;
+    width: calc(20px + var(--css-declaration-side-padding));
+    height: 13px;
+
+    background-image: url(../Images/Warning.svg);
+    background-color: hsl(43, 97%, 84%);
+    background-repeat: no-repeat;
+    background-size: 9px;
+    background-position-y: center;
+    background-position-x: 7px;
+
+    -webkit-clip-path: polygon(0% 50%, 6px 0%, 100% 0%, 100% 100%, 6px 100%);
+}
+
 .spreadsheet-style-declaration-editor .property.not-inherited {
     opacity: 0.5;
 }
index ad75785..5e06d01 100644 (file)
@@ -236,7 +236,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
     {
         if (this.isFocused()) {
             for (let propertyView of this._propertyViews)
-                propertyView.updateClassNames();
+                propertyView.updateStatus();
         } else
             this.needsLayout();
     }
index 3f7862b..db50251 100644 (file)
 
 .spreadsheet-css-declaration {
     margin: 0;
-    padding: 4px 6px;
+    padding: 4px 0;
     font-family: Menlo, monospace;
     color: hsl(0, 0%, 70%);
     background: white;
     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
     -webkit-user-select: text;
+
+    --css-declaration-side-padding: 6px;
+}
+
+.spreadsheet-css-declaration :matches(.header, .header-media) {
+    padding: 0 var(--css-declaration-side-padding);
 }
 
 .spreadsheet-css-declaration .media-label {
     box-shadow: hsla(0, 0%, 0%, 0.5) 0 1px 3px;
     outline: none !important;
 }
+
+.spreadsheet-css-declaration .close-brace {
+    display: inline-block;
+    padding-left: var(--css-declaration-side-padding);
+}
index f1fdf07..97c26df 100644 (file)
@@ -45,8 +45,8 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         this._property.__propertyView = this;
 
         this._update();
-        property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
-        property.addEventListener(WI.CSSProperty.Event.Changed, this.updateClassNames, this);
+        property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
+        property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
     }
 
     // Public
@@ -71,7 +71,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         this._element.classList.add("highlighted");
     }
 
-    updateClassNames()
+    updateStatus()
     {
         let duplicatePropertyExistsBelow = (cssProperty) => {
             let propertyFound = false;
@@ -87,9 +87,15 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         };
 
         let classNames = [WI.SpreadsheetStyleProperty.StyleClassName];
+        let elementTitle = "";
 
-        if (this._property.overridden)
+        if (this._property.overridden) {
             classNames.push("overridden");
+            if (duplicatePropertyExistsBelow(this._property)) {
+                classNames.push("has-warning");
+                elementTitle = WI.UIString("Duplicate property");
+            }
+        }
 
         if (this._property.implicit)
             classNames.push("implicit");
@@ -104,16 +110,22 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             if (WI.CSSCompletions.cssNameCompletions)
                 propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
 
-            if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
+            classNames.push("has-warning");
+
+            if (!propertyNameIsValid) {
                 classNames.push("invalid-name");
-            else
+                elementTitle = WI.UIString("Unsupported property name");
+            } else {
                 classNames.push("invalid-value");
+                elementTitle = WI.UIString("Unsupported property value");
+            }
         }
 
         if (!this._property.enabled)
             classNames.push("disabled");
 
         this._element.className = classNames.join(" ");
+        this._element.title = elementTitle;
     }
 
     // Private
@@ -131,7 +143,6 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     _update()
     {
         this.element.removeChildren();
-        this.updateClassNames();
 
         if (this._property.editable) {
             this._checkboxElement = this.element.appendChild(document.createElement("input"));
@@ -174,8 +185,13 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
         this.element.append(";");
 
-        if (!this._property.enabled)
+        if (this._property.enabled) {
+            this._warningElement = this.element.appendChild(document.createElement("span"));
+            this._warningElement.className = "warning";
+        } else
             this.element.append(" */");
+
+        this.updateStatus();
     }
 
     // SpreadsheetTextField delegate