Changeset 192040 in webkit


Ignore:
Timestamp:
Nov 4, 2015 3:59:48 PM (9 years ago)
Author:
commit-queue@webkit.org
Message:

Source/WebInspectorUI:
Web Inspector: WebInspector.Color should support #rgba and #rrggbbaa syntax
​https://bugs.webkit.org/show_bug.cgi?id=150894

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2015-11-04
Reviewed by Timothy Hatcher.

Support for hex with alpha color syntax.

  • UserInterface/Models/Color.js:

(WebInspector.Color.fromString):
(WebInspector.Color.prototype.nextFormat):
(WebInspector.Color.prototype.copy):
(WebInspector.Color.prototype.toString):
(WebInspector.Color.prototype._toShortHEXAlphaString):
(WebInspector.Color.prototype._toHEXAlphaString):
Add support for new hex syntax. Address some minor issues
like case insensitivity and extra comma separate values.

  • UserInterface/Views/CodeMirrorTextMarkers.js:

This prevent trailing hex characters from showing up
when cycling through color variants.

  • UserInterface/Views/CodeMirrorAdditions.js:

When CodeMirror stops treating the new values as error
this will give them our hex-color styles.

LayoutTests:
Web Inspector: Support #rgba and #rrggbbaa syntax
​https://bugs.webkit.org/show_bug.cgi?id=150894

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2015-11-04
Reviewed by Timothy Hatcher.

  • inspector/model/color-expected.txt: Added.
  • inspector/model/color.html: Added.
Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r192039 r192040  
     12015-11-04  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Support #rgba and #rrggbbaa syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=150894
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * inspector/model/color-expected.txt: Added.
     9        * inspector/model/color.html: Added.
     10
    1112015-11-04  Wenson Hsieh  <wenson_hsieh@apple.com>
    212

  • trunk/Source/WebInspectorUI/ChangeLog

    r192005 r192040  
     12015-11-04  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: WebInspector.Color should support #rgba and #rrggbbaa syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=150894
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Support for hex with alpha color syntax.
     9
     10        * UserInterface/Models/Color.js:
     11        (WebInspector.Color.fromString):
     12        (WebInspector.Color.prototype.nextFormat):
     13        (WebInspector.Color.prototype.copy):
     14        (WebInspector.Color.prototype.toString):
     15        (WebInspector.Color.prototype._toShortHEXAlphaString):
     16        (WebInspector.Color.prototype._toHEXAlphaString):
     17        Add support for new hex syntax. Address some minor issues
     18        like case insensitivity and extra comma separate values.
     19
     20        * UserInterface/Views/CodeMirrorTextMarkers.js:
     21        This prevent trailing hex characters from showing up
     22        when cycling through color variants.
     23
     24        * UserInterface/Views/CodeMirrorAdditions.js:
     25        When CodeMirror stops treating the new values as error
     26        this will give them our hex-color styles.
     27
    1282015-11-03  Matt Baker  <mattbaker@apple.com>
    229

  • trunk/Source/WebInspectorUI/UserInterface/Models/Color.js

    r189965 r192040  
    5656
    5757        // Simple - #hex, rgb(), nickname, hsl()
    58         var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
     58        var simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
    5959        var match = colorString.match(simple);
    6060        if (match) {
    6161            if (match[1]) { // hex
    6262                var hex = match[1].toUpperCase();
    63                 if (hex.length === 3) {
     63                var len = hex.length;
     64                if (len === 3) {
    6465                    return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
    6566                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
    … …  
    6869                        1
    6970                    ]);
    70                 } else {
     71                } else if (len === 6) {
    7172                    return new WebInspector.Color(WebInspector.Color.Format.HEX, [
    7273                        parseInt(hex.substring(0, 2), 16),
    … …  
    7576                        1
    7677                    ]);
    77                 }
     78                } else if (len === 4) {
     79                    return new WebInspector.Color(WebInspector.Color.Format.ShortHEXAlpha, [
     80                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
     81                        parseInt(hex.charAt(1) + hex.charAt(1), 16),
     82                        parseInt(hex.charAt(2) + hex.charAt(2), 16),
     83                        parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
     84                    ]);
     85                } else if (len === 8) {
     86                    return new WebInspector.Color(WebInspector.Color.Format.HEXAlpha, [
     87                        parseInt(hex.substring(0, 2), 16),
     88                        parseInt(hex.substring(2, 4), 16),
     89                        parseInt(hex.substring(4, 6), 16),
     90                        parseInt(hex.substring(6, 8), 16) / 255
     91                    ]);
     92                } else
     93                    return null;
    7894            } else if (match[2]) { // rgb
    7995                var rgb = match[2].split(/\s*,\s*/);
     96                if (rgb.length !== 3)
     97                    return null;
    8098                return new WebInspector.Color(WebInspector.Color.Format.RGB, [
    8199                    parseInt(rgb[0]),
    … …  
    95113            } else if (match[4]) { // hsl
    96114                var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
     115                if (hsl.length !== 3)
     116                    return null;
    97117                return new WebInspector.Color(WebInspector.Color.Format.HSL, [
    98118                    parseInt(hsl[0]),
    … …  
    105125
    106126        // Advanced - rgba(), hsla()
    107         var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
     127        var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
    108128        match = colorString.match(advanced);
    109129        if (match) {
    110130            if (match[1]) { // rgba
    111131                var rgba = match[1].split(/\s*,\s*/);
     132                if (rgba.length !== 4)
     133                    return null;
    112134                return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
    113135                    parseInt(rgba[0]),
    … …  
    118140            } else if (match[2]) { // hsla
    119141                var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
     142                if (hsla.length !== 4)
     143                    return null;
    120144                return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
    121145                    parseInt(hsla[0]),
    … …  
    223247            if (this.simple)
    224248                return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
    225             else
    226                 return WebInspector.Color.Format.Original;
     249            return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
    227250
    228251        case WebInspector.Color.Format.ShortHEX:
    229252            return WebInspector.Color.Format.HEX;
    230253
     254        case WebInspector.Color.Format.ShortHEXAlpha:
     255            return WebInspector.Color.Format.HEXAlpha;
     256
    231257        case WebInspector.Color.Format.HEX:
     258        case WebInspector.Color.Format.HEXAlpha:
    232259            return WebInspector.Color.Format.Original;
    233260
    … …  
    235262            if (this.simple)
    236263                return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
    237             else
    238                 return WebInspector.Color.Format.Original;
     264            return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
    239265
    240266        default:
    … …  
    288314        case WebInspector.Color.Format.HEX:
    289315        case WebInspector.Color.Format.ShortHEX:
     316        case WebInspector.Color.Format.HEXAlpha:
     317        case WebInspector.Color.Format.ShortHEXAlpha:
    290318        case WebInspector.Color.Format.Nickname:
    291319        case WebInspector.Color.Format.RGBA:
    … …  
    317345        case WebInspector.Color.Format.ShortHEX:
    318346            return this._toShortHEXString();
     347        case WebInspector.Color.Format.HEXAlpha:
     348            return this._toHEXAlphaString();
     349        case WebInspector.Color.Format.ShortHEXAlpha:
     350            return this._toShortHEXAlphaString();
    319351        case WebInspector.Color.Format.Nickname:
    320352            return this._toNicknameString();
    … …  
    383415
    384416        return "#" + r + g + b;
     417    }
     418
     419    _toShortHEXAlphaString()
     420    {
     421        let rgba = this.rgba;
     422        let r = this._componentToHexValue(rgba[0]);
     423        let g = this._componentToHexValue(rgba[1]);
     424        let b = this._componentToHexValue(rgba[2]);
     425        let a = this._componentToHexValue(Math.round(rgba[3] * 255));
     426
     427        if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1] && a[0] === a[1])
     428            return "#" + r[0] + g[0] + b[0] + a[0];
     429        else
     430            return "#" + r + g + b + a;
     431    }
     432
     433    _toHEXAlphaString()
     434    {
     435        let rgba = this.rgba;
     436        let r = this._componentToHexValue(rgba[0]);
     437        let g = this._componentToHexValue(rgba[1]);
     438        let b = this._componentToHexValue(rgba[2]);
     439        let a = this._componentToHexValue(Math.round(rgba[3] * 255));
     440
     441        return "#" + r + g + b + a;
    385442    }
    386443
    … …  
    525582    HEX: "color-format-hex",
    526583    ShortHEX: "color-format-short-hex",
     584    HEXAlpha: "color-format-hex-alpha",
     585    ShortHEXAlpha: "color-format-short-hex-alpha",
    527586    RGB: "color-format-rgb",
    528587    RGBA: "color-format-rgba",

  • trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js

    r191519 r192040  
    254254    function extendedCSSToken(stream, state)
    255255    {
    256         var hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
     256        var hexColorRegex = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g;
    257257
    258258        if (state._urlTokenize) {

  • trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js

    r188028 r192040  
    8686{
    8787    // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
    88     var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
     88    var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
    8989    function matchFunction(lineContent, match) {
    9090        // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
Note: See TracChangeset for help on using the changeset viewer.