Title: [223575] trunk/Source/WebInspectorUI
- Revision
- 223575
- Author
- nvasil...@apple.com
- Date
- 2017-10-17 13:55:23 -0700 (Tue, 17 Oct 2017)
Log Message
Web Inspector: [PARITY] Styles Redesign: Add color picker inline widget
https://bugs.webkit.org/show_bug.cgi?id=178354
Reviewed by Joseph Pecoraro.
Show color picker using the existing WI.InlineSwatch.
* UserInterface/Models/Color.js:
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment):
Syntax highlight comments in values.
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype._renderValue):
(WI.SpreadsheetStyleProperty.prototype._addColorTokens):
Find colors in CodeMirror tokens and replace them with color token elements.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (223574 => 223575)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-10-17 20:45:36 UTC (rev 223574)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-10-17 20:55:23 UTC (rev 223575)
@@ -1,5 +1,24 @@
2017-10-17 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: [PARITY] Styles Redesign: Add color picker inline widget
+ https://bugs.webkit.org/show_bug.cgi?id=178354
+
+ Reviewed by Joseph Pecoraro.
+
+ Show color picker using the existing WI.InlineSwatch.
+
+ * UserInterface/Models/Color.js:
+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+ (.spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment):
+ Syntax highlight comments in values.
+
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype._renderValue):
+ (WI.SpreadsheetStyleProperty.prototype._addColorTokens):
+ Find colors in CodeMirror tokens and replace them with color token elements.
+
+2017-10-17 Nikita Vasilyev <nvasil...@apple.com>
+
Web Inspector: Styles: Command-click on a property name should jump to definition in Resources tab
https://bugs.webkit.org/show_bug.cgi?id=174329
<rdar://problem/33225564>
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Color.js (223574 => 223575)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2017-10-17 20:45:36 UTC (rev 223574)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2017-10-17 20:55:23 UTC (rev 223575)
@@ -638,6 +638,13 @@
HSLA: "color-format-hsla"
};
+WI.Color.FunctionNames = new Set([
+ "rgb",
+ "rgba",
+ "hsl",
+ "hsla",
+]);
+
WI.Color.Keywords = {
"aliceblue": [240, 248, 255],
"antiquewhite": [250, 235, 215],
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (223574 => 223575)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-17 20:45:36 UTC (rev 223574)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2017-10-17 20:55:23 UTC (rev 223575)
@@ -114,3 +114,7 @@
cursor: pointer !important;
-webkit-text-stroke-width: 0 !important;
}
+
+.spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
+ color: var(--syntax-highlight-comment-color);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (223574 => 223575)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-17 20:45:36 UTC (rev 223574)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2017-10-17 20:55:23 UTC (rev 223575)
@@ -244,14 +244,27 @@
_renderValue(value)
{
const maxValueLength = 150;
+ let tokens = WI.tokenizeCSSValue(value);
- let tokens = WI.tokenizeCSSValue(value).map((token) => {
+ if (this._property.enabled) {
+ // Don't show color widgets for CSS gradients, show dedicated gradient widgets instead.
+ // FIXME: <https://webkit.org/b/178404> Web Inspector: [PARITY] Styles Redesign: Add bezier curve, color gradient, and CSS variable inline widgets
+ tokens = this._addColorTokens(tokens);
+ }
+
+ tokens = tokens.map((token) => {
+ if (token instanceof Element)
+ return token;
+
let className = "";
+
if (token.type) {
if (token.type.includes("string"))
className = "token-string";
else if (token.type.includes("link"))
className = "token-link";
+ else if (token.type.includes("comment"))
+ className = "token-comment";
}
if (className) {
@@ -268,6 +281,79 @@
this._valueElement.append(...tokens);
}
+ _addColorTokens(tokens)
+ {
+ let newTokens = [];
+
+ let createColorTokenElement = (colorString, color) => {
+ let colorTokenElement = document.createElement("span");
+ colorTokenElement.className = "token-color";
+
+ let innerElement = document.createElement("span");
+ innerElement.className = "token-color-value";
+ innerElement.textContent = colorString;
+
+ if (color) {
+ let readOnly = !this._property.editable;
+ let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, readOnly);
+
+ swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => {
+ let value = event.data && event.data.value && event.data.value.toString();
+ console.assert(value, "Color value is empty.");
+ if (!value)
+ return;
+
+ innerElement.textContent = value;
+ this._handleValueChange();
+ }, this);
+
+ colorTokenElement.append(swatch.element);
+
+ // Prevent the value from editing when clicking on the swatch.
+ swatch.element.addEventListener("mousedown", (event) => { event.stop(); });
+ }
+
+ colorTokenElement.append(innerElement);
+ return colorTokenElement;
+ };
+
+ let pushPossibleColorToken = (text, ...tokens) => {
+ let color = WI.Color.fromString(text);
+ if (color)
+ newTokens.push(createColorTokenElement(text, color));
+ else
+ newTokens.push(...tokens);
+ };
+
+ let colorFunctionStartIndex = NaN;
+
+ for (let i = 0; i < tokens.length; i++) {
+ let token = tokens[i];
+ if (token.type && token.type.includes("hex-color")) {
+ // Hex
+ pushPossibleColorToken(token.value, token);
+ } else if (WI.Color.FunctionNames.has(token.value) && token.type && (token.type.includes("atom") || token.type.includes("keyword"))) {
+ // Color Function start
+ colorFunctionStartIndex = i;
+ } else if (isNaN(colorFunctionStartIndex) && token.type && token.type.includes("keyword")) {
+ // Color keyword
+ pushPossibleColorToken(token.value, token);
+ } else if (!isNaN(colorFunctionStartIndex)) {
+ // Color Function end
+ if (token.value !== ")")
+ continue;
+
+ let rawTokens = tokens.slice(colorFunctionStartIndex, i + 1);
+ let text = rawTokens.map((token) => token.value).join("");
+ pushPossibleColorToken(text, ...rawTokens);
+ colorFunctionStartIndex = NaN;
+ } else
+ newTokens.push(token);
+ }
+
+ return newTokens;
+ }
+
_handleNameChange()
{
this._property.name = this._nameElement.textContent.trim();
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
