Changeset 46828 in webkit


Ignore:
Timestamp:
Aug 5, 2009 8:27:22 PM (15 years ago)
Author:
abarth@webkit.org
Message:

2009-08-05 Joseph Pecoraro <joepeck02@gmail.com>

Reviewed by Timothy Hatcher.

Color is only reported in rgb() format; should toggle between rgb() and hex
https://bugs.webkit.org/show_bug.cgi?id=13516

New Class to Parse and Change Between Color Representations:

Representations of Colors in Raw Form. (May be Lazy Loaded):

(WebInspector.Color.prototype.get shorthex):
(WebInspector.Color.prototype.get hex):
(WebInspector.Color.prototype.set hex):
(WebInspector.Color.prototype.get rgb):
(WebInspector.Color.prototype.set rgb):
(WebInspector.Color.prototype.get hsl):
(WebInspector.Color.prototype.set hsl):
(WebInspector.Color.prototype.get nickname):
(WebInspector.Color.prototype.set nickname):
(WebInspector.Color.prototype.get rgba):
(WebInspector.Color.prototype.set rgba):
(WebInspector.Color.prototype.get hsla):
(WebInspector.Color.prototype.set hsla):

Helpers and Standard String Representations:

(WebInspector.Color.prototype.hasShortHex):
(WebInspector.Color.prototype.toRgb):
(WebInspector.Color.prototype.toHsl):
(WebInspector.Color.prototype.toShortHex):
(WebInspector.Color.prototype.toHex):
(WebInspector.Color.prototype.toRgba):
(WebInspector.Color.prototype.toHsla):
(WebInspector.Color.prototype.toNickname):

Conversion Functions to Determine Other Representations:
My Sources for all algorithms and sample data:
Wikipedia: http://en.wikipedia.org/wiki/HSV_color_space
CSS Specification: http://www.w3.org/TR/css3-color/#hsla-color

(WebInspector.Color.prototype.rgbToHex):
(WebInspector.Color.prototype.hexToRgb):
(WebInspector.Color.prototype.rgbToHsl):
(WebInspector.Color.prototype.hslToRgb.hueToRgb):
(WebInspector.Color.prototype.hslToRgb):
(WebInspector.Color.prototype.rgbaToHsla):
(WebInspector.Color.prototype.hslaToRgba):

Called from the constructor, attempts to parse and will throw an error
if it cannot parse. If simple then the "hex" value is guarenteed.
If advanced then both the "rgba" and "hsla" are guarenteed. If it is
a nickname in any way (e.g. "transparent", "black") then this is
guarenteed to be set as well.

(WebInspector.Color.prototype.parse):

Clicking on the swatch will rotate through Color Representations.

Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> (loop around)
Advanced: rgba -> hsla -> nickname? -> (loop around)

  • inspector/front-end/StylesSidebarPane.js: (WebInspector.StylePropertyTreeElement.prototype.updateTitle.value.): (WebInspector.StylePropertyTreeElement.prototype.updateTitle):

Load Color.js:

  • inspector/front-end/inspector.html:
Location:
trunk/WebCore
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/WebCore/ChangeLog

    r46827 r46828  
     12009-08-05  Joseph Pecoraro  <joepeck02@gmail.com>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        Color is only reported in rgb() format; should toggle between rgb() and hex
     6        https://bugs.webkit.org/show_bug.cgi?id=13516
     7
     8          New Class to Parse and Change Between Color Representations:
     9
     10        * inspector/front-end/Color.js: Added.
     11        (WebInspector.Color):
     12
     13          Representations of Colors in Raw Form. (May be Lazy Loaded):
     14
     15        (WebInspector.Color.prototype.get shorthex):
     16        (WebInspector.Color.prototype.get hex):
     17        (WebInspector.Color.prototype.set hex):
     18        (WebInspector.Color.prototype.get rgb):
     19        (WebInspector.Color.prototype.set rgb):
     20        (WebInspector.Color.prototype.get hsl):
     21        (WebInspector.Color.prototype.set hsl):
     22        (WebInspector.Color.prototype.get nickname):
     23        (WebInspector.Color.prototype.set nickname):
     24        (WebInspector.Color.prototype.get rgba):
     25        (WebInspector.Color.prototype.set rgba):
     26        (WebInspector.Color.prototype.get hsla):
     27        (WebInspector.Color.prototype.set hsla):
     28
     29          Helpers and Standard String Representations:
     30
     31        (WebInspector.Color.prototype.hasShortHex):
     32        (WebInspector.Color.prototype.toRgb):
     33        (WebInspector.Color.prototype.toHsl):
     34        (WebInspector.Color.prototype.toShortHex):
     35        (WebInspector.Color.prototype.toHex):
     36        (WebInspector.Color.prototype.toRgba):
     37        (WebInspector.Color.prototype.toHsla):
     38        (WebInspector.Color.prototype.toNickname):
     39
     40          Conversion Functions to Determine Other Representations:
     41          My Sources for all algorithms and sample data:
     42          Wikipedia: http://en.wikipedia.org/wiki/HSV_color_space
     43          CSS Specification: http://www.w3.org/TR/css3-color/#hsla-color
     44
     45        (WebInspector.Color.prototype.rgbToHex):
     46        (WebInspector.Color.prototype.hexToRgb):
     47        (WebInspector.Color.prototype.rgbToHsl):
     48        (WebInspector.Color.prototype.hslToRgb.hueToRgb):
     49        (WebInspector.Color.prototype.hslToRgb):
     50        (WebInspector.Color.prototype.rgbaToHsla):
     51        (WebInspector.Color.prototype.hslaToRgba):
     52
     53          Called from the constructor, attempts to parse and will throw an error
     54          if it cannot parse.  If simple then the "hex" value is guarenteed.
     55          If advanced then both the "rgba" and "hsla" are guarenteed.  If it is
     56          a nickname in any way (e.g. "transparent", "black") then this is
     57          guarenteed to be set as well.
     58
     59        (WebInspector.Color.prototype.parse):
     60
     61          Clicking on the swatch will rotate through Color Representations.
     62            Simple:   rgb -> hsl -> nickname? -> shorthex? -> hex -> (loop around)
     63            Advanced: rgba -> hsla -> nickname? -> (loop around)
     64
     65        * inspector/front-end/StylesSidebarPane.js:
     66        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.value.):
     67        (WebInspector.StylePropertyTreeElement.prototype.updateTitle):
     68
     69          Load Color.js:
     70
     71        * inspector/front-end/inspector.html:
     72
    1732009-08-05  John Abd-El-Malek  <jam@chromium.org>
    274
  • trunk/WebCore/inspector/front-end/StylesSidebarPane.js

    r46732 r46828  
    877877        if (value) {
    878878            // FIXME: this only covers W3C and CSS 16 valid color names
    879             var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow/g);
     879            var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow|transparent/g);
     880            var swatch;
    880881            if (colors) {
    881882                var colorsLength = colors.length;
     
    885886                    swatchElement.style.setProperty("background-color", colors[i]);
    886887                    this.listItemElement.appendChild(swatchElement);
     888                    swatch = swatchElement;
     889                }
     890            }
     891
     892            // Rotate through Color Representations by Clicking on the Swatch
     893            // Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> ...
     894            // Advanced: rgba -> hsla -> nickname? -> ...           
     895            if (colors && colors.length === 1) {
     896                var color = new WebInspector.Color(htmlValue);
     897                swatch.addEventListener("click", changeColorDisplay, false);
     898                swatch.addEventListener("dblclick", function(event) {
     899                    event.stopPropagation();
     900                }, false);
     901
     902                var mode = color.mode;
     903                var valueElement = this.valueElement;
     904                function changeColorDisplay(event) {
     905
     906                    function changeTo(newMode, content) {
     907                        mode = newMode;
     908                        valueElement.textContent = content;
     909                    }
     910
     911                    switch (mode) {
     912                        case "rgb":
     913                            changeTo("hsl", color.toHsl());
     914                            break;
     915
     916                        case "shorthex":
     917                            changeTo("hex", color.toHex());
     918                            break;
     919
     920                        case "hex":
     921                            changeTo("rgb", color.toRgb());
     922                            break;
     923
     924                        case "nickname":
     925                            if (color.simple) {
     926                                if (color.hasShortHex())
     927                                    changeTo("shorthex", color.toShortHex());
     928                                else
     929                                    changeTo("hex", color.toHex());
     930                            } else
     931                                changeTo("rgba", color.toRgba());
     932                            break;
     933
     934                        case "hsl":
     935                            if (color.nickname)
     936                                changeTo("nickname", color.toNickname());
     937                            else if (color.hasShortHex())
     938                                changeTo("shorthex", color.toShortHex());
     939                            else
     940                                changeTo("hex", color.toHex());
     941                            break;
     942
     943                        case "rgba":
     944                            changeTo("hsla", color.toHsla());
     945                            break;
     946
     947                        case "hsla":
     948                            if (color.nickname)
     949                                changeTo("nickname", color.toNickname());
     950                            else
     951                                changeTo("rgba", color.toRgba());
     952                            break;
     953                    }
    887954                }
    888955            }
  • trunk/WebCore/inspector/front-end/WebKit.qrc

    r46732 r46828  
    88    <file>CallStackSidebarPane.js</file>
    99    <file>ChangesView.js</file>
     10    <file>Color.js</file>
    1011    <file>ConsoleView.js</file>
    1112    <file>Database.js</file>
  • trunk/WebCore/inspector/front-end/inspector.html

    r46732 r46828  
    6262    <script type="text/javascript" src="MetricsSidebarPane.js"></script>
    6363    <script type="text/javascript" src="PropertiesSidebarPane.js"></script>
     64    <script type="text/javascript" src="Color.js"></script>
    6465    <script type="text/javascript" src="StylesSidebarPane.js"></script>
    6566    <script type="text/javascript" src="Panel.js"></script>
Note: See TracChangeset for help on using the changeset viewer.