- Revision
- 224523
- Author
- nvasil...@apple.com
- Date
- 2017-11-06 17:19:11 -0800 (Mon, 06 Nov 2017)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (224522 => 224523)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-11-07 01:19:11 UTC (rev 224523)
@@ -1,3 +1,45 @@
+2017-11-06 Nikita Vasilyev <nvasil...@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.kirsl...@sony.com>
Web Inspector: Two little Layers tab fixes
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (224522 => 224523)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-11-07 01:19:11 UTC (rev 224523)
@@ -315,6 +315,7 @@
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["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";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (224522 => 224523)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-11-07 01:19:11 UTC (rev 224523)
@@ -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;
@@ -89,6 +90,31 @@
-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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (224522 => 224523)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js 2017-11-07 01:19:11 UTC (rev 224523)
@@ -236,7 +236,7 @@
{
if (this.isFocused()) {
for (let propertyView of this._propertyViews)
- propertyView.updateClassNames();
+ propertyView.updateStatus();
} else
this.needsLayout();
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (224522 => 224523)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-11-07 01:19:11 UTC (rev 224523)
@@ -25,14 +25,20 @@
.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 {
color: black;
}
@@ -102,3 +108,8 @@
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);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (224522 => 224523)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-11-07 00:55:47 UTC (rev 224522)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-11-07 01:19:11 UTC (rev 224523)
@@ -45,8 +45,8 @@
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 @@
this._element.classList.add("highlighted");
}
- updateClassNames()
+ updateStatus()
{
let duplicatePropertyExistsBelow = (cssProperty) => {
let propertyFound = false;
@@ -87,9 +87,15 @@
};
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,10 +110,15 @@
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)
@@ -114,6 +125,7 @@
classNames.push("disabled");
this._element.className = classNames.join(" ");
+ this._element.title = elementTitle;
}
// Private
@@ -131,7 +143,6 @@
_update()
{
this.element.removeChildren();
- this.updateClassNames();
if (this._property.editable) {
this._checkboxElement = this.element.appendChild(document.createElement("input"));
@@ -174,8 +185,13 @@
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
