Diff
Modified: trunk/LayoutTests/ChangeLog (248326 => 248327)
--- trunk/LayoutTests/ChangeLog 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/LayoutTests/ChangeLog 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,3 +1,16 @@
+2019-08-06 Commit Queue <commit-qu...@webkit.org>
+
+ Unreviewed, rolling out r248289.
+ https://bugs.webkit.org/show_bug.cgi?id=200488
+
+ Broke internal builds (Requested by drousso on #webkit).
+
+ Reverted changeset:
+
+ "Web Inspector: Styles: show @supports CSS groupings"
+ https://bugs.webkit.org/show_bug.cgi?id=200419
+ https://trac.webkit.org/changeset/248289
+
2019-08-06 Russell Epstein <repst...@apple.com>
Updating Test Expectations for <rdar://53957264>, <rdar://53946482>, <rdar://53866783>
Modified: trunk/LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt (248326 => 248327)
--- trunk/LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt 2019-08-06 23:38:03 UTC (rev 248327)
@@ -790,9 +790,9 @@
"style": {
"cssProperties": [
{
- "name": "color",
- "value": "red",
- "text": "color: red;",
+ "name": "z-index",
+ "value": "0",
+ "text": "z-index: 0;",
"range": "<filtered>",
"implicit": false,
"status": "active"
@@ -803,269 +803,14 @@
"width": "",
"height": "",
"range": "<filtered>",
- "cssText": " color: red; "
+ "cssText": " z-index: 0; "
},
"sourceURL": "<filtered>",
- "ruleId": "<filtered>",
- "groupings": [
- {
- "text": "(min-width: 0px)",
- "type": "media-import-rule",
- "sourceURL": "<filtered>"
- }
- ]
- },
- "matchingSelectors": [
- 0
- ]
- },
- {
- "rule": {
- "selectorList": {
- "selectors": [
- {
- "text": "body",
- "specificity": [
- 0,
- 0,
- 1
- ]
- }
- ],
- "text": "body",
- "range": "<filtered>"
- },
- "sourceLine": "<filtered>",
- "origin": "regular",
- "style": {
- "cssProperties": [
- {
- "name": "color",
- "value": "red",
- "text": "color: red;",
- "range": "<filtered>",
- "implicit": false,
- "status": "active"
- }
- ],
- "shorthandEntries": [],
- "styleId": "<filtered>",
- "width": "",
- "height": "",
- "range": "<filtered>",
- "cssText": " color: red; "
- },
- "sourceURL": "<filtered>",
"ruleId": "<filtered>"
},
"matchingSelectors": [
0
]
- },
- {
- "rule": {
- "selectorList": {
- "selectors": [
- {
- "text": "body",
- "specificity": [
- 0,
- 0,
- 1
- ]
- }
- ],
- "text": "body",
- "range": "<filtered>"
- },
- "sourceLine": "<filtered>",
- "origin": "regular",
- "style": {
- "cssProperties": [
- {
- "name": "color",
- "value": "red",
- "text": "color: red;",
- "range": "<filtered>",
- "implicit": false,
- "status": "active"
- }
- ],
- "shorthandEntries": [],
- "styleId": "<filtered>",
- "width": "",
- "height": "",
- "range": "<filtered>",
- "cssText": " color: red; "
- },
- "sourceURL": "<filtered>",
- "ruleId": "<filtered>",
- "groupings": [
- {
- "text": "(min-width: 1px)",
- "type": "media-rule",
- "sourceURL": "<filtered>"
- }
- ]
- },
- "matchingSelectors": [
- 0
- ]
- },
- {
- "rule": {
- "selectorList": {
- "selectors": [
- {
- "text": "body",
- "specificity": [
- 0,
- 0,
- 1
- ]
- }
- ],
- "text": "body",
- "range": "<filtered>"
- },
- "sourceLine": "<filtered>",
- "origin": "regular",
- "style": {
- "cssProperties": [
- {
- "name": "color",
- "value": "red",
- "text": "color: red;",
- "range": "<filtered>",
- "implicit": false,
- "status": "active"
- }
- ],
- "shorthandEntries": [],
- "styleId": "<filtered>",
- "width": "",
- "height": "",
- "range": "<filtered>",
- "cssText": " color: red; "
- },
- "sourceURL": "<filtered>",
- "ruleId": "<filtered>",
- "groupings": [
- {
- "text": "(display: block)",
- "type": "supports-rule",
- "sourceURL": "<filtered>"
- },
- {
- "text": "(min-width: 2px)",
- "type": "media-rule",
- "sourceURL": "<filtered>"
- }
- ]
- },
- "matchingSelectors": [
- 0
- ]
- },
- {
- "rule": {
- "selectorList": {
- "selectors": [
- {
- "text": "body",
- "specificity": [
- 0,
- 0,
- 1
- ]
- }
- ],
- "text": "body",
- "range": "<filtered>"
- },
- "sourceLine": "<filtered>",
- "origin": "regular",
- "style": {
- "cssProperties": [
- {
- "name": "color",
- "value": "red",
- "text": "color: red;",
- "range": "<filtered>",
- "implicit": false,
- "status": "active"
- }
- ],
- "shorthandEntries": [],
- "styleId": "<filtered>",
- "width": "",
- "height": "",
- "range": "<filtered>",
- "cssText": " color: red;"
- },
- "sourceURL": "<filtered>",
- "ruleId": "<filtered>",
- "groupings": [
- {
- "text": "(min-width: 3px)",
- "type": "media-style-node",
- "sourceURL": "<filtered>"
- }
- ]
- },
- "matchingSelectors": [
- 0
- ]
- },
- {
- "rule": {
- "selectorList": {
- "selectors": [
- {
- "text": "body",
- "specificity": [
- 0,
- 0,
- 1
- ]
- }
- ],
- "text": "body",
- "range": "<filtered>"
- },
- "sourceLine": "<filtered>",
- "origin": "regular",
- "style": {
- "cssProperties": [
- {
- "name": "color",
- "value": "red",
- "text": "color: red;",
- "range": "<filtered>",
- "implicit": false,
- "status": "active"
- }
- ],
- "shorthandEntries": [],
- "styleId": "<filtered>",
- "width": "",
- "height": "",
- "range": "<filtered>",
- "cssText": " color: red; "
- },
- "sourceURL": "<filtered>",
- "ruleId": "<filtered>",
- "groupings": [
- {
- "text": "(min-width: 4px)",
- "type": "media-link-node",
- "sourceURL": "<filtered>"
- }
- ]
- },
- "matchingSelectors": [
- 0
- ]
}
]
}
Modified: trunk/LayoutTests/inspector/css/getMatchedStylesForNode.html (248326 => 248327)
--- trunk/LayoutTests/inspector/css/getMatchedStylesForNode.html 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/LayoutTests/inspector/css/getMatchedStylesForNode.html 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,36 +1,6 @@
<html>
<head>
<script src=""
-<style>
- @import url(resources/external.css?1) (min-width: 0px);
-
- body { color: red; }
- @media (min-width: 1px) { body { color: red; } }
- @media (min-width: 2px) { @supports(display: block) { body { color: red; } } }
-</style>
-<style media="(min-width: 3px)">
- body { color: red;}
-</style>
-<link rel="stylesheet" href="" media="(min-width: 4px)">
-<style>
- div#x { z-index: 100; }
- #x { z-index: 200; }
- div { z-index: 300; }
-
- div::first-line { z-index: 1; }
- div::first-letter { z-index: 2; }
- div::marker { z-index: 3; }
- div::before { z-index: 4; }
- div::after { z-index: 5; }
- div::selection { z-index: 6; }
- div::-webkit-scrollbar { z-index: 7; }
- div::-webkit-scrollbar-thumb { z-index: 8; }
- div::-webkit-scrollbar-button { z-index: 9; }
- div::-webkit-scrollbar-track { z-index: 10; }
- div::-webkit-scrollbar-track-piece { z-index: 11; }
- div::-webkit-scrollbar-corner { z-index: 12; }
- div::-webkit-resizer { z-index: 13; }
-</style>
<script>
function test()
{
@@ -105,7 +75,29 @@
</script>
</head>
<body _onLoad_="runTest()">
-<p>Testing CSS.getMatchedStylesForNode.</p>
-<div id="x"></div>
+ <p>Testing CSS.getMatchedStylesForNode.</p>
+
+ <style>
+ body { z-index: 0; }
+
+ div#x { z-index: 100; }
+ #x { z-index: 200; }
+ div { z-index: 300; }
+
+ div::first-line { z-index: 1; }
+ div::first-letter { z-index: 2; }
+ div::marker { z-index: 3; }
+ div::before { z-index: 4; }
+ div::after { z-index: 5; }
+ div::selection { z-index: 6; }
+ div::-webkit-scrollbar { z-index: 7; }
+ div::-webkit-scrollbar-thumb { z-index: 8; }
+ div::-webkit-scrollbar-button { z-index: 9; }
+ div::-webkit-scrollbar-track { z-index: 10; }
+ div::-webkit-scrollbar-track-piece { z-index: 11; }
+ div::-webkit-scrollbar-corner { z-index: 12; }
+ div::-webkit-resizer { z-index: 13; }
+ </style>
+ <div id="x"></div>
</body>
</html>
Modified: trunk/Source/_javascript_Core/ChangeLog (248326 => 248327)
--- trunk/Source/_javascript_Core/ChangeLog 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/_javascript_Core/ChangeLog 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,3 +1,16 @@
+2019-08-06 Commit Queue <commit-qu...@webkit.org>
+
+ Unreviewed, rolling out r248289.
+ https://bugs.webkit.org/show_bug.cgi?id=200488
+
+ Broke internal builds (Requested by drousso on #webkit).
+
+ Reverted changeset:
+
+ "Web Inspector: Styles: show @supports CSS groupings"
+ https://bugs.webkit.org/show_bug.cgi?id=200419
+ https://trac.webkit.org/changeset/248289
+
2019-08-06 Devin Rousso <drou...@apple.com>
Web Inspector: allow comments in protocol JSON
Modified: trunk/Source/_javascript_Core/inspector/protocol/CSS.json (248326 => 248327)
--- trunk/Source/_javascript_Core/inspector/protocol/CSS.json 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/_javascript_Core/inspector/protocol/CSS.json 2019-08-06 23:38:03 UTC (rev 248327)
@@ -144,7 +144,7 @@
{ "name": "sourceLine", "type": "integer", "description": "Line ordinal of the rule selector start character in the resource."},
{ "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."},
{ "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." },
- { "name": "groupings", "type": "array", "items": { "$ref": "Grouping" }, "optional": true, "description": "Grouping list array (for rules involving @media/@supports). The array enumerates CSS groupings starting with the innermost one, going outwards." }
+ { "name": "media", "type": "array", "items": { "$ref": "CSSMedia" }, "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards." }
]
},
{
@@ -221,13 +221,14 @@
]
},
{
- "id": "Grouping",
+ "id": "CSSMedia",
"type": "object",
- "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.) and @supports descriptor.",
+ "description": "CSS media query descriptor.",
"properties": [
{ "name": "text", "type": "string", "description": "Media query text." },
- { "name": "type", "type": "string", "enum": ["media-rule", "media-import-rule", "media-link-node", "media-style-node", "supports-rule"], "description": "Source of the media query: \"media-rule\" if specified by a @media rule, \"media-import-rule\" if specified by an @import rule, \"media-link-node\" if specified by a \"media\" attribute in a linked style sheet's LINK tag, \"media-style-node\" if specified by a \"media\" attribute in an inline style sheet's STYLE tag, \"supports-rule\" if specified by an @supports rule, ." },
- { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." }
+ { "name": "source", "type": "string", "enum": ["mediaRule", "importRule", "linkedSheet", "inlineSheet"], "description": "Source of the media query: \"mediaRule\" if specified by a @media rule, \"importRule\" if specified by an @import rule, \"linkedSheet\" if specified by a \"media\" attribute in a linked stylesheet's LINK tag, \"inlineSheet\" if specified by a \"media\" attribute in an inline stylesheet's STYLE tag." },
+ { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." },
+ { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." }
]
}
],
Modified: trunk/Source/WebCore/ChangeLog (248326 => 248327)
--- trunk/Source/WebCore/ChangeLog 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebCore/ChangeLog 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,3 +1,16 @@
+2019-08-06 Commit Queue <commit-qu...@webkit.org>
+
+ Unreviewed, rolling out r248289.
+ https://bugs.webkit.org/show_bug.cgi?id=200488
+
+ Broke internal builds (Requested by drousso on #webkit).
+
+ Reverted changeset:
+
+ "Web Inspector: Styles: show @supports CSS groupings"
+ https://bugs.webkit.org/show_bug.cgi?id=200419
+ https://trac.webkit.org/changeset/248289
+
2019-08-06 Chris Dumez <cdu...@apple.com>
Fix inefficiency in HTTPHeaderMap::set(CFStringRef, const String&)
Modified: trunk/Source/WebCore/css/MediaList.cpp (248326 => 248327)
--- trunk/Source/WebCore/css/MediaList.cpp 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebCore/css/MediaList.cpp 2019-08-06 23:38:03 UTC (rev 248327)
@@ -73,6 +73,7 @@
MediaQuerySet::MediaQuerySet(const MediaQuerySet& o)
: RefCounted()
+ , m_lastLine(o.m_lastLine)
, m_queries(o.m_queries)
{
}
Modified: trunk/Source/WebCore/css/MediaList.h (248326 => 248327)
--- trunk/Source/WebCore/css/MediaList.h 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebCore/css/MediaList.h 2019-08-06 23:38:03 UTC (rev 248327)
@@ -56,6 +56,9 @@
const Vector<MediaQuery>& queryVector() const { return m_queries; }
+ int lastLine() const { return m_lastLine; }
+ void setLastLine(int lastLine) { m_lastLine = lastLine; }
+
WEBCORE_EXPORT String mediaText() const;
Ref<MediaQuerySet> copy() const { return adoptRef(*new MediaQuerySet(*this)); }
@@ -67,6 +70,7 @@
WEBCORE_EXPORT MediaQuerySet(const String& mediaQuery);
MediaQuerySet(const MediaQuerySet&);
+ int m_lastLine { 0 };
Vector<MediaQuery> m_queries;
};
Modified: trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp (248326 => 248327)
--- trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp 2019-08-06 23:38:03 UTC (rev 248327)
@@ -379,6 +379,13 @@
m_currentRuleDataStack.last()->styleSourceData->propertyData.append(CSSPropertySourceData(propertyData.name, propertyData.value, false, true, true, SourceRange(startOffset - topRuleBodyRange.start, endOffset - topRuleBodyRange.start)));
}
+enum MediaListSource {
+ MediaListSourceLinkedSheet,
+ MediaListSourceInlineSheet,
+ MediaListSourceMediaRule,
+ MediaListSourceImportRule
+};
+
static RefPtr<Inspector::Protocol::CSS::SourceRange> buildSourceRangeObject(const SourceRange& range, const Vector<size_t>& lineEndings, int* endingLine = nullptr)
{
if (lineEndings.isEmpty())
@@ -398,6 +405,37 @@
.release();
}
+static Ref<Inspector::Protocol::CSS::CSSMedia> buildMediaObject(const MediaList* media, MediaListSource mediaListSource, const String& sourceURL)
+{
+ // Make certain compilers happy by initializing |source| up-front.
+ Inspector::Protocol::CSS::CSSMedia::Source source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet;
+ switch (mediaListSource) {
+ case MediaListSourceMediaRule:
+ source = Inspector::Protocol::CSS::CSSMedia::Source::MediaRule;
+ break;
+ case MediaListSourceImportRule:
+ source = Inspector::Protocol::CSS::CSSMedia::Source::ImportRule;
+ break;
+ case MediaListSourceLinkedSheet:
+ source = Inspector::Protocol::CSS::CSSMedia::Source::LinkedSheet;
+ break;
+ case MediaListSourceInlineSheet:
+ source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet;
+ break;
+ }
+
+ auto mediaObject = Inspector::Protocol::CSS::CSSMedia::create()
+ .setText(media->mediaText())
+ .setSource(source)
+ .release();
+
+ if (!sourceURL.isEmpty()) {
+ mediaObject->setSourceURL(sourceURL);
+ mediaObject->setSourceLine(media->queries()->lastLine());
+ }
+ return mediaObject;
+}
+
static RefPtr<CSSRuleList> asCSSRuleList(CSSStyleSheet* styleSheet)
{
if (!styleSheet)
@@ -427,85 +465,59 @@
return nullptr;
}
-static Ref<JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>> buildArrayForGroupings(CSSRule& rule)
+static void fillMediaListChain(CSSRule* rule, JSON::ArrayOf<Inspector::Protocol::CSS::CSSMedia>& mediaArray)
{
- auto groupingsPayload = JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>::create();
-
- auto* parentRule = &rule;
+ MediaList* mediaList;
+ CSSRule* parentRule = rule;
+ String sourceURL;
while (parentRule) {
- RefPtr<Inspector::Protocol::CSS::Grouping> ruleGroupingPayload;
+ CSSStyleSheet* parentStyleSheet = nullptr;
+ bool isMediaRule = true;
+ if (is<CSSMediaRule>(*parentRule)) {
+ CSSMediaRule& mediaRule = downcast<CSSMediaRule>(*parentRule);
+ mediaList = mediaRule.media();
+ parentStyleSheet = mediaRule.parentStyleSheet();
+ } else if (is<CSSImportRule>(*parentRule)) {
+ CSSImportRule& importRule = downcast<CSSImportRule>(*parentRule);
+ mediaList = &importRule.media();
+ parentStyleSheet = importRule.parentStyleSheet();
+ isMediaRule = false;
+ } else
+ mediaList = nullptr;
- if (is<CSSMediaRule>(parentRule)) {
- auto* media = downcast<CSSMediaRule>(parentRule)->media();
- if (media && media->length() && media->mediaText() != "all") {
- ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
- .setText(media->mediaText())
- .setType(Inspector::Protocol::CSS::Grouping::Type::MediaRule)
- .release();
- }
- } else if (is<CSSImportRule>(parentRule)) {
- auto& media = downcast<CSSImportRule>(parentRule)->media();
- if (media.length() && media.mediaText() != "all") {
- ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
- .setText(media.mediaText())
- .setType(Inspector::Protocol::CSS::Grouping::Type::MediaImportRule)
- .release();
- }
- } else if (is<CSSSupportsRule>(parentRule)) {
- ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
- .setText(downcast<CSSSupportsRule>(parentRule)->conditionText())
- .setType(Inspector::Protocol::CSS::Grouping::Type::SupportsRule)
- .release();
- }
+ if (parentStyleSheet) {
+ sourceURL = parentStyleSheet->contents().baseURL();
+ if (sourceURL.isEmpty())
+ sourceURL = InspectorDOMAgent::documentURLString(parentStyleSheet->ownerDocument());
+ } else
+ sourceURL = emptyString();
- if (ruleGroupingPayload) {
- if (auto* parentStyleSheet = parentRule->parentStyleSheet()) {
- String sourceURL = parentStyleSheet->contents().baseURL();
- if (sourceURL.isEmpty()) {
- if (auto* ownerDocument = parentStyleSheet->ownerDocument())
- sourceURL = InspectorDOMAgent::documentURLString(ownerDocument);
- }
- if (!sourceURL.isEmpty())
- ruleGroupingPayload->setSourceURL(sourceURL);
- }
+ if (mediaList && mediaList->length())
+ mediaArray.addItem(buildMediaObject(mediaList, isMediaRule ? MediaListSourceMediaRule : MediaListSourceImportRule, sourceURL));
- groupingsPayload->addItem(WTFMove(ruleGroupingPayload));
- }
-
- if (parentRule->parentRule()) {
+ if (parentRule->parentRule())
parentRule = parentRule->parentRule();
- continue;
- }
-
- auto* styleSheet = parentRule->parentStyleSheet();
- while (styleSheet) {
- auto* media = styleSheet->media();
- if (media && media->length() && media->mediaText() != "all") {
- auto sheetGroupingPayload = Inspector::Protocol::CSS::Grouping::create()
- .setText(media->mediaText())
- .setType(is<HTMLStyleElement>(styleSheet->ownerNode()) ? Inspector::Protocol::CSS::Grouping::Type::MediaStyleNode: Inspector::Protocol::CSS::Grouping::Type::MediaLinkNode)
- .release();
-
- String sourceURL;
- if (auto* ownerDocument = styleSheet->ownerDocument())
- sourceURL = ownerDocument->url();
- else if (!styleSheet->contents().baseURL().isEmpty())
- sourceURL = styleSheet->contents().baseURL();
- if (!sourceURL.isEmpty())
- sheetGroupingPayload->setSourceURL(sourceURL);
-
- groupingsPayload->addItem(WTFMove(sheetGroupingPayload));
+ else {
+ CSSStyleSheet* styleSheet = parentRule->parentStyleSheet();
+ while (styleSheet) {
+ mediaList = styleSheet->media();
+ if (mediaList && mediaList->length()) {
+ Document* doc = styleSheet->ownerDocument();
+ if (doc)
+ sourceURL = doc->url();
+ else if (!styleSheet->contents().baseURL().isEmpty())
+ sourceURL = styleSheet->contents().baseURL();
+ else
+ sourceURL = emptyString();
+ mediaArray.addItem(buildMediaObject(mediaList, styleSheet->ownerNode() ? MediaListSourceLinkedSheet : MediaListSourceInlineSheet, sourceURL));
+ }
+ parentRule = styleSheet->ownerRule();
+ if (parentRule)
+ break;
+ styleSheet = styleSheet->parentStyleSheet();
}
-
- parentRule = styleSheet->ownerRule();
- if (parentRule)
- break;
-
- styleSheet = styleSheet->parentStyleSheet();
}
}
-
- return groupingsPayload;
}
Ref<InspectorStyle> InspectorStyle::create(const InspectorCSSId& styleId, Ref<CSSStyleDeclaration>&& style, InspectorStyleSheet* parentStyleSheet)
@@ -1161,10 +1173,12 @@
result->setRuleId(id.asProtocolValue<Inspector::Protocol::CSS::CSSRuleId>());
}
- auto groupingsPayload = buildArrayForGroupings(*rule);
- if (groupingsPayload->length())
- result->setGroupings(WTFMove(groupingsPayload));
+ auto mediaArray = ArrayOf<Inspector::Protocol::CSS::CSSMedia>::create();
+ fillMediaListChain(rule, mediaArray.get());
+ if (mediaArray->length())
+ result->setMedia(WTFMove(mediaArray));
+
return result;
}
Modified: trunk/Source/WebInspectorUI/ChangeLog (248326 => 248327)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,3 +1,16 @@
+2019-08-06 Commit Queue <commit-qu...@webkit.org>
+
+ Unreviewed, rolling out r248289.
+ https://bugs.webkit.org/show_bug.cgi?id=200488
+
+ Broke internal builds (Requested by drousso on #webkit).
+
+ Reverted changeset:
+
+ "Web Inspector: Styles: show @supports CSS groupings"
+ https://bugs.webkit.org/show_bug.cgi?id=200419
+ https://trac.webkit.org/changeset/248289
+
2019-08-06 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: RTL: go-to arrows and expand triangles in Computed panel should match their context
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -81,22 +81,21 @@
}
}
- static protocolGroupingTypeToEnum(type)
+ static protocolMediaSourceToEnum(source)
{
- // COMPATIBILITY (iOS 13): CSS.Grouping did not exist yet.
- if (!InspectorBackend.domains.CSS.Grouping) {
- switch (type) {
- case "mediaRule":
- return WI.CSSGrouping.Type.MediaRule;
- case "importRule":
- return WI.CSSGrouping.Type.MediaImportRule;
- case "linkedSheet":
- return WI.CSSGrouping.Type.MediaLinkNode;
- case "inlineSheet":
- return WI.CSSGrouping.Type.MediaStyleNode;
- }
+ switch (source) {
+ case CSSAgent.CSSMediaSource.MediaRule:
+ return WI.CSSMedia.Type.MediaRule;
+ case CSSAgent.CSSMediaSource.ImportRule:
+ return WI.CSSMedia.Type.ImportRule;
+ case CSSAgent.CSSMediaSource.LinkedSheet:
+ return WI.CSSMedia.Type.LinkedStyleSheet;
+ case CSSAgent.CSSMediaSource.InlineSheet:
+ return WI.CSSMedia.Type.InlineStyleSheet;
+ default:
+ console.assert(false, "Unknown CSS.CSSMediaSource", source);
+ return WI.CSSMedia.Type.MediaRule;
}
- return type;
}
static displayNameForPseudoId(pseudoId)
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-08-06 23:38:03 UTC (rev 248327)
@@ -361,8 +361,8 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Deleted: trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -1,74 +0,0 @@
-/*
- * Copyright (C) 2019 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WI.CSSGrouping = class CSSGrouping
-{
- constructor(type, text, sourceCodeLocation)
- {
- console.assert(Object.values(CSSGrouping.Type).includes(type));
- console.assert(typeof text === "string" && text.length);
- console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WI.SourceCodeLocation);
-
- this._type = type;
- this._text = text;
- this._sourceCodeLocation = sourceCodeLocation || null;
- }
-
- // Public
-
- get type() { return this._type; }
- get text() { return this._text; }
- get sourceCodeLocation() { return this._sourceCodeLocation; }
-
- get isMedia()
- {
- return this._type === WI.CSSGrouping.Type.MediaRule
- || this._type === WI.CSSGrouping.Type.MediaImportRule
- || this._type === WI.CSSGrouping.Type.MediaLinkNode
- || this._type === WI.CSSGrouping.Type.MediaStyleNode;
- }
-
- get isSupports()
- {
- return this._type === WI.CSSGrouping.Type.SupportsRule;
- }
-
- get prefix()
- {
- if (this.isSupports)
- return "@supports";
-
- console.assert(this.isMedia);
- return "@media";
- }
-};
-
-WI.CSSGrouping.Type = {
- MediaRule: "media-rule",
- MediaImportRule: "media-import-rule",
- MediaLinkNode: "media-link-node",
- MediaStyleNode: "media-style-node",
- SupportsRule: "supports-rule",
-};
Copied: trunk/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js (from rev 248326, trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js) (0 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.CSSMedia = class CSSMedia
+{
+ constructor(type, text, sourceCodeLocation)
+ {
+ console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WI.SourceCodeLocation);
+
+ this._type = type || null;
+ this._text = text || "";
+ this._sourceCodeLocation = sourceCodeLocation || null;
+ }
+
+ // Public
+
+ get type() { return this._type; }
+ get text() { return this._text; }
+ get sourceCodeLocation() { return this._sourceCodeLocation; }
+};
+
+WI.CSSMedia.Type = {
+ MediaRule: "css-media-type-media-rule",
+ ImportRule: "css-media-type-import-rule",
+ LinkedStyleSheet: "css-media-type-linked-stylesheet",
+ InlineStyleSheet: "css-media-type-inline-stylesheet"
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -25,7 +25,7 @@
WI.CSSRule = class CSSRule extends WI.Object
{
- constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)
+ constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
{
super();
@@ -37,26 +37,57 @@
this._type = type || null;
this._initialState = null;
- this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings, true);
+ this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true);
}
// Public
- get ownerStyleSheet() { return this._ownerStyleSheet; }
get id() { return this._id; }
- get type() { return this._type; }
get initialState() { return this._initialState; }
- get sourceCodeLocation() { return this._sourceCodeLocation; }
- get selectors() { return this._selectors; }
- get matchedSelectorIndices() { return this._matchedSelectorIndices; }
- get style() { return this._style; }
- get groupings() { return this._groupings; }
+ get ownerStyleSheet()
+ {
+ return this._ownerStyleSheet;
+ }
+
get editable()
{
return !!this._id && (this._type === WI.CSSStyleSheet.Type.Author || this._type === WI.CSSStyleSheet.Type.Inspector);
}
+ update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
+ {
+ sourceCodeLocation = sourceCodeLocation || null;
+ selectorText = selectorText || "";
+ selectors = selectors || [];
+ matchedSelectorIndices = matchedSelectorIndices || [];
+ style = style || null;
+ mediaList = mediaList || [];
+
+ if (this._style)
+ this._style.ownerRule = null;
+
+ this._sourceCodeLocation = sourceCodeLocation;
+ this._selectorText = selectorText;
+ this._selectors = selectors;
+ this._matchedSelectorIndices = matchedSelectorIndices;
+ this._style = style;
+ this._mediaList = mediaList;
+
+ if (this._style)
+ this._style.ownerRule = this;
+ }
+
+ get type()
+ {
+ return this._type;
+ }
+
+ get sourceCodeLocation()
+ {
+ return this._sourceCodeLocation;
+ }
+
get selectorText()
{
return this._selectorText;
@@ -76,27 +107,24 @@
this._nodeStyles.changeRuleSelector(this, selectorText).then(this._selectorResolved.bind(this), this._selectorRejected.bind(this));
}
- update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)
+ get selectors()
{
- sourceCodeLocation = sourceCodeLocation || null;
- selectorText = selectorText || "";
- selectors = selectors || [];
- matchedSelectorIndices = matchedSelectorIndices || [];
- style = style || null;
- groupings = groupings || [];
+ return this._selectors;
+ }
- if (this._style)
- this._style.ownerRule = null;
+ get matchedSelectorIndices()
+ {
+ return this._matchedSelectorIndices;
+ }
- this._sourceCodeLocation = sourceCodeLocation;
- this._selectorText = selectorText;
- this._selectors = selectors;
- this._matchedSelectorIndices = matchedSelectorIndices;
- this._style = style;
- this._groupings = groupings;
+ get style()
+ {
+ return this._style;
+ }
- if (this._style)
- this._style.ownerRule = this;
+ get mediaList()
+ {
+ return this._mediaList;
}
isEqualTo(rule)
@@ -145,7 +173,7 @@
sourceCodeLocation = this._ownerStyleSheet.offsetSourceCodeLocation(sourceCodeLocation);
}
- this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._groupings);
+ this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._mediaList);
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -287,10 +287,10 @@
return this._styleSheetTextRange;
}
- get groupings()
+ get mediaList()
{
if (this._ownerRule)
- return this._ownerRule.groupings;
+ return this._ownerRule.mediaList;
return [];
}
@@ -511,17 +511,17 @@
{
let indentString = WI.indentString();
let styleText = "";
- let groupings = this.groupings.filter((grouping) => grouping.text !== "all");
- let groupingsCount = groupings.length;
- for (let i = groupingsCount - 1; i >= 0; --i)
- styleText += indentString.repeat(groupingsCount - i - 1) + groupings[i].prefix + " " + groupings[i].text + " {\n";
+ let mediaList = this.mediaList.filter((media) => media.text !== "all");
+ let mediaQueriesCount = mediaList.length;
+ for (let i = mediaQueriesCount - 1; i >= 0; --i)
+ styleText += indentString.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
- styleText += indentString.repeat(groupingsCount) + this.selectorText + " {\n";
+ styleText += indentString.repeat(mediaQueriesCount) + this.selectorText + " {\n";
for (let property of (this._styleSheetTextRange ? this.visibleProperties : this._properties))
- styleText += indentString.repeat(groupingsCount + 1) + property.formattedText + "\n";
+ styleText += indentString.repeat(mediaQueriesCount + 1) + property.formattedText + "\n";
- for (let i = groupingsCount; i > 0; --i)
+ for (let i = mediaQueriesCount; i > 0; --i)
styleText += indentString.repeat(i) + "}\n";
styleText += "}";
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -123,14 +123,10 @@
// Public
- get node() { return this._node; }
- get matchedRules() { return this._matchedRules; }
- get inheritedRules() { return this._inheritedRules; }
- get inlineStyle() { return this._inlineStyle; }
- get attributesStyle() { return this._attributesStyle; }
- get pseudoElements() { return this._pseudoElements; }
- get computedStyle() { return this._computedStyle; }
- get orderedStyles() { return this._orderedStyles; }
+ get node()
+ {
+ return this._node;
+ }
get needsRefresh()
{
@@ -137,11 +133,6 @@
return this._pendingRefreshTask || this._needsRefresh;
}
- get uniqueOrderedStyles()
- {
- return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles);
- }
-
refreshIfNeeded()
{
if (this._pendingRefreshTask)
@@ -384,6 +375,62 @@
WI.cssManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
}
+ rulesForSelector(selector)
+ {
+ selector = selector || this._node.appropriateSelectorFor(true);
+
+ function ruleHasSelector(rule) {
+ return !rule.mediaList.length && rule.selectorText === selector;
+ }
+
+ let rules = this._matchedRules.filter(ruleHasSelector);
+
+ for (let pseudoElementInfo of this._pseudoElements.values())
+ rules = rules.concat(pseudoElementInfo.matchedRules.filter(ruleHasSelector));
+
+ return rules;
+ }
+
+ get matchedRules()
+ {
+ return this._matchedRules;
+ }
+
+ get inheritedRules()
+ {
+ return this._inheritedRules;
+ }
+
+ get inlineStyle()
+ {
+ return this._inlineStyle;
+ }
+
+ get attributesStyle()
+ {
+ return this._attributesStyle;
+ }
+
+ get pseudoElements()
+ {
+ return this._pseudoElements;
+ }
+
+ get computedStyle()
+ {
+ return this._computedStyle;
+ }
+
+ get orderedStyles()
+ {
+ return this._orderedStyles;
+ }
+
+ get uniqueOrderedStyles()
+ {
+ return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles);
+ }
+
effectivePropertyForName(name)
{
let property = this._propertyNameToEffectivePropertyMap[name];
@@ -684,17 +731,20 @@
sourceCodeLocation = styleSheet.offsetSourceCodeLocation(sourceCodeLocation);
}
- // COMPATIBILITY (iOS 13): CSS.CSSRule.groupings did not exist yet.
- let groupings = (payload.groupings || payload.media || []).map((grouping) => {
- let groupingType = WI.CSSManager.protocolGroupingTypeToEnum(grouping.type || grouping.source);
- let groupingSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(grouping.sourceURL);
+ var mediaList = [];
+ for (var i = 0; payload.media && i < payload.media.length; ++i) {
+ var mediaItem = payload.media[i];
+ var mediaType = WI.CSSManager.protocolMediaSourceToEnum(mediaItem.source);
+ var mediaText = mediaItem.text;
+ let mediaSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(mediaItem.sourceURL, {line: mediaItem.sourceLine});
if (styleSheet)
- groupingSourceCodeLocation = styleSheet.offsetSourceCodeLocation(groupingSourceCodeLocation);
- return new WI.CSSGrouping(groupingType, grouping.text, groupingSourceCodeLocation);
- });
+ mediaSourceCodeLocation = styleSheet.offsetSourceCodeLocation(mediaSourceCodeLocation);
+ mediaList.push(new WI.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation));
+ }
+
if (rule) {
- rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);
+ rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
return rule;
}
@@ -701,7 +751,7 @@
if (styleSheet)
styleSheet.addEventListener(WI.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
- rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);
+ rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
if (mapKey)
this._rulesMap.set(mapKey, rule);
Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Test.html 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2019-08-06 23:38:03 UTC (rev 248327)
@@ -124,8 +124,8 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2019-08-06 23:38:03 UTC (rev 248327)
@@ -39,11 +39,11 @@
-webkit-user-select: none;
}
-.spreadsheet-css-declaration :matches(.header, .header-groupings) {
+.spreadsheet-css-declaration :matches(.header, .header-media) {
padding: 0 var(--css-declaration-horizontal-padding);
}
-.spreadsheet-css-declaration :matches(.header, .header-groupings):first-child {
+.spreadsheet-css-declaration :matches(.header, .header-media):first-child {
padding-top: var(--css-declaration-vertical-padding);
}
@@ -56,7 +56,7 @@
right: var(--css-declaration-horizontal-padding);
}
-.spreadsheet-css-declaration .header-groupings > .grouping {
+.spreadsheet-css-declaration .media-label {
color: var(--text-color);
}
@@ -112,10 +112,6 @@
-webkit-user-select: none;
}
-.spreadsheet-css-declaration .header-groupings + .header > .selector > .icon {
- margin-top: 0;
-}
-
.spreadsheet-css-declaration .selector > .icon + * {
-webkit-padding-start: 2px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (248326 => 248327)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2019-08-06 23:24:26 UTC (rev 248326)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2019-08-06 23:38:03 UTC (rev 248327)
@@ -38,7 +38,7 @@
this._style = style;
this._propertiesEditor = null;
this._selectorElements = [];
- this._groupingElements = [];
+ this._mediaElements = [];
this._filterText = null;
this._shouldFocusSelectorElement = false;
this._wasEditing = false;
@@ -99,29 +99,7 @@
this._element.classList.add(iconClassName);
}
- let groupings = this._style.groupings.filter((grouping) => grouping.text !== "all");
- if (groupings.length) {
- let groupingsElement = this.element.appendChild(document.createElement("div"));
- groupingsElement.classList.add("header-groupings");
-
- let currentGroupingType = null;
- let groupingTypeElement = null;
- this._groupingElements = groupings.map((grouping) => {
- if (grouping.type !== currentGroupingType) {
- groupingTypeElement = groupingsElement.appendChild(document.createElement("div"));
- groupingTypeElement.classList.add("grouping");
- groupingTypeElement.textContent = grouping.prefix + " ";
- currentGroupingType = grouping.type;
- } else
- groupingTypeElement.append(", ");
-
- let span = groupingTypeElement.appendChild(document.createElement("span"));
- span.textContent = grouping.text;
- return span;
- });
- }
-
- this._headerElement = this._element.appendChild(document.createElement("div"));
+ this._headerElement = document.createElement("div");
this._headerElement.classList.add("header");
this._styleOriginView = new WI.StyleOriginView();
@@ -158,7 +136,7 @@
this._closeBrace.classList.add("close-brace");
this._closeBrace.textContent = "}";
-
+ this._element.append(this._createMediaHeader(), this._headerElement);
this.addSubview(this._propertiesEditor);
this._propertiesEditor.needsLayout();
this._element.append(this._closeBrace);
@@ -404,6 +382,31 @@
this.applyFilter(this._filterText);
}
+ _createMediaHeader()
+ {
+ let mediaList = this._style.mediaList;
+ if (!mediaList.length || (mediaList.length === 1 && (mediaList[0].text === "all" || mediaList[0].text === "screen")))
+ return "";
+
+ let mediaElement = document.createElement("div");
+ mediaElement.classList.add("header-media");
+
+ let mediaLabel = mediaElement.appendChild(document.createElement("div"));
+ mediaLabel.className = "media-label";
+ mediaLabel.append("@media ");
+
+ this._mediaElements = mediaList.map((media, i) => {
+ if (i)
+ mediaLabel.append(", ");
+
+ let span = mediaLabel.appendChild(document.createElement("span"));
+ span.textContent = media.text;
+ return span;
+ });
+
+ return mediaElement;
+ }
+
_save(event)
{
event.stop();
@@ -665,13 +668,13 @@
_handleEditorFilterApplied(event)
{
- let matchesGrouping = false;
- for (let groupingElement of this._groupingElements) {
- groupingElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+ let matchesMedia = false;
+ for (let mediaElement of this._mediaElements) {
+ mediaElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
- if (groupingElement.textContent.includes(this._filterText)) {
- groupingElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
- matchesGrouping = true;
+ if (mediaElement.textContent.includes(this._filterText)) {
+ mediaElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+ matchesMedia = true;
}
}
@@ -685,7 +688,7 @@
}
}
- let matches = event.data.matches || matchesGrouping || matchesSelector;
+ let matches = event.data.matches || matchesMedia || matchesSelector;
if (!matches)
this._element.classList.add(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
