Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(89)

Side by Side Diff: Source/devtools/front_end/StylesSidebarPane.js

Issue 198053011: DevTools: [CSS] remove StyleId and RuleId types from protocol.json (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: rebaseline Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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 505 matching lines...) Expand 10 before | Expand all | Expand 10 after
516 516
517 styleRules = []; 517 styleRules = [];
518 var pseudoId = pseudoElementCSSRules.pseudoId; 518 var pseudoId = pseudoElementCSSRules.pseudoId;
519 519
520 var entry = { isStyleSeparator: true, pseudoId: pseudoId }; 520 var entry = { isStyleSeparator: true, pseudoId: pseudoId };
521 styleRules.push(entry); 521 styleRules.push(entry);
522 522
523 // Add rules in reverse order to match the cascade order. 523 // Add rules in reverse order to match the cascade order.
524 for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) { 524 for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) {
525 var rule = pseudoElementCSSRules.rules[j]; 525 var rule = pseudoElementCSSRules.rules[j];
526 styleRules.push({ style: rule.style, selectorText: rule.selector Text, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !! (rule.style && rule.style.id) }); 526 styleRules.push({ style: rule.style, selectorText: rule.selector Text, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !! (rule.style && rule.style.styleSheetId) });
527 } 527 }
528 usedProperties = {}; 528 usedProperties = {};
529 this._markUsedProperties(styleRules, usedProperties); 529 this._markUsedProperties(styleRules, usedProperties);
530 this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRu les, usedProperties, anchorElement); 530 this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRu les, usedProperties, anchorElement);
531 } 531 }
532 532
533 if (this._filterRegex) 533 if (this._filterRegex)
534 this._updateFilter(false); 534 this._updateFilter(false);
535 this._nodeStylesUpdatedForTest(node, true); 535 this._nodeStylesUpdatedForTest(node, true);
536 }, 536 },
537 537
538 _nodeStylesUpdatedForTest: function(node, rebuild) 538 _nodeStylesUpdatedForTest: function(node, rebuild)
539 { 539 {
540 // Tests override this method. 540 // Tests override this method.
541 }, 541 },
542 542
543 _refreshStyleRules: function(sections, computedStyle) 543 _refreshStyleRules: function(sections, computedStyle)
544 { 544 {
545 var nodeComputedStyle = computedStyle; 545 var nodeComputedStyle = computedStyle;
546 var styleRules = []; 546 var styleRules = [];
547 for (var i = 0; sections && i < sections.length; ++i) { 547 for (var i = 0; sections && i < sections.length; ++i) {
548 var section = sections[i]; 548 var section = sections[i];
549 if (section.isBlank) 549 if (section.isBlank)
550 continue; 550 continue;
551 if (section.computedStyle) 551 if (section.computedStyle)
552 section.styleRule.style = nodeComputedStyle; 552 section.styleRule.style = nodeComputedStyle;
553 var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.s tyleRule.style && section.styleRule.style.id), 553 var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.s tyleRule.style && section.styleRule.style.styleSheetId),
554 isAttribute: section.styleRule.isAttribute, isInherited: section .styleRule.isInherited, parentNode: section.styleRule.parentNode }; 554 isAttribute: section.styleRule.isAttribute, isInherited: section .styleRule.isInherited, parentNode: section.styleRule.parentNode };
555 styleRules.push(styleRule); 555 styleRules.push(styleRule);
556 } 556 }
557 return styleRules; 557 return styleRules;
558 }, 558 },
559 559
560 _rebuildStyleRules: function(node, styles) 560 _rebuildStyleRules: function(node, styles)
561 { 561 {
562 var nodeComputedStyle = styles.computedStyle; 562 var nodeComputedStyle = styles.computedStyle;
563 this.sections = {}; 563 this.sections = {};
(...skipping 22 matching lines...) Expand all
586 586
587 // Add rules in reverse order to match the cascade order. 587 // Add rules in reverse order to match the cascade order.
588 var addedAttributesStyle; 588 var addedAttributesStyle;
589 for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) { 589 for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
590 var rule = styles.matchedCSSRules[i]; 590 var rule = styles.matchedCSSRules[i];
591 if ((rule.isUser || rule.isUserAgent) && !addedAttributesStyle) { 591 if ((rule.isUser || rule.isUserAgent) && !addedAttributesStyle) {
592 // Show element's Style Attributes after all author rules. 592 // Show element's Style Attributes after all author rules.
593 addedAttributesStyle = true; 593 addedAttributesStyle = true;
594 addAttributesStyle(); 594 addAttributesStyle();
595 } 595 }
596 styleRules.push({ style: rule.style, selectorText: rule.selectorText , media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rul e.style && rule.style.id) }); 596 styleRules.push({ style: rule.style, selectorText: rule.selectorText , media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rul e.style && rule.style.styleSheetId) });
597 } 597 }
598 598
599 if (!addedAttributesStyle) 599 if (!addedAttributesStyle)
600 addAttributesStyle(); 600 addAttributesStyle();
601 601
602 // Walk the node structure and identify styles with inherited properties . 602 // Walk the node structure and identify styles with inherited properties .
603 var parentNode = node.parentNode; 603 var parentNode = node.parentNode;
604 function insertInheritedNodeSeparator(node) 604 function insertInheritedNodeSeparator(node)
605 { 605 {
606 var entry = {}; 606 var entry = {};
(...skipping 19 matching lines...) Expand all
626 for (var i = parentStyles.matchedCSSRules.length - 1; i >= 0; --i) { 626 for (var i = parentStyles.matchedCSSRules.length - 1; i >= 0; --i) {
627 var rulePayload = parentStyles.matchedCSSRules[i]; 627 var rulePayload = parentStyles.matchedCSSRules[i];
628 if (!this._containsInherited(rulePayload.style)) 628 if (!this._containsInherited(rulePayload.style))
629 continue; 629 continue;
630 var rule = rulePayload; 630 var rule = rulePayload;
631 631
632 if (!separatorInserted) { 632 if (!separatorInserted) {
633 insertInheritedNodeSeparator(parentNode); 633 insertInheritedNodeSeparator(parentNode);
634 separatorInserted = true; 634 separatorInserted = true;
635 } 635 }
636 styleRules.push({ style: rule.style, selectorText: rule.selector Text, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, isInherited: true, parentNode: parentNode, editable: !!(rule.style && rule.style.id) }); 636 styleRules.push({ style: rule.style, selectorText: rule.selector Text, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, isInherited: true, parentNode: parentNode, editable: !!(rule.style && rule.style.styleSheetI d) });
637 } 637 }
638 parentNode = parentNode.parentNode; 638 parentNode = parentNode.parentNode;
639 } 639 }
640 return styleRules; 640 return styleRules;
641 }, 641 },
642 642
643 _markUsedProperties: function(styleRules, usedProperties) 643 _markUsedProperties: function(styleRules, usedProperties)
644 { 644 {
645 var foundImportantProperties = {}; 645 var foundImportantProperties = {};
646 var propertyToEffectiveRule = {}; 646 var propertyToEffectiveRule = {};
(...skipping 463 matching lines...) Expand 10 before | Expand all | Expand 10 after
1110 this._selectorElement.addEventListener("click", this._handleSelectorClick.bi nd(this), false); 1110 this._selectorElement.addEventListener("click", this._handleSelectorClick.bi nd(this), false);
1111 this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.b ind(this), false); 1111 this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.b ind(this), false);
1112 this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this ), false); 1112 this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this ), false);
1113 1113
1114 if (this.rule) { 1114 if (this.rule) {
1115 // Prevent editing the user agent and user rules. 1115 // Prevent editing the user agent and user rules.
1116 if (this.rule.isUserAgent || this.rule.isUser) 1116 if (this.rule.isUserAgent || this.rule.isUser)
1117 this.editable = false; 1117 this.editable = false;
1118 else { 1118 else {
1119 // Check this is a real CSSRule, not a bogus object coming from WebI nspector.BlankStylePropertiesSection. 1119 // Check this is a real CSSRule, not a bogus object coming from WebI nspector.BlankStylePropertiesSection.
1120 if (this.rule.id) 1120 if (this.rule.styleSheetId)
1121 this.navigable = !!this.rule.resourceURL(); 1121 this.navigable = !!this.rule.resourceURL();
1122 } 1122 }
1123 this.titleElement.classList.add("styles-selector"); 1123 this.titleElement.classList.add("styles-selector");
1124 } 1124 }
1125 1125
1126 this._usedProperties = styleRule.usedProperties; 1126 this._usedProperties = styleRule.usedProperties;
1127 1127
1128 this._selectorRefElement = document.createElement("div"); 1128 this._selectorRefElement = document.createElement("div");
1129 this._selectorRefElement.className = "subtitle"; 1129 this._selectorRefElement.className = "subtitle";
1130 this._mediaListElement = this.titleElement.createChild("div", "media-list"); 1130 this._mediaListElement = this.titleElement.createChild("div", "media-list");
(...skipping 14 matching lines...) Expand all
1145 } 1145 }
1146 1146
1147 WebInspector.StylePropertiesSection.prototype = { 1147 WebInspector.StylePropertiesSection.prototype = {
1148 /** 1148 /**
1149 * @param {!WebInspector.CSSRule} editedRule 1149 * @param {!WebInspector.CSSRule} editedRule
1150 * @param {!WebInspector.TextRange} oldRange 1150 * @param {!WebInspector.TextRange} oldRange
1151 * @param {!WebInspector.TextRange} newRange 1151 * @param {!WebInspector.TextRange} newRange
1152 */ 1152 */
1153 _styleSheetRuleEdited: function(editedRule, oldRange, newRange) 1153 _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
1154 { 1154 {
1155 if (!this.rule || !this.rule.id) 1155 if (!this.rule || !this.rule.styleSheetId)
1156 return; 1156 return;
1157 if (this.rule !== editedRule) 1157 if (this.rule !== editedRule)
1158 this.rule.sourceStyleSheetEdited(this.rule.id.styleSheetId, oldRange , newRange); 1158 this.rule.sourceStyleSheetEdited(this.rule.styleSheetId, oldRange, n ewRange);
1159 this._updateMediaList(); 1159 this._updateMediaList();
1160 this._updateRuleOrigin(); 1160 this._updateRuleOrigin();
1161 }, 1161 },
1162 1162
1163 /** 1163 /**
1164 * @param {!Object} styleRule 1164 * @param {!Object} styleRule
1165 */ 1165 */
1166 _createMediaList: function(styleRule) 1166 _createMediaList: function(styleRule)
1167 { 1167 {
1168 if (!styleRule.media) 1168 if (!styleRule.media)
(...skipping 275 matching lines...) Expand 10 before | Expand all | Expand 10 after
1444 for (var i = 0; i < selectors.length ; ++i) { 1444 for (var i = 0; i < selectors.length ; ++i) {
1445 if (i) 1445 if (i)
1446 fragment.appendChild(document.createTextNode(", ")); 1446 fragment.appendChild(document.createTextNode(", "));
1447 var isSelectorMatching = matchingSelectors[currentMatch] === i; 1447 var isSelectorMatching = matchingSelectors[currentMatch] === i;
1448 if (isSelectorMatching) 1448 if (isSelectorMatching)
1449 ++currentMatch; 1449 ++currentMatch;
1450 var rawLocation = new WebInspector.CSSLocation(this._parentPane._tar get, rule.sourceURL, rule.lineNumberInSource(i), rule.columnNumberInSource(i)); 1450 var rawLocation = new WebInspector.CSSLocation(this._parentPane._tar get, rule.sourceURL, rule.lineNumberInSource(i), rule.columnNumberInSource(i));
1451 var matchingSelectorClass = isSelectorMatching ? " selector-matches" : ""; 1451 var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
1452 var selectorElement = document.createElement("span"); 1452 var selectorElement = document.createElement("span");
1453 selectorElement.className = "simple-selector" + matchingSelectorClas s; 1453 selectorElement.className = "simple-selector" + matchingSelectorClas s;
1454 if (rule.id) 1454 if (rule.styleSheetId)
1455 selectorElement._selectorIndex = i; 1455 selectorElement._selectorIndex = i;
1456 selectorElement.textContent = selectors[i].value; 1456 selectorElement.textContent = selectors[i].value;
1457 1457
1458 fragment.appendChild(selectorElement); 1458 fragment.appendChild(selectorElement);
1459 } 1459 }
1460 1460
1461 this._selectorElement.removeChildren(); 1461 this._selectorElement.removeChildren();
1462 this._selectorElement.appendChild(fragment); 1462 this._selectorElement.appendChild(fragment);
1463 this._markSelectorHighlights(); 1463 this._markSelectorHighlights();
1464 }, 1464 },
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
1516 var link = WebInspector.linkifyResourceAsNode(url, line, "", url + " :" + (line + 1)); 1516 var link = WebInspector.linkifyResourceAsNode(url, line, "", url + " :" + (line + 1));
1517 link.classList.add("webkit-html-resource-link"); 1517 link.classList.add("webkit-html-resource-link");
1518 link.setAttribute("data-uncopyable", link.textContent); 1518 link.setAttribute("data-uncopyable", link.textContent);
1519 link.textContent = ""; 1519 link.textContent = "";
1520 return link; 1520 return link;
1521 } 1521 }
1522 1522
1523 if (this.styleRule.sourceURL) { 1523 if (this.styleRule.sourceURL) {
1524 var firstMatchingIndex = this.styleRule.rule.matchingSelectors && th is.rule.matchingSelectors.length ? this.rule.matchingSelectors[0] : 0; 1524 var firstMatchingIndex = this.styleRule.rule.matchingSelectors && th is.rule.matchingSelectors.length ? this.rule.matchingSelectors[0] : 0;
1525 var matchingSelectorLocation = new WebInspector.CSSLocation(this._pa rentPane._target, this.styleRule.sourceURL, this.rule.lineNumberInSource(firstMa tchingIndex), this.rule.columnNumberInSource(firstMatchingIndex)); 1525 var matchingSelectorLocation = new WebInspector.CSSLocation(this._pa rentPane._target, this.styleRule.sourceURL, this.rule.lineNumberInSource(firstMa tchingIndex), this.rule.columnNumberInSource(firstMatchingIndex));
1526 return this._parentPane._linkifier.linkifyCSSLocation(this.rule.id.s tyleSheetId, matchingSelectorLocation) || linkifyUncopyable(this.styleRule.sourc eURL, this.rule.lineNumberInSource()); 1526 return this._parentPane._linkifier.linkifyCSSLocation(this.rule.styl eSheetId, matchingSelectorLocation) || linkifyUncopyable(this.styleRule.sourceUR L, this.rule.lineNumberInSource());
1527 } 1527 }
1528 1528
1529 if (!this.rule) 1529 if (!this.rule)
1530 return document.createTextNode(""); 1530 return document.createTextNode("");
1531 1531
1532 if (this.rule.isUserAgent) 1532 if (this.rule.isUserAgent)
1533 return document.createTextNode(WebInspector.UIString("user agent sty lesheet")); 1533 return document.createTextNode(WebInspector.UIString("user agent sty lesheet"));
1534 if (this.rule.isUser) 1534 if (this.rule.isUser)
1535 return document.createTextNode(WebInspector.UIString("user styleshee t")); 1535 return document.createTextNode(WebInspector.UIString("user styleshee t"));
1536 if (this.rule.isViaInspector) 1536 if (this.rule.isViaInspector)
(...skipping 22 matching lines...) Expand all
1559 return; 1559 return;
1560 } 1560 }
1561 this.expand(); 1561 this.expand();
1562 this.addNewBlankProperty().startEditing(); 1562 this.addNewBlankProperty().startEditing();
1563 }, 1563 },
1564 1564
1565 _handleSelectorClick: function(event) 1565 _handleSelectorClick: function(event)
1566 { 1566 {
1567 if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && this.navi gable && event.target.classList.contains("simple-selector")) { 1567 if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && this.navi gable && event.target.classList.contains("simple-selector")) {
1568 var index = event.target._selectorIndex; 1568 var index = event.target._selectorIndex;
1569 var styleSheetHeader = this._parentPane._target.cssModel.styleSheetH eaderForId(this.rule.id.styleSheetId); 1569 var styleSheetHeader = this._parentPane._target.cssModel.styleSheetH eaderForId(this.rule.styleSheetId);
1570 var uiLocation = styleSheetHeader.rawLocationToUILocation(this.rule. lineNumberInSource(index), this.rule.columnNumberInSource(index)); 1570 var uiLocation = styleSheetHeader.rawLocationToUILocation(this.rule. lineNumberInSource(index), this.rule.columnNumberInSource(index));
1571 WebInspector.Revealer.reveal(uiLocation); 1571 WebInspector.Revealer.reveal(uiLocation);
1572 return; 1572 return;
1573 } 1573 }
1574 this._startEditingOnMouseEvent(); 1574 this._startEditingOnMouseEvent();
1575 event.consume(true); 1575 event.consume(true);
1576 }, 1576 },
1577 1577
1578 _startEditingOnMouseEvent: function() 1578 _startEditingOnMouseEvent: function()
1579 { 1579 {
(...skipping 1734 matching lines...) Expand 10 before | Expand all | Expand 10 after
3314 return; 3314 return;
3315 } 3315 }
3316 3316
3317 var results = this._cssCompletions.startsWith(prefix); 3317 var results = this._cssCompletions.startsWith(prefix);
3318 var selectedIndex = this._cssCompletions.mostUsedOf(results); 3318 var selectedIndex = this._cssCompletions.mostUsedOf(results);
3319 completionsReadyCallback(results, selectedIndex); 3319 completionsReadyCallback(results, selectedIndex);
3320 }, 3320 },
3321 3321
3322 __proto__: WebInspector.TextPrompt.prototype 3322 __proto__: WebInspector.TextPrompt.prototype
3323 } 3323 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698