Changeset 194977 in webkit


Ignore:
Timestamp:
Jan 13, 2016 1:14:44 PM (8 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Add support for the existing GradientEditor in the CSS Rules sidebar
​https://bugs.webkit.org/show_bug.cgi?id=153004

Patch by Devin Rousso <Devin Rousso> on 2016-01-13
Reviewed by Timothy Hatcher.

Both the Visual sidebar and Resource view have editors for CSS gradient
values, but the Rules sidebar instead only adds editors for basic color
values. Instead of duplicating the code for gradient swatches, existing
code will be used to give this same functionality to the Rules sidebar.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Main.html:
  • UserInterface/Models/Gradient.js:

(WebInspector.Gradient):
(WebInspector.Gradient.fromString):
(WebInspector.Gradient.stopsWithComponents):
(WebInspector.Gradient.prototype.copy):
(WebInspector.Gradient.prototype.toString):
Refactored WebInspector.Gradient into its own class.

(WebInspector.LinearGradient):
(WebInspector.LinearGradient.prototype.toString):
Now uses WebInspector.Gradient inheritance and methods.

(WebInspector.RadialGradient):
(WebInspector.RadialGradient.prototype.toString):
Now uses WebInspector.Gradient inheritance and methods.

  • UserInterface/Views/CSSStyleDeclarationTextEditor.css:

Use InlineSwatch.css values instead.

(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker): Deleted.
(@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active): Deleted.

  • UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover): Deleted.
Removed unused popover member variable.

(WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches):
Renamed variables for more consistent naming and reimplemented the logic
to use the new WebInspector.InlineSwatch methods. As a result, it was
possible to consolidate the 3 different type of swatch functions into a
single function.

(WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.createSwatch): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked): Deleted.

  • UserInterface/Views/CodeMirrorTextMarkers.js:

(createCodeMirrorColorTextMarkers.matchFunction):
Added logic so that if the matched color string is found inside a gradient,
it will not have a marker created for it.

  • UserInterface/Views/InlineSwatch.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css.

Consolidated the various swatch CSS classes into one file.

(.inline-swatch):
(.inline-swatch.bezier):
(.inline-swatch.bezier:hover):
(.inline-swatch.bezier:active):
(@media (-webkit-max-device-pixel-ratio: 1)):
(.inline-swatch > span):
Ensured that the inner swatch element can not be selected so that the "click"
listener on its parent always fires.

(.inline-swatch:hover > span):
(.inline-swatch:active > span):
(.inline-swatch.bezier > span):

  • UserInterface/Views/InlineSwatch.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js.

(WebInspector.InlineSwatch):
Now accepts a new first argument to indicate what type of color swatch
to create and what functionality it will have. Currently has options
for WebInspector.Color, WebInspector.Gradient, and WebInspector.CubicBezier.

(WebInspector.InlineSwatch.prototype.get element):
(WebInspector.InlineSwatch.prototype.get value):
(WebInspector.InlineSwatch.prototype.set value):
(WebInspector.InlineSwatch.prototype._fallbackValue):
(WebInspector.InlineSwatch.prototype._updateSwatch):
(WebInspector.InlineSwatch.prototype._swatchElementClicked):
(WebInspector.InlineSwatch.prototype._valueEditorValueDidChange):
(WebInspector.InlineSwatch.prototype._handleContextMenuEvent):
(WebInspector.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
(WebInspector.InlineSwatch.prototype._getNextValidHEXFormat):

  • UserInterface/Views/VisualStyleBackgroundPicker.css:

(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient):
(.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span):
(.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .color-swatch): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-swatch + .value-input): Deleted.

  • UserInterface/Views/VisualStyleBackgroundPicker.js:

Removed the specific code for the gradient swatch and moved to using a
gradient-type InlineSwatch for gradient values instead.

(WebInspector.VisualStyleBackgroundPicker):
(WebInspector.VisualStyleBackgroundPicker.prototype.set value):
(WebInspector.VisualStyleBackgroundPicker.prototype._updateGradient):
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchColorChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._valueInputValueChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._handleKeywordChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._updateGradientSwatch): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked.handleColorPickerToggled): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientEditorGradientChanged): Deleted.

  • UserInterface/Views/VisualStyleColorPicker.css:

(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span):
Add override CSS to ensure that the color-type InlineSwatch displays nicely
next to the flexbox style Visual sidebar.

(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
Refactored to only use overriding properties of the basic .inline-swatch values.

  • UserInterface/Views/VisualStyleColorPicker.js:

(WebInspector.VisualStyleColorPicker):
(WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
(WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):

  • UserInterface/Views/VisualStyleTimingEditor.css:

(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier):
(.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier):
(@media (-webkit-min-device-pixel-ratio: 2)):
Add override CSS to ensure that the color-type InlineSwatch displays nicely
next to the flexbox style Visual sidebar.

(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor): Deleted.
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover): Deleted.
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active): Deleted.
Refactored to only use overriding properties of the basic .inline-swatch values.

  • UserInterface/Views/VisualStyleTimingEditor.js:

Removed the specific code for the cubic-bezier swatch and moved to using a
cubic-bezier-type InlineSwatch for gradient values instead.

(WebInspector.VisualStyleTimingEditor):
(WebInspector.VisualStyleTimingEditor.prototype.get bezierValue):
(WebInspector.VisualStyleTimingEditor.prototype.set bezierValue):
(WebInspector.VisualStyleTimingEditor.prototype._setValue):
(WebInspector.VisualStyleTimingEditor.prototype._handleKeywordChanged):
(WebInspector.VisualStyleTimingEditor.prototype._bezierSwatchValueChanged):
(WebInspector.VisualStyleTimingEditor.prototype._bezierMarkerClicked): Deleted.

Location:
trunk/Source/WebInspectorUI
Files:
13 edited
2 moved

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r194936 r194977  
     12016-01-13  Devin Rousso  <dcrousso+webkit@gmail.com>
     2
     3        Web Inspector: Add support for the existing GradientEditor in the CSS Rules sidebar
     4        https://bugs.webkit.org/show_bug.cgi?id=153004
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Both the Visual sidebar and Resource view have editors for CSS gradient
     9        values, but the Rules sidebar instead only adds editors for basic color
     10        values. Instead of duplicating the code for gradient swatches, existing
     11        code will be used to give this same functionality to the Rules sidebar.
     12
     13        * Localizations/en.lproj/localizedStrings.js:
     14        * UserInterface/Main.html:
     15
     16        * UserInterface/Models/Gradient.js:
     17        (WebInspector.Gradient):
     18        (WebInspector.Gradient.fromString):
     19        (WebInspector.Gradient.stopsWithComponents):
     20        (WebInspector.Gradient.prototype.copy):
     21        (WebInspector.Gradient.prototype.toString):
     22        Refactored WebInspector.Gradient into its own class.
     23
     24        (WebInspector.LinearGradient):
     25        (WebInspector.LinearGradient.prototype.toString):
     26        Now uses WebInspector.Gradient inheritance and methods.
     27
     28        (WebInspector.RadialGradient):
     29        (WebInspector.RadialGradient.prototype.toString):
     30        Now uses WebInspector.Gradient inheritance and methods.
     31
     32        * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
     33        Use InlineSwatch.css values instead.
     34
     35        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker): Deleted.
     36        (@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
     37        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover): Deleted.
     38        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active): Deleted.
     39
     40        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
     41        (WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover): Deleted.
     42        Removed unused popover member variable.
     43
     44        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
     45        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers.update):
     46        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
     47        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
     48        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches):
     49        Renamed variables for more consistent naming and reimplemented the logic
     50        to use the new WebInspector.InlineSwatch methods.  As a result, it was
     51        possible to consolidate the 3 different type of swatch functions into a
     52        single function.
     53
     54        (WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty.update):
     55        (WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange.update):
     56        (WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged.update):
     57        (WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged):
     58        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
     59        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.createSwatch): Deleted.
     60        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update): Deleted.
     61        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Deleted.
     62        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors.update): Deleted.
     63        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors): Deleted.
     64        (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update): Deleted.
     65        (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged): Deleted.
     66        (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror.update): Deleted.
     67        (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror): Deleted.
     68        (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked): Deleted.
     69
     70        * UserInterface/Views/CodeMirrorTextMarkers.js:
     71        (createCodeMirrorColorTextMarkers.matchFunction):
     72        Added logic so that if the matched color string is found inside a gradient,
     73        it will not have a marker created for it.
     74
     75        * UserInterface/Views/InlineSwatch.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css.
     76        Consolidated the various swatch CSS classes into one file.
     77
     78        (.inline-swatch):
     79        (.inline-swatch.bezier):
     80        (.inline-swatch.bezier:hover):
     81        (.inline-swatch.bezier:active):
     82        (@media (-webkit-max-device-pixel-ratio: 1)):
     83        (.inline-swatch > span):
     84        Ensured that the inner swatch element can not be selected so that the "click"
     85        listener on its parent always fires.
     86
     87        (.inline-swatch:hover > span):
     88        (.inline-swatch:active > span):
     89        (.inline-swatch.bezier > span):
     90
     91        * UserInterface/Views/InlineSwatch.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js.
     92        (WebInspector.InlineSwatch):
     93        Now accepts a new first argument to indicate what type of color swatch
     94        to create and what functionality it will have.  Currently has options
     95        for WebInspector.Color, WebInspector.Gradient, and WebInspector.CubicBezier.
     96
     97        (WebInspector.InlineSwatch.prototype.get element):
     98        (WebInspector.InlineSwatch.prototype.get value):
     99        (WebInspector.InlineSwatch.prototype.set value):
     100        (WebInspector.InlineSwatch.prototype._fallbackValue):
     101        (WebInspector.InlineSwatch.prototype._updateSwatch):
     102        (WebInspector.InlineSwatch.prototype._swatchElementClicked):
     103        (WebInspector.InlineSwatch.prototype._valueEditorValueDidChange):
     104        (WebInspector.InlineSwatch.prototype._handleContextMenuEvent):
     105        (WebInspector.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
     106        (WebInspector.InlineSwatch.prototype._getNextValidHEXFormat):
     107
     108        * UserInterface/Views/VisualStyleBackgroundPicker.css:
     109        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient):
     110        (.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient):
     111        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover):
     112        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active):
     113        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span):
     114        (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input):
     115        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch): Deleted.
     116        (.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .color-swatch): Deleted.
     117        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
     118        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
     119        (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
     120        (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-swatch + .value-input): Deleted.
     121
     122        * UserInterface/Views/VisualStyleBackgroundPicker.js:
     123        Removed the specific code for the gradient swatch and moved to using a
     124        gradient-type InlineSwatch for gradient values instead.
     125
     126        (WebInspector.VisualStyleBackgroundPicker):
     127        (WebInspector.VisualStyleBackgroundPicker.prototype.set value):
     128        (WebInspector.VisualStyleBackgroundPicker.prototype._updateGradient):
     129        (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchColorChanged):
     130        (WebInspector.VisualStyleBackgroundPicker.prototype._valueInputValueChanged):
     131        (WebInspector.VisualStyleBackgroundPicker.prototype._handleKeywordChanged):
     132        (WebInspector.VisualStyleBackgroundPicker.prototype._updateGradientSwatch): Deleted.
     133        (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked.handleColorPickerToggled): Deleted.
     134        (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked): Deleted.
     135        (WebInspector.VisualStyleBackgroundPicker.prototype._gradientEditorGradientChanged): Deleted.
     136
     137        * UserInterface/Views/VisualStyleColorPicker.css:
     138        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color):
     139        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover):
     140        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active):
     141        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span):
     142        Add override CSS to ensure that the color-type InlineSwatch displays nicely
     143        next to the flexbox style Visual sidebar.
     144
     145        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch): Deleted.
     146        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
     147        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
     148        (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
     149        Refactored to only use overriding properties of the basic .inline-swatch values.
     150
     151        * UserInterface/Views/VisualStyleColorPicker.js:
     152        (WebInspector.VisualStyleColorPicker):
     153        (WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
     154        (WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
     155
     156        * UserInterface/Views/VisualStyleTimingEditor.css:
     157        (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier):
     158        (.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier):
     159        (@media (-webkit-min-device-pixel-ratio: 2)):
     160        Add override CSS to ensure that the color-type InlineSwatch displays nicely
     161        next to the flexbox style Visual sidebar.
     162
     163        (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor): Deleted.
     164        (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover): Deleted.
     165        (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active): Deleted.
     166        Refactored to only use overriding properties of the basic .inline-swatch values.
     167
     168        * UserInterface/Views/VisualStyleTimingEditor.js:
     169        Removed the specific code for the cubic-bezier swatch and moved to using a
     170        cubic-bezier-type InlineSwatch for gradient values instead.
     171
     172        (WebInspector.VisualStyleTimingEditor):
     173        (WebInspector.VisualStyleTimingEditor.prototype.get bezierValue):
     174        (WebInspector.VisualStyleTimingEditor.prototype.set bezierValue):
     175        (WebInspector.VisualStyleTimingEditor.prototype._setValue):
     176        (WebInspector.VisualStyleTimingEditor.prototype._handleKeywordChanged):
     177        (WebInspector.VisualStyleTimingEditor.prototype._bezierSwatchValueChanged):
     178        (WebInspector.VisualStyleTimingEditor.prototype._bezierMarkerClicked): Deleted.
     179
    11802016-01-12  Matt Baker  <mattbaker@apple.com>
    2181

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r194936 r194977  
    131131localizedStrings["Click to enable the selected rule"] = "Click to enable the selected rule";
    132132localizedStrings["Click to link property values"] = "Click to link property values";
    133 localizedStrings["Click to open a cubic-bezier editor"] = "Click to open a cubic-bezier editor";
     133localizedStrings["Click to open a cubic-bezier editor."] = "Click to open a cubic-bezier editor.";
    134134localizedStrings["Click to remove link"] = "Click to remove link";
    135135localizedStrings["Click to remove the selected item."] = "Click to remove the selected item.";
    136136localizedStrings["Click to restart the animation"] = "Click to restart the animation";
    137137localizedStrings["Click to select a color. Shift-click to switch color formats."] = "Click to select a color. Shift-click to switch color formats.";
    138 localizedStrings["Click to select a gradient"] = "Click to select a gradient";
     138localizedStrings["Click to select a gradient."] = "Click to select a gradient.";
    139139localizedStrings["Clickable"] = "Clickable";
    140140localizedStrings["Clip"] = "Clip";

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r194728 r194977  
    4949    <link rel="stylesheet" href="Views/CodeMirrorOverrides.css">
    5050    <link rel="stylesheet" href="Views/ColorPicker.css">
    51     <link rel="stylesheet" href="Views/ColorSwatch.css">
    5251    <link rel="stylesheet" href="Views/ColorWheel.css">
    5352    <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
    … …  
    9695    <link rel="stylesheet" href="Views/IndeterminateProgressSpinner.css">
    9796    <link rel="stylesheet" href="Views/IndexedDatabaseObjectStoreContentView.css">
     97    <link rel="stylesheet" href="Views/InlineSwatch.css">
    9898    <link rel="stylesheet" href="Views/IssueTreeElement.css">
    9999    <link rel="stylesheet" href="Views/LayerTreeDetailsSidebarPanel.css">
    … …  
    437437    <script src="Views/CodeMirrorTextMarkers.js"></script>
    438438    <script src="Views/ColorPicker.js"></script>
    439     <script src="Views/ColorSwatch.js"></script>
    440439    <script src="Views/ColorWheel.js"></script>
    441440    <script src="Views/CompletionSuggestionsView.js"></script>
    … …  
    499498    <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
    500499    <script src="Views/IndexedDatabaseTreeElement.js"></script>
     500    <script src="Views/InlineSwatch.js"></script>
    501501    <script src="Views/IssueTreeElement.js"></script>
    502502    <script src="Views/LayerTreeDataGridNode.js"></script>

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

    r192705 r194977  
    2424 */
    2525
    26 // FIXME: Convert to class?
    27 WebInspector.Gradient = {
    28     Types: {
    29         Linear: "linear-gradient",
    30         Radial: "radial-gradient"
    31     },
    32 
    33     fromString(cssString)
     26WebInspector.Gradient = class Gradient
     27{
     28    constructor(type, stops)
     29    {
     30        this.type = type;
     31        this.stops = stops;
     32    }
     33
     34    // Static
     35
     36    static fromString(cssString)
    3437    {
    3538        var type;
    … …  
    8588        var gradient;
    8689        if (type === WebInspector.Gradient.Types.Linear)
    87             gradient = WebInspector.LinearGradient.linearGradientWithComponents(components);
     90            gradient = WebInspector.LinearGradient.fromComponents(components);
    8891        else
    89             gradient = WebInspector.RadialGradient.radialGradientWithComponents(components);
     92            gradient = WebInspector.RadialGradient.fromComponents(components);
    9093
    9194        if (gradient)
    … …  
    9396
    9497        return gradient;
    95     },
    96 
    97     stopsWithComponents(components)
     98    }
     99
     100    static stopsWithComponents(components)
    98101    {
    99102        // FIXME: handle lengths.
    … …  
    127130
    128131        return stops;
    129     },
     132    }
     133
     134    // Public
    130135
    131136    stringFromStops(stops)
    … …  
    139144        }).join(", ");
    140145    }
     146
     147    // Public
     148
     149    copy()
     150    {
     151        // Implemented by subclasses.
     152    }
     153
     154    toString()
     155    {
     156        // Implemented by subclasses.
     157    }
    141158};
    142159
    143 WebInspector.LinearGradient = class LinearGradient
     160WebInspector.Gradient.Types = {
     161    Linear: "linear-gradient",
     162    Radial: "radial-gradient"
     163};
     164
     165WebInspector.LinearGradient = class LinearGradient extends WebInspector.Gradient
    144166{
    145167    constructor(angle, stops)
    146168    {
    147         this.type = WebInspector.Gradient.Types.Linear;
     169        super(WebInspector.Gradient.Types.Linear, stops);
    148170        this.angle = angle;
    149         this.stops = stops;
    150171    }
    151172
    152173    // Static
    153174
    154     static linearGradientWithComponents(components)
     175    static fromComponents(components)
    155176    {
    156177        var angle = 180;
    … …  
    234255            str += ", ";
    235256
    236         str += WebInspector.Gradient.stringFromStops(this.stops);
     257        str += this.stringFromStops(this.stops);
    237258
    238259        return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
    … …  
    240261};
    241262
    242 WebInspector.RadialGradient = class RadialGradient
     263WebInspector.RadialGradient = class RadialGradient extends WebInspector.Gradient
    243264{
    244265    constructor(sizing, stops)
    245266    {
    246         this.type = WebInspector.Gradient.Types.Radial;
     267        super(WebInspector.Gradient.Types.Radial, stops);
    247268        this.sizing = sizing;
    248         this.stops = stops;
    249269    }
    250270
    251271    // Static
    252272
    253     static radialGradientWithComponents(components)
     273    static fromComponents(components)
    254274    {
    255275        var sizing = !WebInspector.Color.fromString(components[0].join(" ")) ? components.shift().join(" ") : "";
    … …  
    276296            str += ", ";
    277297
    278         str += WebInspector.Gradient.stringFromStops(this.stops);
     298        str += this.stringFromStops(this.stops);
    279299
    280300        return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css

    r194568 r194977  
    9292}
    9393
    94 .css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker {
    95     width: 11px;
    96     height: 11px;
    97     margin-right: 2px;
    98     vertical-align: -2px;
    99     content: url(../Images/CubicBezier.svg);
    100     cursor: default;
    101 }
    102 
    103 @media (-webkit-max-device-pixel-ratio: 1) {
    104     /* Ensure the bezier marker is even by even so it looks a bit less blurry. */
    105     .css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker {
    106         vertical-align: -1px;
    107         width: 10px;
    108         height: 10px;
    109     }
    110 }
    111 
    112 .css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover {
    113     filter: brightness(0.9);
    114 }
    115 
    116 .css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active {
    117     filter: brightness(0.8);
    118 }
    119 
    12094.computed .css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
    12195.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {

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

    r194717 r194977  
    389389    didDismissPopover(popover)
    390390    {
    391         if (popover === this._colorPickerPopover)
    392             this._colorPickerPopover = null;
    393391        if (popover === this._cubicBezierEditorPopover)
    394392            this._cubicBezierEditorPopover = null;
    … …  
    772770        // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
    773771        // This way any auto completed colors get swatches right away.
    774         if (this._completionController.isCompletionChange(change)) {
    775             this._createColorSwatches(false, change.from.line);
    776             this._createBezierEditors(false, change.from.line);
    777         }
     772        if (this._completionController.isCompletionChange(change))
     773            this._createInlineSwatches(false, change.from.line);
    778774
    779775        // Use a short delay for user input to coalesce more changes before committing. Other actions like
    … …  
    825821            }
    826822
    827             // Look for colors and make swatches.
    828             this._createColorSwatches(true);
    829             this._createBezierEditors(true);
     823            // Look for swatchable values and make inline swatches.
     824            this._createInlineSwatches(true);
    830825
    831826            this._markLinesWithCheckboxPlaceholder();
    … …  
    873868    }
    874869
    875     _createColorSwatches(nonatomic, lineNumber)
    876     {
     870    _createInlineSwatches(nonatomic, lineNumber)
     871    {
     872        function createSwatch(swatch, marker, valueObject, valueString)
     873        {
     874            swatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._inlineSwatchValueChanged, this);
     875
     876            let codeMirrorTextMarker = marker.codeMirrorTextMarker;
     877            let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
     878            this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
     879
     880            swatch.__textMarker = codeMirrorTextMarker;
     881            swatch.__textMarkerRange = codeMirrorTextMarkerRange;
     882        }
     883
    877884        function update()
    878885        {
    … …  
    880887
    881888            // Look for color strings and add swatches in front of them.
    882             createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
    883                 let swatch = new WebInspector.ColorSwatch(color, this._codeMirror.getOption("readOnly"));
    884                 swatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
    885 
    886                 let codeMirrorTextMarker = marker.codeMirrorTextMarker;
    887                 let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
    888                 this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
    889 
    890                 swatch.__colorTextMarker = codeMirrorTextMarker;
    891                 swatch.__colorTextMarkerRange = codeMirrorTextMarkerRange;
    892             }.bind(this));
    893         }
    894 
    895         if (nonatomic)
    896             update.call(this);
    897         else
    898             this._codeMirror.operation(update.bind(this));
    899     }
    900 
    901     _createBezierEditors(nonatomic, lineNumber)
    902     {
    903         function update()
    904         {
    905             var range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
    906 
    907             // Look for cubic-bezier and timing functions and add cubic-bezier icons in front of them.
    908             createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, function(marker, cubicBezier) {
    909                 var bezierMarker = document.createElement("span");
    910                 bezierMarker.title = WebInspector.UIString("Click to open a cubic-bezier editor");
    911                 bezierMarker.className = WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName;
    912                 bezierMarker.addEventListener("click", this._cubicBezierMarkerClicked.bind(this));
    913 
    914                 var codeMirrorTextMarker = marker.codeMirrorTextMarker;
    915                 this._codeMirror.setUniqueBookmark(codeMirrorTextMarker.find().from, bezierMarker);
    916 
    917                 bezierMarker.__textMarker = codeMirrorTextMarker;
    918                 bezierMarker.__bezier = cubicBezier;
    919             }.bind(this));
     889            createCodeMirrorColorTextMarkers(this._codeMirror, range, (marker, color, colorString) => {
     890                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color, color, this._codeMirror.getOption("readOnly"));
     891                createSwatch.call(this, swatch, marker, color, colorString);
     892            });
     893
     894            // Look for gradient strings and add swatches in front of them.
     895            createCodeMirrorGradientTextMarkers(this._codeMirror, range, (marker, gradient, gradientString) => {
     896                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient, gradient, this._codeMirror.getOption("readOnly"));
     897                createSwatch.call(this, swatch, marker, gradient, gradientString);
     898            });
     899
     900            // Look for cubic-bezier strings and add swatches in front of them.
     901            createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, (marker, bezier, bezierString) => {
     902                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier, bezier, this._codeMirror.getOption("readOnly"));
     903                createSwatch.call(this, swatch, marker, bezier, bezierString);
     904            });
    920905        }
    921906
    … …  
    12721257            this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
    12731258
    1274             // Update the line for any color swatches or cubic-beziers that got removed.
    1275             this._createColorSwatches(true, range.from.line);
    1276             this._createBezierEditors(true, range.from.line);
     1259            // Update the line for any inline swatches that got removed.
     1260            this._createInlineSwatches(true, range.from.line);
    12771261        }
    12781262
    … …  
    13121296            this._codeMirror.replaceRange(text, range.from, range.to);
    13131297
    1314             // Update the line for any color swatches or cubic-beziers that got removed.
    1315             this._createColorSwatches(true, range.from.line);
    1316             this._createBezierEditors(true, range.from.line);
     1298            // Update the line for any inline swatches that got removed.
     1299            this._createInlineSwatches(true, range.from.line);
    13171300        }
    13181301
    … …  
    13201303    }
    13211304
    1322     _colorSwatchColorChanged(event)
     1305    _inlineSwatchValueChanged(event)
    13231306    {
    13241307        let swatch = event && event.target;
    … …  
    13271310            return;
    13281311
    1329         let colorString = event && event.data && event.data.color && event.data.color.toString();
    1330         console.assert(colorString);
    1331         if (!colorString)
    1332             return;
    1333 
    1334         let colorTextMarker = swatch.__colorTextMarker;
    1335         let range = swatch.__colorTextMarkerRange;
     1312        let value = event.data && event.data.value && event.data.value.toString();
     1313        console.assert(value);
     1314        if (!value)
     1315            return;
     1316
     1317        let textMarker = swatch.__textMarker;
     1318        let range = swatch.__textMarkerRange;
    13361319        console.assert(range);
    13371320        if (!range)
    … …  
    13411324        {
    13421325            // The original text marker might have been cleared by a style update,
    1343             // in this case we need to find the new color text marker so we know
    1344             // the right range for the new style color text.
    1345             if (!colorTextMarker || !colorTextMarker.find()) {
    1346                 colorTextMarker = null;
     1326            // in this case we need to find the new text marker so we know the
     1327            // right range for the new style text.
     1328            if (!textMarker || !textMarker.find()) {
     1329                textMarker = null;
    13471330
    13481331                let marks = this._codeMirror.findMarksAt(range.from);
    … …  
    13511334
    13521335                for (let mark of marks) {
    1353                     if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.Color)
     1336                    let type = WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type;
     1337                    if (type !== WebInspector.TextMarker.Type.Color && type !== WebInspector.TextMarker.Type.Gradient && type !== WebInspector.TextMarker.Type.CubicBezier)
    13541338                        continue;
    1355                     colorTextMarker = mark;
     1339                    textMarker = mark;
    13561340                    break;
    13571341                }
    13581342            }
    13591343
    1360             if (!colorTextMarker)
     1344            if (!textMarker)
    13611345                return;
    13621346
    13631347            // Sometimes we still might find a stale text marker with findMarksAt.
    1364             let newRange = colorTextMarker.find();
    1365             if (!newRange)
     1348            range = textMarker.find();
     1349            if (!range)
    13661350                return;
    13671351
    1368             range = newRange;
    1369 
    1370             colorTextMarker.clear();
    1371 
    1372             this._codeMirror.replaceRange(colorString, range.from, range.to);
    1373 
    1374             // The color's text format could have changed, so we need to update the "range"
     1352            textMarker.clear();
     1353
     1354            this._codeMirror.replaceRange(value, range.from, range.to);
     1355
     1356            // The value's text could have changed, so we need to update the "range"
    13751357            // variable to anticipate a different "range.to" property.
    1376             range.to.ch = range.from.ch + colorString.length;
    1377 
    1378             colorTextMarker = this._codeMirror.markText(range.from, range.to);
    1379 
    1380             swatch.__colorTextMarker = colorTextMarker;
     1358            range.to.ch = range.from.ch + value.length;
     1359
     1360            textMarker = this._codeMirror.markText(range.from, range.to);
     1361
     1362            swatch.__textMarker = textMarker;
    13811363        }
    13821364
    13831365        this._codeMirror.operation(update.bind(this));
    1384     }
    1385 
    1386     _cubicBezierMarkerClicked(event)
    1387     {
    1388         if (this._cubicBezierEditorPopover)
    1389             return;
    1390 
    1391         var bezierMarker = event.target;
    1392 
    1393         var bezier = bezierMarker.__bezier;
    1394         console.assert(bezier);
    1395         if (!bezier)
    1396             return;
    1397 
    1398         var bezierTextMarker = bezierMarker.__textMarker;
    1399         console.assert(bezierTextMarker);
    1400         if (!bezierTextMarker)
    1401             return;
    1402 
    1403         var range = bezierTextMarker.find();
    1404         console.assert(range);
    1405         if (!range)
    1406             return;
    1407 
    1408         function updateCodeMirror(newCubicBezierText)
    1409         {
    1410             function update()
    1411             {
    1412                 // The original text marker might have been cleared by a style update,
    1413                 // in this case we need to find the new bezier text marker so we know
    1414                 // the right range for the new style bezier text.
    1415                 if (!bezierTextMarker || !bezierTextMarker.find()) {
    1416                     bezierTextMarker = null;
    1417 
    1418                     var marks = this._codeMirror.findMarksAt(range.from);
    1419                     if (!marks.length)
    1420                         return;
    1421 
    1422                     for (var i = 0; i < marks.length; ++i) {
    1423                         var mark = marks[i];
    1424                         if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.CubicBezier)
    1425                             continue;
    1426                         bezierTextMarker = mark;
    1427                         break;
    1428                     }
    1429                 }
    1430 
    1431                 if (!bezierTextMarker)
    1432                     return;
    1433 
    1434                 // Sometimes we still might find a stale text marker with findMarksAt.
    1435                 var newRange = bezierTextMarker.find();
    1436                 if (!newRange)
    1437                     return;
    1438 
    1439                 range = newRange;
    1440 
    1441                 bezierTextMarker.clear();
    1442 
    1443                 this._codeMirror.replaceRange(newCubicBezierText, range.from, range.to);
    1444 
    1445                 // The bezier's text format could have changed, so we need to update the "range"
    1446                 // variable to anticipate a different "range.to" property.
    1447                 range.to.ch = range.from.ch + newCubicBezierText.length;
    1448 
    1449                 bezierTextMarker = this._codeMirror.markText(range.from, range.to);
    1450 
    1451                 bezierMarker.__textMarker = bezierTextMarker;
    1452             }
    1453 
    1454             this._codeMirror.operation(update.bind(this));
    1455         }
    1456 
    1457         this._cubicBezierEditorPopover = new WebInspector.Popover(this);
    1458 
    1459         var bezierEditor = new WebInspector.BezierEditor;
    1460 
    1461         bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, function(event) {
    1462             updateCodeMirror.call(this, event.data.bezier.toString());
    1463         }.bind(this));
    1464 
    1465         var bounds = WebInspector.Rect.rectFromClientRect(bezierMarker.getBoundingClientRect());
    1466 
    1467         this._cubicBezierEditorPopover.content = bezierEditor.element;
    1468         this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
    1469 
    1470         bezierEditor.bezier = bezier;
    14711366    }
    14721367
    … …  
    16821577            }.bind(this));
    16831578
    1684             // Look for colors and make swatches.
    1685             this._createColorSwatches(true);
    1686             this._createBezierEditors(true);
     1579            // Look for swatchable values and make inline swatches.
     1580            this._createInlineSwatches(true);
    16871581
    16881582            // Restore the cursor position/selection.
    … …  
    17721666WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
    17731667WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
    1774 WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName = "cubic-bezier-marker";
    17751668WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
    17761669WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";

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

    r192040 r194977  
    8585function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
    8686{
    87     // 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]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
     87    // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffff, #ffffff, #ffffffff, white
     88    let 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) {
     90        if (!lineContent || !lineContent.length)
     91            return false;
     92
     93        // In order determine if the matched color is inside a gradient, first
     94        // look before the text to find the first unmatched open parenthesis.
     95        // This parenthesis, if it exists, will be immediately after the CSS
     96        // funciton whose name can be checked to see if it matches a gradient.
     97        let openParenthesis = 0;
     98        let index = match.index;
     99        let c = null;
     100        while (c = lineContent[index]) {
     101            if (c === "(")
     102                ++openParenthesis;
     103            if (c === ")")
     104                --openParenthesis;
     105
     106            if (openParenthesis > 0)
     107                break;
     108
     109            --index;
     110            if (index < 0)
     111                break;
     112        }
     113
     114        if (/(repeating-)?(linear|radial)-gradient$/.test(lineContent.substring(0, index)))
     115            return false;
     116
    90117        // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
    91118        return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));

  • trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css

    r194976 r194977  
    2525 */
    2626
    27 .color-swatch {
     27.inline-swatch {
    2828    display: inline-block;
    2929    position: relative;
    … …  
    4343}
    4444
     45.inline-swatch.bezier {
     46    margin-right: 2px;
     47    content: url(../Images/CubicBezier.svg);
     48    background: none;
     49}
     50
     51.inline-swatch.bezier:hover {
     52    filter: brightness(0.9);
     53}
     54
     55.inline-swatch.bezier:active {
     56    filter: brightness(0.8);
     57}
     58
    4559@media (-webkit-max-device-pixel-ratio: 1) {
    4660    /* Ensure the color swatch is even by even so that it looks okay checkered. */
    47     .color-swatch {
     61    .inline-swatch {
    4862        vertical-align: -1px;
    4963        width: 10px;
    … …  
    5266}
    5367
    54 .color-swatch > span {
     68.inline-swatch > span {
    5569    position: absolute;
    5670    top: 0;
    … …  
    5973    left: 0;
    6074    border: 1px solid hsla(0, 0%, 25%, 0.4);
     75    pointer-events: none;
    6176}
    6277
    63 .color-swatch:hover > span {
     78.inline-swatch:hover > span {
    6479    border-color: hsla(0, 0%, 25%, 0.8);
    6580}
    6681
    67 .color-swatch:active > span {
     82.inline-swatch:active > span {
    6883    border-color: hsl(0, 0%, 25%);
    6984}
    7085
     86.inline-swatch.bezier > span {
     87    display: none;
     88}
     89

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

    r194976 r194977  
    2525 */
    2626
    27 WebInspector.ColorSwatch = class ColorSwatch extends WebInspector.Object
     27WebInspector.InlineSwatch = class InlineSwatch extends WebInspector.Object
    2828{
    29     constructor(color, readOnly)
     29    constructor(type, value, readOnly)
    3030    {
    3131        super();
    3232
     33        this._type = type;
     34
    3335        this._swatchElement = document.createElement("span");
    34         this._swatchElement.classList.add("color-swatch");
    35         this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
     36        this._swatchElement.classList.add("inline-swatch", this._type.split("-").lastValue);
     37
     38        switch (this._type) {
     39        case WebInspector.InlineSwatch.Type.Bezier:
     40            this._swatchElement.title = WebInspector.UIString("Click to open a cubic-bezier editor.");
     41            break;
     42        case WebInspector.InlineSwatch.Type.Gradient:
     43            this._swatchElement.title = WebInspector.UIString("Click to select a gradient.");
     44            break;
     45        default:
     46            console.assert(this._type === WebInspector.InlineSwatch.Type.Color);
     47            this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
     48            break;
     49        }
     50
    3651        if (!readOnly) {
    37             this._swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
    38             this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
    39         }
    40 
    41         this._swatchInnerElement = document.createElement("span");
    42         this._swatchElement.appendChild(this._swatchInnerElement);
    43 
    44         this._color = color || WebInspector.Color.fromString("transparent");
     52            this._swatchElement.addEventListener("click", this._swatchElementClicked.bind(this));
     53            if (this._type === WebInspector.InlineSwatch.Type.Color)
     54                this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
     55        }
     56
     57        this._swatchInnerElement = this._swatchElement.createChild("span");
     58
     59        this._value = value || this._fallbackValue();
    4560
    4661        this._updateSwatch();
    … …  
    5469    }
    5570
    56     set color(color)
    57     {
    58         this._color = color || WebInspector.Color.fromString("transparent");
     71    get value()
     72    {
     73        return this._value;
     74    }
     75
     76    set value(value)
     77    {
     78        this._value = value;
    5979        this._updateSwatch(true);
    6080    }
    6181
    62     get color()
    63     {
    64         return this._color;
    65     }
    66 
    6782    // Private
    6883
    69     _colorSwatchClicked(event)
    70     {
    71         if (event.shiftKey) {
    72             let nextFormat = this._color.nextFormat();
     84    _fallbackValue()
     85    {
     86        switch (this._type) {
     87        case WebInspector.InlineSwatch.Type.Bezier:
     88            return WebInspector.CubicBezier.fromString("linear");
     89        case WebInspector.InlineSwatch.Type.Gradient:
     90            return WebInspector.Gradient.fromString("linear-gradient(transparent, transparent)");
     91        case WebInspector.InlineSwatch.Type.Color:
     92            return WebInspector.Color.fromString("transparent");
     93        default:
     94            return null;
     95        }
     96    }
     97
     98    _updateSwatch(dontFireEvents)
     99    {
     100        if (this._type === WebInspector.InlineSwatch.Type.Color || this._type === WebInspector.InlineSwatch.Type.Gradient)
     101            this._swatchInnerElement.style.background = this._value ? this._value.toString() : null;
     102
     103        if (!dontFireEvents)
     104            this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.ValueChanged, {value: this._value});
     105    }
     106
     107    _swatchElementClicked(event)
     108    {
     109        if (this._type === WebInspector.InlineSwatch.Type.Color && event.shiftKey && this._value) {
     110            let nextFormat = this._value.nextFormat();
    73111            console.assert(nextFormat);
    74112            if (!nextFormat)
    75113                return;
    76114
    77             this._color.format = nextFormat;
     115            this._value.format = nextFormat;
    78116            this._updateSwatch();
    79117            return;
    … …  
    81119
    82120        let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
    83 
    84         let colorPicker = new WebInspector.ColorPicker;
    85         colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorDidChange, this);
    86 
    87121        let popover = new WebInspector.Popover(this);
    88         popover.content = colorPicker.element;
     122
     123        let valueEditor = null;
     124        if (this._type === WebInspector.InlineSwatch.Type.Bezier) {
     125            valueEditor = new WebInspector.BezierEditor;
     126            valueEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueEditorValueDidChange, this);
     127        } else if (this._type === WebInspector.InlineSwatch.Type.Gradient) {
     128            valueEditor = new WebInspector.GradientEditor;
     129            valueEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
     130            valueEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, (event) => popover.update());
     131        } else {
     132            valueEditor = new WebInspector.ColorPicker;
     133            valueEditor.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
     134        }
     135
     136        popover.content = valueEditor.element;
    89137        popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
    90138
    91         colorPicker.color = this._color;
    92     }
    93 
    94     _colorPickerColorDidChange(event)
    95     {
    96         this._color = event.data.color;
     139        let value = this._value || this._fallbackValue();
     140        if (this._type === WebInspector.InlineSwatch.Type.Bezier)
     141            valueEditor.bezier = value;
     142        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
     143            valueEditor.gradient = value;
     144        else
     145            valueEditor.color = value;
     146    }
     147
     148    _valueEditorValueDidChange(event)
     149    {
     150        if (this._type === WebInspector.InlineSwatch.Type.Bezier)
     151            this._value = event.data.bezier;
     152        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
     153            this._value = event.data.gradient;
     154        else
     155            this._value = event.data.color;
     156
    97157        this._updateSwatch();
    98158    }
    … …  
    102162        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
    103163
    104         if (this._color.isKeyword() && this._color.format !== WebInspector.Color.Format.Keyword) {
     164        if (this._value.isKeyword() && this._value.format !== WebInspector.Color.Format.Keyword) {
    105165            contextMenu.appendItem(WebInspector.UIString("Format: Keyword"), () => {
    106                 this._color.format = WebInspector.Color.Format.Keyword;
     166                this._value.format = WebInspector.Color.Format.Keyword;
    107167                this._updateSwatch();
    108168            });
    … …  
    112172        if (hexInfo) {
    113173            contextMenu.appendItem(hexInfo.title, () => {
    114                 this._color.format = hexInfo.format;
    115                 this._updateSwatch();
    116             });
    117         }
    118 
    119         if (this._color.simple && this._color.format !== WebInspector.Color.Format.HSL) {
     174                this._value.format = hexInfo.format;
     175                this._updateSwatch();
     176            });
     177        }
     178
     179        if (this._value.simple && this._value.format !== WebInspector.Color.Format.HSL) {
    120180            contextMenu.appendItem(WebInspector.UIString("Format: HSL"), () => {
    121                 this._color.format = WebInspector.Color.Format.HSL;
    122                 this._updateSwatch();
    123             });
    124         } else if (this._color.format !== WebInspector.Color.Format.HSLA) {
     181                this._value.format = WebInspector.Color.Format.HSL;
     182                this._updateSwatch();
     183            });
     184        } else if (this._value.format !== WebInspector.Color.Format.HSLA) {
    125185            contextMenu.appendItem(WebInspector.UIString("Format: HSLA"), () => {
    126                 this._color.format = WebInspector.Color.Format.HSLA;
    127                 this._updateSwatch();
    128             });
    129         }
    130 
    131         if (this._color.simple && this._color.format !== WebInspector.Color.Format.RGB) {
     186                this._value.format = WebInspector.Color.Format.HSLA;
     187                this._updateSwatch();
     188            });
     189        }
     190
     191        if (this._value.simple && this._value.format !== WebInspector.Color.Format.RGB) {
    132192            contextMenu.appendItem(WebInspector.UIString("Format: RGB"), () => {
    133                 this._color.format = WebInspector.Color.Format.RGB;
    134                 this._updateSwatch();
    135             });
    136         } else if (this._color.format !== WebInspector.Color.Format.RGBA) {
     193                this._value.format = WebInspector.Color.Format.RGB;
     194                this._updateSwatch();
     195            });
     196        } else if (this._value.format !== WebInspector.Color.Format.RGBA) {
    137197            contextMenu.appendItem(WebInspector.UIString("Format: RGBA"), () => {
    138                 this._color.format = WebInspector.Color.Format.RGBA;
     198                this._value.format = WebInspector.Color.Format.RGBA;
    139199                this._updateSwatch();
    140200            });
    … …  
    144204    _getNextValidHEXFormat()
    145205    {
     206        if (this._type !== WebInspector.InlineSwatch.Type.Color)
     207            return false;
     208
    146209        function hexMatchesCurrentColor(hexInfo) {
    147210            let nextIsSimple = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.HEX;
    148             if (nextIsSimple && !this._color.simple)
     211            if (nextIsSimple && !this._value.simple)
    149212                return false;
    150213
    151214            let nextIsShort = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.ShortHEXAlpha;
    152             if (nextIsShort && !this._color.canBeSerializedAsShortHEX())
     215            if (nextIsShort && !this._value.canBeSerializedAsShortHEX())
    153216                return false;
    154217
    … …  
    177240        // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
    178241        let currentColorIsHEX = hexFormats.some(function(info) {
    179             return info.format === this._color.format;
     242            return info.format === this._value.format;
    180243        }.bind(this));
    181244
    182245        for (let i = 0; i < hexFormats.length; ++i) {
    183             if (currentColorIsHEX && this._color.format !== hexFormats[i].format)
     246            if (currentColorIsHEX && this._value.format !== hexFormats[i].format)
    184247                continue;
    185248
    … …  
    193256        return hexFormats[0];
    194257    }
    195 
    196     _updateSwatch(dontFireEvents)
    197     {
    198         this._swatchInnerElement.style.backgroundColor = this._color.toString() || null;
    199         if (!dontFireEvents)
    200             this.dispatchEventToListeners(WebInspector.ColorSwatch.Event.ColorChanged, {color: this._color});
    201     }
    202258};
    203259
    204 WebInspector.ColorSwatch.Event = {
    205     ColorChanged: "color-swatch-color-changed"
     260WebInspector.InlineSwatch.Type = {
     261    Color: "inline-swatch-type-color",
     262    Gradient: "inline-swatch-type-gradient",
     263    Bezier: "inline-swatch-type-bezier"
    206264};
     265
     266WebInspector.InlineSwatch.Event = {
     267    ValueChanged: "inline-swatch-value-changed"
     268};

  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css

    r192705 r194977  
    2828}
    2929
    30 .visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch {
    31     display: none;
    32     position: relative;
     30.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient {
    3331    width: 38px;
    3432    height: 18px;
    35     margin-top: 1px;
    36     /* Make a checkered background for transparent colors to show against. */
    37     background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
    38                       linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
    39     background-color: white;
    40     background-size: 50%;
    41     background-position: top left, bottom right;
    42     background-repeat: no-repeat;
     33    margin: 1px 0 0;
    4334    border: 1px solid hsla(0, 0%, 25%, 0.4);
    4435    border-radius: 4px;
    45     overflow: hidden;
    46     cursor: default;
    4736}
    4837
    49 .visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:hover {
     38.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient {
     39    display: none;
     40}
     41
     42.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover {
    5043    border-color: hsla(0, 0%, 25%, 0.8);
    5144}
    5245
    53 .visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:active {
     46.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active {
    5447    border-color: hsl(0, 0%, 25%);
    5548}
    5649
    57 .visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch > span {
    58     position: absolute;
    59     top: 0;
    60     right: 0;
    61     bottom: 0;
    62     left: 0;
     50.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span {
     51    border: none;
    6352}
    6453
    65 .visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch {
    66     display: block;
    67 }
    68 
    69 .visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch + .value-input {
     54.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input {
    7055    margin-left: -3px;
    7156    padding-left: 5px;

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

    r194901 r194977  
    3030        super(propertyNames, text, possibleValues, null, "background-picker", layoutReversed);
    3131
    32         this._gradientSwatchElement = document.createElement("span");
    33         this._gradientSwatchElement.classList.add("color-gradient-swatch");
    34         this._gradientSwatchElement.title = WebInspector.UIString("Click to select a gradient");
    35         this._gradientSwatchElement.addEventListener("click", this._gradientSwatchClicked.bind(this));
    36 
    37         let gradientSwatchInnerElement = document.createElement("span");
    38         this._gradientSwatchElement.appendChild(gradientSwatchInnerElement);
    39 
    40         this.contentElement.appendChild(this._gradientSwatchElement);
     32        this._gradientSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient);
     33        this._gradientSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._gradientSwatchColorChanged, this);
     34        this.contentElement.appendChild(this._gradientSwatch.element);
    4135
    4236        this._valueInputElement = document.createElement("input");
    … …  
    8781
    8882        this._currentType = "url";
    89         this._gradient = null;
    90 
    91         this._updateGradientSwatch();
    9283    }
    9384
    … …  
    115106            return;
    116107
    117         this._gradient = WebInspector.Gradient.fromString(value);
    118         if (!this._gradient)
    119             return;
    120 
    121         this._updateGradientSwatch();
     108        this._updateGradient();
    122109    }
    123110
    … …  
    160147    }
    161148
    162     _updateGradientSwatch()
    163     {
    164         this._gradientSwatchElement.firstChild.style.background = "";
     149    _updateGradient()
     150    {
    165151        const value = this.synthesizedValue;
    166152        if (!value || value === this._currentType)
    167153            return;
    168154
    169         this._gradient = WebInspector.Gradient.fromString(value);
    170         this._gradientSwatchElement.firstChild.style.background = this._gradient ? value : null;
    171     }
    172 
    173     _gradientSwatchClicked(event)
    174     {
    175         let bounds = WebInspector.Rect.rectFromClientRect(this._gradientSwatchElement.getBoundingClientRect());
    176         let popover = new WebInspector.Popover(this);
    177 
    178         function handleColorPickerToggled(event)
    179         {
    180             popover.update();
    181         }
    182 
    183         let gradientEditor = new WebInspector.GradientEditor;
    184         gradientEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._gradientEditorGradientChanged, this);
    185         gradientEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, handleColorPickerToggled, this);
    186 
    187         popover.content = gradientEditor.element;
    188         popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
    189 
    190         if (!this._gradient)
    191             this._gradient = WebInspector.Gradient.fromString(`${this._currentType}(transparent, transparent)`);
    192 
    193         gradientEditor.gradient = this._gradient;
    194     }
    195 
    196     _gradientEditorGradientChanged(event)
    197     {
    198         this.value = event.data.gradient.toString();
     155        this._gradientSwatch.value = WebInspector.Gradient.fromString(value);
     156    }
     157
     158    _gradientSwatchColorChanged(event)
     159    {
     160        this.value = event.data.value.toString();
    199161        this._valueDidChange();
    200162    }
    … …  
    202164    _valueInputValueChanged(event)
    203165    {
    204         this._updateGradientSwatch();
     166        this._updateGradient();
    205167        this._valueDidChange();
    206168    }
    … …  
    218180        this._currentType = this._valueTypePickerElement.value;
    219181        this._updateValueInput();
    220         this._updateGradientSwatch();
     182        this._updateGradient();
    221183        this._valueDidChange();
    222184    }

  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css

    r194568 r194977  
    3232}
    3333
    34 .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch {
     34.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color {
    3535    width: 22px;
    3636    height: 18px;
    … …  
    4141}
    4242
    43 .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover {
     43.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover {
    4444    border-color: hsla(0, 0%, 25%, 0.8);
    4545}
    4646
    47 .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active {
     47.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active {
    4848    border-color: hsl(0, 0%, 25%);
    4949}
    5050
    51 .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span {
     51.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span {
    5252    border: none;
    5353}

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

    r194568 r194977  
    3030        super(propertyNames, text, null, null, "input-color-picker", layoutReversed);
    3131
    32         this._colorSwatch = new WebInspector.ColorSwatch;
    33         this._colorSwatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
     32        this._colorSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color);
     33        this._colorSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._colorSwatchColorChanged, this);
    3434        this.contentElement.appendChild(this._colorSwatch.element);
    3535
    … …  
    100100    _colorSwatchColorChanged(event)
    101101    {
    102         let colorString = event && event.data && event.data.color && event.data.color.toString();
     102        let colorString = event && event.data && event.data.value && event.data.value.toString();
    103103        if (!colorString)
    104104            return;
    … …  
    111111    {
    112112        let value = this._textInputElement.value;
    113         this._colorSwatch.color = WebInspector.Color.fromString(value || "transparent");
     113        this._colorSwatch.value = WebInspector.Color.fromString(value);
    114114    }
    115115

  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css

    r188629 r194977  
    3232}
    3333
    34 .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
     34.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
    3535    width: 23px;
    3636    height: 20px;
    37     margin-right: 2px;
    38     content: url(../Images/CubicBezier.svg);
    39     cursor: default;
     37}
     38
     39.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier {
     40    display: none;
    4041}
    4142
    4243@media (-webkit-min-device-pixel-ratio: 2) {
    43     .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
     44    .visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
    4445        margin-left: 0.5px;
    4546    }
    4647}
    47 
    48 .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover {
    49     filter: brightness(0.9);
    50 }
    51 
    52 .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active {
    53     filter: brightness(0.8);
    54 }

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

    r188479 r194977  
    3737        this._keywordSelectElement.appendChild(this._customValueOptionElement);
    3838
    39         this._bezierMarkerElement = document.createElement("span");
    40         this._bezierMarkerElement.title = WebInspector.UIString("Click to open a cubic-bezier editor");
    41         this._bezierMarkerElement.classList.add("bezier-editor");
    42         this._bezierMarkerElement.hidden = true;
    43         this._bezierMarkerElement.addEventListener("click", this._bezierMarkerClicked.bind(this));
    44         this.contentElement.appendChild(this._bezierMarkerElement);
    45 
    46         this._bezierEditor = new WebInspector.BezierEditor;
    47         this._bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueDidChange.bind(this));
    48         this._bezierEditor.bezier = WebInspector.CubicBezier.fromString("linear");
     39        this._bezierSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier);
     40        this._bezierSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._bezierSwatchValueChanged, this);
     41        this.contentElement.appendChild(this._bezierSwatch.element);
    4942    }
    5043
    … …  
    5851    get bezierValue()
    5952    {
    60         let bezier = this._bezierEditor.bezier;
     53        let bezier = this._bezierSwatch.value;
    6154        if (!bezier)
    6255            return null;
    … …  
    6861    {
    6962        let bezier = WebInspector.CubicBezier.fromString(text);
    70         this._bezierEditor.bezier = bezier;
     63        this._bezierSwatch.value = bezier;
    7164    }
    7265
    … …  
    8376        if (this.valueIsSupportedKeyword(value)) {
    8477            super._setValue(value);
    85             this._bezierMarkerElement.hidden = true;
     78            this.contentElement.classList.remove("bezier-value");
    8679            return;
    8780        }
    … …  
    8982        let bezier = this.bezierValue;
    9083        this._customValueOptionElement.selected = !!bezier;
    91         this._bezierMarkerElement.hidden = !bezier;
     84        this.contentElement.classList.toggle("bezier-value", !!bezier);
    9285        this.specialPropertyPlaceholderElement.hidden = !!bezier;
    9386        if (!bezier)
    … …  
    10093    }
    10194
    102     _bezierMarkerClicked()
    103     {
    104         let bounds = WebInspector.Rect.rectFromClientRect(this._bezierMarkerElement.getBoundingClientRect());
    105         this._cubicBezierEditorPopover = new WebInspector.Popover(this);
    106         this._cubicBezierEditorPopover.content = this._bezierEditor.element;
    107         this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
    108     }
    109 
    11095    _handleKeywordChanged()
    11196    {
    11297        super._handleKeywordChanged();
    11398        let customOptionSelected = this._customValueOptionElement.selected;
    114         this._bezierMarkerElement.hidden = !customOptionSelected;
     99        this.contentElement.classList.toggle("bezier-value", !!customOptionSelected);
    115100        this.specialPropertyPlaceholderElement.hidden = !!customOptionSelected;
    116101        if (customOptionSelected)
    117102            this.bezierValue = "linear";
    118103    }
     104
     105    _bezierSwatchValueChanged(event)
     106    {
     107        this._valueDidChange();
     108    }
    119109};
Note: See TracChangeset for help on using the changeset viewer.