Changeset 175483 in webkit


Ignore:
Timestamp:
Nov 3, 2014 12:03:57 PM (9 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Show Selector's Specificity
​https://bugs.webkit.org/show_bug.cgi?id=138189

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2014-11-03
Reviewed by Timothy Hatcher.

Source/JavaScriptCore:

  • inspector/protocol/CSS.json:

Create a new named type CSSSelector to include a selector's text and specificity.
The specificity tuple is optional as it may soon be made dynamic in some cases.

Source/WebCore:

Test: inspector/css/selector-specificity.html

  • css/CSSSelector.h:

Remove very stale comment. '*' is a starAtom now instead of a special -1 tag.
Made the specificity masks public class constants.

  • inspector/InspectorStyleSheet.h:
  • inspector/InspectorStyleSheet.cpp:

(WebCore::InspectorStyle::buildArrayForComputedStyle):
(WebCore::InspectorStyle::styleWithProperties):
(WebCore::InspectorStyleSheet::buildObjectForStyleSheetInfo):
Drive by use release() in some cases to reduce ref count churn.

(WebCore::buildObjectForSelectorHelper):
(WebCore::selectorsFromSource):
(WebCore::InspectorStyleSheet::buildObjectForSelector):
(WebCore::InspectorStyleSheet::buildObjectForSelectorList):
Build CSSSelector objects for SelectorLists.

Source/WebInspectorUI:

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

Add new files and strings.

  • UserInterface/Models/CSSMedia.js:

Constructor functions are not needed, remove unnecessary code.

  • UserInterface/Models/CSSRule.js:

(WebInspector.CSSRule.prototype.set selectors): Deleted.
This was unused and is no longer correct.

(WebInspector.CSSRule.prototype.get matchedSelectorText):
Update now that selectors are a list of objects, not just strings.

  • UserInterface/Models/CSSSelector.js:

(WebInspector.CSSSelector):
(WebInspector.CSSSelector.prototype.get specificity):
New model object for protocol type CSS.CSSSelector.

  • UserInterface/Models/DOMNodeStyles.js:

(WebInspector.DOMNodeStyles.prototype._parseSelectorListPayload.return):
(WebInspector.DOMNodeStyles.prototype._parseSelectorListPayload):
(WebInspector.DOMNodeStyles.prototype._parseRulePayload):
Handle parsing old and new SelectorLists.

  • UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelector):
(WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelectorText):
(WebInspector.CSSStyleDeclarationSection.prototype.refresh):
Update the code now that the list of selectors are model objects instead
of just selector text strings.

LayoutTests:

  • inspector/css/matched-style-properties.html:
  • inspector/css/selector-specificity-expected.txt: Added.
  • inspector/css/selector-specificity.html: Copied from LayoutTests/inspector/css/matched-style-properties.html.
Location:
trunk
Files:
1 added
17 edited
2 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r175480 r175483  
     12014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Show Selector's Specificity
     4        https://bugs.webkit.org/show_bug.cgi?id=138189
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * inspector/css/matched-style-properties.html:
     9        * inspector/css/selector-specificity-expected.txt: Added.
     10        * inspector/css/selector-specificity.html: Copied from LayoutTests/inspector/css/matched-style-properties.html.
     11
    1122014-11-03  Lorenzo Tilve  <ltilve@igalia.com>
    213

  • trunk/LayoutTests/inspector/css/matched-style-properties.html

    r173406 r175483  
    3636        for (var i = 0; i < nodeStyles.matchedRules.length; ++i) {
    3737            var rule = nodeStyles.matchedRules[i];
    38             if (rule.type != WebInspector.CSSRule.Type.Author)
     38            if (rule.type !== WebInspector.CSSRule.Type.Author)
    3939                continue;
    4040

  • trunk/LayoutTests/inspector/css/selector-specificity.html

    r175482 r175483  
    33<head>
    44<style>
    5 div#node1 {
    6     BACKGROUND-COLOR:blue;
    7     COLOR:white;
    8     border-STYLE:solid;
    9     BORDER-width:0;
    10     position:absolute;
    11     ToP:0;
    12     lEfT:0;
     5*,
     6h1,
     7.class,
     8#id,
     9body h1.class-one.class-two,
     10body #foo,
     11body > #foo,
     12body > #foo.a.b,
     13h1::before,
     14body h1::before,
     15body.a h1.b::before {
     16    color: green;
    1317}
    1418</style>
    … …  
    1822    var nodeStyles;
    1923
    20     function validatePropertyName(name)
    21     {
    22         if (typeof name != "string") {
    23             InspectorTest.log("Unexpected property name type: " + typeof name);
    24             return false;
    25         }
    26 
    27         if (name.toLowerCase() != name) {
    28             InspectorTest.log("Property name contains uppercase characters: " + name);
    29             return false;
    30         }
    31         return true;
    32     }
    33 
    34     function validateStyles()
     24    function validateSelectors()
    3525    {
    3626        for (var i = 0; i < nodeStyles.matchedRules.length; ++i) {
    3727            var rule = nodeStyles.matchedRules[i];
    38             if (rule.type != WebInspector.CSSRule.Type.Author)
     28            if (rule.type !== WebInspector.CSSRule.Type.Author)
    3929                continue;
    4030
    41             for (var j = 0; j < rule.style.properties.length; ++j) {
    42                 var property = rule.style.properties[j];
    43 
    44                 if (property.anonymous)
    45                     continue;
    46 
    47                 if (validatePropertyName(property.name))
    48                     InspectorTest.log("Property valid: " + property.name);
    49             }
     31            for (var selector of rule.selectors)
     32                InspectorTest.log(selector.text + " (" + selector.specificity.join(", ") + ")");
    5033        }
    5134
    … …  
    5639    {
    5740        nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
    58         validateStyles();
     41        validateSelectors();
    5942    }
    6043
    … …  
    6851                    nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
    6952                else
    70                     validateStyles();
     53                    validateSelectors();
    7154            } else {
    7255                InspectorTest.log("DOM node not found.");
    … …  
    7962</head>
    8063<body onload="runTest()">
    81     <p>Testing that the author rules returned by CSSStyleManager.stylesForNode have lowercase property names regardless of CSS source formatting.</p>
     64    <p>Testing that selectors have expected specificity values.</p>
    8265
    8366    <div id="node1"></div>

  • trunk/Source/JavaScriptCore/ChangeLog

    r175479 r175483  
     12014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Show Selector's Specificity
     4        https://bugs.webkit.org/show_bug.cgi?id=138189
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * inspector/protocol/CSS.json:
     9        Create a new named type CSSSelector to include a selector's text and specificity.
     10        The specificity tuple is optional as it may soon be made dynamic in some cases.
     11
    1122014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
    213

  • trunk/Source/JavaScriptCore/inspector/protocol/CSS.json

    r174906 r175483  
    6060        },
    6161        {
     62            "id": "CSSSelector",
     63            "type": "object",
     64            "properties": [
     65                { "name": "text", "type": "string", "description": "Canonicalized selector text." },
     66                { "name": "specificity", "optional": true, "type": "array", "items": { "type": "integer" }, "description": "Specificity (a, b, c) tuple. If missing the specificity is not known statically and may be dynamic." }
     67            ],
     68            "description": "CSS selector."
     69        },
     70        {
    6271            "id": "SelectorList",
    6372            "type": "object",
    6473            "properties": [
    65                 { "name": "selectors", "type": "array", "items": { "type": "string" }, "description": "Selectors in the list." },
     74                { "name": "selectors", "type": "array", "items": { "$ref": "CSSSelector" }, "description": "Selectors in the list." },
    6675                { "name": "text", "type": "string", "description": "Rule selector text." },
    6776                { "name": "range", "$ref": "SourceRange", "optional": true, "description": "Rule selector range in the underlying resource (if available)." }

  • trunk/Source/WebCore/ChangeLog

    r175481 r175483  
     12014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Show Selector's Specificity
     4        https://bugs.webkit.org/show_bug.cgi?id=138189
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Test: inspector/css/selector-specificity.html
     9
     10        * css/CSSSelector.h:
     11        Remove very stale comment. '*' is a starAtom now instead of a special -1 tag.
     12        Made the specificity masks public class constants.
     13
     14        * inspector/InspectorStyleSheet.h:
     15        * inspector/InspectorStyleSheet.cpp:
     16        (WebCore::InspectorStyle::buildArrayForComputedStyle):
     17        (WebCore::InspectorStyle::styleWithProperties):
     18        (WebCore::InspectorStyleSheet::buildObjectForStyleSheetInfo):
     19        Drive by use release() in some cases to reduce ref count churn.
     20
     21        (WebCore::buildObjectForSelectorHelper):
     22        (WebCore::selectorsFromSource):
     23        (WebCore::InspectorStyleSheet::buildObjectForSelector):
     24        (WebCore::InspectorStyleSheet::buildObjectForSelectorList):
     25        Build CSSSelector objects for SelectorLists.
     26
    1272014-11-03  Chris Dumez  <cdumez@apple.com>
    228

  • trunk/Source/WebCore/css/CSSSelector.cpp

    r175453 r175483  
    6262unsigned CSSSelector::specificity() const
    6363{
    64     // make sure the result doesn't overflow
    65     static const unsigned maxValueMask = 0xffffff;
    66     static const unsigned idMask = 0xff0000;
    67     static const unsigned classMask = 0xff00;
    68     static const unsigned elementMask = 0xff;
    69 
    7064    if (isForPage())
    7165        return specificityForPage() & maxValueMask;

  • trunk/Source/WebCore/css/CSSSelector.h

    r175446 r175483  
    4848        bool operator==(const CSSSelector&) const;
    4949
    50         // tag == -1 means apply to all elements (Selector = *)
     50        static const unsigned maxValueMask = 0xffffff;
     51        static const unsigned idMask = 0xff0000;
     52        static const unsigned classMask = 0xff00;
     53        static const unsigned elementMask = 0xff;
    5154
    5255        unsigned specificity() const;

  • trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp

    r174892 r175483  
    152152    TextPosition end = ContentSearchUtilities::textPositionFromOffset(range.end, *lineEndings);
    153153
    154     RefPtr<Inspector::Protocol::CSS::SourceRange> result = Inspector::Protocol::CSS::SourceRange::create()
     154    return Inspector::Protocol::CSS::SourceRange::create()
    155155        .setStartLine(start.m_line.zeroBasedInt())
    156156        .setStartColumn(start.m_column.zeroBasedInt())
    157157        .setEndLine(end.m_line.zeroBasedInt())
    158         .setEndColumn(end.m_column.zeroBasedInt());
    159     return result.release();
     158        .setEndColumn(end.m_column.zeroBasedInt())
     159        .release();
    160160}
    161161
    … …  
    328328            .setName(propertyEntry.name)
    329329            .setValue(propertyEntry.value);
    330         result->addItem(entry);
     330        result->addItem(entry.release());
    331331    }
    332332
    … …  
    604604                            .setName(shorthand)
    605605                            .setValue(shorthandValue(shorthand));
    606                         shorthandEntries->addItem(entry);
     606                        shorthandEntries->addItem(entry.release());
    607607                    }
    608608                }
    … …  
    615615    }
    616616
    617     RefPtr<Inspector::Protocol::CSS::CSSStyle> result = Inspector::Protocol::CSS::CSSStyle::create()
    618         .setCssProperties(propertiesObject)
    619         .setShorthandEntries(shorthandEntries);
    620     return result.release();
     617    return Inspector::Protocol::CSS::CSSStyle::create()
     618        .setCssProperties(propertiesObject.release())
     619        .setShorthandEntries(shorthandEntries.release())
     620        .release();
    621621}
    622622
    … …  
    982982    Document* document = styleSheet->ownerDocument();
    983983    Frame* frame = document ? document->frame() : nullptr;
    984     RefPtr<Inspector::Protocol::CSS::CSSStyleSheetHeader> result = Inspector::Protocol::CSS::CSSStyleSheetHeader::create()
     984    return Inspector::Protocol::CSS::CSSStyleSheetHeader::create()
    985985        .setStyleSheetId(id())
    986986        .setOrigin(m_origin)
    … …  
    988988        .setSourceURL(finalURL())
    989989        .setTitle(styleSheet->title())
    990         .setFrameId(m_pageAgent->frameId(frame));
    991 
    992     return result.release();
    993 }
    994 
    995 static PassRefPtr<Inspector::Protocol::Array<String>> selectorsFromSource(const CSSRuleSourceData* sourceData, const String& sheetText)
     990        .setFrameId(m_pageAgent->frameId(frame))
     991        .release();
     992}
     993
     994static PassRefPtr<Inspector::Protocol::CSS::CSSSelector> buildObjectForSelectorHelper(const String& selectorText, unsigned specificity)
     995{
     996    RefPtr<Inspector::Protocol::CSS::CSSSelector> selector = Inspector::Protocol::CSS::CSSSelector::create()
     997        .setText(selectorText);
     998
     999    RefPtr<Inspector::Protocol::Array<int>> tuple = Inspector::Protocol::Array<int>::create();
     1000    tuple->addItem(static_cast<int>((specificity & CSSSelector::idMask) >> 16));
     1001    tuple->addItem(static_cast<int>((specificity & CSSSelector::classMask) >> 8));
     1002    tuple->addItem(static_cast<int>(specificity & CSSSelector::elementMask));
     1003    selector->setSpecificity(tuple.release());
     1004
     1005    return selector.release();
     1006}
     1007
     1008static PassRefPtr<Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSSelector>> selectorsFromSource(const CSSRuleSourceData* sourceData, const String& sheetText, const CSSSelectorList& selectorList)
    9961009{
    9971010    DEPRECATED_DEFINE_STATIC_LOCAL(JSC::Yarr::RegularExpression, comment, ("/\\*[^]*?\\*/", TextCaseSensitive, JSC::Yarr::MultilineEnabled));
    998     RefPtr<Inspector::Protocol::Array<String>> result = Inspector::Protocol::Array<String>::create();
     1011
     1012    RefPtr<Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSSelector>> result = Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSSelector>::create();
    9991013    const SelectorRangeList& ranges = sourceData->selectorRanges;
     1014    const CSSSelector* selector = selectorList.first();
    10001015    for (size_t i = 0, size = ranges.size(); i < size; ++i) {
    10011016        const SourceRange& range = ranges.at(i);
    1002         String selector = sheetText.substring(range.start, range.length());
     1017        String selectorText = sheetText.substring(range.start, range.length());
    10031018
    10041019        // We don't want to see any comments in the selector components, only the meaningful parts.
    1005         replace(selector, comment, "");
    1006         result->addItem(selector.stripWhiteSpace());
     1020        replace(selectorText, comment, String());
     1021        result->addItem(buildObjectForSelectorHelper(selectorText.stripWhiteSpace(), selector->specificity()));
     1022
     1023        selector = CSSSelectorList::next(selector);
    10071024    }
    10081025    return result.release();
     1026}
     1027
     1028PassRefPtr<Inspector::Protocol::CSS::CSSSelector> InspectorStyleSheet::buildObjectForSelector(const CSSSelector* selector)
     1029{
     1030    return buildObjectForSelectorHelper(selector->selectorText(), selector->specificity());
    10091031}
    10101032
    … …  
    10141036    if (ensureParsedDataReady())
    10151037        sourceData = ruleSourceDataFor(&rule->style());
    1016     RefPtr<Inspector::Protocol::Array<String>> selectors;
     1038    RefPtr<Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSSelector>> selectors;
    10171039
    10181040    // This intentionally does not rely on the source data to avoid catching the trailing comments (before the declaration starting '{').
    … …  
    10201042
    10211043    if (sourceData)
    1022         selectors = selectorsFromSource(sourceData.get(), m_parsedStyleSheet->text());
     1044        selectors = selectorsFromSource(sourceData.get(), m_parsedStyleSheet->text(), rule->styleRule()->selectorList());
    10231045    else {
    1024         selectors = Inspector::Protocol::Array<String>::create();
     1046        selectors = Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSSelector>::create();
    10251047        const CSSSelectorList& selectorList = rule->styleRule()->selectorList();
    10261048        for (const CSSSelector* selector = selectorList.first(); selector; selector = CSSSelectorList::next(selector))
    1027             selectors->addItem(selector->selectorText());
     1049            selectors->addItem(buildObjectForSelector(selector));
    10281050    }
    10291051    RefPtr<Inspector::Protocol::CSS::SelectorList> result = Inspector::Protocol::CSS::SelectorList::create()
    1030         .setSelectors(selectors)
     1052        .setSelectors(selectors.release())
    10311053        .setText(selectorText)
    10321054        .release();
    … …  
    10751097    InspectorCSSId id = ruleOrStyleId(style);
    10761098    if (id.isEmpty()) {
    1077         RefPtr<Inspector::Protocol::CSS::CSSStyle> bogusStyle = Inspector::Protocol::CSS::CSSStyle::create()
     1099        return Inspector::Protocol::CSS::CSSStyle::create()
    10781100            .setCssProperties(Array<Inspector::Protocol::CSS::CSSProperty>::create())
    1079             .setShorthandEntries(Array<Inspector::Protocol::CSS::ShorthandEntry>::create());
    1080         return bogusStyle.release();
     1101            .setShorthandEntries(Array<Inspector::Protocol::CSS::ShorthandEntry>::create())
     1102            .release();
    10811103    }
    10821104    RefPtr<InspectorStyle> inspectorStyle = inspectorStyleForId(id);
    … …  
    11761198
    11771199    InspectorStyleMap::iterator it = m_inspectorStyles.find(style);
    1178     if (it == m_inspectorStyles.end()) {
    1179         RefPtr<InspectorStyle> inspectorStyle = InspectorStyle::create(id, style, this);
    1180         return inspectorStyle.release();
    1181     }
     1200    if (it == m_inspectorStyles.end())
     1201        return InspectorStyle::create(id, style, this);
    11821202    return it->value;
    11831203}

  • trunk/Source/WebCore/inspector/InspectorStyleSheet.h

    r175355 r175483  
    4444
    4545class CSSRuleList;
     46class CSSSelector;
    4647class CSSStyleDeclaration;
    4748class CSSStyleRule;
    … …  
    244245    bool inlineStyleSheetText(String* result) const;
    245246    PassRefPtr<Inspector::Protocol::Array<Inspector::Protocol::CSS::CSSRule>> buildArrayForRuleList(CSSRuleList*);
     247    PassRefPtr<Inspector::Protocol::CSS::CSSSelector> buildObjectForSelector(const CSSSelector*);
    246248    PassRefPtr<Inspector::Protocol::CSS::SelectorList> buildObjectForSelectorList(CSSStyleRule*);
    247249

  • trunk/Source/WebInspectorUI/ChangeLog

    r175478 r175483  
     12014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: Show Selector's Specificity
     4        https://bugs.webkit.org/show_bug.cgi?id=138189
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Main.html:
     10        * UserInterface/Test.html:
     11        Add new files and strings.
     12
     13        * UserInterface/Models/CSSMedia.js:
     14        Constructor functions are not needed, remove unnecessary code.
     15
     16        * UserInterface/Models/CSSRule.js:
     17        (WebInspector.CSSRule.prototype.set selectors): Deleted.
     18        This was unused and is no longer correct.
     19
     20        (WebInspector.CSSRule.prototype.get matchedSelectorText):
     21        Update now that selectors are a list of objects, not just strings.
     22
     23        * UserInterface/Models/CSSSelector.js:
     24        (WebInspector.CSSSelector):
     25        (WebInspector.CSSSelector.prototype.get specificity):
     26        New model object for protocol type CSS.CSSSelector.
     27
     28        * UserInterface/Models/DOMNodeStyles.js:
     29        (WebInspector.DOMNodeStyles.prototype._parseSelectorListPayload.return):
     30        (WebInspector.DOMNodeStyles.prototype._parseSelectorListPayload):
     31        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
     32        Handle parsing old and new SelectorLists.
     33
     34        * UserInterface/Views/CSSStyleDeclarationSection.js:
     35        (WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelector):
     36        (WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelectorText):
     37        (WebInspector.CSSStyleDeclarationSection.prototype.refresh):
     38        Update the code now that the list of selectors are model objects instead
     39        of just selector text strings.
     40
    1412014-11-03  Joseph Pecoraro  <pecoraro@apple.com>
    242

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

    r174216 r175483  
    405405localizedStrings["Sockets"] = "Sockets";
    406406localizedStrings["Source Code"] = "Source Code";
     407localizedStrings["Specificity: (%d, %d, %d) ≈ %d"] = "Specificity: (%d, %d, %d) ≈ %d";
    407408localizedStrings["Spelling"] = "Spelling";
    408409localizedStrings["Start Playback"] = "Start Playback";

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

    r174926 r175483  
    213213    <script src="Models/CSSProperty.js"></script>
    214214    <script src="Models/CSSRule.js"></script>
     215    <script src="Models/CSSSelector.js"></script>
    215216    <script src="Models/CSSStyleDeclaration.js"></script>
    216217    <script src="Models/CSSStyleSheet.js"></script>

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

    r164543 r175483  
    3333};
    3434
    35 WebInspector.Object.addConstructorFunctions(WebInspector.CSSMedia);
    36 
    3735WebInspector.CSSMedia.Type = {
    3836    MediaRule: "css-media-type-media-rule",

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

    r164543 r175483  
    140140    },
    141141
    142     set selectors(selectors)
    143     {
    144         this.selectorText = (selectors || []).join(", ");
    145     },
    146 
    147142    get matchedSelectorIndices()
    148143    {
    … …  
    179174            return this._matchedSelectorText;
    180175
    181         this._matchedSelectorText = this.matchedSelectors.join(", ");
     176        this._matchedSelectorText = this.matchedSelectors.map(function(x) { return x.text; }).join(", ");
    182177
    183178        return this._matchedSelectorText;

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

    r175482 r175483  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.CSSMedia = function(type, text, sourceCodeLocation)
     26WebInspector.CSSSelector = function(text, specificity)
    2727{
    2828    WebInspector.Object.call(this);
    2929
    30     this._type = type || null;
    31     this._text = text || "";
    32     this._sourceCodeLocation = sourceCodeLocation || null;
     30    console.assert(text);
     31
     32    this._text = text;
     33    this._specificity = specificity || null;
    3334};
    3435
    35 WebInspector.Object.addConstructorFunctions(WebInspector.CSSMedia);
    36 
    37 WebInspector.CSSMedia.Type = {
    38     MediaRule: "css-media-type-media-rule",
    39     ImportRule: "css-media-type-import-rule",
    40     LinkedStyleSheet: "css-media-type-linked-stylesheet",
    41     InlineStyleSheet: "css-media-type-inline-stylesheet"
    42 };
    43 
    44 WebInspector.CSSMedia.prototype = {
    45     constructor: WebInspector.CSSMedia,
     36WebInspector.CSSSelector.prototype = {
     37    constructor: WebInspector.CSSSelector,
     38    __proto__: WebInspector.Object.prototype,
    4639
    4740    // Public
    48 
    49     get type()
    50     {
    51         return this._type;
    52     },
    5341
    5442    get text()
    … …  
    5745    },
    5846
    59     get sourceCodeLocation()
     47    get specificity()
    6048    {
    61         return this._sourceCodeLocation;
     49        return this._specificity;
    6250    }
    6351};
    64 
    65 WebInspector.CSSMedia.prototype.__proto__ = WebInspector.Object.prototype;

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

    r173492 r175483  
    746746    },
    747747
     748    _parseSelectorListPayload: function(selectorList)
     749    {
     750        // COMPATIBILITY (iOS 6): The payload did not have 'selectorList'.
     751        if (!selectorList)
     752            return [];
     753
     754        var selectors = selectorList.selectors;
     755        if (!selectors.length)
     756            return [];
     757
     758        // COMPATIBILITY (iOS 8): The selectorList payload was an array of selector text strings.
     759        // Now they are CSSSelector objects with multiple properties.
     760        if (typeof selectors[0] === "string") {
     761            return selectors.map(function(selectorText) {
     762                return new WebInspector.CSSSelector(selectorText);
     763            });
     764        }
     765
     766        return selectors.map(function(selectorPayload) {
     767            return new WebInspector.CSSSelector(selectorPayload.text, selectorPayload.specificity);
     768        });
     769    },
     770
    748771    _parseRulePayload: function(payload, matchedSelectorIndices, node, inherited, ruleOccurrences)
    749772    {
    … …  
    792815        // now it has 'selectorList' with a 'text' property. Support both here.
    793816        var selectorText = payload.selectorList ? payload.selectorList.text : payload.selectorText;
    794         var selectors = payload.selectorList ? payload.selectorList.selectors : [];
     817        var selectors = this._parseSelectorListPayload(payload.selectorList);
    795818
    796819        // COMPATIBILITY (iOS 6): The payload did not have 'selectorList'.

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

    r173992 r175483  
    7575    <script src="Models/CSSProperty.js"></script>
    7676    <script src="Models/CSSRule.js"></script>
     77    <script src="Models/CSSSelector.js"></script>
    7778    <script src="Models/CSSStyleDeclaration.js"></script>
    7879    <script src="Models/CSSStyleSheet.js"></script>

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

    r164543 r175483  
    169169        this._originElement.appendChild(document.createTextNode(" \u2014 "));
    170170
    171         function appendSelector(selectorText, matched)
     171        function appendSelector(selector, matched)
     172        {
     173            console.assert(selector instanceof WebInspector.CSSSelector);
     174
     175            var selectorElement = document.createElement("span");
     176            selectorElement.textContent = selector.text;
     177
     178            if (matched)
     179                selectorElement.className = WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName;
     180
     181            var specificity = selector.specificity;
     182            if (specificity) {
     183                var approximatedSpecificity = (specificity[0] * 100) + (specificity[1] * 10) + specificity[2];
     184                selectorElement.title = WebInspector.UIString("Specificity: (%d, %d, %d) ≈ %d").format(specificity[0], specificity[1], specificity[2], approximatedSpecificity);
     185            }
     186
     187            this._selectorElement.appendChild(selectorElement);
     188        }
     189
     190        function appendSelectorTextKnownToMatch(selectorText)
    172191        {
    173192            var selectorElement = document.createElement("span");
    174             if (matched)
    175                 selectorElement.className = WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName;
    176193            selectorElement.textContent = selectorText;
     194            selectorElement.className = WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName;
    177195            this._selectorElement.appendChild(selectorElement);
    178196        }
    … …  
    191209                }
    192210            } else
    193                 appendSelector.call(this, this._style.ownerRule.selectorText, true);
     211                appendSelectorTextKnownToMatch.call(this, this._style.ownerRule.selectorText);
    194212
    195213            if (this._style.ownerRule.sourceCodeLocation) {
    … …  
    224242
    225243        case WebInspector.CSSStyleDeclaration.Type.Inline:
    226             appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
     244            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
    227245            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("Style Attribute")));
    228246            break;
    229247
    230248        case WebInspector.CSSStyleDeclaration.Type.Attribute:
    231             appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
     249            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
    232250            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("HTML Attributes")));
    233251            break;
Note: See TracChangeset for help on using the changeset viewer.