OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Joseph Pecoraro | 3 * Copyright (C) 2009 Joseph Pecoraro |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * | 8 * |
9 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
(...skipping 294 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
305 return this.fetchMatchedCascade() | 305 return this.fetchMatchedCascade() |
306 .then(this._innerRebuildUpdate.bind(this)); | 306 .then(this._innerRebuildUpdate.bind(this)); |
307 }, | 307 }, |
308 | 308 |
309 _resetCache: function() | 309 _resetCache: function() |
310 { | 310 { |
311 delete this._matchedCascadePromise; | 311 delete this._matchedCascadePromise; |
312 }, | 312 }, |
313 | 313 |
314 /** | 314 /** |
315 * @return {!Promise.<?{matched: !WebInspector.SectionCascade, pseudo: !Map.
<number, !WebInspector.SectionCascade>}>} | 315 * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>} |
316 */ | 316 */ |
317 fetchMatchedCascade: function() | 317 fetchMatchedCascade: function() |
318 { | 318 { |
319 var node = this.node(); | 319 var node = this.node(); |
320 if (!node) | 320 if (!node) |
321 return Promise.resolve(/** @type {?{matched: !WebInspector.SectionCa
scade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} */(null)); | 321 return Promise.resolve(/** @type {?WebInspector.CSSStyleModel.Matche
dStyleResult} */(null)); |
322 if (!this._matchedCascadePromise) | 322 if (!this._matchedCascadePromise) |
323 this._matchedCascadePromise = this._matchedStylesForNode(node).then(
buildMatchedCascades.bind(this, node)); | 323 this._matchedCascadePromise = this._matchedStylesForNode(node).then(
validateStyles.bind(this)); |
324 return this._matchedCascadePromise; | 324 return this._matchedCascadePromise; |
325 | 325 |
326 /** | 326 /** |
327 * @param {!WebInspector.DOMNode} node | |
328 * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles | 327 * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
329 * @return {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<numbe
r, !WebInspector.SectionCascade>}} | 328 * @return {?WebInspector.CSSStyleModel.MatchedStyleResult} |
330 * @this {WebInspector.StylesSidebarPane} | 329 * @this {WebInspector.StylesSidebarPane} |
331 */ | 330 */ |
332 function buildMatchedCascades(node, matchedStyles) | 331 function validateStyles(matchedStyles) |
333 { | 332 { |
334 if (!matchedStyles || node !== this.node()) | 333 return matchedStyles && matchedStyles.node() === this.node() ? match
edStyles : null; |
335 return null; | |
336 | |
337 return WebInspector.SectionCascade.fromMatchedStyles(matchedStyles); | |
338 } | 334 } |
339 }, | 335 }, |
340 | 336 |
341 /** | 337 /** |
342 * @param {!WebInspector.DOMNode} node | 338 * @param {!WebInspector.DOMNode} node |
343 * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>} | 339 * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>} |
344 */ | 340 */ |
345 _matchedStylesForNode: function(node) | 341 _matchedStylesForNode: function(node) |
346 { | 342 { |
347 var cssModel = this.cssModel(); | 343 var cssModel = this.cssModel(); |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
402 /** | 398 /** |
403 * @param {?WebInspector.DOMNode} node | 399 * @param {?WebInspector.DOMNode} node |
404 */ | 400 */ |
405 _canAffectCurrentStyles: function(node) | 401 _canAffectCurrentStyles: function(node) |
406 { | 402 { |
407 var currentNode = this.node(); | 403 var currentNode = this.node(); |
408 return currentNode && (currentNode === node || node.parentNode === curre
ntNode.parentNode || node.isAncestor(currentNode)); | 404 return currentNode && (currentNode === node || node.parentNode === curre
ntNode.parentNode || node.isAncestor(currentNode)); |
409 }, | 405 }, |
410 | 406 |
411 /** | 407 /** |
412 * @param {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !W
ebInspector.SectionCascade>}} cascades | 408 * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
413 */ | 409 */ |
414 _innerRebuildUpdate: function(cascades) | 410 _innerRebuildUpdate: function(matchedStyles) |
415 { | 411 { |
416 this._linkifier.reset(); | 412 this._linkifier.reset(); |
417 this._sectionsContainer.removeChildren(); | 413 this._sectionsContainer.removeChildren(); |
418 this._sectionBlocks = []; | 414 this._sectionBlocks = []; |
419 | 415 |
420 var node = this.node(); | 416 var node = this.node(); |
421 if (!cascades || !node) | 417 if (!matchedStyles || !node) |
422 return; | 418 return; |
423 | 419 |
424 this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(cascades
.matched); | 420 this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(matchedS
tyles); |
425 var pseudoTypes = []; | 421 var pseudoTypes = []; |
426 var keys = new Set(cascades.pseudo.keys()); | 422 var keys = new Set(matchedStyles.pseudoStyles().keys()); |
427 if (keys.delete(DOMAgent.PseudoType.Before)) | 423 if (keys.delete(DOMAgent.PseudoType.Before)) |
428 pseudoTypes.push(DOMAgent.PseudoType.Before); | 424 pseudoTypes.push(DOMAgent.PseudoType.Before); |
429 pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort()); | 425 pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort()); |
430 for (var pseudoType of pseudoTypes) { | 426 for (var pseudoType of pseudoTypes) { |
431 var block = WebInspector.SectionBlock.createPseudoTypeBlock(pseudoTy
pe); | 427 var block = WebInspector.SectionBlock.createPseudoTypeBlock(pseudoTy
pe); |
432 var cascade = cascades.pseudo.get(pseudoType); | 428 var styles = /** @type {!Array<!WebInspector.CSSStyleDeclaration>} *
/(matchedStyles.pseudoStyles().get(pseudoType)); |
433 for (var style of cascade.styles()) { | 429 for (var style of styles) { |
434 var section = new WebInspector.StylePropertiesSection(this, casc
ade, style); | 430 var section = new WebInspector.StylePropertiesSection(this, matc
hedStyles, style); |
435 block.sections.push(section); | 431 block.sections.push(section); |
436 } | 432 } |
437 this._sectionBlocks.push(block); | 433 this._sectionBlocks.push(block); |
438 } | 434 } |
439 | 435 |
440 for (var block of this._sectionBlocks) { | 436 for (var block of this._sectionBlocks) { |
441 var titleElement = block.titleElement(); | 437 var titleElement = block.titleElement(); |
442 if (titleElement) | 438 if (titleElement) |
443 this._sectionsContainer.appendChild(titleElement); | 439 this._sectionsContainer.appendChild(titleElement); |
444 for (var section of block.sections) | 440 for (var section of block.sections) |
445 this._sectionsContainer.appendChild(section.element); | 441 this._sectionsContainer.appendChild(section.element); |
446 } | 442 } |
447 | 443 |
448 if (this._filterRegex) | 444 if (this._filterRegex) |
449 this._updateFilter(); | 445 this._updateFilter(); |
450 | 446 |
451 this._nodeStylesUpdatedForTest(node, true); | 447 this._nodeStylesUpdatedForTest(node, true); |
452 }, | 448 }, |
453 | 449 |
454 /** | 450 /** |
455 * @param {!WebInspector.DOMNode} node | 451 * @param {!WebInspector.DOMNode} node |
456 * @param {boolean} rebuild | 452 * @param {boolean} rebuild |
457 */ | 453 */ |
458 _nodeStylesUpdatedForTest: function(node, rebuild) | 454 _nodeStylesUpdatedForTest: function(node, rebuild) |
459 { | 455 { |
460 // For sniffing in tests. | 456 // For sniffing in tests. |
461 }, | 457 }, |
462 | 458 |
463 /** | 459 /** |
464 * @param {!WebInspector.SectionCascade} matchedCascade | 460 * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
465 * @return {!Array.<!WebInspector.SectionBlock>} | 461 * @return {!Array.<!WebInspector.SectionBlock>} |
466 */ | 462 */ |
467 _rebuildSectionsForMatchedStyleRules: function(matchedCascade) | 463 _rebuildSectionsForMatchedStyleRules: function(matchedStyles) |
468 { | 464 { |
469 var blocks = [new WebInspector.SectionBlock(null)]; | 465 var blocks = [new WebInspector.SectionBlock(null)]; |
470 var lastParentNode = null; | 466 var lastParentNode = null; |
471 for (var style of matchedCascade.styles()) { | 467 for (var style of matchedStyles.nodeStyles()) { |
472 var parentNode = matchedCascade.isInherited(style) ? matchedCascade.
nodeForStyle(style) : null; | 468 var parentNode = matchedStyles.isInherited(style) ? matchedStyles.no
deForStyle(style) : null; |
473 if (parentNode && parentNode !== lastParentNode) { | 469 if (parentNode && parentNode !== lastParentNode) { |
474 lastParentNode = parentNode; | 470 lastParentNode = parentNode; |
475 var block = WebInspector.SectionBlock.createInheritedNodeBlock(l
astParentNode); | 471 var block = WebInspector.SectionBlock.createInheritedNodeBlock(l
astParentNode); |
476 blocks.push(block); | 472 blocks.push(block); |
477 } | 473 } |
478 | 474 |
479 var section = new WebInspector.StylePropertiesSection(this, matchedC
ascade, style); | 475 var section = new WebInspector.StylePropertiesSection(this, matchedS
tyles, style); |
480 blocks.peekLast().sections.push(section); | 476 blocks.peekLast().sections.push(section); |
481 } | 477 } |
482 return blocks; | 478 return blocks; |
483 }, | 479 }, |
484 | 480 |
485 _createNewRuleInViaInspectorStyleSheet: function() | 481 _createNewRuleInViaInspectorStyleSheet: function() |
486 { | 482 { |
487 var cssModel = this.cssModel(); | 483 var cssModel = this.cssModel(); |
488 var node = this.node(); | 484 var node = this.node(); |
489 if (!cssModel || !node) | 485 if (!cssModel || !node) |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
526 | 522 |
527 /** | 523 /** |
528 * @param {!WebInspector.StylePropertiesSection} insertAfterSection | 524 * @param {!WebInspector.StylePropertiesSection} insertAfterSection |
529 * @param {string} styleSheetId | 525 * @param {string} styleSheetId |
530 * @param {!WebInspector.TextRange} ruleLocation | 526 * @param {!WebInspector.TextRange} ruleLocation |
531 */ | 527 */ |
532 _addBlankSection: function(insertAfterSection, styleSheetId, ruleLocation) | 528 _addBlankSection: function(insertAfterSection, styleSheetId, ruleLocation) |
533 { | 529 { |
534 this.expand(); | 530 this.expand(); |
535 var node = this.node(); | 531 var node = this.node(); |
536 var blankSection = new WebInspector.BlankStylePropertiesSection(this, in
sertAfterSection._cascade, node ? WebInspector.DOMPresentationUtils.simpleSelect
or(node) : "", styleSheetId, ruleLocation, insertAfterSection._style); | 532 var blankSection = new WebInspector.BlankStylePropertiesSection(this, in
sertAfterSection._matchedStyles, node ? WebInspector.DOMPresentationUtils.simple
Selector(node) : "", styleSheetId, ruleLocation, insertAfterSection._style); |
537 | 533 |
538 this._sectionsContainer.insertBefore(blankSection.element, insertAfterSe
ction.element.nextSibling); | 534 this._sectionsContainer.insertBefore(blankSection.element, insertAfterSe
ction.element.nextSibling); |
539 | 535 |
540 for (var block of this._sectionBlocks) { | 536 for (var block of this._sectionBlocks) { |
541 var index = block.sections.indexOf(insertAfterSection); | 537 var index = block.sections.indexOf(insertAfterSection); |
542 if (index === -1) | 538 if (index === -1) |
543 continue; | 539 continue; |
544 block.sections.splice(index + 1, 0, blankSection); | 540 block.sections.splice(index + 1, 0, blankSection); |
545 blankSection.startEditingSelector(); | 541 blankSection.startEditingSelector(); |
546 } | 542 } |
(...skipping 201 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
748 */ | 744 */ |
749 titleElement: function() | 745 titleElement: function() |
750 { | 746 { |
751 return this._titleElement; | 747 return this._titleElement; |
752 } | 748 } |
753 } | 749 } |
754 | 750 |
755 /** | 751 /** |
756 * @constructor | 752 * @constructor |
757 * @param {!WebInspector.StylesSidebarPane} parentPane | 753 * @param {!WebInspector.StylesSidebarPane} parentPane |
758 * @param {!WebInspector.SectionCascade} cascade | 754 * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
759 * @param {!WebInspector.CSSStyleDeclaration} style | 755 * @param {!WebInspector.CSSStyleDeclaration} style |
760 */ | 756 */ |
761 WebInspector.StylePropertiesSection = function(parentPane, cascade, style) | 757 WebInspector.StylePropertiesSection = function(parentPane, matchedStyles, style) |
762 { | 758 { |
763 this._parentPane = parentPane; | 759 this._parentPane = parentPane; |
764 this._style = style; | 760 this._style = style; |
765 this._cascade = cascade; | 761 this._matchedStyles = matchedStyles; |
766 this.editable = !!(style.styleSheetId && style.range); | 762 this.editable = !!(style.styleSheetId && style.range); |
767 | 763 |
768 var rule = style.parentRule; | 764 var rule = style.parentRule; |
769 this.element = createElementWithClass("div", "styles-section matched-styles
monospace"); | 765 this.element = createElementWithClass("div", "styles-section matched-styles
monospace"); |
770 this.element._section = this; | 766 this.element._section = this; |
771 | 767 |
772 this._titleElement = this.element.createChild("div", "styles-section-title "
+ (rule ? "styles-selector" : "")); | 768 this._titleElement = this.element.createChild("div", "styles-section-title "
+ (rule ? "styles-selector" : "")); |
773 | 769 |
774 this.propertiesTreeOutline = new TreeOutline(); | 770 this.propertiesTreeOutline = new TreeOutline(); |
775 this.propertiesTreeOutline.element.classList.add("style-properties", "monosp
ace"); | 771 this.propertiesTreeOutline.element.classList.add("style-properties", "monosp
ace"); |
(...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
875 style: function() | 871 style: function() |
876 { | 872 { |
877 return this._style; | 873 return this._style; |
878 }, | 874 }, |
879 | 875 |
880 /** | 876 /** |
881 * @return {string} | 877 * @return {string} |
882 */ | 878 */ |
883 _selectorText: function() | 879 _selectorText: function() |
884 { | 880 { |
885 var node = this._cascade.nodeForStyle(this._style); | 881 var node = this._matchedStyles.nodeForStyle(this._style); |
886 if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline) | 882 if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline) |
887 return this._cascade.isInherited(this._style) ? WebInspector.UIStrin
g("Style Attribute") : "element.style"; | 883 return this._matchedStyles.isInherited(this._style) ? WebInspector.U
IString("Style Attribute") : "element.style"; |
888 if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Attribute
s) | 884 if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Attribute
s) |
889 return node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("A
ttributes Style") + "]"; | 885 return node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("A
ttributes Style") + "]"; |
890 return this._style.parentRule.selectorText(); | 886 return this._style.parentRule.selectorText(); |
891 }, | 887 }, |
892 | 888 |
893 _onMouseOutSelector: function() | 889 _onMouseOutSelector: function() |
894 { | 890 { |
895 if (this._hoverTimer) | 891 if (this._hoverTimer) |
896 clearTimeout(this._hoverTimer); | 892 clearTimeout(this._hoverTimer); |
897 WebInspector.DOMModel.hideDOMNodeHighlight() | 893 WebInspector.DOMModel.hideDOMNodeHighlight() |
(...skipping 197 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1095 this._mediaListElement.removeChildren(); | 1091 this._mediaListElement.removeChildren(); |
1096 this._createMediaList(this._style.parentRule ? this._style.parentRule.me
dia : null); | 1092 this._createMediaList(this._style.parentRule ? this._style.parentRule.me
dia : null); |
1097 }, | 1093 }, |
1098 | 1094 |
1099 /** | 1095 /** |
1100 * @param {string} propertyName | 1096 * @param {string} propertyName |
1101 * @return {boolean} | 1097 * @return {boolean} |
1102 */ | 1098 */ |
1103 isPropertyInherited: function(propertyName) | 1099 isPropertyInherited: function(propertyName) |
1104 { | 1100 { |
1105 if (this._cascade.isInherited(this._style)) { | 1101 if (this._matchedStyles.isInherited(this._style)) { |
1106 // While rendering inherited stylesheet, reverse meaning of this pro
perty. | 1102 // While rendering inherited stylesheet, reverse meaning of this pro
perty. |
1107 // Render truly inherited properties with black, i.e. return them as
non-inherited. | 1103 // Render truly inherited properties with black, i.e. return them as
non-inherited. |
1108 return !WebInspector.CSSMetadata.isPropertyInherited(propertyName); | 1104 return !WebInspector.CSSMetadata.isPropertyInherited(propertyName); |
1109 } | 1105 } |
1110 return false; | 1106 return false; |
1111 }, | 1107 }, |
1112 | 1108 |
1113 /** | 1109 /** |
1114 * @return {?WebInspector.StylePropertiesSection} | 1110 * @return {?WebInspector.StylePropertiesSection} |
1115 */ | 1111 */ |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1154 update: function(full) | 1150 update: function(full) |
1155 { | 1151 { |
1156 this._selectorElement.textContent = this._selectorText(); | 1152 this._selectorElement.textContent = this._selectorText(); |
1157 this._markSelectorMatches(); | 1153 this._markSelectorMatches(); |
1158 if (full) { | 1154 if (full) { |
1159 this.propertiesTreeOutline.removeChildren(); | 1155 this.propertiesTreeOutline.removeChildren(); |
1160 this.onpopulate(); | 1156 this.onpopulate(); |
1161 } else { | 1157 } else { |
1162 var child = this.propertiesTreeOutline.firstChild(); | 1158 var child = this.propertiesTreeOutline.firstChild(); |
1163 while (child) { | 1159 while (child) { |
1164 var overloaded = this._cascade.propertyState(child.property) ===
WebInspector.SectionCascade.PropertyState.Overloaded; | 1160 var overloaded = this._matchedStyles.propertyState(child.propert
y) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded; |
1165 child.setOverloaded(overloaded); | 1161 child.setOverloaded(overloaded); |
1166 child = child.traverseNextTreeElement(false, null, true); | 1162 child = child.traverseNextTreeElement(false, null, true); |
1167 } | 1163 } |
1168 } | 1164 } |
1169 this.afterUpdate(); | 1165 this.afterUpdate(); |
1170 }, | 1166 }, |
1171 | 1167 |
1172 afterUpdate: function() | 1168 afterUpdate: function() |
1173 { | 1169 { |
1174 if (this._afterUpdate) { | 1170 if (this._afterUpdate) { |
1175 this._afterUpdate(this); | 1171 this._afterUpdate(this); |
1176 delete this._afterUpdate; | 1172 delete this._afterUpdate; |
1177 this._afterUpdateFinishedForTest(); | 1173 this._afterUpdateFinishedForTest(); |
1178 } | 1174 } |
1179 }, | 1175 }, |
1180 | 1176 |
1181 _afterUpdateFinishedForTest: function() | 1177 _afterUpdateFinishedForTest: function() |
1182 { | 1178 { |
1183 }, | 1179 }, |
1184 | 1180 |
1185 onpopulate: function() | 1181 onpopulate: function() |
1186 { | 1182 { |
1187 var style = this._style; | 1183 var style = this._style; |
1188 for (var property of style.leadingProperties()) { | 1184 for (var property of style.leadingProperties()) { |
1189 var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.l
onghands(property.name); | 1185 var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.l
onghands(property.name); |
1190 var inherited = this.isPropertyInherited(property.name); | 1186 var inherited = this.isPropertyInherited(property.name); |
1191 var overloaded = this._cascade.propertyState(property) === WebInspec
tor.SectionCascade.PropertyState.Overloaded; | 1187 var overloaded = this._matchedStyles.propertyState(property) === Web
Inspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded; |
1192 var item = new WebInspector.StylePropertyTreeElement(this._parentPan
e, this._cascade, property, isShorthand, inherited, overloaded); | 1188 var item = new WebInspector.StylePropertyTreeElement(this._parentPan
e, this._matchedStyles, property, isShorthand, inherited, overloaded); |
1193 this.propertiesTreeOutline.appendChild(item); | 1189 this.propertiesTreeOutline.appendChild(item); |
1194 } | 1190 } |
1195 }, | 1191 }, |
1196 | 1192 |
1197 /** | 1193 /** |
1198 * @return {boolean} | 1194 * @return {boolean} |
1199 */ | 1195 */ |
1200 _updateFilter: function() | 1196 _updateFilter: function() |
1201 { | 1197 { |
1202 var hasMatchingChild = false; | 1198 var hasMatchingChild = false; |
1203 for (var child of this.propertiesTreeOutline.rootElement().children()) | 1199 for (var child of this.propertiesTreeOutline.rootElement().children()) |
1204 hasMatchingChild |= child._updateFilter(); | 1200 hasMatchingChild |= child._updateFilter(); |
1205 | 1201 |
1206 var regex = this._parentPane.filterRegex(); | 1202 var regex = this._parentPane.filterRegex(); |
1207 var hideRule = !hasMatchingChild && regex && !regex.test(this.element.te
xtContent); | 1203 var hideRule = !hasMatchingChild && regex && !regex.test(this.element.te
xtContent); |
1208 this.element.classList.toggle("hidden", hideRule); | 1204 this.element.classList.toggle("hidden", hideRule); |
1209 if (!hideRule && this._style.parentRule) | 1205 if (!hideRule && this._style.parentRule) |
1210 this._markSelectorHighlights(); | 1206 this._markSelectorHighlights(); |
1211 return !hideRule; | 1207 return !hideRule; |
1212 }, | 1208 }, |
1213 | 1209 |
1214 _markSelectorMatches: function() | 1210 _markSelectorMatches: function() |
1215 { | 1211 { |
1216 var rule = this._style.parentRule; | 1212 var rule = this._style.parentRule; |
1217 if (!rule) | 1213 if (!rule) |
1218 return; | 1214 return; |
1219 | 1215 |
1220 this._mediaListElement.classList.toggle("media-matches", this._cascade.m
ediaMatches(this._style)); | 1216 this._mediaListElement.classList.toggle("media-matches", this._matchedSt
yles.mediaMatches(this._style)); |
1221 | 1217 |
1222 if (!this._cascade.hasMatchingSelectors(this._style)) | 1218 if (!this._matchedStyles.hasMatchingSelectors(this._style)) |
1223 return; | 1219 return; |
1224 | 1220 |
1225 var selectors = rule.selectors; | 1221 var selectors = rule.selectors; |
1226 var fragment = createDocumentFragment(); | 1222 var fragment = createDocumentFragment(); |
1227 var currentMatch = 0; | 1223 var currentMatch = 0; |
1228 var matchingSelectors = rule.matchingSelectors; | 1224 var matchingSelectors = rule.matchingSelectors; |
1229 for (var i = 0; i < selectors.length ; ++i) { | 1225 for (var i = 0; i < selectors.length ; ++i) { |
1230 if (i) | 1226 if (i) |
1231 fragment.createTextChild(", "); | 1227 fragment.createTextChild(", "); |
1232 var isSelectorMatching = matchingSelectors[currentMatch] === i; | 1228 var isSelectorMatching = matchingSelectors[currentMatch] === i; |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1280 } | 1276 } |
1281 }, | 1277 }, |
1282 | 1278 |
1283 /** | 1279 /** |
1284 * @param {number=} index | 1280 * @param {number=} index |
1285 * @return {!WebInspector.StylePropertyTreeElement} | 1281 * @return {!WebInspector.StylePropertyTreeElement} |
1286 */ | 1282 */ |
1287 addNewBlankProperty: function(index) | 1283 addNewBlankProperty: function(index) |
1288 { | 1284 { |
1289 var property = this._style.newBlankProperty(index); | 1285 var property = this._style.newBlankProperty(index); |
1290 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, t
his._cascade, property, false, false, false); | 1286 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, t
his._matchedStyles, property, false, false, false); |
1291 index = property.index; | 1287 index = property.index; |
1292 this.propertiesTreeOutline.insertChild(item, index); | 1288 this.propertiesTreeOutline.insertChild(item, index); |
1293 item.listItemElement.textContent = ""; | 1289 item.listItemElement.textContent = ""; |
1294 item._newProperty = true; | 1290 item._newProperty = true; |
1295 item.updateTitle(); | 1291 item.updateTitle(); |
1296 return item; | 1292 return item; |
1297 }, | 1293 }, |
1298 | 1294 |
1299 _handleEmptySpaceMouseDown: function() | 1295 _handleEmptySpaceMouseDown: function() |
1300 { | 1296 { |
(...skipping 249 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1550 * @param {!WebInspector.TextRange} oldSelectorRange | 1546 * @param {!WebInspector.TextRange} oldSelectorRange |
1551 * @param {boolean} success | 1547 * @param {boolean} success |
1552 * @this {WebInspector.StylePropertiesSection} | 1548 * @this {WebInspector.StylePropertiesSection} |
1553 */ | 1549 */ |
1554 function finishCallback(rule, oldSelectorRange, success) | 1550 function finishCallback(rule, oldSelectorRange, success) |
1555 { | 1551 { |
1556 if (success) { | 1552 if (success) { |
1557 var doesAffectSelectedNode = rule.matchingSelectors.length > 0; | 1553 var doesAffectSelectedNode = rule.matchingSelectors.length > 0; |
1558 this.element.classList.toggle("no-affect", !doesAffectSelectedNo
de); | 1554 this.element.classList.toggle("no-affect", !doesAffectSelectedNo
de); |
1559 | 1555 |
1560 this._cascade.resetActiveProperties(); | 1556 this._matchedStyles.resetActiveProperties(); |
1561 var newSelectorRange = /** @type {!WebInspector.TextRange} */(ru
le.selectorRange()); | 1557 var newSelectorRange = /** @type {!WebInspector.TextRange} */(ru
le.selectorRange()); |
1562 rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.sty
leSheetId), oldSelectorRange, newSelectorRange); | 1558 rule.style.sourceStyleSheetEdited(/** @type {string} */(rule.sty
leSheetId), oldSelectorRange, newSelectorRange); |
1563 this._parentPane._styleSheetRuleEdited(rule, oldSelectorRange, n
ewSelectorRange); | 1559 this._parentPane._styleSheetRuleEdited(rule, oldSelectorRange, n
ewSelectorRange); |
1564 this._parentPane._refreshUpdate(this); | 1560 this._parentPane._refreshUpdate(this); |
1565 } | 1561 } |
1566 | 1562 |
1567 delete this._parentPane._userOperation; | 1563 delete this._parentPane._userOperation; |
1568 this._moveEditorFromSelector(moveDirection); | 1564 this._moveEditorFromSelector(moveDirection); |
1569 this._editingSelectorCommittedForTest(); | 1565 this._editingSelectorCommittedForTest(); |
1570 } | 1566 } |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1647 var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine)
; | 1643 var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine)
; |
1648 var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startL
ine, ruleLocation.startColumn); | 1644 var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startL
ine, ruleLocation.startColumn); |
1649 var matchingSelectorLocation = new WebInspector.CSSLocation(cssModel, styleS
heetId, sourceURL, lineNumber, columnNumber); | 1645 var matchingSelectorLocation = new WebInspector.CSSLocation(cssModel, styleS
heetId, sourceURL, lineNumber, columnNumber); |
1650 return linkifier.linkifyCSSLocation(matchingSelectorLocation); | 1646 return linkifier.linkifyCSSLocation(matchingSelectorLocation); |
1651 } | 1647 } |
1652 | 1648 |
1653 /** | 1649 /** |
1654 * @constructor | 1650 * @constructor |
1655 * @extends {WebInspector.StylePropertiesSection} | 1651 * @extends {WebInspector.StylePropertiesSection} |
1656 * @param {!WebInspector.StylesSidebarPane} stylesPane | 1652 * @param {!WebInspector.StylesSidebarPane} stylesPane |
1657 * @param {!WebInspector.SectionCascade} cascade | 1653 * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
1658 * @param {string} defaultSelectorText | 1654 * @param {string} defaultSelectorText |
1659 * @param {string} styleSheetId | 1655 * @param {string} styleSheetId |
1660 * @param {!WebInspector.TextRange} ruleLocation | 1656 * @param {!WebInspector.TextRange} ruleLocation |
1661 * @param {!WebInspector.CSSStyleDeclaration} insertAfterStyle | 1657 * @param {!WebInspector.CSSStyleDeclaration} insertAfterStyle |
1662 */ | 1658 */ |
1663 WebInspector.BlankStylePropertiesSection = function(stylesPane, cascade, default
SelectorText, styleSheetId, ruleLocation, insertAfterStyle) | 1659 WebInspector.BlankStylePropertiesSection = function(stylesPane, matchedStyles, d
efaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle) |
1664 { | 1660 { |
1665 var rule = WebInspector.CSSRule.createDummyRule(stylesPane._cssModel, defaul
tSelectorText); | 1661 var rule = WebInspector.CSSRule.createDummyRule(stylesPane._cssModel, defaul
tSelectorText); |
1666 WebInspector.StylePropertiesSection.call(this, stylesPane, cascade, rule.sty
le); | 1662 WebInspector.StylePropertiesSection.call(this, stylesPane, matchedStyles, ru
le.style); |
1667 this._ruleLocation = ruleLocation; | 1663 this._ruleLocation = ruleLocation; |
1668 this._styleSheetId = styleSheetId; | 1664 this._styleSheetId = styleSheetId; |
1669 this._selectorRefElement.removeChildren(); | 1665 this._selectorRefElement.removeChildren(); |
1670 this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._li
nkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, style
SheetId, this._actualRuleLocation())); | 1666 this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._li
nkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, style
SheetId, this._actualRuleLocation())); |
1671 if (insertAfterStyle && insertAfterStyle.parentRule) | 1667 if (insertAfterStyle && insertAfterStyle.parentRule) |
1672 this._createMediaList(insertAfterStyle.parentRule.media); | 1668 this._createMediaList(insertAfterStyle.parentRule.media); |
1673 this.element.classList.add("blank-section"); | 1669 this.element.classList.add("blank-section"); |
1674 } | 1670 } |
1675 | 1671 |
1676 WebInspector.BlankStylePropertiesSection.prototype = { | 1672 WebInspector.BlankStylePropertiesSection.prototype = { |
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1782 this._normal = true; | 1778 this._normal = true; |
1783 }, | 1779 }, |
1784 | 1780 |
1785 __proto__: WebInspector.StylePropertiesSection.prototype | 1781 __proto__: WebInspector.StylePropertiesSection.prototype |
1786 } | 1782 } |
1787 | 1783 |
1788 /** | 1784 /** |
1789 * @constructor | 1785 * @constructor |
1790 * @extends {TreeElement} | 1786 * @extends {TreeElement} |
1791 * @param {!WebInspector.StylesSidebarPane} stylesPane | 1787 * @param {!WebInspector.StylesSidebarPane} stylesPane |
1792 * @param {!WebInspector.SectionCascade} cascade | 1788 * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles |
1793 * @param {!WebInspector.CSSProperty} property | 1789 * @param {!WebInspector.CSSProperty} property |
1794 * @param {boolean} isShorthand | 1790 * @param {boolean} isShorthand |
1795 * @param {boolean} inherited | 1791 * @param {boolean} inherited |
1796 * @param {boolean} overloaded | 1792 * @param {boolean} overloaded |
1797 */ | 1793 */ |
1798 WebInspector.StylePropertyTreeElement = function(stylesPane, cascade, property,
isShorthand, inherited, overloaded) | 1794 WebInspector.StylePropertyTreeElement = function(stylesPane, matchedStyles, prop
erty, isShorthand, inherited, overloaded) |
1799 { | 1795 { |
1800 // Pass an empty title, the title gets made later in onattach. | 1796 // Pass an empty title, the title gets made later in onattach. |
1801 TreeElement.call(this, "", isShorthand); | 1797 TreeElement.call(this, "", isShorthand); |
1802 this._style = property.ownerStyle; | 1798 this._style = property.ownerStyle; |
1803 this._cascade = cascade; | 1799 this._matchedStyles = matchedStyles; |
1804 this.property = property; | 1800 this.property = property; |
1805 this._inherited = inherited; | 1801 this._inherited = inherited; |
1806 this._overloaded = overloaded; | 1802 this._overloaded = overloaded; |
1807 this.selectable = false; | 1803 this.selectable = false; |
1808 this._parentPane = stylesPane; | 1804 this._parentPane = stylesPane; |
1809 this.isShorthand = isShorthand; | 1805 this.isShorthand = isShorthand; |
1810 this._applyStyleThrottler = new WebInspector.Throttler(0); | 1806 this._applyStyleThrottler = new WebInspector.Throttler(0); |
1811 } | 1807 } |
1812 | 1808 |
1813 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean,
previousContent: string}} */ | 1809 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean,
previousContent: string}} */ |
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2013 if (section && section._parentPane) | 2009 if (section && section._parentPane) |
2014 section._parentPane._refreshUpdate(section); | 2010 section._parentPane._refreshUpdate(section); |
2015 }, | 2011 }, |
2016 | 2012 |
2017 /** | 2013 /** |
2018 * @param {!WebInspector.TextRange} oldStyleRange | 2014 * @param {!WebInspector.TextRange} oldStyleRange |
2019 */ | 2015 */ |
2020 _styleTextEdited: function(oldStyleRange) | 2016 _styleTextEdited: function(oldStyleRange) |
2021 { | 2017 { |
2022 var newStyleRange = /** @type {!WebInspector.TextRange} */ (this._style.
range); | 2018 var newStyleRange = /** @type {!WebInspector.TextRange} */ (this._style.
range); |
2023 this._cascade.resetActiveProperties(); | 2019 this._matchedStyles.resetActiveProperties(); |
2024 if (this._style.parentRule) | 2020 if (this._style.parentRule) |
2025 this._parentPane._styleSheetRuleEdited(this._style.parentRule, oldSt
yleRange, newStyleRange); | 2021 this._parentPane._styleSheetRuleEdited(this._style.parentRule, oldSt
yleRange, newStyleRange); |
2026 }, | 2022 }, |
2027 | 2023 |
2028 /** | 2024 /** |
2029 * @param {!Event} event | 2025 * @param {!Event} event |
2030 */ | 2026 */ |
2031 _toggleEnabled: function(event) | 2027 _toggleEnabled: function(event) |
2032 { | 2028 { |
2033 var disabled = !event.target.checked; | 2029 var disabled = !event.target.checked; |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2067 | 2063 |
2068 var longhandProperties = this._style.longhandProperties(this.name); | 2064 var longhandProperties = this._style.longhandProperties(this.name); |
2069 for (var i = 0; i < longhandProperties.length; ++i) { | 2065 for (var i = 0; i < longhandProperties.length; ++i) { |
2070 var name = longhandProperties[i].name; | 2066 var name = longhandProperties[i].name; |
2071 var inherited = false; | 2067 var inherited = false; |
2072 var overloaded = false; | 2068 var overloaded = false; |
2073 | 2069 |
2074 var section = this.section(); | 2070 var section = this.section(); |
2075 if (section) { | 2071 if (section) { |
2076 inherited = section.isPropertyInherited(name); | 2072 inherited = section.isPropertyInherited(name); |
2077 overloaded = this._cascade.propertyState(longhandProperties[i])
=== WebInspector.SectionCascade.PropertyState.Overloaded; | 2073 overloaded = this._matchedStyles.propertyState(longhandPropertie
s[i]) === WebInspector.CSSStyleModel.MatchedStyleResult.PropertyState.Overloaded
; |
2078 } | 2074 } |
2079 | 2075 |
2080 var item = new WebInspector.StylePropertyTreeElement(this._parentPan
e, this._cascade, longhandProperties[i], false, inherited, overloaded); | 2076 var item = new WebInspector.StylePropertyTreeElement(this._parentPan
e, this._matchedStyles, longhandProperties[i], false, inherited, overloaded); |
2081 this.appendChild(item); | 2077 this.appendChild(item); |
2082 } | 2078 } |
2083 }, | 2079 }, |
2084 | 2080 |
2085 /** | 2081 /** |
2086 * @override | 2082 * @override |
2087 */ | 2083 */ |
2088 onattach: function() | 2084 onattach: function() |
2089 { | 2085 { |
2090 this.updateTitle(); | 2086 this.updateTitle(); |
(...skipping 916 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3007 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeCha
nged); | 3003 WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeCha
nged); |
3008 onNodeChanged(); | 3004 onNodeChanged(); |
3009 return button; | 3005 return button; |
3010 | 3006 |
3011 function onNodeChanged() | 3007 function onNodeChanged() |
3012 { | 3008 { |
3013 var node = WebInspector.context.flavor(WebInspector.DOMNode); | 3009 var node = WebInspector.context.flavor(WebInspector.DOMNode); |
3014 button.setEnabled(!!node); | 3010 button.setEnabled(!!node); |
3015 } | 3011 } |
3016 } | 3012 } |
OLD | NEW |