Changeset 223575 in webkit


Ignore:
Timestamp:
Oct 17, 2017 1:55:23 PM (6 years ago)
Author:
Nikita Vasilyev
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.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r223561 r223575  
     12017-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
    1202017-10-17  Nikita Vasilyev  <nvasilyev@apple.com>
    221
  • trunk/Source/WebInspectorUI/UserInterface/Models/Color.js

    r222216 r223575  
    638638    HSLA: "color-format-hsla"
    639639};
     640
     641WI.Color.FunctionNames = new Set([
     642    "rgb",
     643    "rgba",
     644    "hsl",
     645    "hsla",
     646]);
    640647
    641648WI.Color.Keywords = {
  • trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

    r223561 r223575  
    115115    -webkit-text-stroke-width: 0 !important;
    116116}
     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  
    245245    {
    246246        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
    249259            let className = "";
     260
    250261            if (token.type) {
    251262                if (token.type.includes("string"))
     
    253264                else if (token.type.includes("link"))
    254265                    className = "token-link";
     266                else if (token.type.includes("comment"))
     267                    className = "token-comment";
    255268            }
    256269
     
    267280        this._valueElement.removeChildren();
    268281        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;
    269355    }
    270356
Note: See TracChangeset for help on using the changeset viewer.