Changeset 223575 in webkit
- Timestamp:
- Oct 17, 2017 1:55:23 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r223561 r223575 1 2017-10-17 Nikita Vasilyev <nvasilyev@apple.com> 2 3 Web Inspector: [PARITY] Styles Redesign: Add color picker inline widget 4 https://bugs.webkit.org/show_bug.cgi?id=178354 5 6 Reviewed by Joseph Pecoraro. 7 8 Show color picker using the existing WI.InlineSwatch. 9 10 * UserInterface/Models/Color.js: 11 * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css: 12 (.spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment): 13 Syntax highlight comments in values. 14 15 * UserInterface/Views/SpreadsheetStyleProperty.js: 16 (WI.SpreadsheetStyleProperty.prototype._renderValue): 17 (WI.SpreadsheetStyleProperty.prototype._addColorTokens): 18 Find colors in CodeMirror tokens and replace them with color token elements. 19 1 20 2017-10-17 Nikita Vasilyev <nvasilyev@apple.com> 2 21 -
trunk/Source/WebInspectorUI/UserInterface/Models/Color.js
r222216 r223575 638 638 HSLA: "color-format-hsla" 639 639 }; 640 641 WI.Color.FunctionNames = new Set([ 642 "rgb", 643 "rgba", 644 "hsl", 645 "hsla", 646 ]); 640 647 641 648 WI.Color.Keywords = { -
trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
r223561 r223575 115 115 -webkit-text-stroke-width: 0 !important; 116 116 } 117 118 .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment { 119 color: var(--syntax-highlight-comment-color); 120 } -
trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
r223561 r223575 245 245 { 246 246 const maxValueLength = 150; 247 248 let tokens = WI.tokenizeCSSValue(value).map((token) => { 247 let tokens = WI.tokenizeCSSValue(value); 248 249 if (this._property.enabled) { 250 // Don't show color widgets for CSS gradients, show dedicated gradient widgets instead. 251 // FIXME: <https://webkit.org/b/178404> Web Inspector: [PARITY] Styles Redesign: Add bezier curve, color gradient, and CSS variable inline widgets 252 tokens = this._addColorTokens(tokens); 253 } 254 255 tokens = tokens.map((token) => { 256 if (token instanceof Element) 257 return token; 258 249 259 let className = ""; 260 250 261 if (token.type) { 251 262 if (token.type.includes("string")) … … 253 264 else if (token.type.includes("link")) 254 265 className = "token-link"; 266 else if (token.type.includes("comment")) 267 className = "token-comment"; 255 268 } 256 269 … … 267 280 this._valueElement.removeChildren(); 268 281 this._valueElement.append(...tokens); 282 } 283 284 _addColorTokens(tokens) 285 { 286 let newTokens = []; 287 288 let createColorTokenElement = (colorString, color) => { 289 let colorTokenElement = document.createElement("span"); 290 colorTokenElement.className = "token-color"; 291 292 let innerElement = document.createElement("span"); 293 innerElement.className = "token-color-value"; 294 innerElement.textContent = colorString; 295 296 if (color) { 297 let readOnly = !this._property.editable; 298 let swatch = new WI.InlineSwatch(WI.InlineSwatch.Type.Color, color, readOnly); 299 300 swatch.addEventListener(WI.InlineSwatch.Event.ValueChanged, (event) => { 301 let value = event.data && event.data.value && event.data.value.toString(); 302 console.assert(value, "Color value is empty."); 303 if (!value) 304 return; 305 306 innerElement.textContent = value; 307 this._handleValueChange(); 308 }, this); 309 310 colorTokenElement.append(swatch.element); 311 312 // Prevent the value from editing when clicking on the swatch. 313 swatch.element.addEventListener("mousedown", (event) => { event.stop(); }); 314 } 315 316 colorTokenElement.append(innerElement); 317 return colorTokenElement; 318 }; 319 320 let pushPossibleColorToken = (text, ...tokens) => { 321 let color = WI.Color.fromString(text); 322 if (color) 323 newTokens.push(createColorTokenElement(text, color)); 324 else 325 newTokens.push(...tokens); 326 }; 327 328 let colorFunctionStartIndex = NaN; 329 330 for (let i = 0; i < tokens.length; i++) { 331 let token = tokens[i]; 332 if (token.type && token.type.includes("hex-color")) { 333 // Hex 334 pushPossibleColorToken(token.value, token); 335 } else if (WI.Color.FunctionNames.has(token.value) && token.type && (token.type.includes("atom") || token.type.includes("keyword"))) { 336 // Color Function start 337 colorFunctionStartIndex = i; 338 } else if (isNaN(colorFunctionStartIndex) && token.type && token.type.includes("keyword")) { 339 // Color keyword 340 pushPossibleColorToken(token.value, token); 341 } else if (!isNaN(colorFunctionStartIndex)) { 342 // Color Function end 343 if (token.value !== ")") 344 continue; 345 346 let rawTokens = tokens.slice(colorFunctionStartIndex, i + 1); 347 let text = rawTokens.map((token) => token.value).join(""); 348 pushPossibleColorToken(text, ...rawTokens); 349 colorFunctionStartIndex = NaN; 350 } else 351 newTokens.push(token); 352 } 353 354 return newTokens; 269 355 } 270 356
Note: See TracChangeset
for help on using the changeset viewer.