Changeset 70772 in webkit


Ignore:
Timestamp:
Oct 28, 2010 6:27:08 AM (13 years ago)
Author:
apavlov@chromium.org
Message:

2010-10-28 Alexander Pavlov <​apavlov@chromium.org>

Reviewed by Pavel Feldman.

Web Inspector: Bring backend-frontend message format to follow the protocol specification
​https://bugs.webkit.org/show_bug.cgi?id=48406

WebCore:

  • inspector/InspectorDOMAgent.cpp: (WebCore::InspectorDOMAgent::getStyles): (WebCore::InspectorDOMAgent::applyStyleText): (WebCore::InspectorDOMAgent::buildObjectForStyle): (WebCore::InspectorDOMAgent::populateObjectWithStyleProperties): (WebCore::InspectorDOMAgent::buildObjectForStyleSheet): (WebCore::InspectorDOMAgent::buildObjectForRule):
  • inspector/InspectorDOMAgent.h:
  • inspector/front-end/AuditRules.js: (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.selectorsCallback): (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun):
  • inspector/front-end/CSSStyleModel.js: (WebInspector.CSSStyleModel.parseRuleArrayPayload): (WebInspector.CSSStyleModel.prototype.getStylesAsync): (WebInspector.CSSStyleModel.prototype.getComputedStyleAsync): (WebInspector.CSSStyleModel.prototype.getInlineStyleAsync): (WebInspector.CSSStyleModel.prototype.setCSSText):
  • inspector/front-end/DOMAgent.js: (WebInspector.CSSStyleDeclaration): (WebInspector.CSSStyleDeclaration.parsePayload): (WebInspector.CSSStyleDeclaration.prototype.get allProperties): (WebInspector.CSSStyleDeclaration.prototype.getLiveProperty): (WebInspector.CSSStyleDeclaration.prototype.getPropertyValue): (WebInspector.CSSStyleDeclaration.prototype.getPropertyPriority): (WebInspector.CSSStyleDeclaration.prototype.getPropertyShorthand): (WebInspector.CSSStyleDeclaration.prototype.isPropertyImplicit): (WebInspector.CSSStyleDeclaration.prototype.getShorthandValue): (WebInspector.CSSStyleDeclaration.prototype.getShorthandPriority): (WebInspector.CSSStyleDeclaration.prototype.appendProperty): (WebInspector.CSSStyleDeclaration.prototype.propertyAt): (WebInspector.CSSRule): (WebInspector.CSSRule.parsePayload): (WebInspector.CSSRule.prototype.get isUserAgent): (WebInspector.CSSRule.prototype.get isUser): (WebInspector.CSSRule.prototype.get isViaInspector): (WebInspector.CSSRule.prototype.get isRegular): (WebInspector.CSSProperty): (WebInspector.CSSProperty.parsePayload): (WebInspector.CSSProperty.prototype.get propertyText): (WebInspector.CSSProperty.prototype.get isLive): (WebInspector.CSSProperty.prototype.get active): (WebInspector.CSSProperty.prototype.get styleBased): (WebInspector.CSSProperty.prototype.get inactive): (WebInspector.CSSProperty.prototype.get disabled): (WebInspector.CSSProperty.prototype.setText): (WebInspector.CSSProperty.prototype.setValue): (WebInspector.CSSProperty.prototype.setDisabled.callback): (WebInspector.CSSProperty.prototype.setDisabled):
  • inspector/front-end/MetricsSidebarPane.js: (WebInspector.MetricsSidebarPane.prototype.update.callback): (WebInspector.MetricsSidebarPane.prototype.update.inlineStyleCallback): (WebInspector.MetricsSidebarPane.prototype.update): (WebInspector.MetricsSidebarPane.prototype._update): (WebInspector.MetricsSidebarPane.prototype.editingCommitted.callback): (WebInspector.MetricsSidebarPane.prototype.editingCommitted.setEnabledValueCallback): (WebInspector.MetricsSidebarPane.prototype.editingCommitted):
  • inspector/front-end/StylesSidebarPane.js: (WebInspector.StylesSidebarPane.prototype.update): (WebInspector.StylesSidebarPane.prototype._rebuildUpdate): (WebInspector.StylesSidebarPane.prototype._refreshStyleRules): (WebInspector.StylesSidebarPane.prototype._rebuildStyleRules): (WebInspector.StylesSidebarPane.prototype._markUsedProperties): (WebInspector.StylesSidebarPane.prototype._containsInherited): (WebInspector.StylePropertiesSection): (WebInspector.StylePropertiesSection.prototype.isPropertyInherited): (WebInspector.StylePropertiesSection.prototype.isPropertyOverloaded): (WebInspector.StylePropertiesSection.prototype.onpopulate): (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty): (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.successCallback): (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted): (WebInspector.ComputedStylePropertiesSection.prototype._isPropertyInherited): (WebInspector.ComputedStylePropertiesSection.prototype.onpopulate): (WebInspector.ComputedStylePropertiesSection.prototype.rebuildComputedTrace): (WebInspector.StylePropertyTreeElement): (WebInspector.StylePropertyTreeElement.prototype.get disabled): (WebInspector.StylePropertyTreeElement.prototype.get name): (WebInspector.StylePropertyTreeElement.prototype.get priority): (WebInspector.StylePropertyTreeElement.prototype.get value): (WebInspector.StylePropertyTreeElement.prototype.get parsedOk): (WebInspector.StylePropertyTreeElement.prototype): (WebInspector.StylePropertyTreeElement.prototype.):

LayoutTests:

  • http/tests/inspector/inspect-iframe-from-different-domain.html:
  • inspector/styles-source-offsets.html:
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r70770 r70772  
     12010-10-28  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: Bring backend-frontend message format to follow the protocol specification
     6        https://bugs.webkit.org/show_bug.cgi?id=48406
     7
     8        * http/tests/inspector/inspect-iframe-from-different-domain.html:
     9        * inspector/styles-source-offsets.html:
     10
    1112010-10-28  Mikhail Naganov  <mnaganov@chromium.org>
    212

  • trunk/LayoutTests/http/tests/inspector/inspect-iframe-from-different-domain.html

    r66087 r70772  
    7878
    7979                for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
    80                     var rule = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]);
     80                    var rule = WebInspector.CSSRule.parsePayload(styles.matchedCSSRules[i]);
    8181                    if (rule.isUser || rule.isUserAgent)
    8282                        continue;

  • trunk/LayoutTests/inspector/styles-source-offsets.html

    r70682 r70772  
    3838            for (var i = 0; i < matchedCSSRules.length; ++i) {
    3939                var rule = matchedCSSRules[i];
    40                 InspectorBackend.getStyleSourceData(rule.style.id, frontend_styleDataReceived.bind(null, testController, rule, false));
     40                InspectorBackend.getStyleSourceData(rule.style.styleId, frontend_styleDataReceived.bind(null, testController, rule, false));
    4141            }
    42             InspectorBackend.getStyleSourceData(styles.inlineStyle.id, frontend_styleDataReceived.bind(null, testController, styles.inlineStyle, true));
     42            InspectorBackend.getStyleSourceData(styles.inlineStyle.styleId, frontend_styleDataReceived.bind(null, testController, styles.inlineStyle, true));
    4343        }
    4444        InspectorBackend.getStyles(WebInspector.domAgent.document.body.id, true, stylesCallback.bind(null, testController));

  • trunk/WebCore/ChangeLog

    r70763 r70772  
     12010-10-28  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Reviewed by Pavel Feldman.
     4
     5        Web Inspector: Bring backend-frontend message format to follow the protocol specification
     6        https://bugs.webkit.org/show_bug.cgi?id=48406
     7
     8        * inspector/InspectorDOMAgent.cpp:
     9        (WebCore::InspectorDOMAgent::getStyles):
     10        (WebCore::InspectorDOMAgent::applyStyleText):
     11        (WebCore::InspectorDOMAgent::buildObjectForStyle):
     12        (WebCore::InspectorDOMAgent::populateObjectWithStyleProperties):
     13        (WebCore::InspectorDOMAgent::buildObjectForStyleSheet):
     14        (WebCore::InspectorDOMAgent::buildObjectForRule):
     15        * inspector/InspectorDOMAgent.h:
     16        * inspector/front-end/AuditRules.js:
     17        (WebInspector.AuditRules.UnusedCssRule.prototype.doRun.evalCallback.selectorsCallback):
     18        (WebInspector.AuditRules.ImageDimensionsRule.prototype.doRun):
     19        * inspector/front-end/CSSStyleModel.js:
     20        (WebInspector.CSSStyleModel.parseRuleArrayPayload):
     21        (WebInspector.CSSStyleModel.prototype.getStylesAsync):
     22        (WebInspector.CSSStyleModel.prototype.getComputedStyleAsync):
     23        (WebInspector.CSSStyleModel.prototype.getInlineStyleAsync):
     24        (WebInspector.CSSStyleModel.prototype.setCSSText):
     25        * inspector/front-end/DOMAgent.js:
     26        (WebInspector.CSSStyleDeclaration):
     27        (WebInspector.CSSStyleDeclaration.parsePayload):
     28        (WebInspector.CSSStyleDeclaration.prototype.get allProperties):
     29        (WebInspector.CSSStyleDeclaration.prototype.getLiveProperty):
     30        (WebInspector.CSSStyleDeclaration.prototype.getPropertyValue):
     31        (WebInspector.CSSStyleDeclaration.prototype.getPropertyPriority):
     32        (WebInspector.CSSStyleDeclaration.prototype.getPropertyShorthand):
     33        (WebInspector.CSSStyleDeclaration.prototype.isPropertyImplicit):
     34        (WebInspector.CSSStyleDeclaration.prototype.getShorthandValue):
     35        (WebInspector.CSSStyleDeclaration.prototype.getShorthandPriority):
     36        (WebInspector.CSSStyleDeclaration.prototype.appendProperty):
     37        (WebInspector.CSSStyleDeclaration.prototype.propertyAt):
     38        (WebInspector.CSSRule):
     39        (WebInspector.CSSRule.parsePayload):
     40        (WebInspector.CSSRule.prototype.get isUserAgent):
     41        (WebInspector.CSSRule.prototype.get isUser):
     42        (WebInspector.CSSRule.prototype.get isViaInspector):
     43        (WebInspector.CSSRule.prototype.get isRegular):
     44        (WebInspector.CSSProperty):
     45        (WebInspector.CSSProperty.parsePayload):
     46        (WebInspector.CSSProperty.prototype.get propertyText):
     47        (WebInspector.CSSProperty.prototype.get isLive):
     48        (WebInspector.CSSProperty.prototype.get active):
     49        (WebInspector.CSSProperty.prototype.get styleBased):
     50        (WebInspector.CSSProperty.prototype.get inactive):
     51        (WebInspector.CSSProperty.prototype.get disabled):
     52        (WebInspector.CSSProperty.prototype.setText):
     53        (WebInspector.CSSProperty.prototype.setValue):
     54        (WebInspector.CSSProperty.prototype.setDisabled.callback):
     55        (WebInspector.CSSProperty.prototype.setDisabled):
     56        * inspector/front-end/MetricsSidebarPane.js:
     57        (WebInspector.MetricsSidebarPane.prototype.update.callback):
     58        (WebInspector.MetricsSidebarPane.prototype.update.inlineStyleCallback):
     59        (WebInspector.MetricsSidebarPane.prototype.update):
     60        (WebInspector.MetricsSidebarPane.prototype._update):
     61        (WebInspector.MetricsSidebarPane.prototype.editingCommitted.callback):
     62        (WebInspector.MetricsSidebarPane.prototype.editingCommitted.setEnabledValueCallback):
     63        (WebInspector.MetricsSidebarPane.prototype.editingCommitted):
     64        * inspector/front-end/StylesSidebarPane.js:
     65        (WebInspector.StylesSidebarPane.prototype.update):
     66        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
     67        (WebInspector.StylesSidebarPane.prototype._refreshStyleRules):
     68        (WebInspector.StylesSidebarPane.prototype._rebuildStyleRules):
     69        (WebInspector.StylesSidebarPane.prototype._markUsedProperties):
     70        (WebInspector.StylesSidebarPane.prototype._containsInherited):
     71        (WebInspector.StylePropertiesSection):
     72        (WebInspector.StylePropertiesSection.prototype.isPropertyInherited):
     73        (WebInspector.StylePropertiesSection.prototype.isPropertyOverloaded):
     74        (WebInspector.StylePropertiesSection.prototype.onpopulate):
     75        (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty):
     76        (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.successCallback):
     77        (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted):
     78        (WebInspector.ComputedStylePropertiesSection.prototype._isPropertyInherited):
     79        (WebInspector.ComputedStylePropertiesSection.prototype.onpopulate):
     80        (WebInspector.ComputedStylePropertiesSection.prototype.rebuildComputedTrace):
     81        (WebInspector.StylePropertyTreeElement):
     82        (WebInspector.StylePropertyTreeElement.prototype.get disabled):
     83        (WebInspector.StylePropertyTreeElement.prototype.get name):
     84        (WebInspector.StylePropertyTreeElement.prototype.get priority):
     85        (WebInspector.StylePropertyTreeElement.prototype.get value):
     86        (WebInspector.StylePropertyTreeElement.prototype.get parsedOk):
     87        (WebInspector.StylePropertyTreeElement.prototype):
     88        (WebInspector.StylePropertyTreeElement.prototype.):
     89
    1902010-10-27  MORITA Hajime  <morrita@google.com>
    291

  • trunk/WebCore/inspector/InspectorDOMAgent.cpp

    r70046 r70772  
    12201220    result->setArray("pseudoElements", buildArrayForPseudoElements(element, authorOnly));
    12211221
    1222     RefPtr<InspectorObject> currentStyle = result;
     1222    RefPtr<InspectorArray> inheritedStyles = InspectorArray::create();
    12231223    Element* parentElement = element->parentElement();
    12241224    while (parentElement) {
    12251225        RefPtr<InspectorObject> parentStyle = InspectorObject::create();
    1226         currentStyle->setObject("parent", parentStyle);
     1226        inheritedStyles->pushObject(parentStyle);
    12271227        if (parentElement->style() && parentElement->style()->length())
    12281228            parentStyle->setObject("inlineStyle", buildObjectForStyle(parentElement->style(), true));
    … …  
    12331233
    12341234        parentElement = parentElement->parentElement();
    1235         currentStyle = parentStyle;
    1236     }
     1235    }
     1236    result->setArray("inherited", inheritedStyles);
    12371237    *styles = result.release();
    12381238}
    … …  
    13971397    if (!styleTextLength) {
    13981398        *success = true;
     1399        *styleObject = buildObjectForStyle(style, true);
    13991400        return;
    14001401    }
    … …  
    15451546    RefPtr<InspectorObject> result = InspectorObject::create();
    15461547    if (bind) {
    1547         long styleId = cssStore()->bindStyle(style);
    1548         result->setNumber("id", styleId);
    1549         CSSStyleSheet* parentStyleSheet = InspectorCSSStore::getParentStyleSheet(style);
    1550         if (parentStyleSheet)
    1551             result->setNumber("parentStyleSheetId", cssStore()->bindStyleSheet(parentStyleSheet));
    1552 
    1553         DisabledStyleDeclaration* disabledStyle = cssStore()->disabledStyleForId(styleId, false);
    1554         if (disabledStyle)
    1555             result->setArray("disabled", buildArrayForDisabledStyleProperties(disabledStyle));
    1556     }
    1557     result->setString("width", style->getPropertyValue("width"));
    1558     result->setString("height", style->getPropertyValue("height"));
     1548        result->setNumber("styleId", cssStore()->bindStyle(style));
     1549        CSSStyleSheet* styleSheet = InspectorCSSStore::getParentStyleSheet(style);
     1550        if (styleSheet)
     1551            result->setNumber("styleSheetId", cssStore()->bindStyleSheet(styleSheet));
     1552    }
     1553    RefPtr<InspectorObject> properties = InspectorObject::create();
     1554    properties->setString("width", style->getPropertyValue("width"));
     1555    properties->setString("height", style->getPropertyValue("height"));
     1556    result->setObject("properties", properties);
    15591557    populateObjectWithStyleProperties(style, result.get());
    15601558    return result.release();
    … …  
    15701568        RefPtr<InspectorObject> property = InspectorObject::create();
    15711569        String name = style->item(i);
     1570        String value = style->getPropertyValue(name);
     1571        String priority = style->getPropertyPriority(name);
    15721572        property->setString("name", name);
    1573         property->setString("priority", style->getPropertyPriority(name));
     1573        property->setString("value", value);
     1574        property->setString("priority", priority);
     1575        property->setString("text", name + ": " + value + (priority.length() ? " !" + priority : "") + ";");
    15741576        property->setBoolean("implicit", style->isPropertyImplicit(name));
     1577        property->setBoolean("parsedOk", true);
     1578        property->setString("status", "style");
    15751579        String shorthand = style->getPropertyShorthand(name);
    1576         property->setString("shorthand", shorthand);
     1580        property->setString("shorthandName", shorthand);
    15771581        if (!shorthand.isEmpty() && !foundShorthands.contains(shorthand)) {
    15781582            foundShorthands.add(shorthand);
    15791583            shorthandValues->setString(shorthand, shorthandValue(style, shorthand));
    15801584        }
    1581         property->setString("value", style->getPropertyValue(name));
    15821585        properties->pushObject(property.release());
    15831586    }
    1584     result->setArray("properties", properties);
     1587    result->setArray("cssProperties", properties);
     1588    result->setString("cssText", style->cssText());
    15851589    result->setObject("shorthandValues", shorthandValues);
    1586 }
    1587 
    1588 PassRefPtr<InspectorArray> InspectorDOMAgent::buildArrayForDisabledStyleProperties(DisabledStyleDeclaration* declaration)
    1589 {
    1590     RefPtr<InspectorArray> properties = InspectorArray::create();
    1591     for (DisabledStyleDeclaration::iterator it = declaration->begin(); it != declaration->end(); ++it) {
     1590
     1591    DisabledStyleDeclaration* disabledStyle = cssStore()->disabledStyleForId(cssStore()->bindStyle(style), false);
     1592    if (!disabledStyle)
     1593        return;
     1594
     1595    for (DisabledStyleDeclaration::iterator it = disabledStyle->begin(); it != disabledStyle->end(); ++it) {
    15921596        RefPtr<InspectorObject> property = InspectorObject::create();
    1593         property->setString("name", it->first);
    1594         property->setString("value", it->second.first);
    1595         property->setString("priority", it->second.second);
     1597        String name = it->first;
     1598        String value = it->second.first;
     1599        String priority = it->second.second;
     1600        property->setString("name", name);
     1601        property->setString("value", value);
     1602        property->setString("priority", priority);
     1603        property->setString("text", name + ": " + value + (priority.length() ? " !" + priority : "") + ";");
     1604        property->setBoolean("implicit", false);
     1605        property->setBoolean("parsedOk", true);
     1606        property->setString("status", "disabled");
    15961607        properties->pushObject(property.release());
    15971608    }
    1598     return properties.release();
    15991609}
    16001610
    … …  
    16031613    RefPtr<InspectorObject> result = InspectorObject::create();
    16041614    long id = cssStore()->bindStyleSheet(styleSheet);
    1605     result->setNumber("id", id);
     1615    result->setNumber("styleSheetId", id);
     1616    result->setString("sourceURL", styleSheet->href());
     1617    result->setString("title", styleSheet->title());
    16061618    result->setBoolean("disabled", styleSheet->disabled());
    1607     result->setString("href", styleSheet->href());
    1608     result->setString("title", styleSheet->title());
    1609     result->setNumber("documentElementId", m_documentNodeToIdMap.get(styleSheet->document()));
    16101619    RefPtr<InspectorArray> cssRules = InspectorArray::create();
    16111620    PassRefPtr<CSSRuleList> cssRuleList = CSSRuleList::create(styleSheet, true);
    … …  
    16171626        }
    16181627    }
    1619     result->setArray("cssRules", cssRules.release());
     1628    result->setArray("rules", cssRules.release());
    16201629    return result.release();
    16211630}
    … …  
    16271636    RefPtr<InspectorObject> result = InspectorObject::create();
    16281637    result->setString("selectorText", rule->selectorText());
    1629     result->setString("cssText", rule->cssText());
    16301638    result->setNumber("sourceLine", rule->sourceLine());
    1631     result->setString("documentURL", documentURLString(ownerDocument));
    1632     if (parentStyleSheet) {
    1633         RefPtr<InspectorObject> parentStyleSheetValue = InspectorObject::create();
    1634         parentStyleSheetValue->setString("href", parentStyleSheet->href());
    1635         parentStyleSheetValue->setNumber("id", cssStore()->bindStyleSheet(parentStyleSheet));
    1636         result->setObject("parentStyleSheet", parentStyleSheetValue.release());
    1637     }
    1638     bool isUserAgent = parentStyleSheet && !parentStyleSheet->ownerNode() && parentStyleSheet->href().isEmpty();
    1639     bool isUser = parentStyleSheet && parentStyleSheet->ownerNode() && parentStyleSheet->ownerNode()->nodeName() == "#document";
    1640     result->setBoolean("isUserAgent", isUserAgent);
    1641     result->setBoolean("isUser", isUser);
    1642     result->setBoolean("isViaInspector", rule->parentStyleSheet() == cssStore()->inspectorStyleSheet(ownerDocument, false));
     1639
     1640    String origin;
     1641    bool canBind = true;
     1642    if (parentStyleSheet && !parentStyleSheet->ownerNode() && parentStyleSheet->href().isEmpty()) {
     1643        origin = "user-agent";
     1644        canBind = false;
     1645    } else if (parentStyleSheet && parentStyleSheet->ownerNode() && parentStyleSheet->ownerNode()->nodeName() == "#document") {
     1646        origin = "user";
     1647        canBind = false;
     1648    } else if (rule->parentStyleSheet() == cssStore()->inspectorStyleSheet(ownerDocument, false))
     1649        origin = "inspector";
     1650    result->setString("origin", origin);
     1651
     1652    if (origin.isEmpty())
     1653        result->setString("sourceURL", parentStyleSheet && !parentStyleSheet->href().isEmpty() ? parentStyleSheet->href() : (ownerDocument ? ownerDocument->url().string() : ""));
    16431654
    16441655    // Bind editable scripts only.
    1645     bool bind = !isUserAgent && !isUser;
    1646     result->setObject("style", buildObjectForStyle(rule->style(), bind));
    1647 
    1648     if (bind)
    1649         result->setNumber("id", cssStore()->bindRule(rule));
     1656    result->setObject("style", buildObjectForStyle(rule->style(), canBind));
     1657
     1658    if (canBind)
     1659        result->setNumber("ruleId", cssStore()->bindRule(rule));
    16501660    return result.release();
    16511661}

  • trunk/WebCore/inspector/InspectorDOMAgent.h

    r70046 r70772  
    208208        PassRefPtr<InspectorObject> buildObjectForStyle(CSSStyleDeclaration*, bool bind);
    209209        void populateObjectWithStyleProperties(CSSStyleDeclaration*, InspectorObject* result);
    210         PassRefPtr<InspectorArray> buildArrayForDisabledStyleProperties(DisabledStyleDeclaration*);
    211210        PassRefPtr<InspectorObject> buildObjectForRule(Document* ownerDocument, CSSStyleRule*);
    212211        PassRefPtr<InspectorObject> buildObjectForStyleSheet(Document* ownerDocument, CSSStyleSheet*);

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

    r69947 r70772  
    287287            for (var i = 0; i < styleSheets.length; ++i) {
    288288                var styleSheet = styleSheets[i];
    289                 for (var curRule = 0; curRule < styleSheet.cssRules.length; ++curRule) {
    290                     var rule = styleSheet.cssRules[curRule];
     289                for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
     290                    var rule = styleSheet.rules[curRule];
    291291                    if (rule.selectorText.match(pseudoSelectorRegexp))
    292292                        continue;
    … …  
    308308                    var unusedStylesheetSize = 0;
    309309                    var unusedRules = [];
    310                     for (var curRule = 0; curRule < styleSheet.cssRules.length; ++curRule) {
    311                         var rule = styleSheet.cssRules[curRule];
    312                         var textLength = rule.cssText ? rule.cssText.length : 0;
     310                    for (var curRule = 0; curRule < styleSheet.rules.length; ++curRule) {
     311                        var rule = styleSheet.rules[curRule];
     312                        // FIXME: replace this by an exact computation once source ranges are available
     313                        var textLength = rule.style.cssText ? rule.style.cssText.length + rule.selectorText.length : 0;
    313314                        stylesheetSize += textLength;
    314315                        if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText])
    … …  
    323324                        continue;
    324325
    325                     var url = styleSheet.href ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.href) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
     326                    var url = styleSheet.sourceURL ? WebInspector.AuditRuleResult.linkifyDisplayName(styleSheet.sourceURL) : String.sprintf("Inline block #%d", ++inlineBlockOrdinal);
    326327                    var pctUnused = Math.round(100 * unusedStylesheetSize / stylesheetSize);
    327328                    if (!summary)
    … …  
    658659                src = completeSrc;
    659660
    660             const computedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
     661            const computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(styles.computedStyle);
    661662            if (computedStyle.getPropertyValue("position") === "absolute") {
    662663                if (!context.imagesLeft)
    … …  
    669670
    670671            for (var i = styles.matchedCSSRules.length - 1; i >= 0 && !(widthFound && heightFound); --i) {
    671                 var style = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]).style;
     672                var style = WebInspector.CSSRule.parsePayload(styles.matchedCSSRules[i]).style;
    672673                if (style.getPropertyValue("width") !== "")
    673674                    widthFound = true;

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

    r70046 r70772  
    3333}
    3434
     35WebInspector.CSSStyleModel.parseRuleArrayPayload = function(ruleArray)
     36{
     37    var result = [];
     38    for (var i = 0; i < ruleArray.length; ++i)
     39        result.push(WebInspector.CSSRule.parsePayload(ruleArray[i]));
     40    return result;
     41}
     42
    3543WebInspector.CSSStyleModel.prototype = {
    36     getStylesAsync: function(nodeId, authOnly, userCallback)
     44    getStylesAsync: function(nodeId, userCallback)
    3745    {
    38         InspectorBackend.getStyles(nodeId, authOnly, userCallback);
     46        function callback(userCallback, payload)
     47        {
     48            if (!payload) {
     49                if (userCallback)
     50                    userCallback(null);
     51                return;
     52            }
     53
     54            var result = {};
     55            if ("inlineStyle" in payload)
     56                result.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(payload.inlineStyle);
     57
     58            result.computedStyle = WebInspector.CSSStyleDeclaration.parsePayload(payload.computedStyle);
     59            result.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleArrayPayload(payload.matchedCSSRules);
     60
     61            result.styleAttributes = {};
     62            for (var name in payload.styleAttributes)
     63                result.styleAttributes[name] = WebInspector.CSSStyleDeclaration.parsePayload(payload.styleAttributes[name]);
     64
     65            result.pseudoElements = [];
     66            for (var i = 0; i < payload.pseudoElements.length; ++i) {
     67                var entryPayload = payload.pseudoElements[i];
     68                result.pseudoElements.push({ pseudoId: entryPayload.pseudoId, rules: WebInspector.CSSStyleModel.parseRuleArrayPayload(entryPayload.rules) });
     69            }
     70
     71            result.inherited = [];
     72            for (var i = 0; i < payload.inherited.length; ++i) {
     73                var entryPayload = payload.inherited[i];
     74                var entry = {};
     75                if ("inlineStyle" in entryPayload)
     76                    entry.inlineStyle = WebInspector.CSSStyleDeclaration.parsePayload(entryPayload.inlineStyle);
     77                if ("matchedCSSRules" in entryPayload)
     78                    entry.matchedCSSRules = WebInspector.CSSStyleModel.parseRuleArrayPayload(entryPayload.matchedCSSRules);
     79                result.inherited.push(entry);
     80            }
     81
     82            if (userCallback)
     83                userCallback(result);
     84        }
     85
     86        InspectorBackend.getStyles(nodeId, false, callback.bind(null, userCallback));
    3987    },
    4088
    4189    getComputedStyleAsync: function(nodeId, userCallback)
    4290    {
    43         InspectorBackend.getComputedStyle(nodeId, userCallback);
     91        function callback(userCallback, stylePayload)
     92        {
     93            if (!stylePayload)
     94                userCallback(null);
     95            else
     96                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
     97        }
     98
     99        InspectorBackend.getComputedStyle(nodeId, callback.bind(null, userCallback));
     100    },
     101
     102    getInlineStyleAsync: function(nodeId, userCallback)
     103    {
     104        function callback(userCallback, stylePayload)
     105        {
     106            if (!stylePayload)
     107                userCallback(null);
     108            else
     109                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
     110        }
     111
     112        InspectorBackend.getInlineStyle(nodeId, callback.bind(null, userCallback));
    44113    },
    45114
    … …  
    74143    },
    75144
    76     toggleStyleEnabled: function(styleId, propertyName, disabled, userCallback)
    77     {
    78         function callback(newPayload)
    79         {
    80             if (!newPayload) {
    81                 userCallback(null);
    82                 return;
    83             }
    84 
    85             var newStyle = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);
    86             userCallback(newStyle);
    87         }
    88 
    89         InspectorBackend.toggleStyleEnabled(styleId, propertyName, disabled, callback);
    90     },
    91 
    92145    setCSSText: function(styleId, cssText)
    93146    {
    94147        InspectorBackend.setStyleText(styleId, cssText);
    95     },
    96 
    97     applyStyleText: function(styleId, styleText, propertyName, successCallback, failureCallback)
    98     {
    99         function callback(success, newPayload)
    100         {
    101             if (!success)
    102                 failureCallback();
    103             else {
    104                 var newStyle = newPayload ? WebInspector.CSSStyleDeclaration.parseStyle(newPayload) : null;
    105                 successCallback(newStyle);
    106             }
    107         }
    108 
    109         InspectorBackend.applyStyleText(styleId, styleText, propertyName, callback);
    110148    }
    111149}

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

    r69947 r70772  
    527527WebInspector.CSSStyleDeclaration = function(payload)
    528528{
    529     this.id = payload.id;
    530     this.parentStyleSheetId = payload.parentStyleSheetId;
    531     this.width = payload.width;
    532     this.height = payload.height;
    533     this.__disabledProperties = {};
    534     this.__disabledPropertyValues = {};
    535     this.__disabledPropertyPriorities = {};
    536     if (payload.disabled) {
    537         for (var i = 0; i < payload.disabled.length; ++i) {
    538             var property = payload.disabled[i];
    539             this.__disabledProperties[property.name] = true;
    540             this.__disabledPropertyValues[property.name] = property.value;
    541             this.__disabledPropertyPriorities[property.name] = property.priority;
    542         }
    543     }
    544 
     529    this.id = payload.styleId;
     530    this.properties = payload.properties;
    545531    this._shorthandValues = payload.shorthandValues;
    546     this._propertyMap = {};
    547     this._longhandProperties = {};
    548     this.length = payload.properties.length;
    549 
    550     for (var i = 0; i < this.length; ++i) {
    551         var property = payload.properties[i];
     532    this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty }
     533    this._allProperties = []; // ALL properties: [ CSSProperty ]
     534    this._longhandProperties = {}; // shorthandName -> [ CSSProperty ]
     535    this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty }
     536    var payloadPropertyCount = payload.cssProperties.length;
     537
     538    var propertyIndex = 0;
     539    for (var i = 0; i < payloadPropertyCount; ++i) {
     540        var property = new WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]);
     541        this._allProperties.push(property);
     542        if (property.disabled)
     543            this.__disabledProperties[i] = property;
     544        if (!property.active && !property.styleBased)
     545            continue;
    552546        var name = property.name;
    553         this[i] = name;
    554         this._propertyMap[name] = property;
     547        this[propertyIndex] = name;
     548        this._livePropertyMap[name] = property;
    555549
    556550        // Index longhand properties.
    557         if (property.shorthand) {
     551        if (property.shorthand) { // only for parsed
    558552            var longhands = this._longhandProperties[property.shorthand];
    559553            if (!longhands) {
    … …  
    561555                this._longhandProperties[property.shorthand] = longhands;
    562556            }
    563             longhands.push(name);
    564         }
    565     }
    566 }
    567 
    568 WebInspector.CSSStyleDeclaration.parseStyle = function(payload)
     557            longhands.push(property);
     558        }
     559        ++propertyIndex;
     560    }
     561    this.length = propertyIndex;
     562}
     563
     564WebInspector.CSSStyleDeclaration.parsePayload = function(payload)
    569565{
    570566    return new WebInspector.CSSStyleDeclaration(payload);
    571567}
    572568
    573 WebInspector.CSSStyleDeclaration.parseRule = function(payload)
    574 {
    575     var rule = {};
    576     rule.id = payload.id;
    577     rule.selectorText = payload.selectorText;
    578     rule.style = new WebInspector.CSSStyleDeclaration(payload.style);
    579     rule.style.parentRule = rule;
    580     rule.isUserAgent = payload.isUserAgent;
    581     rule.isUser = payload.isUser;
    582     rule.isViaInspector = payload.isViaInspector;
    583     rule.sourceLine = payload.sourceLine;
    584     rule.documentURL = payload.documentURL;
    585     if (payload.parentStyleSheet)
    586         rule.parentStyleSheet = { href: payload.parentStyleSheet.href };
    587 
    588     return rule;
    589 }
    590 
    591569WebInspector.CSSStyleDeclaration.prototype = {
     570    get allProperties()
     571    {
     572        return this._allProperties;
     573    },
     574
     575    getLiveProperty: function(name)
     576    {
     577        return this._livePropertyMap[name];
     578    },
     579
    592580    getPropertyValue: function(name)
    593581    {
    594         var property = this._propertyMap[name];
     582        var property = this._livePropertyMap[name];
    595583        return property ? property.value : "";
    596584    },
    … …  
    598586    getPropertyPriority: function(name)
    599587    {
    600         var property = this._propertyMap[name];
     588        var property = this._livePropertyMap[name];
    601589        return property ? property.priority : "";
    602590    },
    … …  
    604592    getPropertyShorthand: function(name)
    605593    {
    606         var property = this._propertyMap[name];
     594        var property = this._livePropertyMap[name];
    607595        return property ? property.shorthand : "";
    608596    },
    … …  
    610598    isPropertyImplicit: function(name)
    611599    {
    612         var property = this._propertyMap[name];
     600        var property = this._livePropertyMap[name];
    613601        return property ? property.implicit : "";
    614602    },
    … …  
    652640    getShorthandValue: function(shorthandProperty)
    653641    {
    654         return this._shorthandValues[shorthandProperty];
     642        var property = this.getLiveProperty(shorthandProperty);
     643        return property ? property.value : this._shorthandValues[shorthandProperty];
    655644    },
    656645
    … …  
    663652        var longhands = this._longhandProperties[shorthandProperty];
    664653        return longhands ? this.getPropertyPriority(longhands[0]) : null;
     654    },
     655
     656    appendProperty: function(propertyName, propertyValue, userCallback)
     657    {
     658        function setPropertyCallback(userCallback, success, stylePayload)
     659        {
     660            if (!success)
     661                userCallback(null);
     662            else
     663                userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload));
     664        }
     665
     666        // FIXME(apavlov): this should be migrated to the new InspectorCSSAgent API once it is enabled.
     667        InspectorBackend.applyStyleText(this.id, propertyName + ": " + propertyValue + ";", propertyName, setPropertyCallback.bind(this, userCallback));
     668    },
     669
     670    propertyAt: function(index)
     671    {
     672        return (index < this.allProperties.length) ? this.allProperties[index] : null;
     673    }
     674}
     675
     676WebInspector.CSSRule = function(payload)
     677{
     678    this.id = payload.ruleId;
     679    this.selectorText = payload.selectorText;
     680    this.sourceLine = payload.sourceLine;
     681    this.sourceURL = payload.sourceURL;
     682    this.origin = payload.origin;
     683    this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style);
     684    this.style.parentRule = this;
     685}
     686
     687WebInspector.CSSRule.parsePayload = function(payload)
     688{
     689    return new WebInspector.CSSRule(payload);
     690}
     691
     692WebInspector.CSSRule.prototype = {
     693    get isUserAgent()
     694    {
     695        return this.origin === "user-agent";
     696    },
     697
     698    get isUser()
     699    {
     700        return this.origin === "user";
     701    },
     702
     703    get isViaInspector()
     704    {
     705        return this.origin === "inspector";
     706    },
     707
     708    get isRegular()
     709    {
     710        return this.origin === "";
     711    }
     712}
     713
     714WebInspector.CSSProperty = function(ownerStyle, index, name, value, priority, status, parsedOk, implicit, shorthand, text)
     715{
     716    this.ownerStyle = ownerStyle;
     717    this.index = index;
     718    this.name = name;
     719    this.value = value;
     720    this.priority = priority;
     721    this.status = status;
     722    this.parsedOk = parsedOk;
     723    this.implicit = implicit;
     724    this.shorthand = shorthand;
     725    this.text = text;
     726}
     727
     728WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload)
     729{
     730    var result = new WebInspector.CSSProperty(
     731        ownerStyle, index, payload.name, payload.value, payload.priority, payload.status, payload.parsedOk, payload.implicit, payload.shorthandName, payload.text);
     732    return result;
     733}
     734
     735WebInspector.CSSProperty.prototype = {
     736    get propertyText()
     737    {
     738        if (this.text !== undefined)
     739            return this.text;
     740
     741        return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";";
     742    },
     743
     744    get isLive()
     745    {
     746        return this.active || this.styleBased;
     747    },
     748
     749    get active()
     750    {
     751        return this.status === "active";
     752    },
     753
     754    get styleBased()
     755    {
     756        return this.status === "style";
     757    },
     758
     759    get inactive()
     760    {
     761        return this.status === "inactive";
     762    },
     763
     764    get disabled()
     765    {
     766        return this.status === "disabled";
     767    },
     768
     769    // Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText.
     770    setText: function(propertyText, userCallback)
     771    {
     772        function callback(userCallback, success, stylePayload)
     773        {
     774            if (!userCallback)
     775                return;
     776            if (!success)
     777                userCallback(null);
     778            else {
     779                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
     780                userCallback(style);
     781            }
     782        }
     783
     784        if (!this.ownerStyle)
     785            throw "No ownerStyle for property";
     786        InspectorBackend.applyStyleText(this.ownerStyle.id, propertyText, this.name, callback.bind(this, userCallback));
     787    },
     788
     789    setValue: function(newValue, userCallback)
     790    {
     791        var text = this.name + ": " + newValue + (this.priority ? " !" + this.priority : "") + ";"
     792        this.setText(text, userCallback);
     793    },
     794
     795    setDisabled: function(disabled, userCallback)
     796    {
     797        if (!this.ownerStyle && userCallback)
     798            userCallback(null);
     799        if (disabled === this.disabled && userCallback)
     800            userCallback(this.ownerStyle);
     801
     802        function callback(userCallback, stylePayload)
     803        {
     804            if (!userCallback)
     805                return;
     806            if (!stylePayload)
     807                userCallback(null);
     808            else {
     809                var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload);
     810                userCallback(style);
     811            }
     812        }
     813        InspectorBackend.toggleStyleEnabled(this.ownerStyle.id, this.name, disabled, callback.bind(this, userCallback));
    665814    }
    666815}

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

    r66087 r70772  
    4747
    4848        var self = this;
    49         var callback = function(stylePayload) {
    50             if (!stylePayload)
     49        var callback = function(style) {
     50            if (!style)
    5151                return;
    52             var style = WebInspector.CSSStyleDeclaration.parseStyle(stylePayload);
    5352            self._update(style);
    5453        };
    55         InspectorBackend.getComputedStyle(node.id, callback);
    56 
    57         var inlineStyleCallback = function(stylePayload) {
    58             if (!stylePayload)
     54        WebInspector.cssModel.getComputedStyleAsync(node.id, callback);
     55
     56        var inlineStyleCallback = function(style) {
     57            if (!style)
    5958                return;
    60             self._inlineStyleId = stylePayload.id;
    61         };
    62         InspectorBackend.getInlineStyle(node.id, inlineStyleCallback);
     59            self.inlineStyle = style;
     60        };
     61        WebInspector.cssModel.getInlineStyleAsync(node.id, inlineStyleCallback);
    6362    },
    6463
    6564    _update: function(style)
    6665    {
     66        // Updating with computed style.
    6767        var metricsElement = document.createElement("div");
    6868        metricsElement.className = "metrics";
    … …  
    117117            var name = boxes[i];
    118118
    119             if (name === "margin" && noMarginDisplayType[style.display])
    120                 continue;
    121             if (name === "padding" && noPaddingDisplayType[style.display])
    122                 continue;
    123             if (name === "position" && noPositionType[style.position])
     119            if (name === "margin" && noMarginDisplayType[style.getPropertyValue("display")])
     120                continue;
     121            if (name === "padding" && noPaddingDisplayType[style.getPropertyValue("display")])
     122                continue;
     123            if (name === "position" && noPositionType[style.getPropertyValue("position")])
    124124                continue;
    125125
    … …  
    128128
    129129            if (name === "content") {
    130                 var width = style.width.replace(/px$/, "");
     130                var width = style.getPropertyValue("width").replace(/px$/, "");
    131131                var widthElement = document.createElement("span");
    132132                widthElement.textContent = width;
    133133                widthElement.addEventListener("dblclick", this.startEditing.bind(this, widthElement, "width", "width"), false);
    134134
    135                 var height = style.height.replace(/px$/, "");
     135                var height = style.getPropertyValue("height").replace(/px$/, "");
    136136                var heightElement = document.createElement("span");
    137137                heightElement.textContent = height;
    … …  
    186186    editingCommitted: function(element, userInput, previousContent, context)
    187187    {
    188         if (!this._inlineStyleId) {
     188        if (!this.inlineStyle) {
    189189            // Element has no renderer.
    190190            return this.editingCancelled(element, context); // nothing changed, so cancel
    … …  
    204204
    205205        var self = this;
    206         var callback = function(success) {
    207             if (!success)
     206        var callback = function(style) {
     207            if (!style)
    208208                return;
     209            self.inlineStyle = style;
    209210            self.dispatchEventToListeners("metrics edited");
    210211            self.update();
    211212        };
    212213
    213         InspectorBackend.setStyleProperty(this._inlineStyleId, context.styleProperty, userInput, callback);
     214        function setEnabledValueCallback(context, style)
     215        {
     216            var property = style.getLiveProperty(context.styleProperty);
     217            if (!property)
     218                style.appendProperty(context.styleProperty, userInput, callback);
     219             else
     220                property.setValue(userInput, callback);
     221        }
     222
     223        var allProperties = this.inlineStyle.allProperties;
     224        for (var i = 0; i < allProperties.length; ++i) {
     225            var property = allProperties[i];
     226            if (property.name !== context.styleProperty || property.inactive)
     227                continue;
     228            if (property.disabled)
     229                property.setDisabled(false, setEnabledValueCallback.bind(null, context));
     230            else
     231                property.setValue(userInput, callback);
     232            return;
     233        }
     234
     235        this.inlineStyle.appendProperty(context.styleProperty, userInput, callback);
    214236    }
    215237}

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

    r70622 r70772  
    156156            WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this));
    157157        else
    158             WebInspector.cssModel.getStylesAsync(node.id, !WebInspector.applicationSettings.showUserAgentStyles, stylesCallback.bind(this));
     158            WebInspector.cssModel.getStylesAsync(node.id, stylesCallback.bind(this));
    159159    },
    160160
    … …  
    197197            // Add rules in reverse order to match the cascade order.
    198198            for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) {
    199                 var rule = WebInspector.CSSStyleDeclaration.parseRule(pseudoElementCSSRules.rules[j]);
    200                 styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
     199                var rule = pseudoElementCSSRules.rules[j];
     200                styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule });
    201201            }
    202202            usedProperties = {};
    … …  
    209209    _refreshStyleRules: function(sections, computedStyle)
    210210    {
    211         var nodeComputedStyle = new WebInspector.CSSStyleDeclaration(computedStyle);
     211        var nodeComputedStyle = computedStyle;
    212212        var styleRules = [];
    213213        for (var i = 0; sections && i < sections.length; ++i) {
    … …  
    225225    _rebuildStyleRules: function(node, styles)
    226226    {
    227         var nodeComputedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
     227        var nodeComputedStyle = styles.computedStyle;
    228228        this.sections = {};
    229229
    … …  
    234234        var styleAttributes = {};
    235235        for (var name in styles.styleAttributes) {
    236             var attrStyle = { style: new WebInspector.CSSStyleDeclaration(styles.styleAttributes[name]), editable: false };
     236            var attrStyle = { style: styles.styleAttributes[name], editable: false };
    237237            attrStyle.selectorText = WebInspector.panels.elements.treeOutline.nodeNameToCorrectCase(node.nodeName) + "[" + name;
    238238            if (node.getAttribute(name))
    … …  
    244244        // Show element's Style Attributes
    245245        if (styles.inlineStyle && node.nodeType === Node.ELEMENT_NODE) {
    246             var inlineStyle = { selectorText: "element.style", style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true };
     246            var inlineStyle = { selectorText: "element.style", style: styles.inlineStyle, isAttribute: true };
    247247            styleRules.push(inlineStyle);
    248248        }
    … …  
    252252            styleRules.push({ isStyleSeparator: true, text: WebInspector.UIString("Matched CSS Rules") });
    253253        for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
    254             var rule = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]);
    255             styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
     254            var rule = styles.matchedCSSRules[i];
     255            styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule });
    256256        }
    257257
    258258        // Walk the node structure and identify styles with inherited properties.
    259         var parentStyles = styles.parent;
    260259        var parentNode = node.parentNode;
    261260        function insertInheritedNodeSeparator(node)
    … …  
    267266        }
    268267
    269         while (parentStyles) {
     268        for (var parentOrdinal = 0; parentOrdinal < styles.inherited.length; ++parentOrdinal) {
     269            var parentStyles = styles.inherited[parentOrdinal];
    270270            var separatorInserted = false;
    271271            if (parentStyles.inlineStyle) {
    272272                if (this._containsInherited(parentStyles.inlineStyle)) {
    273                     var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: new WebInspector.CSSStyleDeclaration(parentStyles.inlineStyle), isAttribute: true, isInherited: true };
     273                    var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: parentStyles.inlineStyle, isAttribute: true, isInherited: true };
    274274                    if (!separatorInserted) {
    275275                        insertInheritedNodeSeparator(parentNode);
    … …  
    284284                if (!this._containsInherited(rulePayload.style))
    285285                    continue;
    286                 var rule = WebInspector.CSSStyleDeclaration.parseRule(rulePayload);
     286                var rule = rulePayload;
    287287                if (!separatorInserted) {
    288288                    insertInheritedNodeSeparator(parentNode);
    289289                    separatorInserted = true;
    290290                }
    291                 styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule, isInherited: true });
    292             }
    293             parentStyles = parentStyles.parent;
     291                styleRules.push({ style: rule.style, selectorText: rule.selectorText, sourceURL: rule.sourceURL, rule: rule, isInherited: true });
     292            }
    294293            parentNode = parentNode.parentNode;
    295294        }
    … …  
    299298    _markUsedProperties: function(styleRules, usedProperties, disabledComputedProperties)
    300299    {
    301         function deleteDisabledProperty(style, name)
    302         {
    303             if (!style || !name)
    304                 return;
    305             if (style.__disabledPropertyValues)
    306                 delete style.__disabledPropertyValues[name];
    307             if (style.__disabledPropertyPriorities)
    308                 delete style.__disabledPropertyPriorities[name];
    309             if (style.__disabledProperties)
    310                 delete style.__disabledProperties[name];
    311         }
    312 
    313300        var priorityUsed = false;
    314301
    … …  
    324311
    325312            var style = styleRule.style;
    326             for (var j = 0; j < style.length; ++j) {
    327                 var name = style[j];
    328 
    329                 if (!priorityUsed && style.getPropertyPriority(name).length)
     313            var allProperties = style.allProperties;
     314            for (var j = 0; j < allProperties.length; ++j) {
     315                var property = allProperties[j];
     316                if (!property.isLive)
     317                    continue;
     318                var name = property.name;
     319
     320                if (!priorityUsed && property.priority.length)
    330321                    priorityUsed = true;
    331322
    … …  
    346337                    styleRule.usedProperties["line-height"] = true;
    347338                }
    348 
    349                 // Delete any disabled properties, since the property does exist.
    350                 // This prevents it from showing twice.
    351                 deleteDisabledProperty(style, name);
    352                 deleteDisabledProperty(style, style.getPropertyShorthand(name));
    353339            }
    354340
    … …  
    357343            for (var name in styleRules[i].usedProperties)
    358344                usedProperties[name] = true;
    359 
    360             // Remember all disabled properties so they show up in computed style.
    361             if (style.__disabledProperties)
    362                 for (var name in style.__disabledProperties)
    363                     disabledComputedProperties[name] = true;
    364345        }
    365346
    … …  
    374355
    375356                var style = styleRules[i].style;
    376                 for (var j = 0; j < style.length; ++j) {
    377                     var name = style[j];
    378                     if (style.getPropertyPriority(name).length) {
     357                var allProperties = style.allProperties;
     358                for (var j = 0; j < allProperties.length; ++j) {
     359                    var property = allProperties[j];
     360                    if (!property.isLive)
     361                        continue;
     362                    var name = property.name;
     363                    if (property.priority.length) {
    379364                        if (!(name in foundPriorityProperties))
    380365                            styleRules[i].usedProperties[name] = true;
    … …  
    460445    },
    461446
    462     _containsInherited: function(payload)
    463     {
    464         if (this._arrayContainsInheritedProperty(payload.properties))
    465             return true;
    466         if (payload.disabled && this._arrayContainsInheritedProperty(payload.disabled))
    467             return true;
    468         return false;
    469     },
    470 
    471     _arrayContainsInheritedProperty: function(properties)
    472     {
     447    _containsInherited: function(style)
     448    {
     449        var properties = style.allProperties;
    473450        for (var i = 0; i < properties.length; ++i) {
    474451            var property = properties[i];
    475452            // Does this style contain non-overridden inherited property?
    476             if (property.name in WebInspector.StylesSidebarPane.InheritedProperties)
     453            if (property.isLive && property.name in WebInspector.StylesSidebarPane.InheritedProperties)
    477454                return true;
    478455        }
    … …  
    652629
    653630    var subtitle = "";
    654     if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href)
    655         this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.parentStyleSheet.href, this.rule.sourceLine));
     631    if (this.styleRule.sourceURL)
     632        this.subtitleElement.appendChild(linkifyUncopyable(this.styleRule.sourceURL, this.rule.sourceLine));
    656633    else if (isUserAgent)
    657634        subtitle = WebInspector.UIString("user agent stylesheet");
    … …  
    660637    else if (isViaInspector)
    661638        subtitle = WebInspector.UIString("via inspector");
    662     else if (this.rule && this.rule.documentURL)
    663         this.subtitleElement.appendChild(linkifyUncopyable(this.rule.documentURL, this.rule.sourceLine));
     639    else if (this.rule && this.rule.sourceURL)
     640        this.subtitleElement.appendChild(linkifyUncopyable(this.rule.sourceURL, this.rule.sourceLine));
    664641
    665642    if (isInherited)
    … …  
    682659    },
    683660
    684     isPropertyInherited: function(property)
     661    isPropertyInherited: function(propertyName)
    685662    {
    686663        if (this.isInherited) {
    687664            // While rendering inherited stylesheet, reverse meaning of this property.
    688665            // Render truly inherited properties with black, i.e. return them as non-inherited.
    689             return !(property in WebInspector.StylesSidebarPane.InheritedProperties);
     666            return !(propertyName in WebInspector.StylesSidebarPane.InheritedProperties);
    690667        }
    691668        return false;
    692669    },
    693670
    694     isPropertyOverloaded: function(property, shorthand)
     671    isPropertyOverloaded: function(propertyName, shorthand)
    695672    {
    696673        if (!this._usedProperties || this.noAffect)
    697674            return false;
    698675
    699         if (this.isInherited && !(property in WebInspector.StylesSidebarPane.InheritedProperties)) {
     676        if (this.isInherited && !(propertyName in WebInspector.StylesSidebarPane.InheritedProperties)) {
    700677            // In the inherited sections, only show overrides for the potentially inherited properties.
    701678            return false;
    702679        }
    703680
    704         var used = (property in this._usedProperties);
     681        var used = (propertyName in this._usedProperties);
    705682        if (used || !shorthand)
    706683            return !used;
    … …  
    708685        // Find out if any of the individual longhand properties of the shorthand
    709686        // are used, if none are then the shorthand is overloaded too.
    710         var longhandProperties = this.styleRule.style.getLonghandProperties(property);
     687        var longhandProperties = this.styleRule.style.getLonghandProperties(propertyName);
    711688        for (var j = 0; j < longhandProperties.length; ++j) {
    712689            var individualProperty = longhandProperties[j];
    713             if (individualProperty in this._usedProperties)
     690            if (individualProperty.name in this._usedProperties)
    714691                return false;
    715692        }
    716693
    717694        return true;
    718     },
    719 
    720     isPropertyDisabled: function(property)
    721     {
    722         if (!this.styleRule.style.__disabledPropertyValues)
    723             return false;
    724         return property in this.styleRule.style.__disabledPropertyValues;
    725695    },
    726696
    … …  
    750720    onpopulate: function()
    751721    {
     722        function sorter(a, b)
     723        {
     724            return a.name.localeCompare(b.name);
     725        }
     726
    752727        var style = this.styleRule.style;
    753728
    754         var foundShorthands = {};
    755         var disabledProperties = style.__disabledPropertyValues || {};
     729        var handledProperties = {};
     730        var shorthandNames = {};
    756731
    757732        this.uniqueProperties = [];
    758         for (var i = 0; i < style.length; ++i)
    759             this.uniqueProperties.push(style[i]);
    760 
    761         for (var name in disabledProperties)
    762             this.uniqueProperties.push(name);
    763 
    764         this.uniqueProperties.sort();
    765 
     733        var allProperties = style.allProperties;
     734        for (var i = 0; i < allProperties.length; ++i)
     735            this.uniqueProperties.push(allProperties[i]);
     736
     737        this.uniqueProperties.sort(sorter);
     738
     739        // Collect all shorthand names.
    766740        for (var i = 0; i < this.uniqueProperties.length; ++i) {
    767             var name = this.uniqueProperties[i];
    768             var disabled = name in disabledProperties;
    769             var shorthand = !disabled ? style.getPropertyShorthand(name) : null;
    770 
    771             if (shorthand && shorthand in foundShorthands)
     741            var property = this.uniqueProperties[i];
     742            if (property.disabled)
    772743                continue;
     744            if (property.shorthand)
     745                shorthandNames[property.shorthand] = true;
     746        }
     747
     748        for (var i = 0; i < this.uniqueProperties.length; ++i) {
     749            var property = this.uniqueProperties[i];
     750            var disabled = property.disabled;
     751            if (!disabled && this.disabledComputedProperties && !(property.name in this.usedProperties) && property.name in this.disabledComputedProperties)
     752                disabled = true;
     753
     754            var shorthand = !disabled ? property.shorthand : null;
     755
     756            if (shorthand && shorthand in handledProperties)
     757                continue;
    773758
    774759            if (shorthand) {
    775                 foundShorthands[shorthand] = true;
    776                 name = shorthand;
    777             }
    778 
    779             var isShorthand = (shorthand ? true : false);
    780             var inherited = this.isPropertyInherited(name);
    781             var overloaded = this.isPropertyOverloaded(name, isShorthand);
    782 
    783             var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, isShorthand, inherited, overloaded, disabled);
     760                property = style.getLiveProperty(shorthand);
     761                if (!property)
     762                    property = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.getShorthandValue(shorthand), style.getShorthandPriority(shorthand), "style", true, true, "");
     763            }
     764
     765            var isShorthand = !!(property.isLive && (shorthand || shorthandNames[property.name]));
     766            var inherited = this.isPropertyInherited(property.name);
     767            var overloaded = this.isPropertyOverloaded(property.name, isShorthand);
     768
     769            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, isShorthand, inherited, overloaded);
    784770            this.propertiesTreeOutline.appendChild(item);
     771            handledProperties[property.name] = property;
    785772        }
    786773    },
    … …  
    799786    addNewBlankProperty: function()
    800787    {
    801         var item = new WebInspector.StylePropertyTreeElement(this.styleRule, this.styleRule.style, "", false, false, false, false);
     788        var style = this.styleRule.style;
     789        var property = new WebInspector.CSSProperty(style, style.allProperties.length, "", "", "", "style", true, false, false, undefined);
     790        var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, "", false, false, false, false);
    802791        this.propertiesTreeOutline.appendChild(item);
    803792        item.listItemElement.textContent = "";
    … …  
    885874
    886875            self.rule = newRule;
    887             self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRule };
     876            self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.sourceURL, rule: newRule };
    888877
    889878            var oldIdentifier = this.identifier;
    … …  
    928917    },
    929918
    930     _isPropertyInherited: function(property)
    931     {
    932         return !(property in this._usedProperties) && !(property in this._alwaysShowComputedProperties) && !(property in this._disabledComputedProperties);
     919    _isPropertyInherited: function(propertyName)
     920    {
     921        return !(propertyName in this._usedProperties) && !(propertyName in this._alwaysShowComputedProperties) && !(propertyName in this._disabledComputedProperties);
    933922    },
    934923
    … …  
    947936    onpopulate: function()
    948937    {
     938        function sorter(a, b)
     939        {
     940            return a.name.localeCompare(b.name);
     941        }
     942
    949943        var style = this.styleRule.style;
    950944        var uniqueProperties = [];
    951         for (var i = 0; i < style.length; ++i)
    952             uniqueProperties.push(style[i]);
    953         uniqueProperties.sort();
     945        var allProperties = style.allProperties;
     946        for (var i = 0; i < allProperties.length; ++i)
     947            uniqueProperties.push(allProperties[i]);
     948        uniqueProperties.sort(sorter);
    954949
    955950        this._propertyTreeElements = {};
    956951        for (var i = 0; i < uniqueProperties.length; ++i) {
    957             var name = uniqueProperties[i];
    958             var inherited = this._isPropertyInherited(name);
    959             var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, false, inherited, false, false);
     952            var property = uniqueProperties[i];
     953            var inherited = this._isPropertyInherited(property.name);
     954            var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, property, false, inherited, false, false);
    960955            this.propertiesTreeOutline.appendChild(item);
    961             this._propertyTreeElements[name] = item;
     956            this._propertyTreeElements[property.name] = item;
    962957        }
    963958    },
    … …  
    971966
    972967            for (var j = 0; j < section.uniqueProperties.length; ++j) {
    973                 var name = section.uniqueProperties[j];
    974                 if (section.isPropertyDisabled(name))
     968                var property = section.uniqueProperties[j];
     969                if (property.disabled)
    975970                    continue;
    976                 if (section.isInherited && !(name in WebInspector.StylesSidebarPane.InheritedProperties))
     971                if (section.isInherited && !(property.name in WebInspector.StylesSidebarPane.InheritedProperties))
    977972                    continue;
    978973
    979                 var treeElement = this._propertyTreeElements[name];
     974                var treeElement = this._propertyTreeElements[property.name];
    980975                if (treeElement) {
    981976                    var selectorText = section.styleRule.selectorText;
    982                     var value = section.styleRule.style.getPropertyValue(name);
     977                    var value = property.value;
    983978                    var title = "<span style='color: gray'>" + selectorText + "</span> - " + value;
    984979                    var subtitle = " <span style='float:right'>" + section.subtitleElement.innerHTML + "</span>";
    985980                    var childElement = new TreeElement(title + subtitle, null, false);
    986981                    treeElement.appendChild(childElement);
    987                     if (section.isPropertyOverloaded(name))
     982                    if (section.isPropertyOverloaded(property.name))
    988983                        childElement.listItemElement.addStyleClass("overloaded");
    989984                }
    … …  
    10511046WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;
    10521047
    1053 WebInspector.StylePropertyTreeElement = function(styleRule, style, name, shorthand, inherited, overloaded, disabled)
     1048WebInspector.StylePropertyTreeElement = function(styleRule, style, property, shorthand, inherited, overloaded)
    10541049{
    10551050    this._styleRule = styleRule;
    10561051    this.style = style;
    1057     this.name = name;
     1052    this.property = property;
    10581053    this.shorthand = shorthand;
    10591054    this._inherited = inherited;
    10601055    this._overloaded = overloaded;
    1061     this._disabled = disabled;
    10621056
    10631057    // Pass an empty title, the title gets made later in onattach.
    … …  
    10941088    get disabled()
    10951089    {
    1096         return this._disabled;
    1097     },
    1098 
    1099     set disabled(x)
    1100     {
    1101         if (x === this._disabled)
    1102             return;
    1103         this._disabled = x;
    1104         this.updateState();
     1090        return this.property.disabled;
     1091    },
     1092
     1093    get name()
     1094    {
     1095        return this.property.name;
    11051096    },
    11061097
    11071098    get priority()
    11081099    {
    1109         if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)
    1110             return this.style.__disabledPropertyPriorities[this.name];
    1111         return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.style.getPropertyPriority(this.name));
     1100        if (this.disabled)
     1101            return this.property.priority;
     1102        return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.property.priority);
    11121103    },
    11131104
    11141105    get value()
    11151106    {
    1116         if (this.disabled && this.style.__disabledPropertyValues && this.name in this.style.__disabledPropertyValues)
    1117             return this.style.__disabledPropertyValues[this.name];
    1118         return (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
     1107        if (this.disabled)
     1108            return this.property.value;
     1109        return (this.shorthand ? this.style.getShorthandValue(this.name) : this.property.value);
     1110    },
     1111
     1112    get parsedOk()
     1113    {
     1114        return this.property.parsedOk;
    11191115    },
    11201116
    … …  
    11361132        this.updateState();
    11371133
    1138         var enabledCheckboxElement = document.createElement("input");
    1139         enabledCheckboxElement.className = "enabled-button";
    1140         enabledCheckboxElement.type = "checkbox";
    1141         enabledCheckboxElement.checked = !this.disabled;
    1142         enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
     1134        var enabledCheckboxElement;
     1135        if (this.parsedOk) {
     1136            enabledCheckboxElement = document.createElement("input");
     1137            enabledCheckboxElement.className = "enabled-button";
     1138            enabledCheckboxElement.type = "checkbox";
     1139            enabledCheckboxElement.checked = !this.disabled;
     1140            enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
     1141        }
    11431142
    11441143        var nameElement = document.createElement("span");
    … …  
    12891288
    12901289        // Append the checkbox for root elements of an editable section.
    1291         if (this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
     1290        if (enabledCheckboxElement && this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
    12921291            this.listItemElement.appendChild(enabledCheckboxElement);
    12931292        this.listItemElement.appendChild(nameElement);
    … …  
    13021301        this.listItemElement.appendChild(document.createTextNode(";"));
    13031302
    1304         this.tooltip = this.name + ": " + valueElement.textContent + (priority ? " " + priority : "");
     1303        this.tooltip = this.property.propertyText;
    13051304    },
    13061305
    … …  
    13141313            this.treeOutline.section.update(true);
    13151314        else
    1316             this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
     1315            this.updateTitle(); // FIXME: this will not show new properties. But we don't hit this case yet.
    13171316    },
    13181317
    … …  
    13211320        var disabled = !event.target.checked;
    13221321
    1323         var self = this;
    13241322        function callback(newStyle)
    13251323        {
    … …  
    13271325                return;
    13281326
    1329             self.style = newStyle;
    1330             self._styleRule.style = self.style;
    1331 
    1332             // Set the disabled property here, since the code above replies on it not changing
    1333             // until after the value and priority are retrieved.
    1334             self.disabled = disabled;
    1335 
    1336             if (self.treeOutline.section && self.treeOutline.section.pane)
    1337                 self.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
    1338 
    1339             self.updateAll(true);
    1340         }
    1341 
    1342         WebInspector.cssModel.toggleStyleEnabled(this.style.id, this.name, disabled, callback);
     1327            this.style = newStyle;
     1328            this._styleRule.style = newStyle;
     1329
     1330            if (this.treeOutline.section && this.treeOutline.section.pane)
     1331                this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
     1332
     1333            this.updateAll(true);
     1334        }
     1335
     1336        this.property.setDisabled(disabled, callback.bind(this));
    13431337    },
    13441338
    … …  
    13771371        var longhandProperties = this.style.getLonghandProperties(this.name);
    13781372        for (var i = 0; i < longhandProperties.length; ++i) {
    1379             var name = longhandProperties[i];
     1373            var name = longhandProperties[i].name;
     1374
    13801375
    13811376            if (this.treeOutline.section) {
    … …  
    13841379            }
    13851380
    1386             var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, name, false, inherited, overloaded);
     1381            var liveProperty = this.style.getLiveProperty(name);
     1382            var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, liveProperty, false, inherited, overloaded);
    13871383            this.appendChild(item);
    13881384        }
    … …  
    16721668        }
    16731669
    1674         var self = this;
    1675 
    1676         function failureCallback()
     1670        function callback(newStyle)
    16771671        {
    1678             // The user typed something, but it didn't parse. Just abort and restore
    1679             // the original title for this property.  If this was a new attribute and
    1680             // we couldn't parse, then just remove it.
    1681             if (self._newProperty) {
    1682                 self.parent.removeChild(self);
     1672            if (!newStyle) {
     1673                // The user typed something, but it didn't parse. Just abort and restore
     1674                // the original title for this property.  If this was a new attribute and
     1675                // we couldn't parse, then just remove it.
     1676                if (this._newProperty) {
     1677                    this.parent.removeChild(this);
     1678                    return;
     1679                }
     1680                if (updateInterface)
     1681                    this.updateTitle();
    16831682                return;
    16841683            }
    1685             if (updateInterface)
    1686                 self.updateTitle();
    1687         }
    1688 
    1689         function successCallback(newStyle)
    1690         {
     1684
    16911685            if (!styleTextLength) {
    16921686                // Do remove ourselves from UI when the property removal is confirmed.
    1693                 self.parent.removeChild(self);
     1687                this.parent.removeChild(this);
    16941688            } else {
    1695                 self.style = newStyle;
    1696                 self._styleRule.style = self.style;
     1689                this.style = newStyle;
     1690                this._styleRule.style = this.style;
    16971691            }
    16981692
    … …  
    17011695
    17021696            if (updateInterface)
    1703                 self.updateAll(true);
    1704         }
    1705 
    1706         WebInspector.cssModel.applyStyleText(this.style.id, styleText, this.name, successCallback, failureCallback);
     1697                this.updateAll(true);
     1698        }
     1699
     1700        this.property.setText(styleText, callback.bind(this));
    17071701    }
    17081702}
Note: See TracChangeset for help on using the changeset viewer.