Changeset 248327 in webkit
- Timestamp:
- Aug 6, 2019 4:38:03 PM (5 years ago)
- Location:
- trunk
- Files:
-
- 18 edited
- 1 moved
-
LayoutTests/ChangeLog (modified) (1 diff)
-
LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt (modified) (1 diff)
-
LayoutTests/inspector/css/getMatchedStylesForNode.html (modified) (2 diffs)
-
Source/JavaScriptCore/ChangeLog (modified) (1 diff)
-
Source/JavaScriptCore/inspector/protocol/CSS.json (modified) (2 diffs)
-
Source/WebCore/ChangeLog (modified) (1 diff)
-
Source/WebCore/css/MediaList.cpp (modified) (1 diff)
-
Source/WebCore/css/MediaList.h (modified) (2 diffs)
-
Source/WebCore/inspector/InspectorStyleSheet.cpp (modified) (4 diffs)
-
Source/WebInspectorUI/ChangeLog (modified) (1 diff)
-
Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js (modified) (1 diff)
-
Source/WebInspectorUI/UserInterface/Main.html (modified) (1 diff)
-
Source/WebInspectorUI/UserInterface/Models/CSSMedia.js (moved) (moved from trunk/Source/WebInspectorUI/UserInterface/Models/CSSGrouping.js) (3 diffs)
-
Source/WebInspectorUI/UserInterface/Models/CSSRule.js (modified) (4 diffs)
-
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js (modified) (2 diffs)
-
Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (modified) (4 diffs)
-
Source/WebInspectorUI/UserInterface/Test.html (modified) (1 diff)
-
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (modified) (3 diffs)
-
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (modified) (6 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r248312 r248327 1 2019-08-06 Commit Queue <commit-queue@webkit.org> 2 3 Unreviewed, rolling out r248289. 4 https://bugs.webkit.org/show_bug.cgi?id=200488 5 6 Broke internal builds (Requested by drousso on #webkit). 7 8 Reverted changeset: 9 10 "Web Inspector: Styles: show @supports CSS groupings" 11 https://bugs.webkit.org/show_bug.cgi?id=200419 12 https://trac.webkit.org/changeset/248289 13 1 14 2019-08-06 Russell Epstein <repstein@apple.com> 2 15 -
trunk/LayoutTests/inspector/css/getMatchedStylesForNode-expected.txt
r248289 r248327 791 791 "cssProperties": [ 792 792 { 793 "name": "color", 794 "value": "red", 795 "text": "color: red;", 796 "range": "<filtered>", 797 "implicit": false, 798 "status": "active" 799 } 800 ], 801 "shorthandEntries": [], 802 "styleId": "<filtered>", 803 "width": "", 804 "height": "", 805 "range": "<filtered>", 806 "cssText": " color: red; " 807 }, 808 "sourceURL": "<filtered>", 809 "ruleId": "<filtered>", 810 "groupings": [ 811 { 812 "text": "(min-width: 0px)", 813 "type": "media-import-rule", 814 "sourceURL": "<filtered>" 815 } 816 ] 817 }, 818 "matchingSelectors": [ 819 0 820 ] 821 }, 822 { 823 "rule": { 824 "selectorList": { 825 "selectors": [ 826 { 827 "text": "body", 828 "specificity": [ 829 0, 830 0, 831 1 832 ] 833 } 834 ], 835 "text": "body", 836 "range": "<filtered>" 837 }, 838 "sourceLine": "<filtered>", 839 "origin": "regular", 840 "style": { 841 "cssProperties": [ 842 { 843 "name": "color", 844 "value": "red", 845 "text": "color: red;", 846 "range": "<filtered>", 847 "implicit": false, 848 "status": "active" 849 } 850 ], 851 "shorthandEntries": [], 852 "styleId": "<filtered>", 853 "width": "", 854 "height": "", 855 "range": "<filtered>", 856 "cssText": " color: red; " 857 }, 858 "sourceURL": "<filtered>", 859 "ruleId": "<filtered>" 860 }, 861 "matchingSelectors": [ 862 0 863 ] 864 }, 865 { 866 "rule": { 867 "selectorList": { 868 "selectors": [ 869 { 870 "text": "body", 871 "specificity": [ 872 0, 873 0, 874 1 875 ] 876 } 877 ], 878 "text": "body", 879 "range": "<filtered>" 880 }, 881 "sourceLine": "<filtered>", 882 "origin": "regular", 883 "style": { 884 "cssProperties": [ 885 { 886 "name": "color", 887 "value": "red", 888 "text": "color: red;", 889 "range": "<filtered>", 890 "implicit": false, 891 "status": "active" 892 } 893 ], 894 "shorthandEntries": [], 895 "styleId": "<filtered>", 896 "width": "", 897 "height": "", 898 "range": "<filtered>", 899 "cssText": " color: red; " 900 }, 901 "sourceURL": "<filtered>", 902 "ruleId": "<filtered>", 903 "groupings": [ 904 { 905 "text": "(min-width: 1px)", 906 "type": "media-rule", 907 "sourceURL": "<filtered>" 908 } 909 ] 910 }, 911 "matchingSelectors": [ 912 0 913 ] 914 }, 915 { 916 "rule": { 917 "selectorList": { 918 "selectors": [ 919 { 920 "text": "body", 921 "specificity": [ 922 0, 923 0, 924 1 925 ] 926 } 927 ], 928 "text": "body", 929 "range": "<filtered>" 930 }, 931 "sourceLine": "<filtered>", 932 "origin": "regular", 933 "style": { 934 "cssProperties": [ 935 { 936 "name": "color", 937 "value": "red", 938 "text": "color: red;", 939 "range": "<filtered>", 940 "implicit": false, 941 "status": "active" 942 } 943 ], 944 "shorthandEntries": [], 945 "styleId": "<filtered>", 946 "width": "", 947 "height": "", 948 "range": "<filtered>", 949 "cssText": " color: red; " 950 }, 951 "sourceURL": "<filtered>", 952 "ruleId": "<filtered>", 953 "groupings": [ 954 { 955 "text": "(display: block)", 956 "type": "supports-rule", 957 "sourceURL": "<filtered>" 958 }, 959 { 960 "text": "(min-width: 2px)", 961 "type": "media-rule", 962 "sourceURL": "<filtered>" 963 } 964 ] 965 }, 966 "matchingSelectors": [ 967 0 968 ] 969 }, 970 { 971 "rule": { 972 "selectorList": { 973 "selectors": [ 974 { 975 "text": "body", 976 "specificity": [ 977 0, 978 0, 979 1 980 ] 981 } 982 ], 983 "text": "body", 984 "range": "<filtered>" 985 }, 986 "sourceLine": "<filtered>", 987 "origin": "regular", 988 "style": { 989 "cssProperties": [ 990 { 991 "name": "color", 992 "value": "red", 993 "text": "color: red;", 994 "range": "<filtered>", 995 "implicit": false, 996 "status": "active" 997 } 998 ], 999 "shorthandEntries": [], 1000 "styleId": "<filtered>", 1001 "width": "", 1002 "height": "", 1003 "range": "<filtered>", 1004 "cssText": " color: red;" 1005 }, 1006 "sourceURL": "<filtered>", 1007 "ruleId": "<filtered>", 1008 "groupings": [ 1009 { 1010 "text": "(min-width: 3px)", 1011 "type": "media-style-node", 1012 "sourceURL": "<filtered>" 1013 } 1014 ] 1015 }, 1016 "matchingSelectors": [ 1017 0 1018 ] 1019 }, 1020 { 1021 "rule": { 1022 "selectorList": { 1023 "selectors": [ 1024 { 1025 "text": "body", 1026 "specificity": [ 1027 0, 1028 0, 1029 1 1030 ] 1031 } 1032 ], 1033 "text": "body", 1034 "range": "<filtered>" 1035 }, 1036 "sourceLine": "<filtered>", 1037 "origin": "regular", 1038 "style": { 1039 "cssProperties": [ 1040 { 1041 "name": "color", 1042 "value": "red", 1043 "text": "color: red;", 1044 "range": "<filtered>", 1045 "implicit": false, 1046 "status": "active" 1047 } 1048 ], 1049 "shorthandEntries": [], 1050 "styleId": "<filtered>", 1051 "width": "", 1052 "height": "", 1053 "range": "<filtered>", 1054 "cssText": " color: red; " 1055 }, 1056 "sourceURL": "<filtered>", 1057 "ruleId": "<filtered>", 1058 "groupings": [ 1059 { 1060 "text": "(min-width: 4px)", 1061 "type": "media-link-node", 1062 "sourceURL": "<filtered>" 1063 } 1064 ] 793 "name": "z-index", 794 "value": "0", 795 "text": "z-index: 0;", 796 "range": "<filtered>", 797 "implicit": false, 798 "status": "active" 799 } 800 ], 801 "shorthandEntries": [], 802 "styleId": "<filtered>", 803 "width": "", 804 "height": "", 805 "range": "<filtered>", 806 "cssText": " z-index: 0; " 807 }, 808 "sourceURL": "<filtered>", 809 "ruleId": "<filtered>" 1065 810 }, 1066 811 "matchingSelectors": [ -
trunk/LayoutTests/inspector/css/getMatchedStylesForNode.html
r248289 r248327 2 2 <head> 3 3 <script src="../../http/tests/inspector/resources/protocol-test.js"></script> 4 <style>5 @import url(resources/external.css?1) (min-width: 0px);6 7 body { color: red; }8 @media (min-width: 1px) { body { color: red; } }9 @media (min-width: 2px) { @supports(display: block) { body { color: red; } } }10 </style>11 <style media="(min-width: 3px)">12 body { color: red;}13 </style>14 <link rel="stylesheet" href="resources/external.css?2" media="(min-width: 4px)">15 <style>16 div#x { z-index: 100; }17 #x { z-index: 200; }18 div { z-index: 300; }19 20 div::first-line { z-index: 1; }21 div::first-letter { z-index: 2; }22 div::marker { z-index: 3; }23 div::before { z-index: 4; }24 div::after { z-index: 5; }25 div::selection { z-index: 6; }26 div::-webkit-scrollbar { z-index: 7; }27 div::-webkit-scrollbar-thumb { z-index: 8; }28 div::-webkit-scrollbar-button { z-index: 9; }29 div::-webkit-scrollbar-track { z-index: 10; }30 div::-webkit-scrollbar-track-piece { z-index: 11; }31 div::-webkit-scrollbar-corner { z-index: 12; }32 div::-webkit-resizer { z-index: 13; }33 </style>34 4 <script> 35 5 function test() … … 106 76 </head> 107 77 <body onLoad="runTest()"> 108 <p>Testing CSS.getMatchedStylesForNode.</p> 109 <div id="x"></div> 78 <p>Testing CSS.getMatchedStylesForNode.</p> 79 80 <style> 81 body { z-index: 0; } 82 83 div#x { z-index: 100; } 84 #x { z-index: 200; } 85 div { z-index: 300; } 86 87 div::first-line { z-index: 1; } 88 div::first-letter { z-index: 2; } 89 div::marker { z-index: 3; } 90 div::before { z-index: 4; } 91 div::after { z-index: 5; } 92 div::selection { z-index: 6; } 93 div::-webkit-scrollbar { z-index: 7; } 94 div::-webkit-scrollbar-thumb { z-index: 8; } 95 div::-webkit-scrollbar-button { z-index: 9; } 96 div::-webkit-scrollbar-track { z-index: 10; } 97 div::-webkit-scrollbar-track-piece { z-index: 11; } 98 div::-webkit-scrollbar-corner { z-index: 12; } 99 div::-webkit-resizer { z-index: 13; } 100 </style> 101 <div id="x"></div> 110 102 </body> 111 103 </html> -
trunk/Source/JavaScriptCore/ChangeLog
r248320 r248327 1 2019-08-06 Commit Queue <commit-queue@webkit.org> 2 3 Unreviewed, rolling out r248289. 4 https://bugs.webkit.org/show_bug.cgi?id=200488 5 6 Broke internal builds (Requested by drousso on #webkit). 7 8 Reverted changeset: 9 10 "Web Inspector: Styles: show @supports CSS groupings" 11 https://bugs.webkit.org/show_bug.cgi?id=200419 12 https://trac.webkit.org/changeset/248289 13 1 14 2019-08-06 Devin Rousso <drousso@apple.com> 2 15 -
trunk/Source/JavaScriptCore/inspector/protocol/CSS.json
r248289 r248327 145 145 { "name": "origin", "$ref": "StyleSheetOrigin", "description": "Parent stylesheet's origin."}, 146 146 { "name": "style", "$ref": "CSSStyle", "description": "Associated style declaration." }, 147 { "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." }147 { "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." } 148 148 ] 149 149 }, … … 222 222 }, 223 223 { 224 "id": " Grouping",225 "type": "object", 226 "description": "CSS @media (as well as other users of media queries, like @import, <style>, <link>, etc.) and @supportsdescriptor.",224 "id": "CSSMedia", 225 "type": "object", 226 "description": "CSS media query descriptor.", 227 227 "properties": [ 228 228 { "name": "text", "type": "string", "description": "Media query text." }, 229 { "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, ." }, 230 { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." } 229 { "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." }, 230 { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the media query description." }, 231 { "name": "sourceLine", "type": "integer", "optional": true, "description": "Line in the document containing the media query (not defined for the \"stylesheet\" source)." } 231 232 ] 232 233 } -
trunk/Source/WebCore/ChangeLog
r248316 r248327 1 2019-08-06 Commit Queue <commit-queue@webkit.org> 2 3 Unreviewed, rolling out r248289. 4 https://bugs.webkit.org/show_bug.cgi?id=200488 5 6 Broke internal builds (Requested by drousso on #webkit). 7 8 Reverted changeset: 9 10 "Web Inspector: Styles: show @supports CSS groupings" 11 https://bugs.webkit.org/show_bug.cgi?id=200419 12 https://trac.webkit.org/changeset/248289 13 1 14 2019-08-06 Chris Dumez <cdumez@apple.com> 2 15 -
trunk/Source/WebCore/css/MediaList.cpp
r248289 r248327 74 74 MediaQuerySet::MediaQuerySet(const MediaQuerySet& o) 75 75 : RefCounted() 76 , m_lastLine(o.m_lastLine) 76 77 , m_queries(o.m_queries) 77 78 { -
trunk/Source/WebCore/css/MediaList.h
r248289 r248327 57 57 const Vector<MediaQuery>& queryVector() const { return m_queries; } 58 58 59 int lastLine() const { return m_lastLine; } 60 void setLastLine(int lastLine) { m_lastLine = lastLine; } 61 59 62 WEBCORE_EXPORT String mediaText() const; 60 63 … … 68 71 MediaQuerySet(const MediaQuerySet&); 69 72 73 int m_lastLine { 0 }; 70 74 Vector<MediaQuery> m_queries; 71 75 }; -
trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp
r248289 r248327 380 380 } 381 381 382 enum MediaListSource { 383 MediaListSourceLinkedSheet, 384 MediaListSourceInlineSheet, 385 MediaListSourceMediaRule, 386 MediaListSourceImportRule 387 }; 388 382 389 static RefPtr<Inspector::Protocol::CSS::SourceRange> buildSourceRangeObject(const SourceRange& range, const Vector<size_t>& lineEndings, int* endingLine = nullptr) 383 390 { … … 399 406 } 400 407 408 static Ref<Inspector::Protocol::CSS::CSSMedia> buildMediaObject(const MediaList* media, MediaListSource mediaListSource, const String& sourceURL) 409 { 410 // Make certain compilers happy by initializing |source| up-front. 411 Inspector::Protocol::CSS::CSSMedia::Source source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet; 412 switch (mediaListSource) { 413 case MediaListSourceMediaRule: 414 source = Inspector::Protocol::CSS::CSSMedia::Source::MediaRule; 415 break; 416 case MediaListSourceImportRule: 417 source = Inspector::Protocol::CSS::CSSMedia::Source::ImportRule; 418 break; 419 case MediaListSourceLinkedSheet: 420 source = Inspector::Protocol::CSS::CSSMedia::Source::LinkedSheet; 421 break; 422 case MediaListSourceInlineSheet: 423 source = Inspector::Protocol::CSS::CSSMedia::Source::InlineSheet; 424 break; 425 } 426 427 auto mediaObject = Inspector::Protocol::CSS::CSSMedia::create() 428 .setText(media->mediaText()) 429 .setSource(source) 430 .release(); 431 432 if (!sourceURL.isEmpty()) { 433 mediaObject->setSourceURL(sourceURL); 434 mediaObject->setSourceLine(media->queries()->lastLine()); 435 } 436 return mediaObject; 437 } 438 401 439 static RefPtr<CSSRuleList> asCSSRuleList(CSSStyleSheet* styleSheet) 402 440 { … … 428 466 } 429 467 430 static Ref<JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>> buildArrayForGroupings(CSSRule& rule)431 { 432 auto groupingsPayload = JSON::ArrayOf<Inspector::Protocol::CSS::Grouping>::create();433 434 auto* parentRule = &rule;468 static void fillMediaListChain(CSSRule* rule, JSON::ArrayOf<Inspector::Protocol::CSS::CSSMedia>& mediaArray) 469 { 470 MediaList* mediaList; 471 CSSRule* parentRule = rule; 472 String sourceURL; 435 473 while (parentRule) { 436 RefPtr<Inspector::Protocol::CSS::Grouping> ruleGroupingPayload; 437 438 if (is<CSSMediaRule>(parentRule)) { 439 auto* media = downcast<CSSMediaRule>(parentRule)->media(); 440 if (media && media->length() && media->mediaText() != "all") { 441 ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create() 442 .setText(media->mediaText()) 443 .setType(Inspector::Protocol::CSS::Grouping::Type::MediaRule) 444 .release(); 474 CSSStyleSheet* parentStyleSheet = nullptr; 475 bool isMediaRule = true; 476 if (is<CSSMediaRule>(*parentRule)) { 477 CSSMediaRule& mediaRule = downcast<CSSMediaRule>(*parentRule); 478 mediaList = mediaRule.media(); 479 parentStyleSheet = mediaRule.parentStyleSheet(); 480 } else if (is<CSSImportRule>(*parentRule)) { 481 CSSImportRule& importRule = downcast<CSSImportRule>(*parentRule); 482 mediaList = &importRule.media(); 483 parentStyleSheet = importRule.parentStyleSheet(); 484 isMediaRule = false; 485 } else 486 mediaList = nullptr; 487 488 if (parentStyleSheet) { 489 sourceURL = parentStyleSheet->contents().baseURL(); 490 if (sourceURL.isEmpty()) 491 sourceURL = InspectorDOMAgent::documentURLString(parentStyleSheet->ownerDocument()); 492 } else 493 sourceURL = emptyString(); 494 495 if (mediaList && mediaList->length()) 496 mediaArray.addItem(buildMediaObject(mediaList, isMediaRule ? MediaListSourceMediaRule : MediaListSourceImportRule, sourceURL)); 497 498 if (parentRule->parentRule()) 499 parentRule = parentRule->parentRule(); 500 else { 501 CSSStyleSheet* styleSheet = parentRule->parentStyleSheet(); 502 while (styleSheet) { 503 mediaList = styleSheet->media(); 504 if (mediaList && mediaList->length()) { 505 Document* doc = styleSheet->ownerDocument(); 506 if (doc) 507 sourceURL = doc->url(); 508 else if (!styleSheet->contents().baseURL().isEmpty()) 509 sourceURL = styleSheet->contents().baseURL(); 510 else 511 sourceURL = emptyString(); 512 mediaArray.addItem(buildMediaObject(mediaList, styleSheet->ownerNode() ? MediaListSourceLinkedSheet : MediaListSourceInlineSheet, sourceURL)); 513 } 514 parentRule = styleSheet->ownerRule(); 515 if (parentRule) 516 break; 517 styleSheet = styleSheet->parentStyleSheet(); 445 518 } 446 } else if (is<CSSImportRule>(parentRule)) {447 auto& media = downcast<CSSImportRule>(parentRule)->media();448 if (media.length() && media.mediaText() != "all") {449 ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()450 .setText(media.mediaText())451 .setType(Inspector::Protocol::CSS::Grouping::Type::MediaImportRule)452 .release();453 }454 } else if (is<CSSSupportsRule>(parentRule)) {455 ruleGroupingPayload = Inspector::Protocol::CSS::Grouping::create()456 .setText(downcast<CSSSupportsRule>(parentRule)->conditionText())457 .setType(Inspector::Protocol::CSS::Grouping::Type::SupportsRule)458 .release();459 519 } 460 461 if (ruleGroupingPayload) { 462 if (auto* parentStyleSheet = parentRule->parentStyleSheet()) { 463 String sourceURL = parentStyleSheet->contents().baseURL(); 464 if (sourceURL.isEmpty()) { 465 if (auto* ownerDocument = parentStyleSheet->ownerDocument()) 466 sourceURL = InspectorDOMAgent::documentURLString(ownerDocument); 467 } 468 if (!sourceURL.isEmpty()) 469 ruleGroupingPayload->setSourceURL(sourceURL); 470 } 471 472 groupingsPayload->addItem(WTFMove(ruleGroupingPayload)); 473 } 474 475 if (parentRule->parentRule()) { 476 parentRule = parentRule->parentRule(); 477 continue; 478 } 479 480 auto* styleSheet = parentRule->parentStyleSheet(); 481 while (styleSheet) { 482 auto* media = styleSheet->media(); 483 if (media && media->length() && media->mediaText() != "all") { 484 auto sheetGroupingPayload = Inspector::Protocol::CSS::Grouping::create() 485 .setText(media->mediaText()) 486 .setType(is<HTMLStyleElement>(styleSheet->ownerNode()) ? Inspector::Protocol::CSS::Grouping::Type::MediaStyleNode: Inspector::Protocol::CSS::Grouping::Type::MediaLinkNode) 487 .release(); 488 489 String sourceURL; 490 if (auto* ownerDocument = styleSheet->ownerDocument()) 491 sourceURL = ownerDocument->url(); 492 else if (!styleSheet->contents().baseURL().isEmpty()) 493 sourceURL = styleSheet->contents().baseURL(); 494 if (!sourceURL.isEmpty()) 495 sheetGroupingPayload->setSourceURL(sourceURL); 496 497 groupingsPayload->addItem(WTFMove(sheetGroupingPayload)); 498 } 499 500 parentRule = styleSheet->ownerRule(); 501 if (parentRule) 502 break; 503 504 styleSheet = styleSheet->parentStyleSheet(); 505 } 506 } 507 508 return groupingsPayload; 520 } 509 521 } 510 522 … … 1162 1174 } 1163 1175 1164 auto groupingsPayload = buildArrayForGroupings(*rule); 1165 if (groupingsPayload->length()) 1166 result->setGroupings(WTFMove(groupingsPayload)); 1176 auto mediaArray = ArrayOf<Inspector::Protocol::CSS::CSSMedia>::create(); 1177 1178 fillMediaListChain(rule, mediaArray.get()); 1179 if (mediaArray->length()) 1180 result->setMedia(WTFMove(mediaArray)); 1167 1181 1168 1182 return result; -
trunk/Source/WebInspectorUI/ChangeLog
r248311 r248327 1 2019-08-06 Commit Queue <commit-queue@webkit.org> 2 3 Unreviewed, rolling out r248289. 4 https://bugs.webkit.org/show_bug.cgi?id=200488 5 6 Broke internal builds (Requested by drousso on #webkit). 7 8 Reverted changeset: 9 10 "Web Inspector: Styles: show @supports CSS groupings" 11 https://bugs.webkit.org/show_bug.cgi?id=200419 12 https://trac.webkit.org/changeset/248289 13 1 14 2019-08-06 Nikita Vasilyev <nvasilyev@apple.com> 2 15 -
trunk/Source/WebInspectorUI/UserInterface/Controllers/CSSManager.js
r248289 r248327 82 82 } 83 83 84 static protocolGroupingTypeToEnum(type) 85 { 86 // COMPATIBILITY (iOS 13): CSS.Grouping did not exist yet. 87 if (!InspectorBackend.domains.CSS.Grouping) { 88 switch (type) { 89 case "mediaRule": 90 return WI.CSSGrouping.Type.MediaRule; 91 case "importRule": 92 return WI.CSSGrouping.Type.MediaImportRule; 93 case "linkedSheet": 94 return WI.CSSGrouping.Type.MediaLinkNode; 95 case "inlineSheet": 96 return WI.CSSGrouping.Type.MediaStyleNode; 97 } 98 } 99 return type; 84 static protocolMediaSourceToEnum(source) 85 { 86 switch (source) { 87 case CSSAgent.CSSMediaSource.MediaRule: 88 return WI.CSSMedia.Type.MediaRule; 89 case CSSAgent.CSSMediaSource.ImportRule: 90 return WI.CSSMedia.Type.ImportRule; 91 case CSSAgent.CSSMediaSource.LinkedSheet: 92 return WI.CSSMedia.Type.LinkedStyleSheet; 93 case CSSAgent.CSSMediaSource.InlineSheet: 94 return WI.CSSMedia.Type.InlineStyleSheet; 95 default: 96 console.assert(false, "Unknown CSS.CSSMediaSource", source); 97 return WI.CSSMedia.Type.MediaRule; 98 } 100 99 } 101 100 -
trunk/Source/WebInspectorUI/UserInterface/Main.html
r248289 r248327 362 362 <script src="Models/CPUTimelineRecord.js"></script> 363 363 <script src="Models/CSSCompletions.js"></script> 364 <script src="Models/CSSGrouping.js"></script>365 364 <script src="Models/CSSKeywordCompletions.js"></script> 365 <script src="Models/CSSMedia.js"></script> 366 366 <script src="Models/CSSProperty.js"></script> 367 367 <script src="Models/CSSRule.js"></script> -
trunk/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js
r248326 r248327 1 1 /* 2 * Copyright (C) 201 9Apple Inc. All rights reserved.2 * Copyright (C) 2013 Apple Inc. All rights reserved. 3 3 * 4 4 * Redistribution and use in source and binary forms, with or without … … 24 24 */ 25 25 26 WI.CSS Grouping = class CSSGrouping26 WI.CSSMedia = class CSSMedia 27 27 { 28 28 constructor(type, text, sourceCodeLocation) 29 29 { 30 console.assert(Object.values(CSSGrouping.Type).includes(type));31 console.assert(typeof text === "string" && text.length);32 30 console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WI.SourceCodeLocation); 33 31 34 this._type = type ;35 this._text = text ;32 this._type = type || null; 33 this._text = text || ""; 36 34 this._sourceCodeLocation = sourceCodeLocation || null; 37 35 } … … 42 40 get text() { return this._text; } 43 41 get sourceCodeLocation() { return this._sourceCodeLocation; } 44 45 get isMedia()46 {47 return this._type === WI.CSSGrouping.Type.MediaRule48 || this._type === WI.CSSGrouping.Type.MediaImportRule49 || this._type === WI.CSSGrouping.Type.MediaLinkNode50 || this._type === WI.CSSGrouping.Type.MediaStyleNode;51 }52 53 get isSupports()54 {55 return this._type === WI.CSSGrouping.Type.SupportsRule;56 }57 58 get prefix()59 {60 if (this.isSupports)61 return "@supports";62 63 console.assert(this.isMedia);64 return "@media";65 }66 42 }; 67 43 68 WI.CSSGrouping.Type = { 69 MediaRule: "media-rule", 70 MediaImportRule: "media-import-rule", 71 MediaLinkNode: "media-link-node", 72 MediaStyleNode: "media-style-node", 73 SupportsRule: "supports-rule", 44 WI.CSSMedia.Type = { 45 MediaRule: "css-media-type-media-rule", 46 ImportRule: "css-media-type-import-rule", 47 LinkedStyleSheet: "css-media-type-linked-stylesheet", 48 InlineStyleSheet: "css-media-type-inline-stylesheet" 74 49 }; -
trunk/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
r248289 r248327 26 26 WI.CSSRule = class CSSRule extends WI.Object 27 27 { 28 constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)28 constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList) 29 29 { 30 30 super(); … … 38 38 this._initialState = null; 39 39 40 this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings, true);40 this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true); 41 41 } 42 42 43 43 // Public 44 44 45 get ownerStyleSheet() { return this._ownerStyleSheet; }46 45 get id() { return this._id; } 47 get type() { return this._type; }48 46 get initialState() { return this._initialState; } 49 get sourceCodeLocation() { return this._sourceCodeLocation; } 50 get selectors() { return this._selectors; }51 get matchedSelectorIndices() { return this._matchedSelectorIndices; }52 get style() { return this._style; }53 get groupings() { return this._groupings;}47 48 get ownerStyleSheet() 49 { 50 return this._ownerStyleSheet; 51 } 54 52 55 53 get editable() 56 54 { 57 55 return !!this._id && (this._type === WI.CSSStyleSheet.Type.Author || this._type === WI.CSSStyleSheet.Type.Inspector); 56 } 57 58 update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList) 59 { 60 sourceCodeLocation = sourceCodeLocation || null; 61 selectorText = selectorText || ""; 62 selectors = selectors || []; 63 matchedSelectorIndices = matchedSelectorIndices || []; 64 style = style || null; 65 mediaList = mediaList || []; 66 67 if (this._style) 68 this._style.ownerRule = null; 69 70 this._sourceCodeLocation = sourceCodeLocation; 71 this._selectorText = selectorText; 72 this._selectors = selectors; 73 this._matchedSelectorIndices = matchedSelectorIndices; 74 this._style = style; 75 this._mediaList = mediaList; 76 77 if (this._style) 78 this._style.ownerRule = this; 79 } 80 81 get type() 82 { 83 return this._type; 84 } 85 86 get sourceCodeLocation() 87 { 88 return this._sourceCodeLocation; 58 89 } 59 90 … … 77 108 } 78 109 79 update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings)110 get selectors() 80 111 { 81 sourceCodeLocation = sourceCodeLocation || null; 82 selectorText = selectorText || ""; 83 selectors = selectors || []; 84 matchedSelectorIndices = matchedSelectorIndices || []; 85 style = style || null; 86 groupings = groupings || []; 112 return this._selectors; 113 } 87 114 88 if (this._style) 89 this._style.ownerRule = null; 115 get matchedSelectorIndices() 116 { 117 return this._matchedSelectorIndices; 118 } 90 119 91 this._sourceCodeLocation = sourceCodeLocation; 92 this._selectorText = selectorText; 93 this._selectors = selectors; 94 this._matchedSelectorIndices = matchedSelectorIndices; 95 this._style = style; 96 this._groupings = groupings; 120 get style() 121 { 122 return this._style; 123 } 97 124 98 if (this._style) 99 this._style.ownerRule = this; 125 get mediaList() 126 { 127 return this._mediaList; 100 128 } 101 129 … … 146 174 } 147 175 148 this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._ groupings);176 this.update(sourceCodeLocation, selectorText, selectors, [], this._style, this._mediaList); 149 177 } 150 178 } -
trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
r248289 r248327 288 288 } 289 289 290 get groupings()290 get mediaList() 291 291 { 292 292 if (this._ownerRule) 293 return this._ownerRule. groupings;293 return this._ownerRule.mediaList; 294 294 return []; 295 295 } … … 512 512 let indentString = WI.indentString(); 513 513 let styleText = ""; 514 let groupings = this.groupings.filter((grouping) => grouping.text !== "all");515 let groupingsCount = groupings.length;516 for (let i = groupingsCount - 1; i >= 0; --i)517 styleText += indentString.repeat( groupingsCount - i - 1) + groupings[i].prefix + " " + groupings[i].text + " {\n";518 519 styleText += indentString.repeat( groupingsCount) + this.selectorText + " {\n";514 let mediaList = this.mediaList.filter((media) => media.text !== "all"); 515 let mediaQueriesCount = mediaList.length; 516 for (let i = mediaQueriesCount - 1; i >= 0; --i) 517 styleText += indentString.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n"; 518 519 styleText += indentString.repeat(mediaQueriesCount) + this.selectorText + " {\n"; 520 520 521 521 for (let property of (this._styleSheetTextRange ? this.visibleProperties : this._properties)) 522 styleText += indentString.repeat( groupingsCount + 1) + property.formattedText + "\n";523 524 for (let i = groupingsCount; i > 0; --i)522 styleText += indentString.repeat(mediaQueriesCount + 1) + property.formattedText + "\n"; 523 524 for (let i = mediaQueriesCount; i > 0; --i) 525 525 styleText += indentString.repeat(i) + "}\n"; 526 526 -
trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
r248289 r248327 124 124 // Public 125 125 126 get node() { return this._node; } 127 get matchedRules() { return this._matchedRules; } 128 get inheritedRules() { return this._inheritedRules; } 129 get inlineStyle() { return this._inlineStyle; } 130 get attributesStyle() { return this._attributesStyle; } 131 get pseudoElements() { return this._pseudoElements; } 132 get computedStyle() { return this._computedStyle; } 133 get orderedStyles() { return this._orderedStyles; } 126 get node() 127 { 128 return this._node; 129 } 134 130 135 131 get needsRefresh() 136 132 { 137 133 return this._pendingRefreshTask || this._needsRefresh; 138 }139 140 get uniqueOrderedStyles()141 {142 return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles);143 134 } 144 135 … … 383 374 else 384 375 WI.cssManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this)); 376 } 377 378 rulesForSelector(selector) 379 { 380 selector = selector || this._node.appropriateSelectorFor(true); 381 382 function ruleHasSelector(rule) { 383 return !rule.mediaList.length && rule.selectorText === selector; 384 } 385 386 let rules = this._matchedRules.filter(ruleHasSelector); 387 388 for (let pseudoElementInfo of this._pseudoElements.values()) 389 rules = rules.concat(pseudoElementInfo.matchedRules.filter(ruleHasSelector)); 390 391 return rules; 392 } 393 394 get matchedRules() 395 { 396 return this._matchedRules; 397 } 398 399 get inheritedRules() 400 { 401 return this._inheritedRules; 402 } 403 404 get inlineStyle() 405 { 406 return this._inlineStyle; 407 } 408 409 get attributesStyle() 410 { 411 return this._attributesStyle; 412 } 413 414 get pseudoElements() 415 { 416 return this._pseudoElements; 417 } 418 419 get computedStyle() 420 { 421 return this._computedStyle; 422 } 423 424 get orderedStyles() 425 { 426 return this._orderedStyles; 427 } 428 429 get uniqueOrderedStyles() 430 { 431 return WI.DOMNodeStyles.uniqueOrderedStyles(this._orderedStyles); 385 432 } 386 433 … … 685 732 } 686 733 687 // COMPATIBILITY (iOS 13): CSS.CSSRule.groupings did not exist yet. 688 let groupings = (payload.groupings || payload.media || []).map((grouping) => { 689 let groupingType = WI.CSSManager.protocolGroupingTypeToEnum(grouping.type || grouping.source); 690 let groupingSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(grouping.sourceURL); 734 var mediaList = []; 735 for (var i = 0; payload.media && i < payload.media.length; ++i) { 736 var mediaItem = payload.media[i]; 737 var mediaType = WI.CSSManager.protocolMediaSourceToEnum(mediaItem.source); 738 var mediaText = mediaItem.text; 739 let mediaSourceCodeLocation = DOMNodeStyles.createSourceCodeLocation(mediaItem.sourceURL, {line: mediaItem.sourceLine}); 691 740 if (styleSheet) 692 groupingSourceCodeLocation = styleSheet.offsetSourceCodeLocation(groupingSourceCodeLocation); 693 return new WI.CSSGrouping(groupingType, grouping.text, groupingSourceCodeLocation); 694 }); 741 mediaSourceCodeLocation = styleSheet.offsetSourceCodeLocation(mediaSourceCodeLocation); 742 743 mediaList.push(new WI.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation)); 744 } 695 745 696 746 if (rule) { 697 rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);747 rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList); 698 748 return rule; 699 749 } … … 702 752 styleSheet.addEventListener(WI.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this); 703 753 704 rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, groupings);754 rule = new WI.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList); 705 755 706 756 if (mapKey) -
trunk/Source/WebInspectorUI/UserInterface/Test.html
r248289 r248327 125 125 <script src="Models/CPUTimelineRecord.js"></script> 126 126 <script src="Models/CSSCompletions.js"></script> 127 <script src="Models/CSSGrouping.js"></script>128 127 <script src="Models/CSSKeywordCompletions.js"></script> 128 <script src="Models/CSSMedia.js"></script> 129 129 <script src="Models/CSSProperty.js"></script> 130 130 <script src="Models/CSSRule.js"></script> -
trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
r248289 r248327 40 40 } 41 41 42 .spreadsheet-css-declaration :matches(.header, .header- groupings) {42 .spreadsheet-css-declaration :matches(.header, .header-media) { 43 43 padding: 0 var(--css-declaration-horizontal-padding); 44 44 } 45 45 46 .spreadsheet-css-declaration :matches(.header, .header- groupings):first-child {46 .spreadsheet-css-declaration :matches(.header, .header-media):first-child { 47 47 padding-top: var(--css-declaration-vertical-padding); 48 48 } … … 57 57 } 58 58 59 .spreadsheet-css-declaration . header-groupings > .grouping{59 .spreadsheet-css-declaration .media-label { 60 60 color: var(--text-color); 61 61 } … … 111 111 vertical-align: -3.5px; 112 112 -webkit-user-select: none; 113 }114 115 .spreadsheet-css-declaration .header-groupings + .header > .selector > .icon {116 margin-top: 0;117 113 } 118 114 -
trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
r248289 r248327 39 39 this._propertiesEditor = null; 40 40 this._selectorElements = []; 41 this._ groupingElements = [];41 this._mediaElements = []; 42 42 this._filterText = null; 43 43 this._shouldFocusSelectorElement = false; … … 100 100 } 101 101 102 let groupings = this._style.groupings.filter((grouping) => grouping.text !== "all"); 103 if (groupings.length) { 104 let groupingsElement = this.element.appendChild(document.createElement("div")); 105 groupingsElement.classList.add("header-groupings"); 106 107 let currentGroupingType = null; 108 let groupingTypeElement = null; 109 this._groupingElements = groupings.map((grouping) => { 110 if (grouping.type !== currentGroupingType) { 111 groupingTypeElement = groupingsElement.appendChild(document.createElement("div")); 112 groupingTypeElement.classList.add("grouping"); 113 groupingTypeElement.textContent = grouping.prefix + " "; 114 currentGroupingType = grouping.type; 115 } else 116 groupingTypeElement.append(", "); 117 118 let span = groupingTypeElement.appendChild(document.createElement("span")); 119 span.textContent = grouping.text; 120 return span; 121 }); 122 } 123 124 this._headerElement = this._element.appendChild(document.createElement("div")); 102 this._headerElement = document.createElement("div"); 125 103 this._headerElement.classList.add("header"); 126 104 … … 159 137 this._closeBrace.textContent = "}"; 160 138 161 139 this._element.append(this._createMediaHeader(), this._headerElement); 162 140 this.addSubview(this._propertiesEditor); 163 141 this._propertiesEditor.needsLayout(); … … 405 383 } 406 384 385 _createMediaHeader() 386 { 387 let mediaList = this._style.mediaList; 388 if (!mediaList.length || (mediaList.length === 1 && (mediaList[0].text === "all" || mediaList[0].text === "screen"))) 389 return ""; 390 391 let mediaElement = document.createElement("div"); 392 mediaElement.classList.add("header-media"); 393 394 let mediaLabel = mediaElement.appendChild(document.createElement("div")); 395 mediaLabel.className = "media-label"; 396 mediaLabel.append("@media "); 397 398 this._mediaElements = mediaList.map((media, i) => { 399 if (i) 400 mediaLabel.append(", "); 401 402 let span = mediaLabel.appendChild(document.createElement("span")); 403 span.textContent = media.text; 404 return span; 405 }); 406 407 return mediaElement; 408 } 409 407 410 _save(event) 408 411 { … … 666 669 _handleEditorFilterApplied(event) 667 670 { 668 let matches Grouping= false;669 for (let groupingElement of this._groupingElements) {670 groupingElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);671 672 if ( groupingElement.textContent.includes(this._filterText)) {673 groupingElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName);674 matches Grouping= true;671 let matchesMedia = false; 672 for (let mediaElement of this._mediaElements) { 673 mediaElement.classList.remove(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName); 674 675 if (mediaElement.textContent.includes(this._filterText)) { 676 mediaElement.classList.add(WI.GeneralStyleDetailsSidebarPanel.FilterMatchSectionClassName); 677 matchesMedia = true; 675 678 } 676 679 } … … 686 689 } 687 690 688 let matches = event.data.matches || matches Grouping|| matchesSelector;691 let matches = event.data.matches || matchesMedia || matchesSelector; 689 692 if (!matches) 690 693 this._element.classList.add(WI.GeneralStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
Note: See TracChangeset
for help on using the changeset viewer.
