In order to alleviate the complexity of the CSS gradients syntax and make it more visually efficient to edit them, we should offer rich editing of gradients within Web Inspector, for instance in the form of a popover allowing to edit the gradient type, direction and stops.
<rdar://problem/14712396>
I think that to do this right, we'll need backend support to do the parsing of the CSS value, which we should be able to do via CSSParser::parseGeneratedImage() and checking if the passed value is of type CSSGradientValue.
(In reply to comment #2) > I think that to do this right, we'll need backend support to do the parsing of the CSS value, which we should be able to do via CSSParser::parseGeneratedImage() and checking if the passed value is of type CSSGradientValue. Note that CSSParser::parse*Gradient take CSSParserValueLists rather than strings so you'll have to treat this like a new stylesheet. And the output is designed to go onto a RenderStyle.
Another option is to do the parsing in JS, there is existing work in that area, for instance Daniel Glazman's JSCSSP has support for parsing gradients: http://sources.disruptive-innovations.com/jscssp/trunk/src/parser/gradients.js.
I think having our WebKit parser sense. But at the same time, if you use a newer Web Inspector with an older device you will be locked into the old syntax. Having a JS parser lets the Inspector handle new syntaxes that the device might not support but are new and valid.
I bungled that last message. "I think having our WebKit parser makes some sense." "Having a JS CSS parser lets…"
Work on this feature is being done on my own WebKit fork at https://github.com/graouts/webkit/tree/gradients. It's mostly done, save for integration in the CSSStylesDeclarationTextEditor.
The blocking bugs are: https://bugs.webkit.org/show_bug.cgi?id=129088 https://bugs.webkit.org/show_bug.cgi?id=129089 https://bugs.webkit.org/show_bug.cgi?id=129094 The good news is that they all have patches out for review, and the patch for this bug is ready to be sent out as soon as the blocking bugs have landed.
Some followup tasks: http://webkit.org/b/129095 http://webkit.org/b/129096
Created attachment 224777 [details] Patch
Comment on attachment 224777 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=224777&action=review > Source/WebInspectorUI/UserInterface/CodeMirrorGradientEditingController.js:177 > + var matches = this._angleInput.value.match(/º/g); Should unicode escape the symbol. > Source/WebInspectorUI/UserInterface/CodeMirrorGradientEditingController.js:180 > + this._angleInput.value = angle + "º"; Ditto. > Source/WebInspectorUI/UserInterface/CodeMirrorGradientEditingController.js:192 > + this._angleInput.value = "180º"; Ditto. > Source/WebInspectorUI/UserInterface/GradientSlider.css:103 > + border: 1px solid rgba(0,0,0,0.25); Spaces after the commas. > Source/WebInspectorUI/UserInterface/GradientSlider.js:357 > + if (selected) > + this._element.classList.add(WebInspector.GradientSliderKnob.SelectedClassName); > + else > + this._element.classList.remove(WebInspector.GradientSliderKnob.SelectedClassName); This can be one line: this._element.classList.toggle(WebInspector.GradientSliderKnob.SelectedClassName, selected); > Source/WebInspectorUI/UserInterface/Images/Checkers.svg:2 > +<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="rgb(204, 204, 204)"><rect width="3" height="3" /><rect x="3" y="3" width="3" height="3"/></svg> > \ No newline at end of file This should get the license header comment and have newlines.
Landed r164446 addressing Tim's feedback: <http://trac.webkit.org/changeset/164446>