Changeset 48102 in webkit


Ignore:
Timestamp:
Sep 6, 2009 1:43:41 PM (15 years ago)
Author:
timothy@apple.com
Message:

Adds a persistent setting for color format in the Web Inspector.

​https://bugs.webkit.org/show_bug.cgi?id=28889

Reviewed by Dan Bernstein.

  • English.lproj/localizedStrings.js: New strings.
  • inspector/front-end/Color.js: Minor style fixes.

(WebInspector.Color.prototype.toString): Added. Replaces the individual
"toFoo" functions. Takes a optional arguments for the color format to return.

  • inspector/front-end/Images/paneSettingsButtons.png: Added.
  • inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylesSidebarPane.prototype._changeColorFormat): Update the sections to show
the new color format.
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.processColor.changeColorDisplay):
Use the new toString function on Color.
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.processColor): Use the persistent setting
to format colors by default. Add a tooltip for the color swatch.

  • inspector/front-end/inspector.css: New styles for the settings menu.
  • inspector/front-end/inspector.js:

(WebInspector.loaded): Initilize the colorFormat preference.

Location:
trunk/WebCore
Files:
1 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r48100 r48102  
     12009-09-06  Timothy Hatcher  <timothy@apple.com>
     2
     3        Adds a persistent setting for color format in the Web Inspector.
     4
     5        https://bugs.webkit.org/show_bug.cgi?id=28889
     6
     7        Reviewed by Dan Bernstein.
     8
     9        * English.lproj/localizedStrings.js: New strings.
     10        * inspector/front-end/Color.js: Minor style fixes.
     11        (WebInspector.Color.prototype.toString): Added. Replaces the individual
     12        "toFoo" functions. Takes a optional arguments for the color format to return.
     13        * inspector/front-end/Images/paneSettingsButtons.png: Added.
     14        * inspector/front-end/StylesSidebarPane.js:
     15        (WebInspector.StylesSidebarPane.prototype._changeColorFormat): Update the sections to show
     16        the new color format.
     17        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processColor.changeColorDisplay):
     18        Use the new toString function on Color.
     19        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processColor): Use the persistent setting
     20        to format colors by default. Add a tooltip for the color swatch.
     21        * inspector/front-end/inspector.css: New styles for the settings menu.
     22        * inspector/front-end/inspector.js:
     23        (WebInspector.loaded): Initilize the colorFormat preference.
     24
    1252009-09-06  Laszlo Gombos  <laszlo.1.gombos@nokia.com>
    226

  • trunk/WebCore/inspector/front-end/Color.js

    r46828 r48102  
    3131{
    3232    this.value = str;
    33     this.parse();
     33    this._parse();
    3434}
    3535
    … …  
    7171
    7272        if (this.simple)
    73             this._rgb = this.hexToRgb(this.hex);
     73            this._rgb = this._hexToRGB(this.hex);
    7474        else {
    7575            var rgba = this.rgba;
    … …  
    9090            return this._hsl;
    9191
    92         this._hsl = this.rgbToHsl(this.rgb);
     92        this._hsl = this._rgbToHSL(this.rgb);
    9393        return this._hsl;
    9494    },
    … …  
    138138    },
    139139
    140     toRgb: function()
    141     {
    142         return "rgb(" + this.rgb.join(", ") + ")";
    143     },
    144 
    145     toHsl: function()
    146     {
    147         var hsl = this.hsl;
    148         return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
    149     },
    150 
    151     toShortHex: function()
    152     {
    153         return "#" + this.shorthex;
    154     },
    155 
    156     toHex: function()
    157     {
    158         return "#" + this.hex;
    159     },
    160 
    161     toRgba: function()
    162     {
    163         return "rgba(" + this.rgba.join(", ") + ")";
    164     },
    165 
    166     toHsla: function()
    167     {
    168         var hsla = this.hsla;
    169         return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
    170     },
    171 
    172     toNickname: function()
    173     {
    174         return this.nickname;
    175     },
    176 
    177     rgbToHex: function(rgb)
     140    toString: function(format)
     141    {
     142        if (!format)
     143            format = this.format;
     144
     145        switch (format) {
     146            case "rgb":
     147                return "rgb(" + this.rgb.join(", ") + ")";
     148            case "rgba":
     149                return "rgba(" + this.rgba.join(", ") + ")";
     150            case "hsl":
     151                var hsl = this.hsl;
     152                return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
     153            case "hsla":
     154                var hsla = this.hsla;
     155                return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
     156            case "hex":
     157                return "#" + this.hex;
     158            case "shorthex":
     159                return "#" + this.shorthex;
     160            case "nickname":
     161                return this.nickname;
     162        }
     163
     164        throw "invalid color format";
     165    },
     166
     167    _rgbToHex: function(rgb)
    178168    {
    179169        var r = parseInt(rgb[0]).toString(16);
    … …  
    190180    },
    191181
    192     hexToRgb: function(hex)
     182    _hexToRGB: function(hex)
    193183    {
    194184        var r = parseInt(hex.substring(0,2), 16);
    … …  
    199189    },
    200190
    201     rgbToHsl: function(rgb)
     191    _rgbToHSL: function(rgb)
    202192    {
    203193        var r = parseInt(rgb[0]) / 255;
    … …  
    236226    },
    237227
    238     hslToRgb: function(hsl)
     228    _hslToRGB: function(hsl)
    239229    {
    240230        var h = parseFloat(hsl[0]) / 360;
    … …  
    253243        var tb = h - (1 / 3);
    254244
    255         var r = Math.round(hueToRgb(p, q, tr) * 255);
    256         var g = Math.round(hueToRgb(p, q, tg) * 255);
    257         var b = Math.round(hueToRgb(p, q, tb) * 255);
     245        var r = Math.round(hueToRGB(p, q, tr) * 255);
     246        var g = Math.round(hueToRGB(p, q, tg) * 255);
     247        var b = Math.round(hueToRGB(p, q, tb) * 255);
    258248        return [r, g, b];
    259249
    260         function hueToRgb(p, q, h) {
     250        function hueToRGB(p, q, h) {
    261251            if (h < 0)
    262252                h += 1;
    … …  
    275265    },
    276266
    277     rgbaToHsla: function(rgba)
     267    _rgbaToHSLA: function(rgba)
    278268    {
    279269        var alpha = rgba[3];
    280         var hsl = this.rgbToHsl(rgba)
     270        var hsl = this._rgbToHSL(rgba)
    281271        hsl.push(alpha);
    282272        return hsl;
    283273    },
    284274
    285     hslaToRgba: function(hsla)
     275    _hslaToRGBA: function(hsla)
    286276    {
    287277        var alpha = hsla[3];
    288         var rgb = this.hslToRgb(hsla);
     278        var rgb = this._hslToRGB(hsla);
    289279        rgb.push(alpha);
    290280        return rgb;
    291281    },
    292282
    293     parse: function()
     283    _parse: function()
    294284    {
    295285        // Special Values - Advanced but Must Be Parsed First - transparent
    296286        var value = this.value.toLowerCase().replace(/%|\s+/g, "");
    297287        if (value in WebInspector.Color.AdvancedNickNames) {
    298             this.mode = "nickname";
     288            this.format = "nickname";
    299289            var set = WebInspector.Color.AdvancedNickNames[value];
    300290            this.simple = false;
    … …  
    315305                var hex = match[1].toUpperCase();
    316306                if (hex.length === 3) {
    317                     this.mode = "shorthex";
     307                    this.format = "shorthex";
    318308                    this.hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
    319309                } else {
    320                     this.mode = "hex";
     310                    this.format = "hex";
    321311                    this.hex = hex;
    322312                }
    323313            } else if (match[2]) { // rgb
    324                 this.mode = "rgb";
     314                this.format = "rgb";
    325315                var rgb = match[2].split(/\s*,\s*/);
    326316                this.rgb = rgb;
    327                 this.hex = this.rgbToHex(rgb);
     317                this.hex = this._rgbToHex(rgb);
    328318            } else if (match[3]) { // nickname
    329319                var nickname = match[3].toLowerCase();
    330320                if (nickname in WebInspector.Color.Nicknames) {
    331                     this.mode = "nickname";
     321                    this.format = "nickname";
    332322                    this.hex = WebInspector.Color.Nicknames[nickname];
    333323                } else // unknown name
    334                     throw("unknown color name");
     324                    throw "unknown color name";
    335325            } else if (match[4]) { // hsl
    336                 this.mode = "hsl";
     326                this.format = "hsl";
    337327                var hsl = match[4].replace(/%g/, "").split(/\s*,\s*/);
    338328                this.hsl = hsl;
    339                 this.rgb = this.hslToRgb(hsl);
    340                 this.hex = this.rgbToHex(this.rgb);
     329                this.rgb = this._hslToRGB(hsl);
     330                this.hex = this._rgbToHex(this.rgb);
    341331            }
    342332
    … …  
    359349            this.simple = false;
    360350            if (match[1]) { // rgba
    361                 this.mode = "rgba";
     351                this.format = "rgba";
    362352                this.rgba = match[1].split(/\s*,\s*/);
    363                 this.hsla = this.rgbaToHsla(this.rgba);
     353                this.hsla = this._rgbaToHSLA(this.rgba);
    364354                this.alpha = this.rgba[3];
    365355            } else if (match[2]) { // hsla
    366                 this.mode = "hsla";
     356                this.format = "hsla";
    367357                this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
    368                 this.rgba = this.hslaToRgba(this.hsla);
     358                this.rgba = this._hslaToRGBA(this.hsla);
    369359                this.alpha = this.hsla[3];
    370360            }
    … …  
    374364
    375365        // Could not parse as a valid color
    376         throw("could not parse color");
     366        throw "could not parse color";
    377367    }
    378368}

  • trunk/WebCore/inspector/front-end/StylesSidebarPane.js

    r48065 r48102  
    3131{
    3232    WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles"));
     33
     34    this.settingsSelectElement = document.createElement("select");
     35
     36    var option = document.createElement("option");
     37    option.value = "hex";
     38    if (Preferences.colorFormat === "hex")
     39        option.selected = true;
     40    option.label = WebInspector.UIString("Hex Colors");
     41    this.settingsSelectElement.appendChild(option);
     42
     43    option = document.createElement("option");
     44    option.value = "rgb";
     45    if (Preferences.colorFormat === "rgb")
     46        option.selected = true;
     47    option.label = WebInspector.UIString("RGB Colors");
     48    this.settingsSelectElement.appendChild(option);
     49
     50    option = document.createElement("option");
     51    option.value = "hsl";
     52    if (Preferences.colorFormat === "hsl")
     53        option.selected = true;
     54    option.label = WebInspector.UIString("HSL Colors");
     55    this.settingsSelectElement.appendChild(option);
     56
     57    this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
     58    this.settingsSelectElement.addEventListener("change", this._changeColorFormat.bind(this), false);
     59
     60    this.titleElement.appendChild(this.settingsSelectElement);
    3361}
    3462
    … …  
    273301            this.addBlankSection();
    274302        }
     303    },
     304
     305    _changeColorFormat: function(event)
     306    {
     307        var selectedOption = this.settingsSelectElement[this.settingsSelectElement.selectedIndex];
     308        Preferences.colorFormat = selectedOption.value;
     309
     310        InspectorController.setSetting("color-format", Preferences.colorFormat);
     311
     312        for (var i = 0; i < this.sections.length; ++i)
     313            this.sections[i].update(true);
    275314    },
    276315
    … …  
    610649            var oldIdentifier = this.identifier;
    611650            self.identifier = newRule.selectorText + ":" + self.subtitleElement.textContent;
    612             self.pane.update(null, true);
     651            self.pane.update();
    613652            WebInspector.panels.elements.renameSelector(oldIdentifier, this.identifier, oldContent, newContent);
    614653            moveToNextIfNeeded.call(self);
    … …  
    853892
    854893                var swatchElement = document.createElement("span");
     894                swatchElement.title = WebInspector.UIString("Click to change color format");
    855895                swatchElement.className = "swatch";
    856896                swatchElement.style.setProperty("background-color", text);
    … …  
    859899                swatchElement.addEventListener("dblclick", function(event) { event.stopPropagation() }, false);
    860900
     901                var format;
     902                if (Preferences.showColorNicknames && color.nickname)
     903                    format = "nickname";
     904                else if (Preferences.colorFormat === "rgb")
     905                    format = (color.simple ? "rgb" : "rgba");
     906                else if (Preferences.colorFormat === "hsl")
     907                    format = (color.simple ? "hsl" : "hsla");
     908                else if (color.simple)
     909                    format = (color.hasShortHex() ? "shorthex" : "hex");
     910                else
     911                    format = "rgba";
     912
    861913                var colorValueElement = document.createElement("span");
    862                 colorValueElement.textContent = text;
    863 
    864                 var mode = color.mode;
    865                 function changeColorDisplay(event) {
    866                     function changeTo(newMode, content) {
    867                         mode = newMode;
    868                         colorValueElement.textContent = content;
    869                     }
    870 
    871                     switch (mode) {
     914                colorValueElement.textContent = color.toString(format);
     915
     916                function changeColorDisplay(event)
     917                {
     918                    switch (format) {
    872919                        case "rgb":
    873                             changeTo("hsl", color.toHsl());
     920                            format = "hsl";
    874921                            break;
    875922
    876923                        case "shorthex":
    877                             changeTo("hex", color.toHex());
     924                            format = "hex";
    878925                            break;
    879926
    880927                        case "hex":
    881                             changeTo("rgb", color.toRgb());
     928                            format = "rgb";
    882929                            break;
    883930
    … …  
    885932                            if (color.simple) {
    886933                                if (color.hasShortHex())
    887                                     changeTo("shorthex", color.toShortHex());
     934                                    format = "shorthex";
    888935                                else
    889                                     changeTo("hex", color.toHex());
    890                             } else
    891                                 changeTo("rgba", color.toRgba());
     936                                    format = "hex";
     937                                break;
     938                            }
     939
     940                            format = "rgba";
    892941                            break;
    893942
    894943                        case "hsl":
    895944                            if (color.nickname)
    896                                 changeTo("nickname", color.toNickname());
     945                                format = "nickname";
    897946                            else if (color.hasShortHex())
    898                                 changeTo("shorthex", color.toShortHex());
     947                                format = "shorthex";
    899948                            else
    900                                 changeTo("hex", color.toHex());
     949                                format = "hex";
    901950                            break;
    902951
    903952                        case "rgba":
    904                             changeTo("hsla", color.toHsla());
     953                            format = "hsla";
    905954                            break;
    906955
    907956                        case "hsla":
    908957                            if (color.nickname)
    909                                 changeTo("nickname", color.toNickname());
     958                                format = "nickname";
    910959                            else
    911                                 changeTo("rgba", color.toRgba());
     960                                format = "rgba";
    912961                            break;
    913962                    }
     963
     964                    colorValueElement.textContent = color.toString(format);
    914965                }
    915966

  • trunk/WebCore/inspector/front-end/inspector.css

    r48065 r48102  
    14491449}
    14501450
     1451.swatch:hover {
     1452    border: 1px solid rgba(64, 64, 64, 0.8);
     1453}
     1454
    14511455.pane:not(.expanded) + .pane, .pane:first-of-type {
    14521456    margin-top: -1px;
    … …  
    14851489.pane.expanded > .title::before {
    14861490    content: url(Images/disclosureTriangleSmallDownBlack.png);
     1491}
     1492
     1493.pane > .title > select {
     1494    display: none;
     1495    float: right;
     1496    width: 23px;
     1497    height: 17px;
     1498    color: transparent;
     1499    background-color: transparent;
     1500    border: none;
     1501    background-image: url(Images/paneSettingsButtons.png);
     1502    background-repeat: no-repeat;
     1503    margin: 1px 0 0 0;
     1504    padding: 0;
     1505    -webkit-border-radius: 0;
     1506    -webkit-appearance: none;
     1507}
     1508
     1509.pane.expanded:hover > .title > select {
     1510    display: inline-block;
     1511}
     1512
     1513.pane > .title > select:hover {
     1514    background-position: -23px 0px;
     1515}
     1516
     1517.pane > .title > select:active {
     1518    background-position: -46px 0px;
    14871519}
    14881520

  • trunk/WebCore/inspector/front-end/inspector.js

    r48074 r48102  
    4242    heapProfilerPresent: false,
    4343    samplingCPUProfiler: false,
     44    showColorNicknames: true,
     45    colorFormat: "hex"
    4446}
    4547
    … …  
    348350    var platform = InspectorController.platform();
    349351    document.body.addStyleClass("platform-" + platform);
     352
     353    var colorFormat = InspectorController.setting("color-format");
     354    if (colorFormat)
     355        Preferences.colorFormat = colorFormat;
    350356
    351357    this.drawer = new WebInspector.Drawer();
Note: See TracChangeset for help on using the changeset viewer.