Commit 514c5cf4 authored by joepeck@webkit.org's avatar joepeck@webkit.org
Browse files

2010-08-20 Joseph Pecoraro <joepeck@webkit.org>

        Reviewed by Pavel Feldman.

        Web Inspector: Backend Should Provide Full Supported CSS Properties List
        https://bugs.webkit.org/show_bug.cgi?id=40886

        This allows the backend to send the front-end its complete list of
        supported CSS Properties. This is used in CSS Autocompletion and
        CSS Syntax Highlighting to show which styles are supported.

        * css/makeprop.pl: moved CSS properties to the header file.
        * inspector/Inspector.idl: expose getSupportedCSSProperties.
        * inspector/InspectorDOMAgent.cpp:
        (WebCore::InspectorDOMAgent::getSupportedCSSProperties):
        * inspector/InspectorDOMAgent.h:
        * inspector/front-end/CSSCompletions.js:
        (WebInspector.CSSCompletions._firstIndexOfPrefix): handle a possible error case before properties have loaded.
        (WebInspector.CSSCompletions._load): fill up the special array with the received properties.
        * inspector/front-end/SourceCSSTokenizer.js:
        (WebInspector.SourceCSSTokenizer): use the list of support properties from the backend.
        * inspector/front-end/SourceCSSTokenizer.re2js:
        * inspector/front-end/inspector.js: request the list of supported CSS properties on load.
        (WebInspector.doLoadedDone):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@65942 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 34ff1f7c
2010-08-20 Joseph Pecoraro <joepeck@webkit.org>
Reviewed by Pavel Feldman.
Web Inspector: Backend Should Provide Full Supported CSS Properties List
https://bugs.webkit.org/show_bug.cgi?id=40886
This allows the backend to send the front-end its complete list of
supported CSS Properties. This is used in CSS Autocompletion and
CSS Syntax Highlighting to show which styles are supported.
* css/makeprop.pl: moved CSS properties to the header file.
* inspector/Inspector.idl: expose getSupportedCSSProperties.
* inspector/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::getSupportedCSSProperties):
* inspector/InspectorDOMAgent.h:
* inspector/front-end/CSSCompletions.js:
(WebInspector.CSSCompletions._firstIndexOfPrefix): handle a possible error case before properties have loaded.
(WebInspector.CSSCompletions._load): fill up the special array with the received properties.
* inspector/front-end/SourceCSSTokenizer.js:
(WebInspector.SourceCSSTokenizer): use the list of support properties from the backend.
* inspector/front-end/SourceCSSTokenizer.re2js:
* inspector/front-end/inspector.js: request the list of supported CSS properties on load.
(WebInspector.doLoadedDone):
2010-08-24 Adam Barth <abarth@webkit.org>
 
Reviewed by Eric Seidel.
......@@ -95,6 +95,12 @@ print HEADER "const int firstCSSProperty = $first;\n";
print HEADER "const int numCSSProperties = $num;\n";
print HEADER "const size_t maxCSSPropertyNameLength = $maxLen;\n";
print HEADER "const char* const propertyNameStrings[$num] = {\n";
foreach my $name (@names) {
print HEADER "\"$name\",\n";
}
print HEADER "};\n";
print HEADER << "EOF";
const char* getPropertyName(CSSPropertyID);
......@@ -108,14 +114,8 @@ close HEADER;
system("gperf --key-positions=\"*\" -D -n -s 2 CSSPropertyNames.gperf > CSSPropertyNames.cpp") == 0 || die "calling gperf failed: $?";
open C, ">>CSSPropertyNames.cpp" || die "Could not open CSSPropertyNames.cpp for writing";
print C "static const char * const propertyNameStrings[$num] = {\n";
foreach my $name (@names) {
print C "\"$name\",\n";
}
print C << "EOF";
};
const char* getPropertyName(CSSPropertyID id)
{
if (id < firstCSSProperty)
......
......@@ -196,6 +196,7 @@ module core {
[handler=DOM] void toggleStyleEnabled(in long callId, in long styleId, in String propertyName, in boolean disabled, out Value style);
[handler=DOM] void setRuleSelector(in long callId, in long ruleId, in String selector, in long selectedNodeId, out Value rule, out boolean selectorAffectsNode);
[handler=DOM] void addRule(in long callId, in String selector, in long selectedNodeId, out Value rule, out boolean selectorAffectsNode);
[handler=DOM] void getSupportedCSSProperties(in long callId, out Array cssProperties);
[handler=Controller] void getCookies(in long callId, out Array cookies, out String cookiesString);
[handler=Controller] void deleteCookie(in String cookieName, in String domain);
......
......@@ -35,6 +35,7 @@
#include "CSSComputedStyleDeclaration.h"
#include "CSSMutableStyleDeclaration.h"
#include "CSSPropertyNames.h"
#include "CSSRule.h"
#include "CSSRuleList.h"
#include "CSSStyleRule.h"
......@@ -1409,6 +1410,14 @@ void InspectorDOMAgent::addRule(const String& selector, long selectedNodeId, Ref
*ruleObject = buildObjectForRule(node->ownerDocument(), newRule);
}
void InspectorDOMAgent::getSupportedCSSProperties(RefPtr<InspectorArray>* cssProperties)
{
RefPtr<InspectorArray> properties = InspectorArray::create();
for (int i = 0; i < numCSSProperties; ++i)
properties->pushString(propertyNameStrings[i]);
*cssProperties = properties.release();
}
PassRefPtr<InspectorObject> InspectorDOMAgent::buildObjectForStyle(CSSStyleDeclaration* style, bool bind)
{
RefPtr<InspectorObject> result = InspectorObject::create();
......
......@@ -128,6 +128,7 @@ namespace WebCore {
void toggleStyleEnabled(long styleId, const String& propertyName, bool disabled, RefPtr<InspectorValue>* styleObject);
void setRuleSelector(long ruleId, const String& selector, long selectedNodeId, RefPtr<InspectorValue>* ruleObject, bool* selectorAffectsNode);
void addRule(const String& selector, long selectedNodeId, RefPtr<InspectorValue>* ruleObject, bool* selectorAffectsNode);
void getSupportedCSSProperties(RefPtr<InspectorArray>* cssProperties);
// Methods called from the InspectorController.
void setDocument(Document* document);
......
WebInspector.CSSCompletions = (function() {
var used = {};
var properties = [];
var style = document.documentElement.style;
var list = document.defaultView.getComputedStyle(document.documentElement, "");
var length = list.length;
for (var i = 0; i < length; ++i)
used[properties[i] = list[i]] = true;
for (var i = 0, end = length; i < length; ++i) {
var propertyWords = properties[i].split("-");
var j = propertyWords.length;
while (--j) {
propertyWords.pop();
var shorthand = propertyWords.join("-");
if (!(shorthand in used) && style[shorthand] !== undefined) {
used[shorthand] = true;
properties[end++] = shorthand;
}
}
}
return properties.sort();
})();
WebInspector.CSSCompletions = [];
WebInspector.CSSCompletions.startsWith = function(prefix)
{
......@@ -45,6 +22,8 @@ WebInspector.CSSCompletions._firstIndexOfPrefix = function(prefix)
{
if (!prefix)
return -1;
if (!this.length)
return -1;
var maxIndex = this.length - 1;
var minIndex = 0;
......@@ -100,3 +79,10 @@ WebInspector.CSSCompletions._closest = function(str, prefix, shift)
j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
return propertiesWithPrefix[j];
}
WebInspector.CSSCompletions._load = function(properties)
{
for (var i = 0; i < properties.length; ++i)
WebInspector.CSSCompletions.push(properties[i]);
WebInspector.CSSCompletions.sort();
}
......@@ -45,60 +45,8 @@ WebInspector.SourceCSSTokenizer = function()
{
WebInspector.SourceTokenizer.call(this);
this._propertyKeywords = [
"background", "background-attachment", "background-clip", "background-color", "background-image",
"background-origin", "background-position", "background-position-x", "background-position-y",
"background-repeat", "background-repeat-x", "background-repeat-y", "background-size", "border",
"border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius",
"border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-left",
"border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right",
"border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style",
"border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style",
"border-top-width", "border-width", "bottom", "caption-side", "clear", "clip", "color", "content",
"counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "float",
"font", "font-family", "font-size", "font-stretch", "font-style", "font-variant", "font-weight",
"height", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position",
"list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height",
"max-width", "min-height", "min-width", "opacity", "orphans", "outline", "outline-color", "outline-offset",
"outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom",
"padding-left", "padding-right", "padding-top", "page", "page-break-after", "page-break-before",
"page-break-inside", "pointer-events", "position", "quotes", "resize", "right", "size", "src",
"table-layout", "text-align", "text-decoration", "text-indent", "text-line-through", "text-line-through-color",
"text-line-through-mode", "text-line-through-style", "text-line-through-width", "text-overflow", "text-overline",
"text-overline-color", "text-overline-mode", "text-overline-style", "text-overline-width", "text-rendering",
"text-shadow", "text-transform", "text-underline", "text-underline-color", "text-underline-mode",
"text-underline-style", "text-underline-width", "top", "unicode-bidi", "unicode-range", "vertical-align",
"visibility", "white-space", "widows", "width", "word-break", "word-spacing", "word-wrap", "z-index", "zoom",
"-webkit-animation", "-webkit-animation-delay", "-webkit-animation-direction", "-webkit-animation-duration",
"-webkit-animation-iteration-count", "-webkit-animation-name", "-webkit-animation-play-state",
"-webkit-animation-timing-function", "-webkit-appearance", "-webkit-backface-visibility",
"-webkit-background-clip", "-webkit-background-composite", "-webkit-background-origin", "-webkit-background-size",
"-webkit-binding", "-webkit-border-end", "-webkit-border-end-color", "-webkit-border-end-style", "-webkit-border-end-width",
"-webkit-border-fit", "-webkit-border-horizontal-spacing", "-webkit-border-image",
"-webkit-border-radius", "-webkit-border-start", "-webkit-border-start-color", "-webkit-border-start-style",
"-webkit-border-start-width","-webkit-border-vertical-spacing", "-webkit-box-align", "-webkit-box-direction",
"-webkit-box-flex", "-webkit-box-flex-group", "-webkit-box-lines", "-webkit-box-ordinal-group",
"-webkit-box-orient", "-webkit-box-pack", "-webkit-box-reflect", "-webkit-box-shadow", "-webkit-box-sizing",
"-webkit-column-break-after", "-webkit-column-break-before", "-webkit-column-break-inside", "-webkit-column-count",
"-webkit-column-gap", "-webkit-column-rule", "-webkit-column-rule-color", "-webkit-column-rule-style",
"-webkit-column-rule-width", "-webkit-column-width", "-webkit-columns", "-webkit-font-size-delta",
"-webkit-font-smoothing", "-webkit-highlight", "-webkit-line-break", "-webkit-line-clamp",
"-webkit-margin-bottom-collapse", "-webkit-margin-collapse", "-webkit-margin-end", "-webkit-margin-start", "-webkit-margin-top-collapse",
"-webkit-marquee", "-webkit-marquee-direction", "-webkit-marquee-increment", "-webkit-marquee-repetition",
"-webkit-marquee-speed", "-webkit-marquee-style", "-webkit-mask", "-webkit-mask-attachment",
"-webkit-mask-box-image", "-webkit-mask-clip", "-webkit-mask-composite", "-webkit-mask-image",
"-webkit-mask-origin", "-webkit-mask-position", "-webkit-mask-position-x", "-webkit-mask-position-y",
"-webkit-mask-repeat", "-webkit-mask-repeat-x", "-webkit-mask-repeat-y", "-webkit-mask-size",
"-webkit-match-nearest-mail-blockquote-color", "-webkit-nbsp-mode", "-webkit-padding-end", "-webkit-padding-start",
"-webkit-perspective", "-webkit-perspective-origin", "-webkit-perspective-origin-x", "-webkit-perspective-origin-y",
"-webkit-rtl-ordering", "-webkit-text-decorations-in-effect", "-webkit-text-fill-color", "-webkit-text-security",
"-webkit-text-size-adjust", "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width",
"-webkit-transform", "-webkit-transform-origin", "-webkit-transform-origin-x", "-webkit-transform-origin-y",
"-webkit-transform-origin-z", "-webkit-transform-style", "-webkit-transition", "-webkit-transition-delay",
"-webkit-transition-duration", "-webkit-transition-property", "-webkit-transition-timing-function",
"-webkit-user-drag", "-webkit-user-modify", "-webkit-user-select", "-webkit-variable-declaration-block"
].keySet();
this._propertyKeywords = WebInspector.CSSCompletions.keySet();
this._valueKeywords = [
"above", "absolute", "activeborder", "activecaption", "afar", "after-white-space", "ahead", "alias", "all", "all-scroll",
"alternate", "always","amharic", "amharic-abegede", "antialiased", "appworkspace", "aqua", "arabic-indic", "armenian",
......
......@@ -44,58 +44,8 @@ WebInspector.SourceCSSTokenizer = function()
{
WebInspector.SourceTokenizer.call(this);
this._propertyKeywords = [
"background", "background-attachment", "background-clip", "background-color", "background-image",
"background-origin", "background-position", "background-position-x", "background-position-y",
"background-repeat", "background-repeat-x", "background-repeat-y", "background-size", "border",
"border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius",
"border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-left",
"border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right",
"border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style",
"border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style",
"border-top-width", "border-width", "bottom", "caption-side", "clear", "clip", "color", "content",
"counter-increment", "counter-reset", "cursor", "direction", "display", "empty-cells", "float",
"font", "font-family", "font-size", "font-stretch", "font-style", "font-variant", "font-weight",
"height", "left", "letter-spacing", "line-height", "list-style", "list-style-image", "list-style-position",
"list-style-type", "margin", "margin-bottom", "margin-left", "margin-right", "margin-top", "max-height",
"max-width", "min-height", "min-width", "opacity", "orphans", "outline", "outline-color", "outline-offset",
"outline-style", "outline-width", "overflow", "overflow-x", "overflow-y", "padding", "padding-bottom",
"padding-left", "padding-right", "padding-top", "page", "page-break-after", "page-break-before",
"page-break-inside", "pointer-events", "position", "quotes", "resize", "right", "size", "src",
"table-layout", "text-align", "text-decoration", "text-indent", "text-line-through", "text-line-through-color",
"text-line-through-mode", "text-line-through-style", "text-line-through-width", "text-overflow", "text-overline",
"text-overline-color", "text-overline-mode", "text-overline-style", "text-overline-width", "text-rendering",
"text-shadow", "text-transform", "text-underline", "text-underline-color", "text-underline-mode",
"text-underline-style", "text-underline-width", "top", "unicode-bidi", "unicode-range", "vertical-align",
"visibility", "white-space", "widows", "width", "word-break", "word-spacing", "word-wrap", "z-index", "zoom",
"-webkit-animation", "-webkit-animation-delay", "-webkit-animation-direction", "-webkit-animation-duration",
"-webkit-animation-iteration-count", "-webkit-animation-name", "-webkit-animation-play-state",
"-webkit-animation-timing-function", "-webkit-appearance", "-webkit-backface-visibility",
"-webkit-background-clip", "-webkit-background-composite", "-webkit-background-origin", "-webkit-background-size",
"-webkit-binding", "-webkit-border-fit", "-webkit-border-horizontal-spacing", "-webkit-border-image",
"-webkit-border-radius", "-webkit-border-vertical-spacing", "-webkit-box-align", "-webkit-box-direction",
"-webkit-box-flex", "-webkit-box-flex-group", "-webkit-box-lines", "-webkit-box-ordinal-group",
"-webkit-box-orient", "-webkit-box-pack", "-webkit-box-reflect", "-webkit-box-shadow", "-webkit-box-sizing",
"-webkit-column-break-after", "-webkit-column-break-before", "-webkit-column-break-inside", "-webkit-column-count",
"-webkit-column-gap", "-webkit-column-rule", "-webkit-column-rule-color", "-webkit-column-rule-style",
"-webkit-column-rule-width", "-webkit-column-width", "-webkit-columns", "-webkit-font-size-delta",
"-webkit-font-smoothing", "-webkit-highlight", "-webkit-line-break", "-webkit-line-clamp",
"-webkit-margin-bottom-collapse", "-webkit-margin-collapse", "-webkit-margin-start", "-webkit-margin-top-collapse",
"-webkit-marquee", "-webkit-marquee-direction", "-webkit-marquee-increment", "-webkit-marquee-repetition",
"-webkit-marquee-speed", "-webkit-marquee-style", "-webkit-mask", "-webkit-mask-attachment",
"-webkit-mask-box-image", "-webkit-mask-clip", "-webkit-mask-composite", "-webkit-mask-image",
"-webkit-mask-origin", "-webkit-mask-position", "-webkit-mask-position-x", "-webkit-mask-position-y",
"-webkit-mask-repeat", "-webkit-mask-repeat-x", "-webkit-mask-repeat-y", "-webkit-mask-size",
"-webkit-match-nearest-mail-blockquote-color", "-webkit-nbsp-mode", "-webkit-padding-start",
"-webkit-perspective", "-webkit-perspective-origin", "-webkit-perspective-origin-x", "-webkit-perspective-origin-y",
"-webkit-rtl-ordering", "-webkit-text-decorations-in-effect", "-webkit-text-fill-color", "-webkit-text-security",
"-webkit-text-size-adjust", "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width",
"-webkit-transform", "-webkit-transform-origin", "-webkit-transform-origin-x", "-webkit-transform-origin-y",
"-webkit-transform-origin-z", "-webkit-transform-style", "-webkit-transition", "-webkit-transition-delay",
"-webkit-transition-duration", "-webkit-transition-property", "-webkit-transition-timing-function",
"-webkit-user-drag", "-webkit-user-modify", "-webkit-user-select", "-webkit-variable-declaration-block"
].keySet();
this._propertyKeywords = WebInspector.CSSCompletions.keySet();
this._valueKeywords = [
"above", "absolute", "activeborder", "activecaption", "afar", "after-white-space", "ahead", "alias", "all", "all-scroll",
"alternate", "always","amharic", "amharic-abegede", "antialiased", "appworkspace", "aqua", "arabic-indic", "armenian",
......
......@@ -580,6 +580,9 @@ WebInspector.doLoadedDone = function()
this.extensionServer.initExtensions();
InspectorFrontendHost.loaded();
// As a DOMAgent method, this needs to happen after the frontend has loaded and the agent is available.
InspectorBackend.getSupportedCSSProperties(WebInspector.Callback.wrap(WebInspector.CSSCompletions._load));
}
WebInspector.addPanelToolbarIcon = function(toolbarElement, panel, previousToolbarItem)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment