Changeset 143207 in webkit
- Timestamp:
- Feb 18, 2013 6:01:54 AM (11 years ago)
- Location:
- trunk
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r143206 r143207 1 2013-02-18 Vladislav Kaznacheev <kaznacheev@chromium.org> 2 3 Web Inspector: Color picker should not be available in Computed Styles pane 4 https://bugs.webkit.org/show_bug.cgi?id=109697 5 6 Reviewed by Pavel Feldman. 7 8 * inspector/styles/undo-add-property.html: 9 1 10 2013-02-18 Andrey Adaikin <aandrey@chromium.org> 2 11 -
trunk/LayoutTests/inspector/styles/undo-add-property.html
r108995 r143207 41 41 42 42 var treeItem = InspectorTest.getMatchedStylePropertyTreeItem("font-weight"); 43 var treeElement = treeItem.section .addNewBlankProperty(index);43 var treeElement = treeItem.section().addNewBlankProperty(index); 44 44 treeElement.applyStyleText(propertyText, true, true); 45 45 InspectorTest.waitForStyles("container", step1); -
trunk/Source/WebCore/ChangeLog
r143206 r143207 1 2013-02-18 Vladislav Kaznacheev <kaznacheev@chromium.org> 2 3 Web Inspector: Color picker should not be available in Computed Styles pane 4 https://bugs.webkit.org/show_bug.cgi?id=109697 5 6 Reviewed by Pavel Feldman. 7 8 Refactored PropertiesSection and TreeElement inheritors in StylesSidebarPane.js for cleaner separation 9 of read-only and editable properties. 10 11 * inspector/front-end/StylesSidebarPane.js: 12 (WebInspector.StylePropertiesSection.prototype.onpopulate): 13 (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty): 14 (WebInspector.ComputedStylePropertiesSection): 15 (WebInspector.ComputedStylePropertiesSection.prototype.onpopulate): 16 (WebInspector.BlankStylePropertiesSection): 17 (WebInspector.StylePropertyTreeElementBase): 18 (WebInspector.StylePropertyTreeElementBase.prototype.node): 19 (WebInspector.StylePropertyTreeElementBase.prototype.editablePane): 20 (WebInspector.StylePropertyTreeElementBase.prototype.onattach): 21 (WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.linkifyURL): 22 (WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.): 23 (WebInspector.StylePropertyTreeElementBase.prototype): 24 (.event): 25 (.isRevert): 26 1 27 2013-02-18 Andrey Adaikin <aandrey@chromium.org> 2 28 -
trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js
r142978 r143207 1041 1041 var inherited = this.isPropertyInherited(property.name); 1042 1042 var overloaded = property.inactive || this.isPropertyOverloaded(property.name); 1043 var item = new WebInspector.StylePropertyTreeElement(this , this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);1043 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded); 1044 1044 this.propertiesTreeOutline.appendChild(item); 1045 1045 } … … 1075 1075 var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), "", "style", true, true, undefined); 1076 1076 var overloaded = property.inactive || this.isPropertyOverloaded(property.name, true); 1077 var item = new WebInspector.StylePropertyTreeElement(this , this._parentPane, this.styleRule, style, shorthandProperty, /* isShorthand */ true, /* inherited */ false, overloaded);1077 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, shorthandProperty, /* isShorthand */ true, /* inherited */ false, overloaded); 1078 1078 this.propertiesTreeOutline.appendChild(item); 1079 1079 generatedShorthands[shorthand] = shorthandProperty; … … 1085 1085 var inherited = this.isPropertyInherited(property.name); 1086 1086 var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand); 1087 var item = new WebInspector.StylePropertyTreeElement(this , this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);1087 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded); 1088 1088 this.propertiesTreeOutline.appendChild(item); 1089 1089 } … … 1159 1159 var style = this.styleRule.style; 1160 1160 var property = style.newBlankProperty(index); 1161 var item = new WebInspector.StylePropertyTreeElement(this , this._parentPane, this.styleRule, style, property, false, false, false);1161 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, false, false, false); 1162 1162 index = property.index; 1163 1163 this.propertiesTreeOutline.insertChild(item, index); … … 1348 1348 * @constructor 1349 1349 * @extends {WebInspector.PropertiesSection} 1350 * @param {!WebInspector.StylesSidebarPane} parentPane1350 * @param {!WebInspector.StylesSidebarPane} stylesPane 1351 1351 * @param {!Object} styleRule 1352 1352 * @param {!Object.<string, boolean>} usedProperties 1353 1353 */ 1354 WebInspector.ComputedStylePropertiesSection = function( parentPane, styleRule, usedProperties)1354 WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, usedProperties) 1355 1355 { 1356 1356 WebInspector.PropertiesSection.call(this, ""); 1357 1357 this.headerElement.addStyleClass("hidden"); 1358 1358 this.element.className = "styles-section monospace first-styles-section read-only computed-style"; 1359 this._ parentPane = parentPane;1359 this._stylesPane = stylesPane; 1360 1360 this.styleRule = styleRule; 1361 1361 this._usedProperties = usedProperties; … … 1367 1367 1368 1368 WebInspector.ComputedStylePropertiesSection.prototype = { 1369 get pane()1370 {1371 return this._parentPane;1372 },1373 1374 1369 collapse: function(dontRememberState) 1375 1370 { … … 1416 1411 var property = uniqueProperties[i]; 1417 1412 var inherited = this._isPropertyInherited(property.name); 1418 var item = new WebInspector. StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, false, inherited, false);1413 var item = new WebInspector.ComputedStylePropertyTreeElement(this._stylesPane, this.styleRule, style, property, inherited); 1419 1414 this.propertiesTreeOutline.appendChild(item); 1420 1415 this._propertyTreeElements[property.name] = item; … … 1471 1466 * @constructor 1472 1467 * @extends {WebInspector.StylePropertiesSection} 1468 * @param {WebInspector.StylesSidebarPane} stylesPane 1469 * @param {string} defaultSelectorText 1473 1470 */ 1474 WebInspector.BlankStylePropertiesSection = function( parentPane, defaultSelectorText)1471 WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText) 1475 1472 { 1476 WebInspector.StylePropertiesSection.call(this, parentPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);1473 WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false); 1477 1474 this.element.addStyleClass("blank-section"); 1478 1475 } … … 1550 1547 * @constructor 1551 1548 * @extends {TreeElement} 1552 * @param {WebInspector.StylePropertiesSection|WebInspector.ComputedStylePropertiesSection} section1553 * @param {?WebInspector.StylesSidebarPane} parentPane1554 1549 * @param {Object} styleRule 1555 1550 * @param {WebInspector.CSSStyleDeclaration} style 1556 1551 * @param {WebInspector.CSSProperty} property 1557 * @param {boolean} isShorthand1558 1552 * @param {boolean} inherited 1559 1553 * @param {boolean} overloaded 1554 * @param {boolean} hasChildren 1560 1555 */ 1561 WebInspector.StylePropertyTreeElement = function(section, parentPane, styleRule, style, property, isShorthand, inherited, overloaded)1556 WebInspector.StylePropertyTreeElementBase = function(styleRule, style, property, inherited, overloaded, hasChildren) 1562 1557 { 1563 this.section = section;1564 this._parentPane = parentPane;1565 1558 this._styleRule = styleRule; 1566 1559 this.style = style; 1567 1560 this.property = property; 1568 this.isShorthand = isShorthand;1569 1561 this._inherited = inherited; 1570 1562 this._overloaded = overloaded; 1571 1563 1572 1564 // Pass an empty title, the title gets made later in onattach. 1573 TreeElement.call(this, "", null, isShorthand);1565 TreeElement.call(this, "", null, hasChildren); 1574 1566 1575 1567 this.selectable = false; 1576 1568 } 1577 1569 1578 WebInspector.StylePropertyTreeElement.prototype = { 1570 WebInspector.StylePropertyTreeElementBase.prototype = { 1571 /** 1572 * @return {?WebInspector.DOMNode} 1573 */ 1574 node: function() 1575 { 1576 return null; // Overridden by ancestors. 1577 }, 1578 1579 /** 1580 * @return {?WebInspector.StylesSidebarPane} 1581 */ 1582 editablePane: function() 1583 { 1584 return null; // Overridden by ancestors. 1585 }, 1586 1579 1587 get inherited() 1580 1588 { … … 1653 1661 { 1654 1662 this.updateTitle(); 1655 this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));1656 this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));1657 this.listItemElement.addEventListener("click", this._mouseClick.bind(this));1658 },1659 1660 _mouseDown: function(event)1661 {1662 if (this._parentPane) {1663 this._parentPane._mouseDownTreeElement = this;1664 this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);1665 this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);1666 }1667 },1668 1669 _resetMouseDownElement: function()1670 {1671 if (this._parentPane) {1672 delete this._parentPane._mouseDownTreeElement;1673 delete this._parentPane._mouseDownTreeElementIsName;1674 delete this._parentPane._mouseDownTreeElementIsValue;1675 }1676 1663 }, 1677 1664 … … 1681 1668 1682 1669 this.updateState(); 1683 1684 var enabledCheckboxElement;1685 if (this.parsedOk) {1686 enabledCheckboxElement = document.createElement("input");1687 enabledCheckboxElement.className = "enabled-button";1688 enabledCheckboxElement.type = "checkbox";1689 enabledCheckboxElement.checked = !this.disabled;1690 enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);1691 }1692 1670 1693 1671 var nameElement = document.createElement("span"); … … 1740 1718 if (self._styleRule.sourceURL) 1741 1719 hrefUrl = WebInspector.ParsedURL.completeURL(self._styleRule.sourceURL, hrefUrl); 1742 else if (self. _parentPane.node)1743 hrefUrl = self. _parentPane.node.resolveURL(hrefUrl);1720 else if (self.node()) 1721 hrefUrl = self.node().resolveURL(hrefUrl); 1744 1722 var hasResource = !!WebInspector.resourceForURL(hrefUrl); 1745 1723 // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI. … … 1753 1731 var color = WebInspector.Color.parse(text); 1754 1732 1755 // We can be called with valid non-color values of |text| (like 'none' from border style) 1756 if (!color) 1733 // We can be called with valid non-color values of |text| (like 'none' from border style) 1734 if (!color) 1757 1735 return document.createTextNode(text); 1758 1736 1759 1737 var format = getFormat(); 1760 var hasSpectrum = self._parentPane; 1761 var spectrumHelper = hasSpectrum ? self._parentPane._spectrumHelper : null; 1738 var spectrumHelper = self.editablePane() && self.editablePane()._spectrumHelper; 1762 1739 var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null; 1763 1740 … … 1788 1765 spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden); 1789 1766 1790 delete self. _parentPane._isEditingStyle;1767 delete self.editablePane()._isEditingStyle; 1791 1768 delete self.originalPropertyText; 1792 1769 } … … 1809 1786 spectrum.displayText = color.toString(format); 1810 1787 self.originalPropertyText = self.property.propertyText; 1811 self. _parentPane._isEditingStyle = true;1788 self.editablePane()._isEditingStyle = true; 1812 1789 spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged); 1813 1790 spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden); … … 1918 1895 return; 1919 1896 1920 // Append the checkbox for root elements of an editable section.1921 if (enabledCheckboxElement && this.treeOutline.section && this.parent.root && !this.section.computedStyle)1922 this.listItemElement.appendChild(enabledCheckboxElement);1923 1897 this.listItemElement.appendChild(nameElement); 1924 1898 this.listItemElement.appendChild(document.createTextNode(": ")); … … 1939 1913 }, 1940 1914 1915 updateState: function() 1916 { 1917 if (!this.listItemElement) 1918 return; 1919 1920 if (this.style.isPropertyImplicit(this.name) || this.value === "initial") 1921 this.listItemElement.addStyleClass("implicit"); 1922 else 1923 this.listItemElement.removeStyleClass("implicit"); 1924 1925 if (this.inherited) 1926 this.listItemElement.addStyleClass("inherited"); 1927 else 1928 this.listItemElement.removeStyleClass("inherited"); 1929 1930 if (this.overloaded) 1931 this.listItemElement.addStyleClass("overloaded"); 1932 else 1933 this.listItemElement.removeStyleClass("overloaded"); 1934 1935 if (this.disabled) 1936 this.listItemElement.addStyleClass("disabled"); 1937 else 1938 this.listItemElement.removeStyleClass("disabled"); 1939 }, 1940 1941 __proto__: TreeElement.prototype 1942 } 1943 1944 /** 1945 * @constructor 1946 * @extends {WebInspector.StylePropertyTreeElementBase} 1947 * @param {WebInspector.StylesSidebarPane} stylesPane 1948 * @param {Object} styleRule 1949 * @param {WebInspector.CSSStyleDeclaration} style 1950 * @param {WebInspector.CSSProperty} property 1951 * @param {boolean} inherited 1952 */ 1953 WebInspector.ComputedStylePropertyTreeElement = function(stylesPane, styleRule, style, property, inherited) 1954 { 1955 WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, false, false); 1956 this._stylesPane = stylesPane; 1957 } 1958 1959 WebInspector.ComputedStylePropertyTreeElement.prototype = { 1960 /** 1961 * @return {?WebInspector.DOMNode} 1962 */ 1963 node: function() 1964 { 1965 return this._stylesPane.node; 1966 }, 1967 1968 /** 1969 * @return {?WebInspector.StylesSidebarPane} 1970 */ 1971 editablePane: function() 1972 { 1973 return null; 1974 }, 1975 1976 __proto__: WebInspector.StylePropertyTreeElementBase.prototype 1977 } 1978 1979 /** 1980 * @constructor 1981 * @extends {WebInspector.StylePropertyTreeElementBase} 1982 * @param {?WebInspector.StylesSidebarPane} stylesPane 1983 * @param {Object} styleRule 1984 * @param {WebInspector.CSSStyleDeclaration} style 1985 * @param {WebInspector.CSSProperty} property 1986 * @param {boolean} isShorthand 1987 * @param {boolean} inherited 1988 * @param {boolean} overloaded 1989 */ 1990 WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, style, property, isShorthand, inherited, overloaded) 1991 { 1992 WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, overloaded, isShorthand); 1993 this._parentPane = stylesPane; 1994 this.isShorthand = isShorthand; 1995 } 1996 1997 WebInspector.StylePropertyTreeElement.prototype = { 1998 /** 1999 * @return {?WebInspector.DOMNode} 2000 */ 2001 node: function() 2002 { 2003 return this._parentPane.node; 2004 }, 2005 2006 /** 2007 * @return {?WebInspector.StylesSidebarPane} 2008 */ 2009 editablePane: function() 2010 { 2011 return this._parentPane; 2012 }, 2013 2014 /** 2015 * @return {WebInspector.StylePropertiesSection} 2016 */ 2017 section: function() 2018 { 2019 return this.treeOutline && this.treeOutline.section; 2020 }, 2021 1941 2022 _updatePane: function(userCallback) 1942 2023 { 1943 if (this.treeOutline && this.treeOutline.section && this.treeOutline.section.pane) 1944 this.treeOutline.section.pane._refreshUpdate(this.treeOutline.section, false, userCallback); 2024 var section = this.section(); 2025 if (section && section.pane) 2026 section.pane._refreshUpdate(section, false, userCallback); 1945 2027 else { 1946 2028 if (userCallback) … … 1961 2043 this._styleRule.style = newStyle; 1962 2044 1963 if (this.treeOutline.section && this.treeOutline.section.pane) 1964 this.treeOutline.section.pane.dispatchEventToListeners("style property toggled"); 2045 var section = this.section(); 2046 if (section && section.pane) 2047 section.pane.dispatchEventToListeners("style property toggled"); 1965 2048 1966 2049 this._updatePane(); … … 1974 2057 }, 1975 2058 1976 updateState: function()1977 {1978 if (!this.listItemElement)1979 return;1980 1981 if (this.style.isPropertyImplicit(this.name) || this.value === "initial")1982 this.listItemElement.addStyleClass("implicit");1983 else1984 this.listItemElement.removeStyleClass("implicit");1985 1986 if (this.inherited)1987 this.listItemElement.addStyleClass("inherited");1988 else1989 this.listItemElement.removeStyleClass("inherited");1990 1991 if (this.overloaded)1992 this.listItemElement.addStyleClass("overloaded");1993 else1994 this.listItemElement.removeStyleClass("overloaded");1995 1996 if (this.disabled)1997 this.listItemElement.addStyleClass("disabled");1998 else1999 this.listItemElement.removeStyleClass("disabled");2000 },2001 2002 2059 onpopulate: function() 2003 2060 { … … 2010 2067 var name = longhandProperties[i].name; 2011 2068 2012 if (this.treeOutline.section) { 2013 var inherited = this.treeOutline.section.isPropertyInherited(name); 2014 var overloaded = this.treeOutline.section.isPropertyOverloaded(name); 2069 var section = this.section(); 2070 if (section) { 2071 var inherited = section.isPropertyInherited(name); 2072 var overloaded = section.isPropertyOverloaded(name); 2015 2073 } 2016 2074 … … 2019 2077 continue; 2020 2078 2021 var item = new WebInspector.StylePropertyTreeElement(this. section, this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded);2079 var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded); 2022 2080 this.appendChild(item); 2023 2081 } … … 2036 2094 }, 2037 2095 2096 onattach: function() 2097 { 2098 WebInspector.StylePropertyTreeElementBase.prototype.onattach.call(this); 2099 2100 this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this)); 2101 this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this)); 2102 this.listItemElement.addEventListener("click", this._mouseClick.bind(this)); 2103 }, 2104 2105 _mouseDown: function(event) 2106 { 2107 if (this._parentPane) { 2108 this._parentPane._mouseDownTreeElement = this; 2109 this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target); 2110 this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target); 2111 } 2112 }, 2113 2114 _resetMouseDownElement: function() 2115 { 2116 if (this._parentPane) { 2117 delete this._parentPane._mouseDownTreeElement; 2118 delete this._parentPane._mouseDownTreeElementIsName; 2119 delete this._parentPane._mouseDownTreeElementIsValue; 2120 } 2121 }, 2122 2123 updateTitle: function() 2124 { 2125 WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this); 2126 2127 if (this.parsedOk && this.section() && this.parent.root) { 2128 var enabledCheckboxElement = document.createElement("input"); 2129 enabledCheckboxElement.className = "enabled-button"; 2130 enabledCheckboxElement.type = "checkbox"; 2131 enabledCheckboxElement.checked = !this.disabled; 2132 enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false); 2133 this.listItemElement.appendChild(enabledCheckboxElement); 2134 } 2135 }, 2136 2038 2137 _mouseClick: function(event) 2039 2138 { … … 2044 2143 2045 2144 if (event.target === this.listItemElement) { 2046 if (!this.section.editable) 2145 var section = this.section(); 2146 if (!section || !section.editable) 2047 2147 return; 2048 2148 2049 if ( this.section._checkWillCancelEditing())2149 if (section._checkWillCancelEditing()) 2050 2150 return; 2051 this.section.addNewBlankProperty(this.property.index + 1).startEditing();2151 section.addNewBlankProperty(this.property.index + 1).startEditing(); 2052 2152 return; 2053 2153 } … … 2075 2175 return; 2076 2176 2077 if (this.treeOutline.section && !this.treeOutline.section.editable) 2177 var section = this.section(); 2178 if (section && !section.editable) 2078 2179 return; 2079 2180 … … 2331 2432 var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue); 2332 2433 var shouldCommitNewProperty = this._newProperty && (moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput)); 2434 var section = this.section(); 2333 2435 if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) { 2334 this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, this.treeOutline.section);2436 section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section); 2335 2437 var propertyText; 2336 2438 if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent))) … … 2346 2448 if (!isDataPasted && !this._newProperty) 2347 2449 this.updateTitle(); 2348 moveToNextCallback.call(this, this._newProperty, false, this.treeOutline.section);2450 moveToNextCallback.call(this, this._newProperty, false, section); 2349 2451 } 2350 2452 … … 2446 2548 return; 2447 2549 2448 var section = this. treeOutline.section;2550 var section = this.section(); 2449 2551 styleText = styleText.replace(/\s/g, " ").trim(); // Replace with whitespace. 2450 2552 var styleTextLength = styleText.length; … … 2480 2582 section.pane.dispatchEventToListeners("style edited"); 2481 2583 2482 if (updateInterface && currentNode === section.pane.node) {2584 if (updateInterface && currentNode === this.node()) { 2483 2585 this._updatePane(userCallback); 2484 2586 return; … … 2503 2605 isEventWithinDisclosureTriangle: function(event) 2504 2606 { 2505 if (!this.section.computedStyle) 2506 return event.target === this._expandElement; 2507 return TreeElement.prototype.isEventWithinDisclosureTriangle.call(this, event); 2508 }, 2509 2510 __proto__: TreeElement.prototype 2607 return event.target === this._expandElement; 2608 }, 2609 2610 __proto__: WebInspector.StylePropertyTreeElementBase.prototype 2511 2611 } 2512 2612
Note: See TracChangeset
for help on using the changeset viewer.