15c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/* 25c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Copyright (C) 2007 Apple Inc. All rights reserved. 35c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Copyright (C) 2009 Joseph Pecoraro 45c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 55c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Redistribution and use in source and binary forms, with or without 65c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * modification, are permitted provided that the following conditions 75c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * are met: 85c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 95c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 1. Redistributions of source code must retain the above copyright 105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer. 115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 2. Redistributions in binary form must reproduce the above copyright 125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer in the 135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * documentation and/or other materials provided with the distribution. 145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of 155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * its contributors may be used to endorse or promote products derived 165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * from this software without specific prior written permission. 175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY 195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.SidebarPane} 335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {WebInspector.ComputedStyleSidebarPane} computedStylePane 345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {function(DOMAgent.NodeId, string, boolean)} setPseudoClassCallback 355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylesSidebarPane = function(computedStylePane, setPseudoClassCallback) 375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles")); 395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement = document.createElement("select"); 415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.className = "select-settings"; 425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var option = document.createElement("option"); 445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.value = WebInspector.Color.Format.Original; 455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.label = WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "As authored" : "As Authored"); 465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.appendChild(option); 475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option = document.createElement("option"); 495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.value = WebInspector.Color.Format.HEX; 505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.label = WebInspector.UIString("Hex Colors"); 515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.appendChild(option); 525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option = document.createElement("option"); 545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.value = WebInspector.Color.Format.RGB; 555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.label = WebInspector.UIString("RGB Colors"); 565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.appendChild(option); 575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option = document.createElement("option"); 595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.value = WebInspector.Color.Format.HSL; 605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) option.label = WebInspector.UIString("HSL Colors"); 615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.appendChild(option); 625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Prevent section from collapsing. 645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var muteEventListener = function(event) { event.consume(true); }; 655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.addEventListener("click", muteEventListener, true); 675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false); 685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._updateColorFormatFilter(); 695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.appendChild(this.settingsSelectElement); 715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton = document.createElement("button"); 735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton.className = "pane-title-button element-state"; 745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton.title = WebInspector.UIString("Toggle Element State"); 755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton.addEventListener("click", this._toggleElementStatePane.bind(this), false); 765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.appendChild(this._elementStateButton); 775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var addButton = document.createElement("button"); 795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addButton.className = "pane-title-button add"; 805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addButton.id = "add-style-button-test-id"; 815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addButton.title = WebInspector.UIString("New Style Rule"); 825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addButton.addEventListener("click", this._createNewRule.bind(this), false); 835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.appendChild(addButton); 845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._computedStylePane = computedStylePane; 865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) computedStylePane._stylesSidebarPane = this; 875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._setPseudoClassCallback = setPseudoClassCallback; 885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true); 895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this)); 905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._createElementStatePane(); 925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.bodyElement.appendChild(this._elementStatePane); 935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer = document.createElement("div"); 945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.bodyElement.appendChild(this._sectionsContainer); 955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._spectrumHelper = new WebInspector.SpectrumPopupHelper(); 975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter()); 985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, this._styleSheetOrMediaQueryResultChanged, this); 10093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, this._styleSheetOrMediaQueryResultChanged, this); 1015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this); 1025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged, this._styleSheetOrMediaQueryResultChanged, this); 1035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrModified, this._attributeChanged, this); 1045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributeChanged, this); 1055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this)); 10693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false); 10793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) document.body.addEventListener("keydown", this._keyDown.bind(this), false); 10893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) document.body.addEventListener("keyup", this._keyUp.bind(this), false); 1095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 1105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// Keep in sync with RenderStyleConstants.h PseudoId enum. Array below contains pseudo id names for corresponding enum indexes. 1125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// First item is empty due to its artificial NOPSEUDO nature in the enum. 1135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// FIXME: find a way of generating this mapping or getting it from combination of RenderStyleConstants and CSSSelector.cpp at 1145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)// runtime. 1155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylesSidebarPane.PseudoIdNames = [ 1165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "", "first-line", "first-letter", "before", "after", "selection", "", "-webkit-scrollbar", "-webkit-file-upload-button", 1175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-input-placeholder", "-webkit-slider-thumb", "-webkit-search-cancel-button", "-webkit-search-decoration", 1185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-search-results-decoration", "-webkit-search-results-button", "-webkit-media-controls-panel", 1195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-play-button", "-webkit-media-controls-mute-button", "-webkit-media-controls-timeline", 1205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-timeline-container", "-webkit-media-controls-volume-slider", 1215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-volume-slider-container", "-webkit-media-controls-current-time-display", 1225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-time-remaining-display", "-webkit-media-controls-seek-back-button", "-webkit-media-controls-seek-forward-button", 1235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-fullscreen-button", "-webkit-media-controls-rewind-button", "-webkit-media-controls-return-to-realtime-button", 1245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-media-controls-toggle-closed-captions-button", "-webkit-media-controls-status-display", "-webkit-scrollbar-thumb", 1255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-scrollbar-button", "-webkit-scrollbar-track", "-webkit-scrollbar-track-piece", "-webkit-scrollbar-corner", 1265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) "-webkit-resizer", "-webkit-inner-spin-button", "-webkit-outer-spin-button" 1275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)]; 1285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 129521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles)WebInspector.StylesSidebarPane._colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?!-))/g; 130521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 1315267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles)/** 1325267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) * @param {WebInspector.CSSProperty} property 1335267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) */ 1345267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles)WebInspector.StylesSidebarPane.createExclamationMark = function(property) 1355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 13653e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var exclamationElement = document.createElement("div"); 1375267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) exclamationElement.className = "exclamation-mark" + (WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property) ? "" : " warning-icon-small"); 1385267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) exclamationElement.title = WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet()[property.name.toLowerCase()] ? WebInspector.UIString("Invalid property value.") : WebInspector.UIString("Unknown property name."); 1395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return exclamationElement; 1405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 1415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1425267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles)/** 143521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) * @param {WebInspector.Color} color 144521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) */ 145521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles)WebInspector.StylesSidebarPane._colorFormat = function(color) 146521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles){ 147521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) const cf = WebInspector.Color.Format; 148521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var format; 149521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var formatSetting = WebInspector.settings.colorFormat.get(); 150521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) if (formatSetting === cf.Original) 151521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) format = cf.Original; 152521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) else if (formatSetting === cf.RGB) 153521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) format = (color.hasAlpha() ? cf.RGBA : cf.RGB); 154521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) else if (formatSetting === cf.HSL) 155521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) format = (color.hasAlpha() ? cf.HSLA : cf.HSL); 156521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) else if (!color.hasAlpha()) 157521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) format = (color.canBeShortHex() ? cf.ShortHEX : cf.HEX); 158521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) else 159521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) format = cf.RGBA; 160521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 161521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) return format; 162521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles)} 163521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 164521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles)/** 1655267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) * @param {WebInspector.CSSProperty} property 1665267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) */ 1675267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles)WebInspector.StylesSidebarPane._ignoreErrorsForProperty = function(property) { 1685267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) function hasUnknownVendorPrefix(string) 1695267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) { 1705267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return !string.startsWith("-webkit-") && /^[-_][\w\d]+-\w/.test(string); 1715267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) } 1725267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1735267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) var name = property.name.toLowerCase(); 1745267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1755267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) // IE hack. 1765267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (name.charAt(0) === "_") 1775267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1785267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1795267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) // IE has a different format for this. 1805267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (name === "filter") 1815267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1825267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1835267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) // Common IE-specific property prefix. 1845267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (name.startsWith("scrollbar-")) 1855267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1865267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (hasUnknownVendorPrefix(name)) 1875267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1885267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1895267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) var value = property.value.toLowerCase(); 1905267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1915267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) // IE hack. 1925267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (value.endsWith("\9")) 1935267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1945267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (hasUnknownVendorPrefix(value)) 1955267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return true; 1965267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 1975267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return false; 1985267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles)} 1995267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 2005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylesSidebarPane.prototype = { 201926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 202926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {Event} event 203926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _contextMenuEventFired: function(event) 2055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // We start editing upon click -> default navigation to resources panel is not available 2075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Hence we add a soft context menu for hrefs. 2085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var contextMenu = new WebInspector.ContextMenu(event); 2095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) contextMenu.appendApplicableItems(event.target); 2105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) contextMenu.show(); 2115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 2125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get _forcedPseudoClasses() 2145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.node ? (this.node.getUserProperty("pseudoState") || undefined) : undefined; 2165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 2175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _updateForcedPseudoStateInputs: function() 2195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.node) 2215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 2225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var nodePseudoState = this._forcedPseudoClasses; 2245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!nodePseudoState) 2255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nodePseudoState = []; 2265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inputs = this._elementStatePane.inputs; 2285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < inputs.length; ++i) 2295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0; 2305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 2315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 232926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 233926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.DOMNode=} node 234926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean=} forceUpdate 235926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) update: function(node, forceUpdate) 2375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._spectrumHelper.hide(); 23993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._discardElementUnderMouse(); 2405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var refresh = false; 2425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (forceUpdate) 2445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this.node; 2455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!forceUpdate && (node === this.node)) 2475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) refresh = true; 2485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (node && node.nodeType() === Node.TEXT_NODE && node.parentNode) 2505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) node = node.parentNode; 2515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (node && node.nodeType() !== Node.ELEMENT_NODE) 2535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) node = null; 2545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (node) 2565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.node = node; 2575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 2585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) node = this.node; 2595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._updateForcedPseudoStateInputs(); 2615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (refresh) 2635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._refreshUpdate(); 2645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 2655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 2665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 2675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 2695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {WebInspector.StylePropertiesSection=} editedSection 2705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {boolean=} forceFetchComputedStyle 2715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {function()=} userCallback 2725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 2735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _refreshUpdate: function(editedSection, forceFetchComputedStyle, userCallback) 2745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._refreshUpdateInProgress) { 2765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._lastNodeForInnerRefresh = this.node; 2775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 2785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var node = this._validateNode(userCallback); 2815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!node) 2825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 2835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function computedStyleCallback(computedStyle) 2855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._refreshUpdateInProgress; 2875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._lastNodeForInnerRefresh) { 2895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._lastNodeForInnerRefresh; 2905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._refreshUpdate(editedSection, forceFetchComputedStyle, userCallback); 2915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 2925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.node === node && computedStyle) 2955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._innerRefreshUpdate(node, computedStyle, editedSection); 2965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (userCallback) 2985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 2995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 301926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this._computedStylePane.isShowing() || forceFetchComputedStyle) { 3025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._refreshUpdateInProgress = true; 3035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.getComputedStyleAsync(node.id, computedStyleCallback.bind(this)); 3045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 3055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._innerRefreshUpdate(node, null, editedSection); 3065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (userCallback) 3075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 3085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 3105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _rebuildUpdate: function() 3125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._rebuildUpdateInProgress) { 3145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._lastNodeForInnerRebuild = this.node; 3155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 3165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var node = this._validateNode(); 3195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!node) 3205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 3215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdateInProgress = true; 3235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var resultStyles = {}; 3255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function stylesCallback(matchedResult) 3275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._rebuildUpdateInProgress; 3295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var lastNodeForRebuild = this._lastNodeForInnerRebuild; 3315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (lastNodeForRebuild) { 3325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._lastNodeForInnerRebuild; 3335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (lastNodeForRebuild !== this.node) { 3345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 3355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 3365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (matchedResult && this.node === node) { 3405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.matchedCSSRules = matchedResult.matchedCSSRules; 3415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.pseudoElements = matchedResult.pseudoElements; 3425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.inherited = matchedResult.inherited; 3435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._innerRebuildUpdate(node, resultStyles); 3445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (lastNodeForRebuild) { 3475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // lastNodeForRebuild is the same as this.node - another rebuild has been requested. 3485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 3495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 3505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function inlineCallback(inlineStyle, attributesStyle) 3545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.inlineStyle = inlineStyle; 3565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.attributesStyle = attributesStyle; 3575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function computedCallback(computedStyle) 3605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) resultStyles.computedStyle = computedStyle; 3625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 364926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this._computedStylePane.isShowing()) 3655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.getComputedStyleAsync(node.id, computedCallback.bind(this)); 3665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.getInlineStylesAsync(node.id, inlineCallback.bind(this)); 3675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.getMatchedStylesAsync(node.id, true, true, stylesCallback.bind(this)); 3685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 3695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 3715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {function()=} userCallback 3725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 3735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _validateNode: function(userCallback) 3745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.node) { 3765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer.removeChildren(); 3775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._computedStylePane.bodyElement.removeChildren(); 3785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections = {}; 3795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (userCallback) 3805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 3815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return null; 3825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 3835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.node; 3845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 3855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _styleSheetOrMediaQueryResultChanged: function() 3875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._userOperation || this._isEditingStyle) 3895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 3905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 3925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 3935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 3945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _attributeChanged: function(event) 3955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 3965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Any attribute removal or modification can affect the styles of "related" nodes. 3975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Do not touch the styles if they are being edited. 3985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._isEditingStyle || this._userOperation) 3995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 4005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this._canAffectCurrentStyles(event.data.node)) 4025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 4035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 4055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _canAffectCurrentStyles: function(node) 4085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.node && (this.node === node || node.parentNode === this.node.parentNode || node.isAncestor(this.node)); 4105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _innerRefreshUpdate: function(node, computedStyle, editedSection) 4135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var pseudoId in this.sections) { 4155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRules = this._refreshStyleRules(this.sections[pseudoId], computedStyle); 4165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var usedProperties = {}; 4175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._markUsedProperties(styleRules, usedProperties); 4185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._refreshSectionsForStyleRules(styleRules, usedProperties, editedSection); 4195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 4205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (computedStyle) 4215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections[0][0].rebuildComputedTrace(this.sections[0]); 4225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._nodeStylesUpdatedForTest(node, false); 4245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _innerRebuildUpdate: function(node, styles) 4275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer.removeChildren(); 4295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._computedStylePane.bodyElement.removeChildren(); 4305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._linkifier.reset(); 4315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRules = this._rebuildStyleRules(node, styles); 4335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var usedProperties = {}; 4345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._markUsedProperties(styleRules, usedProperties); 4355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections[0] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, 0, null); 4365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var anchorElement = this.sections[0].inheritedPropertiesSeparatorElement; 4375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 438926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (styles.computedStyle) 4395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections[0][0].rebuildComputedTrace(this.sections[0]); 4405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < styles.pseudoElements.length; ++i) { 4425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var pseudoElementCSSRules = styles.pseudoElements[i]; 4435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules = []; 4455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var pseudoId = pseudoElementCSSRules.pseudoId; 4465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var entry = { isStyleSeparator: true, pseudoId: pseudoId }; 4485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(entry); 4495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Add rules in reverse order to match the cascade order. 4515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) { 4525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rule = pseudoElementCSSRules.rules[j]; 45393ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rule.style && rule.style.id) }); 4545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 4555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) usedProperties = {}; 4565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._markUsedProperties(styleRules, usedProperties); 4575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, pseudoId, anchorElement); 4585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 4595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._nodeStylesUpdatedForTest(node, true); 4615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _nodeStylesUpdatedForTest: function(node, rebuild) 4645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Tests override this method. 4665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _refreshStyleRules: function(sections, computedStyle) 4695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var nodeComputedStyle = computedStyle; 4715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRules = []; 4725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; sections && i < sections.length; ++i) { 4735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var section = sections[i]; 4745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (section.isBlank) 4755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 4765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (section.computedStyle) 4775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.styleRule.style = nodeComputedStyle; 478591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule, editable: !!(section.styleRule.style && section.styleRule.style.id), 479591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch isAttribute: section.styleRule.isAttribute, isInherited: section.styleRule.isInherited, parentNode: section.styleRule.parentNode }; 4805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(styleRule); 4815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 4825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return styleRules; 4835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 4845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _rebuildStyleRules: function(node, styles) 4865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var nodeComputedStyle = styles.computedStyle; 4885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections = {}; 4895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRules = []; 4915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 4925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function addAttributesStyle() 4935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 4945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!styles.attributesStyle) 4955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 4965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var attrStyle = { style: styles.attributesStyle, editable: false }; 4975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) attrStyle.selectorText = node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("Attributes Style") + "]"; 4985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(attrStyle); 4995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push({ computedStyle: true, selectorText: "", style: nodeComputedStyle, editable: false }); 5025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Inline style has the greatest specificity. 5045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styles.inlineStyle && node.nodeType() === Node.ELEMENT_NODE) { 5055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inlineStyle = { selectorText: "element.style", style: styles.inlineStyle, isAttribute: true }; 5065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(inlineStyle); 5075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Add rules in reverse order to match the cascade order. 5105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var addedAttributesStyle; 5115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) { 5125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rule = styles.matchedCSSRules[i]; 5135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!WebInspector.settings.showUserAgentStyles.get() && (rule.isUser || rule.isUserAgent)) 5145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if ((rule.isUser || rule.isUserAgent) && !addedAttributesStyle) { 5165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Show element's Style Attributes after all author rules. 5175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addedAttributesStyle = true; 5185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addAttributesStyle(); 5195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 52093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, editable: !!(rule.style && rule.style.id) }); 5215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!addedAttributesStyle) 5245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addAttributesStyle(); 5255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Walk the node structure and identify styles with inherited properties. 5275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var parentNode = node.parentNode; 5285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function insertInheritedNodeSeparator(node) 5295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 5305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var entry = {}; 5315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) entry.isStyleSeparator = true; 5325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) entry.node = node; 5335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(entry); 5345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var parentOrdinal = 0; parentOrdinal < styles.inherited.length; ++parentOrdinal) { 5375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var parentStyles = styles.inherited[parentOrdinal]; 5385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var separatorInserted = false; 5395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (parentStyles.inlineStyle) { 5405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._containsInherited(parentStyles.inlineStyle)) { 5415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: parentStyles.inlineStyle, isAttribute: true, isInherited: true, parentNode: parentNode }; 5425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!separatorInserted) { 5435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) insertInheritedNodeSeparator(parentNode); 5445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorInserted = true; 5455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRules.push(inlineStyle); 5475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = parentStyles.matchedCSSRules.length - 1; i >= 0; --i) { 5515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rulePayload = parentStyles.matchedCSSRules[i]; 5525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this._containsInherited(rulePayload.style)) 5535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rule = rulePayload; 5555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!WebInspector.settings.showUserAgentStyles.get() && (rule.isUser || rule.isUserAgent)) 5565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!separatorInserted) { 5595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) insertInheritedNodeSeparator(parentNode); 5605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorInserted = true; 5615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 56293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) styleRules.push({ style: rule.style, selectorText: rule.selectorText, media: rule.media, sourceURL: rule.resourceURL(), rule: rule, isInherited: true, parentNode: parentNode, editable: !!(rule.style && rule.style.id) }); 5635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) parentNode = parentNode.parentNode; 5655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 5665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return styleRules; 5675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 5685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _markUsedProperties: function(styleRules, usedProperties) 5705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 5715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var foundImportantProperties = {}; 5725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var propertyToEffectiveRule = {}; 573591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch var inheritedPropertyToNode = {}; 5745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < styleRules.length; ++i) { 5755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRule = styleRules[i]; 5765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.computedStyle || styleRule.isStyleSeparator) 5775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.section && styleRule.section.noAffect) 5795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRule.usedProperties = {}; 5825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var style = styleRule.style; 5845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var allProperties = style.allProperties; 5855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var j = 0; j < allProperties.length; ++j) { 5865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = allProperties[j]; 5875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!property.isLive || !property.parsedOk) 5885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Do not pick non-inherited properties from inherited styles. 591e6d4491e48613634a83c1957c72759da80987961Ben Murdoch if (styleRule.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name)) 5925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 594e6d4491e48613634a83c1957c72759da80987961Ben Murdoch var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(property.name); 5955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (foundImportantProperties.hasOwnProperty(canonicalName)) 5965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 5975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 5985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var isImportant = property.priority.length; 5995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!isImportant && usedProperties.hasOwnProperty(canonicalName)) 6005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 6015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 602591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch var isKnownProperty = propertyToEffectiveRule.hasOwnProperty(canonicalName); 603591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch if (!isKnownProperty && styleRule.isInherited && !inheritedPropertyToNode[canonicalName]) 604591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch inheritedPropertyToNode[canonicalName] = styleRule.parentNode; 605591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch 6065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isImportant) { 607591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch if (styleRule.isInherited && isKnownProperty && styleRule.parentNode !== inheritedPropertyToNode[canonicalName]) 608591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch continue; 609591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch 6105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) foundImportantProperties[canonicalName] = true; 611591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch if (isKnownProperty) 6125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete propertyToEffectiveRule[canonicalName].usedProperties[canonicalName]; 6135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleRule.usedProperties[canonicalName] = true; 6165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) usedProperties[canonicalName] = true; 6175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) propertyToEffectiveRule[canonicalName] = styleRule; 6185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 6215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _refreshSectionsForStyleRules: function(styleRules, usedProperties, editedSection) 6235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 6245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Walk the style rules and update the sections with new overloaded and used properties. 6255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < styleRules.length; ++i) { 6265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRule = styleRules[i]; 6275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var section = styleRule.section; 6285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.computedStyle) { 6295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section._usedProperties = usedProperties; 6305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.update(); 6315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 6325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section._usedProperties = styleRule.usedProperties; 6335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.update(section === editedSection); 6345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 6375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _rebuildSectionsForStyleRules: function(styleRules, usedProperties, pseudoId, anchorElement) 6395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 6405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Make a property section for each style rule. 6415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var sections = []; 6425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var lastWasSeparator = true; 6435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < styleRules.length; ++i) { 6445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleRule = styleRules[i]; 6455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.isStyleSeparator) { 6465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var separatorElement = document.createElement("div"); 6475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.className = "sidebar-separator"; 6485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.node) { 6495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(styleRule.node); 6505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.appendChild(document.createTextNode(WebInspector.UIString("Inherited from") + " ")); 6515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.appendChild(link); 6525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!sections.inheritedPropertiesSeparatorElement) 6535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sections.inheritedPropertiesSeparatorElement = separatorElement; 6545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else if ("pseudoId" in styleRule) { 6555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var pseudoName = WebInspector.StylesSidebarPane.PseudoIdNames[styleRule.pseudoId]; 6565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (pseudoName) 6575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoName); 6585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 6595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.textContent = WebInspector.UIString("Pseudo element"); 6605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else 6615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) separatorElement.textContent = styleRule.text; 6625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer.insertBefore(separatorElement, anchorElement); 6635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) lastWasSeparator = true; 6645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 6655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var computedStyle = styleRule.computedStyle; 6675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Default editable to true if it was omitted. 6695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var editable = styleRule.editable; 6705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (typeof editable === "undefined") 6715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editable = true; 6725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (computedStyle) 6745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var section = new WebInspector.ComputedStylePropertiesSection(this, styleRule, usedProperties); 6755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else { 6765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var section = new WebInspector.StylePropertiesSection(this, styleRule, editable, styleRule.isInherited, lastWasSeparator); 6775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section._markSelectorMatches(); 6785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.expanded = true; 6805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (computedStyle) { 6825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._computedStylePane.bodyElement.appendChild(section.element); 6835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) lastWasSeparator = true; 6845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 6855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer.insertBefore(section.element, anchorElement); 6865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) lastWasSeparator = false; 6875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sections.push(section); 6895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 6905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return sections; 6915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 6925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 6935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _containsInherited: function(style) 6945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 6955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var properties = style.allProperties; 6965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < properties.length; ++i) { 6975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = properties[i]; 6985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Does this style contain non-overridden inherited property? 699e6d4491e48613634a83c1957c72759da80987961Ben Murdoch if (property.isLive && WebInspector.CSSMetadata.isPropertyInherited(property.name)) 7005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; 7015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 7035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _colorFormatSettingChanged: function(event) 7065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._updateColorFormatFilter(); 7085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var pseudoId in this.sections) { 7095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var sections = this.sections[pseudoId]; 7105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < sections.length; ++i) 7115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sections[i].update(true); 7125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _updateColorFormatFilter: function() 7165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Select the correct color format setting again, since it needs to be selected. 7185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selectedIndex = 0; 7195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var value = WebInspector.settings.colorFormat.get(); 7205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var options = this.settingsSelectElement.options; 7215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < options.length; ++i) { 7225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (options[i].value === value) { 7235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectedIndex = i; 7245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 7255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.settingsSelectElement.selectedIndex = selectedIndex; 7285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _changeSetting: function(event) 7315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var options = this.settingsSelectElement.options; 7335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selectedOption = options[this.settingsSelectElement.selectedIndex]; 7345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.settings.colorFormat.set(selectedOption.value); 7355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _createNewRule: function(event) 7385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(); 740926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.expand(); 7415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.addBlankSection().startEditingSelector(); 7425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addBlankSection: function() 7455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var blankSection = new WebInspector.BlankStylePropertiesSection(this, this.node ? this.node.appropriateSelectorFor(true) : ""); 7475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var elementStyleSection = this.sections[0][1]; 7495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sectionsContainer.insertBefore(blankSection.element, elementStyleSection.element.nextSibling); 7505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.sections[0].splice(2, 0, blankSection); 7525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return blankSection; 7545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) removeSection: function(section) 7575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var pseudoId in this.sections) { 7595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var sections = this.sections[pseudoId]; 7605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var index = sections.indexOf(section); 7615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (index === -1) 7625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 7635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sections.splice(index, 1); 764591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch section.element.remove(); 7655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _toggleElementStatePane: function(event) 7695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(); 7715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this._elementStateButton.hasStyleClass("toggled")) { 7725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 7735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton.addStyleClass("toggled"); 7745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane.addStyleClass("expanded"); 7755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 7765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStateButton.removeStyleClass("toggled"); 7775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane.removeStyleClass("expanded"); 7785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 7805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _createElementStatePane: function() 7825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane = document.createElement("div"); 7845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane.className = "styles-element-state-pane source-code"; 7855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var table = document.createElement("table"); 7865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inputs = []; 7885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane.inputs = inputs; 7895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function clickListener(event) 7915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 7925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var node = this._validateNode(); 7935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!node) 7945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 7955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._setPseudoClassCallback(node.id, event.target.state, event.target.checked); 7965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 7975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 7985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function createCheckbox(state) 7995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 8005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var td = document.createElement("td"); 8015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var label = document.createElement("label"); 8025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var input = document.createElement("input"); 8035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) input.type = "checkbox"; 8045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) input.state = state; 8055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) input.addEventListener("click", clickListener.bind(this), false); 8065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) inputs.push(input); 8075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) label.appendChild(input); 8085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) label.appendChild(document.createTextNode(":" + state)); 8095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) td.appendChild(label); 8105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return td; 8115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 8125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var tr = document.createElement("tr"); 8145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tr.appendChild(createCheckbox.call(this, "active")); 8155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tr.appendChild(createCheckbox.call(this, "hover")); 8165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) table.appendChild(tr); 8175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tr = document.createElement("tr"); 8195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tr.appendChild(createCheckbox.call(this, "focus")); 8205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tr.appendChild(createCheckbox.call(this, "visited")); 8215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) table.appendChild(tr); 8225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._elementStatePane.appendChild(table); 8245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 8255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _showUserAgentStylesSettingChanged: function() 8275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 8285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._rebuildUpdate(); 8295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 8305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) willHide: function() 8325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 8335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._spectrumHelper.hide(); 83493ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._discardElementUnderMouse(); 83593ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) }, 83693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) 83793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) _discardElementUnderMouse: function() 83893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) { 83993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (this._elementUnderMouse) 84093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._elementUnderMouse.removeStyleClass("styles-panel-hovered"); 84193ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) delete this._elementUnderMouse; 84293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) }, 84393ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) 84493ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) _mouseMovedOverElement: function(e) 84593ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) { 84693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (this._elementUnderMouse && e.target !== this._elementUnderMouse) 84793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._discardElementUnderMouse(); 84893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._elementUnderMouse = e.target; 84993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(e)) 85093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._elementUnderMouse.addStyleClass("styles-panel-hovered"); 85193ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) }, 85293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) 85393ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) _keyDown: function(e) 85493ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) { 85593ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if ((!WebInspector.isMac() && e.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) || 85693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) (WebInspector.isMac() && e.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) { 85793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (this._elementUnderMouse) 85893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._elementUnderMouse.addStyleClass("styles-panel-hovered"); 85993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) } 86093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) }, 86193ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) 86293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) _keyUp: function(e) 86393ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) { 86493ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if ((!WebInspector.isMac() && e.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) || 86593ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) (WebInspector.isMac() && e.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) { 86693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this._discardElementUnderMouse(); 86793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) } 8685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 8695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.SidebarPane.prototype 8715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 8725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 8745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 8755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.SidebarPane} 8765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 8775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.ComputedStyleSidebarPane = function() 8785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 8795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.SidebarPane.call(this, WebInspector.UIString("Computed Style")); 8805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"), "sidebar-pane-subtitle"); 8815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.appendChild(showInheritedCheckbox.element); 8825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (WebInspector.settings.showInheritedComputedStyleProperties.get()) { 8845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.bodyElement.addStyleClass("show-inherited"); 8855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) showInheritedCheckbox.checked = true; 8865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 8875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function showInheritedToggleFunction(event) 8895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 8905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.settings.showInheritedComputedStyleProperties.set(showInheritedCheckbox.checked); 8915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (WebInspector.settings.showInheritedComputedStyleProperties.get()) 8925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.bodyElement.addStyleClass("show-inherited"); 8935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 8945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.bodyElement.removeStyleClass("show-inherited"); 8955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 8965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 8975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) showInheritedCheckbox.addEventListener(showInheritedToggleFunction.bind(this)); 8985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 8995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.ComputedStyleSidebarPane.prototype = { 901926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) wasShown: function() 902926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 903926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.SidebarPane.prototype.wasShown.call(this); 904926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!this._hasFreshContent) 905926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.prepareContent(); 906926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 9075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 908926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 909926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {function()=} callback 910926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 911926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) prepareContent: function(callback) 9125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 913926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) function wrappedCallback() { 914926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._hasFreshContent = true; 915926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (callback) 916926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) callback(); 917926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._hasFreshContent; 9185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 919926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._stylesSidebarPane._refreshUpdate(null, true, wrappedCallback.bind(this)); 9205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 9215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.SidebarPane.prototype 9235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 9245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 9265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 9275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.PropertiesSection} 9285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 9295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylePropertiesSection = function(parentPane, styleRule, editable, isInherited, isFirstSection) 9305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 9315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.PropertiesSection.call(this, ""); 9325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.className = "styles-section matched-styles monospace" + (isFirstSection ? " first-styles-section" : ""); 93353e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) // We don't really use properties' disclosure. 93453e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) this.propertiesElement.removeStyleClass("properties-tree"); 9355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 936521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this._parentPane = parentPane; 937521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this.styleRule = styleRule; 938521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this.rule = this.styleRule.rule; 939521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this.editable = editable; 940521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this.isInherited = isInherited; 941521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 9425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleRule.media) { 9435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = styleRule.media.length - 1; i >= 0; --i) { 9445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var media = styleRule.media[i]; 9455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var mediaDataElement = this.titleElement.createChild("div", "media"); 9465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var mediaText; 9475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) switch (media.source) { 9485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case WebInspector.CSSMedia.Source.LINKED_SHEET: 9495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case WebInspector.CSSMedia.Source.INLINE_SHEET: 9505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) mediaText = "media=\"" + media.text + "\""; 9515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 9525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case WebInspector.CSSMedia.Source.MEDIA_RULE: 9535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) mediaText = "@media " + media.text; 9545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 9555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case WebInspector.CSSMedia.Source.IMPORT_RULE: 9565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) mediaText = "@import " + media.text; 9575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 9585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 9595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (media.sourceURL) { 9615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var refElement = mediaDataElement.createChild("div", "subtitle"); 962521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var rawLocation; 963521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var mediaHeader; 964521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) if (media.range) { 965521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) mediaHeader = media.header(); 966521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) if (mediaHeader) { 967521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var lineNumber = media.lineNumberInSource(); 968521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var columnNumber = media.columnNumberInSource(); 969521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) console.assert(typeof lineNumber !== "undefined" && typeof columnNumber !== "undefined"); 970521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) rawLocation = new WebInspector.CSSLocation(media.sourceURL, lineNumber, columnNumber); 971521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) } 972521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) } 973521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 974521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var anchor; 975521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) if (rawLocation) 976521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) anchor = this._parentPane._linkifier.linkifyCSSLocation(mediaHeader.id, rawLocation); 977521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) else { 978521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) // The "linkedStylesheet" case. 979521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) anchor = WebInspector.linkifyResourceAsNode(media.sourceURL, undefined, "subtitle", media.sourceURL); 980521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) } 9815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) anchor.preferredPanel = "scripts"; 9825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) anchor.style.float = "right"; 9835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) refElement.appendChild(anchor); 9845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 9855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var mediaTextElement = mediaDataElement.createChild("span"); 9875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) mediaTextElement.textContent = mediaText; 9885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) mediaTextElement.title = media.text; 9895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 9905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 9915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selectorContainer = document.createElement("div"); 9935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement = document.createElement("span"); 9945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement.textContent = styleRule.selectorText; 9955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorContainer.appendChild(this._selectorElement); 9965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 9975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var openBrace = document.createElement("span"); 9985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) openBrace.textContent = " {"; 9995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorContainer.appendChild(openBrace); 10005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false); 10015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false); 10025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var closeBrace = document.createElement("div"); 10045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) closeBrace.textContent = "}"; 10055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.appendChild(closeBrace); 10065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement.addEventListener("click", this._handleSelectorClick.bind(this), false); 10085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false); 10095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this), false); 10105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.rule) { 10125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Prevent editing the user agent and user rules. 10135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.rule.isUserAgent || this.rule.isUser) 10145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editable = false; 1015926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else { 1016926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection. 1017926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.rule.id) 101893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this.navigable = !!this.rule.resourceURL(); 1019926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 10205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.addStyleClass("styles-selector"); 10215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 10225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._usedProperties = styleRule.usedProperties; 10245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorRefElement = document.createElement("div"); 10265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorRefElement.className = "subtitle"; 10275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorRefElement.appendChild(this._createRuleOriginNode()); 10285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild); 10295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.titleElement.appendChild(selectorContainer); 10305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorContainer = selectorContainer; 10315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isInherited) 10335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not computed style. 10345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1035926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.navigable) 1036926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.element.addStyleClass("navigable"); 1037926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 10385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.editable) 10395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addStyleClass("read-only"); 10405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 10415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylePropertiesSection.prototype = { 10435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get pane() 10445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 10455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this._parentPane; 10465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 10475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) collapse: function(dontRememberState) 10495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 10505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Overriding with empty body. 10515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 10525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) isPropertyInherited: function(propertyName) 10545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 10555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.isInherited) { 10565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // While rendering inherited stylesheet, reverse meaning of this property. 10575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Render truly inherited properties with black, i.e. return them as non-inherited. 1058e6d4491e48613634a83c1957c72759da80987961Ben Murdoch return !WebInspector.CSSMetadata.isPropertyInherited(propertyName); 10595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 10605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 10615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 10625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 10645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {string} propertyName 10655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {boolean=} isShorthand 10665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 10675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) isPropertyOverloaded: function(propertyName, isShorthand) 10685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 10695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this._usedProperties || this.noAffect) 10705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 10715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1072e6d4491e48613634a83c1957c72759da80987961Ben Murdoch if (this.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(propertyName)) { 10735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // In the inherited sections, only show overrides for the potentially inherited properties. 10745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 10755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 10765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1077e6d4491e48613634a83c1957c72759da80987961Ben Murdoch var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName); 10785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var used = (canonicalName in this._usedProperties); 10795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (used || !isShorthand) 10805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return !used; 10815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Find out if any of the individual longhand properties of the shorthand 10835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // are used, if none are then the shorthand is overloaded too. 10845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var longhandProperties = this.styleRule.style.longhandProperties(propertyName); 10855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var j = 0; j < longhandProperties.length; ++j) { 10865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var individualProperty = longhandProperties[j]; 1087e6d4491e48613634a83c1957c72759da80987961Ben Murdoch if (WebInspector.CSSMetadata.canonicalPropertyName(individualProperty.name) in this._usedProperties) 10885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 10895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 10905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; 10925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 10935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 10945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nextEditableSibling: function() 10955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 10965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var curSection = this; 10975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) do { 10985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = curSection.nextSibling; 10995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } while (curSection && !curSection.editable); 11005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!curSection) { 11025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = this.firstSibling; 11035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (curSection && !curSection.editable) 11045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = curSection.nextSibling; 11055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return (curSection && curSection.editable) ? curSection : null; 11085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 11095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) previousEditableSibling: function() 11115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 11125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var curSection = this; 11135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) do { 11145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = curSection.previousSibling; 11155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } while (curSection && !curSection.editable); 11165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!curSection) { 11185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = this.lastSibling; 11195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (curSection && !curSection.editable) 11205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) curSection = curSection.previousSibling; 11215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return (curSection && curSection.editable) ? curSection : null; 11245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 11255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) update: function(full) 11275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1128926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.styleRule.selectorText) 1129926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._selectorElement.textContent = this.styleRule.selectorText; 1130926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._markSelectorMatches(); 11315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (full) { 11325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.removeChildren(); 11335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.populated = false; 11345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 11355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var child = this.propertiesTreeOutline.children[0]; 11365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (child) { 11375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child.overloaded = this.isPropertyOverloaded(child.name, child.isShorthand); 11385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) child = child.traverseNextTreeElement(false, null, true); 11395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.afterUpdate(); 11425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 11435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) afterUpdate: function() 11455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 11465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._afterUpdate) { 11475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._afterUpdate(this); 11485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._afterUpdate; 11495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 11515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onpopulate: function() 11535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 11545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var style = this.styleRule.style; 11555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var allProperties = style.allProperties; 11565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.uniqueProperties = []; 11575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleHasEditableSource = this.editable && !!style.range; 11595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleHasEditableSource) { 11605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < allProperties.length; ++i) { 11615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = allProperties[i]; 11625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.uniqueProperties.push(property); 11635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (property.styleBased) 11645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 11655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1166926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name); 11675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inherited = this.isPropertyInherited(property.name); 11685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var overloaded = property.inactive || this.isPropertyOverloaded(property.name); 1169926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded); 11705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.appendChild(item); 11715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 11735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var generatedShorthands = {}; 11765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // For style-based properties, generate shorthands with values when possible. 11775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < allProperties.length; ++i) { 11785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = allProperties[i]; 11795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.uniqueProperties.push(property); 1180926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name); 11815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 11825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // For style-based properties, try generating shorthands. 1183926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var shorthands = isShorthand ? null : WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name); 11845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var shorthandPropertyAvailable = false; 11855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var j = 0; shorthands && !shorthandPropertyAvailable && j < shorthands.length; ++j) { 11865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var shorthand = shorthands[j]; 11875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (shorthand in generatedShorthands) { 11885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) shorthandPropertyAvailable = true; 11895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; // There already is a shorthand this longhands falls under. 11905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (style.getLiveProperty(shorthand)) { 11925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) shorthandPropertyAvailable = true; 11935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; // There is an explict shorthand property this longhands falls under. 11945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!style.shorthandValue(shorthand)) { 11965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) shorthandPropertyAvailable = false; 11975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; // Never generate synthetic shorthands when no value is available. 11985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 11995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Generate synthetic shorthand we have a value for. 120153e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), "", "style", true, true); 12025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var overloaded = property.inactive || this.isPropertyOverloaded(property.name, true); 1203926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, shorthandProperty, /* isShorthand */ true, /* inherited */ false, overloaded); 12045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.appendChild(item); 12055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) generatedShorthands[shorthand] = shorthandProperty; 12065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) shorthandPropertyAvailable = true; 12075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 12085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (shorthandPropertyAvailable) 12095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; // Shorthand for the property found. 12105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inherited = this.isPropertyInherited(property.name); 12125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand); 1213926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded); 12145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.appendChild(item); 12155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 12165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) findTreeElementWithName: function(name) 12195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var treeElement = this.propertiesTreeOutline.children[0]; 12215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (treeElement) { 12225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (treeElement.name === name) 12235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return treeElement; 12245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) treeElement = treeElement.traverseNextTreeElement(true, null, true); 12255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 12265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return null; 12275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _markSelectorMatches: function() 12305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var rule = this.styleRule.rule; 12325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!rule) 12335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 12345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var matchingSelectors = rule.matchingSelectors; 1236926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) // .selector is rendered as non-affecting selector by default. 1237926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.noAffect || matchingSelectors) 1238926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._selectorElement.className = "selector"; 1239926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!matchingSelectors) 12405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 12415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1242926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var selectors = rule.selectors; 12435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var fragment = document.createDocumentFragment(); 12445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var currentMatch = 0; 12455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0, lastSelectorIndex = selectors.length - 1; i <= lastSelectorIndex ; ++i) { 12465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selectorNode; 12475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var textNode = document.createTextNode(selectors[i]); 12485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (matchingSelectors[currentMatch] === i) { 12495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) ++currentMatch; 12505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorNode = document.createElement("span"); 12515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorNode.className = "selector-matches"; 12525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorNode.appendChild(textNode); 12535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else 12545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectorNode = textNode; 12555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) fragment.appendChild(selectorNode); 12575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (i !== lastSelectorIndex) 12585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) fragment.appendChild(document.createTextNode(", ")); 12595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 12605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement.removeChildren(); 12625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement.appendChild(fragment); 12635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _checkWillCancelEditing: function() 12665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var willCauseCancelEditing = this._willCauseCancelEditing; 12685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._willCauseCancelEditing; 12695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return willCauseCancelEditing; 12705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _handleSelectorContainerClick: function(event) 12735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._checkWillCancelEditing() || !this.editable) 12755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 12765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (event.target === this._selectorContainer) 12775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.addNewBlankProperty(0).startEditing(); 12785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 12815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {number=} index 12825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 12835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) addNewBlankProperty: function(index) 12845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var style = this.styleRule.style; 12865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = style.newBlankProperty(index); 1287926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, false, false, false); 12885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) index = property.index; 12895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.insertChild(item, index); 12905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) item.listItemElement.textContent = ""; 12915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) item._newProperty = true; 12925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) item.updateTitle(); 12935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return item; 12945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 12955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 12965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _createRuleOriginNode: function() 12975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 12985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 12995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {string} url 13005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {number} line 13015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 13025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function linkifyUncopyable(url, line) 13035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var link = WebInspector.linkifyResourceAsNode(url, line, "", url + ":" + (line + 1)); 13055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) link.preferredPanel = "scripts"; 13065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) link.classList.add("webkit-html-resource-link"); 13075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) link.setAttribute("data-uncopyable", link.textContent); 13085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) link.textContent = ""; 13095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return link; 13105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 13115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.styleRule.sourceURL) 1313521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) return this._parentPane._linkifier.linkifyCSSLocation(this.rule.id.styleSheetId, this.rule.rawLocation) || linkifyUncopyable(this.styleRule.sourceURL, this.rule.lineNumberInSource()); 13145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.rule) 13165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return document.createTextNode(""); 13175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.rule.isUserAgent) 13195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return document.createTextNode(WebInspector.UIString("user agent stylesheet")); 13205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.rule.isUser) 13215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return document.createTextNode(WebInspector.UIString("user stylesheet")); 132293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (this.rule.isViaInspector) 132393ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) return document.createTextNode(WebInspector.UIString("via inspector")); 132493ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) return document.createTextNode(""); 13255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _handleEmptySpaceMouseDown: function(event) 13285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._willCauseCancelEditing = this._parentPane._isEditingStyle; 13305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _handleEmptySpaceClick: function(event) 13335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.editable) 13355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!window.getSelection().isCollapsed) 13385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._checkWillCancelEditing()) 13415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (event.target.hasStyleClass("header") || this.element.hasStyleClass("read-only") || event.target.enclosingNodeOrSelfWithClass("media")) { 13445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(); 13455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 13475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 13485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.addNewBlankProperty().startEditing(); 13495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _handleSelectorClick: function(event) 13525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._startEditingOnMouseEvent(); 13545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(true); 13555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _startEditingOnMouseEvent: function() 13585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.editable) 13605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.rule && this.propertiesTreeOutline.children.length === 0) { 13635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 13645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.addNewBlankProperty().startEditing(); 13655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 13675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.rule) 13695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.startEditingSelector(); 13725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) startEditingSelector: function() 13755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var element = this._selectorElement; 13775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (WebInspector.isBeingEdited(element)) 13785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) element.scrollIntoViewIfNeeded(false); 13815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) element.textContent = element.textContent; // Reset selector marks in group. 13825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var config = new WebInspector.EditingConfig(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this)); 13845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.startEditing(this._selectorElement, config); 13855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) window.getSelection().setBaseAndExtent(element, 0, element, 1); 13875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 13885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _moveEditorFromSelector: function(moveDirection) 13905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 13915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._markSelectorMatches(); 13925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!moveDirection) 13945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 13955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 13965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveDirection === "forward") { 13975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 13985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var firstChild = this.propertiesTreeOutline.children[0]; 13995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) while (firstChild && firstChild.inherited) 14005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) firstChild = firstChild.nextSibling; 14015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!firstChild) 14025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.addNewBlankProperty().startEditing(); 14035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 14045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) firstChild.startEditing(firstChild.nameElement); 14055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 14065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var previousSection = this.previousEditableSibling(); 14075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!previousSection) 14085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 14095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) previousSection.expand(); 14115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) previousSection.addNewBlankProperty().startEditing(); 14125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 14135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 14145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection) 14165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 14175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (newContent) 14185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) newContent = newContent.trim(); 14195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (newContent === oldContent) { 14205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Revert to a trimmed version of the selector if need be. 14215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorElement.textContent = newContent; 14225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this._moveEditorFromSelector(moveDirection); 14235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 14245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1425926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var selectedNode = this._parentPane.node; 1426926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 14275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function successCallback(newRule, doesAffectSelectedNode) 14285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 14295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!doesAffectSelectedNode) { 14305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.noAffect = true; 14315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addStyleClass("no-affect"); 14325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 14335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this.noAffect; 14345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.removeStyleClass("no-affect"); 14355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 14365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.rule = newRule; 143893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this.styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, media: newRule.media, sourceURL: newRule.resourceURL(), rule: newRule }; 14395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1440926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane.update(selectedNode); 14415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1442926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) finishOperationAndMoveEditor.call(this, moveDirection); 14435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 14445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1445926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) function finishOperationAndMoveEditor(direction) 1446926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 1447926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._parentPane._userOperation; 1448926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._moveEditorFromSelector(direction); 1449926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 1450926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 1451926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure. 1452926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane._userOperation = true; 1453926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.cssModel.setRuleSelector(this.rule.id, selectedNode ? selectedNode.id : 0, newContent, successCallback.bind(this), finishOperationAndMoveEditor.bind(this, moveDirection)); 14545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 14555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingSelectorCancelled: function() 14575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 14585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Do nothing but mark the selectors in group if necessary. 14595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // This is overridden by BlankStylePropertiesSection. 14605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._markSelectorMatches(); 14615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 14625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.PropertiesSection.prototype 14645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 14655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 14675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 14685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.PropertiesSection} 1469926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {!WebInspector.StylesSidebarPane} stylesPane 14705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {!Object} styleRule 14715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {!Object.<string, boolean>} usedProperties 14725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 1473926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, usedProperties) 14745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 14755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.PropertiesSection.call(this, ""); 14765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.headerElement.addStyleClass("hidden"); 14775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.className = "styles-section monospace first-styles-section read-only computed-style"; 1478926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._stylesPane = stylesPane; 14795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.styleRule = styleRule; 14805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._usedProperties = usedProperties; 14815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true }; 14825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.computedStyle = true; 14835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._propertyTreeElements = {}; 14845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._expandedPropertyNames = {}; 14855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 14865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.ComputedStylePropertiesSection.prototype = { 14885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) collapse: function(dontRememberState) 14895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 14905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Overriding with empty body. 14915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 14925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _isPropertyInherited: function(propertyName) 14945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1495e6d4491e48613634a83c1957c72759da80987961Ben Murdoch var canonicalName = WebInspector.CSSMetadata.canonicalPropertyName(propertyName); 14965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return !(canonicalName in this._usedProperties) && !(canonicalName in this._alwaysShowComputedProperties); 14975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 14985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 14995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) update: function() 15005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 15015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._expandedPropertyNames = {}; 15025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var name in this._propertyTreeElements) { 15035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._propertyTreeElements[name].expanded) 15045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._expandedPropertyNames[name] = true; 15055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._propertyTreeElements = {}; 15075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.removeChildren(); 15085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.populated = false; 15095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 15105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onpopulate: function() 15125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 15135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function sorter(a, b) 15145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1515926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return a.name.compareTo(b.name); 15165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var style = this.styleRule.style; 15195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!style) 15205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 15215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var uniqueProperties = []; 15235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var allProperties = style.allProperties; 15245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < allProperties.length; ++i) 15255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) uniqueProperties.push(allProperties[i]); 15265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) uniqueProperties.sort(sorter); 15275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._propertyTreeElements = {}; 15295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < uniqueProperties.length; ++i) { 15305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = uniqueProperties[i]; 15315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var inherited = this._isPropertyInherited(property.name); 1532926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.ComputedStylePropertyTreeElement(this._stylesPane, this.styleRule, style, property, inherited); 15335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.propertiesTreeOutline.appendChild(item); 15345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._propertyTreeElements[property.name] = item; 15355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 15375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) rebuildComputedTrace: function(sections) 15395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 15405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < sections.length; ++i) { 15415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var section = sections[i]; 15425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (section.computedStyle || section.isBlank) 15435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 15445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var j = 0; j < section.uniqueProperties.length; ++j) { 15465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var property = section.uniqueProperties[j]; 15475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (property.disabled) 15485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 1549e6d4491e48613634a83c1957c72759da80987961Ben Murdoch if (section.isInherited && !WebInspector.CSSMetadata.isPropertyInherited(property.name)) 15505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 15515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1552e6d4491e48613634a83c1957c72759da80987961Ben Murdoch var treeElement = this._propertyTreeElements[property.name.toLowerCase()]; 15535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (treeElement) { 15545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var fragment = document.createDocumentFragment(); 15555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selector = fragment.createChild("span"); 15565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selector.style.color = "gray"; 15575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selector.textContent = section.styleRule.selectorText; 15585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) fragment.appendChild(document.createTextNode(" - " + property.value + " ")); 15595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var subtitle = fragment.createChild("span"); 15605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) subtitle.style.float = "right"; 15615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) subtitle.appendChild(section._createRuleOriginNode()); 15625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var childElement = new TreeElement(fragment, null, false); 15635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) treeElement.appendChild(childElement); 15645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (property.inactive || section.isPropertyOverloaded(property.name)) 15655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) childElement.listItemElement.addStyleClass("overloaded"); 15665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!property.parsedOk) { 15675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) childElement.listItemElement.addStyleClass("not-parsed-ok"); 15685267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) childElement.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(property), childElement.listItemElement.firstChild); 15695267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property)) 15705267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) childElement.listItemElement.addStyleClass("has-ignorable-error"); 15715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Restore expanded state after update. 15775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var name in this._expandedPropertyNames) { 15785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (name in this._propertyTreeElements) 15795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._propertyTreeElements[name].expand(); 15805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 15815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 15825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.PropertiesSection.prototype 15845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 15855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 15875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 15885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.StylePropertiesSection} 1589926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.StylesSidebarPane} stylesPane 1590926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {string} defaultSelectorText 15915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 1592926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText) 15935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 1594926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false); 15955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addStyleClass("blank-section"); 15965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 15975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 15985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.BlankStylePropertiesSection.prototype = { 15995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get isBlank() 16005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 16015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return !this._normal; 16025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 16035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) expand: function() 16055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 16065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.isBlank) 16075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.StylePropertiesSection.prototype.expand.call(this); 16085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 16095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection) 16115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 16125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.isBlank) { 16135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection); 16145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 16155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 16165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function successCallback(newRule, doesSelectorAffectSelectedNode) 16185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 161993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) var styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.resourceURL(), rule: newRule }; 16205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.makeNormal(styleRule); 16215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!doesSelectorAffectSelectedNode) { 16235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.noAffect = true; 16245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.addStyleClass("no-affect"); 16255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 16265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorRefElement.removeChildren(); 16285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._selectorRefElement.appendChild(this._createRuleOriginNode()); 16295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 16305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.element.parentElement) // Might have been detached already. 16315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._moveEditorFromSelector(moveDirection); 16325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1633926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._markSelectorMatches(); 16345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._parentPane._userOperation; 16355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 16365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1637926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (newContent) 1638926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) newContent = newContent.trim(); 16395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._parentPane._userOperation = true; 16405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.cssModel.addRule(this.pane.node.id, newContent, successCallback.bind(this), this.editingSelectorCancelled.bind(this)); 16415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 16425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingSelectorCancelled: function() 16445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1645926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._parentPane._userOperation; 16465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.isBlank) { 16475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this); 16485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 16495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 16505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.pane.removeSection(this); 16525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 16535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) makeNormal: function(styleRule) 16555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 16565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.element.removeStyleClass("blank-section"); 16575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.styleRule = styleRule; 16585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.rule = styleRule.rule; 16595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection. 16615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._normal = true; 16625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 16635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.StylePropertiesSection.prototype 16655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 16665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 16685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 16695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {TreeElement} 16705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {Object} styleRule 16715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {WebInspector.CSSStyleDeclaration} style 16725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {WebInspector.CSSProperty} property 16735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {boolean} inherited 16745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {boolean} overloaded 1675926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} hasChildren 16765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 1677926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.StylePropertyTreeElementBase = function(styleRule, style, property, inherited, overloaded, hasChildren) 16785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 16795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._styleRule = styleRule; 16805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.style = style; 16815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.property = property; 16825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._inherited = inherited; 16835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._overloaded = overloaded; 16845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Pass an empty title, the title gets made later in onattach. 1686926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) TreeElement.call(this, "", null, hasChildren); 16875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 16885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.selectable = false; 16895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 16905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1691926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.StylePropertyTreeElementBase.prototype = { 1692926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 1693926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.DOMNode} 1694926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 1695926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) node: function() 1696926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 1697926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return null; // Overridden by ancestors. 1698926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 1699926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 1700926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 1701926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.StylesSidebarPane} 1702926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 1703926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) editablePane: function() 1704926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 1705926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return null; // Overridden by ancestors. 1706926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 1707926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 17085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get inherited() 17095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this._inherited; 17115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17135267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) hasIgnorableError: function() 17145267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) { 17155267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) return !this.parsedOk && WebInspector.StylesSidebarPane._ignoreErrorsForProperty(this.property); 17165267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) }, 17175267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 17185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) set inherited(x) 17195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (x === this._inherited) 17215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 17225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._inherited = x; 17235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateState(); 17245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get overloaded() 17275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this._overloaded; 17295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) set overloaded(x) 17325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (x === this._overloaded) 17345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 17355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._overloaded = x; 17365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateState(); 17375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get disabled() 17405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.disabled; 17425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get name() 17455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.disabled || !this.property.text) 17475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.name; 17485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var text = this.property.text; 17505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var index = text.indexOf(":"); 17515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (index < 1) 17525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.name; 17535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 175453e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) text = text.substring(0, index).trim(); 175553e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) if (text.startsWith("/*")) 175653e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) text = text.substring(2).trim(); 175753e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return text; 17585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get priority() 17615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.disabled) 17635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return ""; // rely upon raw text to render it in the value field 17645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.priority; 17655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get value() 17685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.disabled || !this.property.text) 17705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.value; 17715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var match = this.property.text.match(/(.*);\s*/); 17735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!match || !match[1]) 17745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.value; 17755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var text = match[1]; 17775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var index = text.indexOf(":"); 17785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (index < 1) 17795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.value; 17805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return text.substring(index + 1).trim(); 17825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) get parsedOk() 17855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this.property.parsedOk; 17875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onattach: function() 17905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateTitle(); 17925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 17935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) updateTitle: function() 17955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 17965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var value = this.value; 17975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 17985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateState(); 17995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var nameElement = document.createElement("span"); 18015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nameElement.className = "webkit-css-property"; 18025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nameElement.textContent = this.name; 18035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nameElement.title = this.property.propertyText; 18045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement = nameElement; 18055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._expandElement = document.createElement("span"); 18075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._expandElement.className = "expand-element"; 18085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var valueElement = document.createElement("span"); 18105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) valueElement.className = "value"; 18115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.valueElement = valueElement; 18125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var cf = WebInspector.Color.Format; 18145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (value) { 18165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var self = this; 18175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function processValue(regex, processor, nextProcessor, valueText) 18195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 18205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var container = document.createDocumentFragment(); 18215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var items = valueText.replace(regex, "\0$1\0").split("\0"); 18235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < items.length; ++i) { 18245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if ((i % 2) === 0) { 18255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (nextProcessor) 18265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(nextProcessor(items[i])); 18275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 18285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(document.createTextNode(items[i])); 18295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 18305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var processedNode = processor(items[i]); 18315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (processedNode) 18325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(processedNode); 18335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return container; 18375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function linkifyURL(url) 18405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 18415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var hrefUrl = url; 18425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var match = hrefUrl.match(/['"]?([^'"]+)/); 18435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (match) 18445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) hrefUrl = match[1]; 18455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var container = document.createDocumentFragment(); 18465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(document.createTextNode("url(")); 18475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (self._styleRule.sourceURL) 18485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) hrefUrl = WebInspector.ParsedURL.completeURL(self._styleRule.sourceURL, hrefUrl); 1849926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else if (self.node()) 1850926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) hrefUrl = self.node().resolveURL(hrefUrl); 18515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var hasResource = !!WebInspector.resourceForURL(hrefUrl); 18525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI. 18535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl, url, undefined, !hasResource)); 18545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(document.createTextNode(")")); 18555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return container; 18565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function processColor(text) 18595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1860926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var color = WebInspector.Color.parse(text); 1861926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 1862926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) // We can be called with valid non-color values of |text| (like 'none' from border style) 1863926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!color) 18645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return document.createTextNode(text); 18655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1866521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var format = WebInspector.StylesSidebarPane._colorFormat(color); 1867926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var spectrumHelper = self.editablePane() && self.editablePane()._spectrumHelper; 18685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null; 18695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var colorSwatch = new WebInspector.ColorSwatch(); 18715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) colorSwatch.setColorString(text); 18725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) colorSwatch.element.addEventListener("click", swatchClick, false); 18735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1874926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var scrollerElement; 18755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function spectrumChanged(e) 18775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 187853e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var colorString = /** @type {string} */ (e.data); 1879926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) spectrum.displayText = colorString; 18805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) colorValueElement.textContent = colorString; 18815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) colorSwatch.setColorString(colorString); 18825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, false, false, false); 18835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function spectrumHidden(event) 18865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 1887926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (scrollerElement) 1888926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) scrollerElement.removeEventListener("scroll", repositionSpectrum, false); 18895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var commitEdit = event.data; 18905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var propertyText = !commitEdit && self.originalPropertyText ? self.originalPropertyText : (nameElement.textContent + ": " + valueElement.textContent); 18915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) self.applyStyleText(propertyText, true, true, false); 18925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged); 18935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden); 18945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1895926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete self.editablePane()._isEditingStyle; 18965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete self.originalPropertyText; 18975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 18985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 18995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function repositionSpectrum() 19005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 19015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrumHelper.reposition(colorSwatch.element); 19025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function swatchClick(e) 19055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 19065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Shift + click toggles color formats. 19075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Click opens colorpicker, only if the element is not in computed styles section. 19085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!spectrumHelper || e.shiftKey) 19095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) changeColorDisplay(e); 19105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else { 19115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var visible = spectrumHelper.toggle(colorSwatch.element, color, format); 19125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (visible) { 19145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrum.displayText = color.toString(format); 19155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) self.originalPropertyText = self.property.propertyText; 1916926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) self.editablePane()._isEditingStyle = true; 19175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged); 19185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden); 19195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1920926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) scrollerElement = colorSwatch.element.enclosingNodeOrSelfWithClass("scroll-target"); 1921926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (scrollerElement) 1922926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) scrollerElement.addEventListener("scroll", repositionSpectrum, false); 1923926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else 1924926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) console.error("Unable to handle color picker scrolling"); 19255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) e.consume(true); 19285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var colorValueElement = document.createElement("span"); 19315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) colorValueElement.textContent = color.toString(format); 19325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function nextFormat(curFormat) 19345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 19355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // The format loop is as follows: 19365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // * original 19375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // * rgb(a) 19385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // * hsl(a) 19395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // * nickname (if the color has a nickname) 19405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // * if the color is simple: 19415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // - shorthex (if has short hex) 19425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // - hex 19435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) switch (curFormat) { 19445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.Original: 194553e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return !color.hasAlpha() ? cf.RGB : cf.RGBA; 19465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.RGB: 19485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.RGBA: 194953e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return !color.hasAlpha() ? cf.HSL : cf.HSLA; 19505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.HSL: 19525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.HSLA: 195353e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) if (color.nickname()) 19545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return cf.Nickname; 195553e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) if (!color.hasAlpha()) 195653e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return color.canBeShortHex() ? cf.ShortHEX : cf.HEX; 19575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 19585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return cf.Original; 19595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.ShortHEX: 19615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return cf.HEX; 19625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.HEX: 19645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return cf.Original; 19655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case cf.Nickname: 196753e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) if (!color.hasAlpha()) 196853e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return color.canBeShortHex() ? cf.ShortHEX : cf.HEX; 19695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 19705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return cf.Original; 19715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) default: 197353e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) return cf.RGBA; 19745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function changeColorDisplay(event) 19785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 19795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) do { 19805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) format = nextFormat(format); 198153e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var currentValue = color.toString(format); 198253e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) } while (currentValue === colorValueElement.textContent); 198353e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) colorValueElement.textContent = currentValue; 19845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var container = document.createElement("nobr"); 19875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(colorSwatch.element); 19885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) container.appendChild(colorValueElement); 19895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return container; 19905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 1992521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var colorProcessor = processValue.bind(window, WebInspector.StylesSidebarPane._colorRegex, processColor, null); 19935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19945267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) valueElement.appendChild(processValue(/url\(\s*([^)]+)\s*\)/g, linkifyURL.bind(this), WebInspector.CSSMetadata.isColorAwareProperty(self.name) && self.parsedOk ? colorProcessor : null, value)); 19955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 19965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 19975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.removeChildren(); 19985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) nameElement.normalize(); 19995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) valueElement.normalize(); 20005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 20015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.treeOutline) 20025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 20035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 20045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.appendChild(nameElement); 20055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.appendChild(document.createTextNode(": ")); 20065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.appendChild(this._expandElement); 20075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.appendChild(valueElement); 20085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.appendChild(document.createTextNode(";")); 20095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 20105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.parsedOk) { 20115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Avoid having longhands under an invalid shorthand. 20125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.hasChildren = false; 20135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.addStyleClass("not-parsed-ok"); 20145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 20155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Add a separate exclamation mark IMG element with a tooltip. 20165267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) this.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild); 20175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 20185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.property.inactive) 20195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.addStyleClass("inactive"); 20205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 20215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2022926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) updateState: function() 2023926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2024926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!this.listItemElement) 2025926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return; 2026926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 20275267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (this.style.isPropertyImplicit(this.name)) 2028926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addStyleClass("implicit"); 2029926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else 2030926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.removeStyleClass("implicit"); 2031926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 20325267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (this.hasIgnorableError()) 20335267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) this.listItemElement.addStyleClass("has-ignorable-error"); 20345267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) else 20355267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) this.listItemElement.removeStyleClass("has-ignorable-error"); 20365267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) 2037926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.inherited) 2038926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addStyleClass("inherited"); 2039926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else 2040926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.removeStyleClass("inherited"); 2041926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2042926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.overloaded) 2043926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addStyleClass("overloaded"); 2044926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else 2045926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.removeStyleClass("overloaded"); 2046926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2047926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.disabled) 2048926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addStyleClass("disabled"); 2049926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) else 2050926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.removeStyleClass("disabled"); 2051926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2052926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2053926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) __proto__: TreeElement.prototype 2054926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)} 2055926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2056926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)/** 2057926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @constructor 2058926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @extends {WebInspector.StylePropertyTreeElementBase} 2059926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.StylesSidebarPane} stylesPane 2060926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {Object} styleRule 2061926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.CSSStyleDeclaration} style 2062926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.CSSProperty} property 2063926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} inherited 2064926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2065926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.ComputedStylePropertyTreeElement = function(stylesPane, styleRule, style, property, inherited) 2066926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles){ 2067926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, false, false); 2068926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._stylesPane = stylesPane; 2069926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)} 2070926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2071926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.ComputedStylePropertyTreeElement.prototype = { 2072926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2073926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.DOMNode} 2074926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2075926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) node: function() 2076926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2077926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return this._stylesPane.node; 2078926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2079926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2080926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2081926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.StylesSidebarPane} 2082926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2083926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) editablePane: function() 2084926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2085926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return null; 2086926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2087926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2088926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) __proto__: WebInspector.StylePropertyTreeElementBase.prototype 2089926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)} 2090926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2091926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)/** 2092926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @constructor 2093926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @extends {WebInspector.StylePropertyTreeElementBase} 2094926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {?WebInspector.StylesSidebarPane} stylesPane 2095926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {Object} styleRule 2096926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.CSSStyleDeclaration} style 2097926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {WebInspector.CSSProperty} property 2098926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} isShorthand 2099926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} inherited 2100926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} overloaded 2101926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2102926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, style, property, isShorthand, inherited, overloaded) 2103926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles){ 2104926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, overloaded, isShorthand); 2105926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane = stylesPane; 2106926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.isShorthand = isShorthand; 2107926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)} 2108926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2109926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.StylePropertyTreeElement.prototype = { 2110926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2111926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.DOMNode} 2112926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2113926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) node: function() 2114926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2115926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return this._parentPane.node; 2116926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2117926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2118926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2119926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {?WebInspector.StylesSidebarPane} 2120926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2121926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) editablePane: function() 2122926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2123926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return this._parentPane; 2124926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2125926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2126926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2127926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @return {WebInspector.StylePropertiesSection} 2128926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2129926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) section: function() 2130926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2131926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return this.treeOutline && this.treeOutline.section; 2132926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2133926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 21345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _updatePane: function(userCallback) 21355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2136926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 2137926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (section && section.pane) 2138926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) section.pane._refreshUpdate(section, false, userCallback); 21395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else { 21405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (userCallback) 21415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 21425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 21435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 21445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) toggleEnabled: function(event) 21465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 21475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var disabled = !event.target.checked; 21485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function callback(newStyle) 21505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 21515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!newStyle) 21525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 21535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2154926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) newStyle.parentRule = this.style.parentRule; 21555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.style = newStyle; 21565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._styleRule.style = newStyle; 21575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2158926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 2159926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (section && section.pane) 2160926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) section.pane.dispatchEventToListeners("style property toggled"); 21615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._updatePane(); 21635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._parentPane._userOperation; 21655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 21665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._parentPane._userOperation = true; 21685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.property.setDisabled(disabled, callback.bind(this)); 21695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(); 21705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 21715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onpopulate: function() 21735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 21745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Only populate once and if this property is a shorthand. 21755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.children.length || !this.isShorthand) 21765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 21775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var longhandProperties = this.style.longhandProperties(this.name); 21795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < longhandProperties.length; ++i) { 21805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var name = longhandProperties[i].name; 21815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2182926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 2183926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (section) { 2184926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var inherited = section.isPropertyInherited(name); 2185926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var overloaded = section.isPropertyOverloaded(name); 21865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 21875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var liveProperty = this.style.getLiveProperty(name); 21895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!liveProperty) 21905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) continue; 21915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2192926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded); 21935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.appendChild(item); 21945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 21955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 21965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 21975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) restoreNameElement: function() 21985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 21995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Restore <span class="webkit-css-property"> if it doesn't yet exist or was accidentally deleted. 22005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.nameElement === this.listItemElement.querySelector(".webkit-css-property")) 22015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 22025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement = document.createElement("span"); 22045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement.className = "webkit-css-property"; 22055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement.textContent = ""; 22065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.listItemElement.insertBefore(this.nameElement, this.listItemElement.firstChild); 22075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 22085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2209926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) onattach: function() 2210926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2211926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.StylePropertyTreeElementBase.prototype.onattach.call(this); 2212926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2213926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this)); 2214926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this)); 2215926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this.listItemElement.addEventListener("click", this._mouseClick.bind(this)); 2216926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2217926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2218926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) _mouseDown: function(event) 2219926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2220926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this._parentPane) { 2221926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane._mouseDownTreeElement = this; 2222926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target); 2223926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target); 2224926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 2225926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2226926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2227926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) _resetMouseDownElement: function() 2228926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2229926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this._parentPane) { 2230926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._parentPane._mouseDownTreeElement; 2231926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._parentPane._mouseDownTreeElementIsName; 2232926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) delete this._parentPane._mouseDownTreeElementIsValue; 2233926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 2234926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2235926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2236926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) updateTitle: function() 2237926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2238926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this); 2239926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2240926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (this.parsedOk && this.section() && this.parent.root) { 2241926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var enabledCheckboxElement = document.createElement("input"); 2242926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) enabledCheckboxElement.className = "enabled-button"; 2243926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) enabledCheckboxElement.type = "checkbox"; 2244926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) enabledCheckboxElement.checked = !this.disabled; 2245926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false); 224653e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild); 2247926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 2248926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2249926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 22505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _mouseClick: function(event) 22515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 22525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!window.getSelection().isCollapsed) 22535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 22545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(true); 22565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (event.target === this.listItemElement) { 2258926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 2259926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!section || !section.editable) 22605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 22615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2262926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (section._checkWillCancelEditing()) 22635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 2264926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) section.addNewBlankProperty(this.property.index + 1).startEditing(); 2265926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return; 2266926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 2267926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2268926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && this.section().navigable) { 2269926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._navigateToSource(event.target); 22705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 22715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 22725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.startEditing(event.target); 22745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 22755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2276926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) /** 2277926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {Element} element 2278926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) */ 2279926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) _navigateToSource: function(element) 2280926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) { 2281926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) console.assert(this.section().navigable); 2282926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var propertyNameClicked = element === this.nameElement; 2283926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var uiLocation = this.property.uiLocation(propertyNameClicked); 2284926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!uiLocation) 2285926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return; 228693ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) WebInspector.showPanel("scripts").showUISourceCode(uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber); 2287926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) }, 2288926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 22895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _isNameElement: function(element) 22905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 22915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return element.enclosingNodeOrSelfWithClass("webkit-css-property") === this.nameElement; 22925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 22935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _isValueElement: function(element) 22955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 22965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return !!element.enclosingNodeOrSelfWithClass("value"); 22975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 22985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 22995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) startEditing: function(selectElement) 23005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 23015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: we don't allow editing of longhand properties under a shorthand right now. 23025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this.parent.isShorthand) 23035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (selectElement === this._expandElement) 23065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2308926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 2309926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (section && !section.editable) 23105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!selectElement) 23135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectElement = this.nameElement; // No arguments passed in - edit the name element by default. 23145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 23155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectElement = selectElement.enclosingNodeOrSelfWithClass("webkit-css-property") || selectElement.enclosingNodeOrSelfWithClass("value"); 23165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var isEditingName = selectElement === this.nameElement; 2318926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (!isEditingName) { 2319926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (selectElement !== this.valueElement) { 2320926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) // Click in the LI - start editing value. 2321926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) selectElement = this.valueElement; 2322926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) } 2323926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 2324521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) this.valueElement.textContent = (!this._newProperty && WebInspector.CSSMetadata.isColorAwareProperty(this.name)) ? formatColors(this.value) : this.value; 2325521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) } 2326521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 2327521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) /** 2328521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) * @param {string} value 2329521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) * @return {string} 2330521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) */ 2331521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) function formatColors(value) 2332521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) { 2333521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var result = []; 2334521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var items = value.replace(WebInspector.StylesSidebarPane._colorRegex, "\0$1\0").split("\0"); 2335521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) for (var i = 0; i < items.length; ++i) { 2336521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) var color = WebInspector.Color.parse(items[i]); 2337521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) 2338521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) // We can be called with valid non-color values of |text| (like 'none' from border style). 2339521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) result.push(color ? color.toString(WebInspector.StylesSidebarPane._colorFormat(color)) : items[i]); 2340521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) } 2341521d96ec04ace82590870fb04353ec4f82bb150fTorne (Richard Coles) return result.join(""); 23425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 23435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (WebInspector.isBeingEdited(selectElement)) 23455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var context = { 23485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) expanded: this.expanded, 23495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) hasChildren: this.hasChildren, 23505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) isEditingName: isEditingName, 23515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) previousContent: selectElement.textContent 23525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }; 23535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Lie about our children to prevent expanding on double click and to collapse shorthands. 23555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.hasChildren = false; 23565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (selectElement.parentElement) 23585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectElement.parentElement.addStyleClass("child-editing"); 23595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectElement.textContent = selectElement.textContent; // remove color swatch and the like 23605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function pasteHandler(context, event) 23625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 23635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var data = event.clipboardData.getData("Text"); 23645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!data) 23655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var colonIdx = data.indexOf(":"); 23675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (colonIdx < 0) 23685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 23695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var name = data.substring(0, colonIdx).trim(); 23705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var value = data.substring(colonIdx + 1).trim(); 23715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.preventDefault(); 23735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!("originalName" in context)) { 23755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) context.originalName = this.nameElement.textContent; 23765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) context.originalValue = this.valueElement.textContent; 23775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 237853e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) this.property.name = name; 237953e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) this.property.value = value; 23805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement.textContent = name; 23815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.valueElement.textContent = value; 23825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.nameElement.normalize(); 23835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.valueElement.normalize(); 23845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingCommitted(null, event.target.textContent, context.previousContent, context, "forward"); 23865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 23875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 23885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function blurListener(context, event) 23895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 23905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var treeElement = this._parentPane._mouseDownTreeElement; 23915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var moveDirection = ""; 23925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (treeElement === this) { 23935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isEditingName && this._parentPane._mouseDownTreeElementIsValue) 23945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveDirection = "forward"; 23955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!isEditingName && this._parentPane._mouseDownTreeElementIsName) 23965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveDirection = "backward"; 23975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 23985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingCommitted(null, event.target.textContent, context.previousContent, context, moveDirection); 23995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this.originalPropertyText; 24025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._parentPane._isEditingStyle = true; 24045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (selectElement.parentElement) 24055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) selectElement.parentElement.scrollIntoViewIfNeeded(false); 24065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this, true) : undefined; 2408926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) this._prompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(isEditingName ? WebInspector.CSSMetadata.cssPropertiesMetainfo : WebInspector.CSSMetadata.keywordsForProperty(this.nameElement.textContent), this, isEditingName); 24095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (applyItemCallback) { 24105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied, applyItemCallback, this); 24115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted, applyItemCallback, this); 24125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context)); 24145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) proxyElement.addEventListener("keydown", this.editingNameValueKeyDown.bind(this, context), false); 24165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isEditingName) 24175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) proxyElement.addEventListener("paste", pasteHandler.bind(this, context)); 24185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1); 24205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 24215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingNameValueKeyDown: function(context, event) 24235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 24245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (event.handled) 24255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 24265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var isEditingName = context.isEditingName; 24285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var result; 24295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function shouldCommitValueSemicolon(text, cursorPosition) 24315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 24325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: should this account for semicolons inside comments? 24335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var openQuote = ""; 24345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) for (var i = 0; i < cursorPosition; ++i) { 24355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var ch = text[i]; 24365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (ch === "\\" && openQuote !== "") 24375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) ++i; // skip next character inside string 24385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else if (!openQuote && (ch === "\"" || ch === "'")) 24395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) openQuote = ch; 24405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else if (openQuote === ch) 24415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) openQuote = ""; 24425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return !openQuote; 24445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: the ":"/";" detection does not work for non-US layouts due to the event being keydown rather than keypress. 24475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var isFieldInputTerminated = (event.keyCode === WebInspector.KeyboardShortcut.Keys.Semicolon.code) && 24485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) (isEditingName ? event.shiftKey : (!event.shiftKey && shouldCommitValueSemicolon(event.target.textContent, event.target.selectionLeftOffset()))); 24495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isEnterKey(event) || isFieldInputTerminated) { 24505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Enter or colon (for name)/semicolon outside of string (for value). 24515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.preventDefault(); 24525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) result = "forward"; 24535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B") 24545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) result = "cancel"; 24555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else if (!isEditingName && this._newProperty && event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) { 24565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // For a new property, when Backspace is pressed at the beginning of new property value, move back to the property name. 24575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selection = window.getSelection(); 24585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (selection.isCollapsed && !selection.focusOffset) { 24595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.preventDefault(); 24605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) result = "backward"; 24615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else if (event.keyIdentifier === "U+0009") { // Tab key. 24635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) result = event.shiftKey ? "backward" : "forward"; 24645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.preventDefault(); 24655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (result) { 24685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) switch (result) { 24695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "cancel": 24705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingCancelled(null, context); 24715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 24725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "forward": 24735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "backward": 24745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingCommitted(null, event.target.textContent, context.previousContent, context, result); 24755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 24765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(); 24795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 24805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!isEditingName) 24835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._applyFreeFlowStyleTextEdit(false); 24845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 24855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _applyFreeFlowStyleTextEdit: function(now) 24875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 24885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._applyFreeFlowStyleTextEditTimer) 24895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) clearTimeout(this._applyFreeFlowStyleTextEditTimer); 24905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 24915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function apply() 24925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 24935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var valueText = this.valueElement.textContent; 24945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (valueText.indexOf(";") === -1) 24955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.applyStyleText(this.nameElement.textContent + ": " + valueText, false, false, false); 24965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 24975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (now) 24985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) apply.call(this); 24995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 25005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._applyFreeFlowStyleTextEditTimer = setTimeout(apply.bind(this), 100); 25015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) kickFreeFlowStyleEditForTest: function() 25045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._applyFreeFlowStyleTextEdit(true); 25065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingEnded: function(context) 25095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._resetMouseDownElement(); 25115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._applyFreeFlowStyleTextEditTimer) 25125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) clearTimeout(this._applyFreeFlowStyleTextEditTimer); 25135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.hasChildren = context.hasChildren; 25155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (context.expanded) 25165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.expand(); 25175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var editedElement = context.isEditingName ? this.nameElement : this.valueElement; 25185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // The proxyElement has been deleted, no need to remove listener. 25195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (editedElement.parentElement) 25205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editedElement.parentElement.removeStyleClass("child-editing"); 25215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._parentPane._isEditingStyle; 25235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingCancelled: function(element, context) 25265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._removePrompt(); 25285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._revertStyleUponEditingCanceled(this.originalPropertyText); 25295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // This should happen last, as it clears the info necessary to restore the property value after [Page]Up/Down changes. 25305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingEnded(context); 25315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _revertStyleUponEditingCanceled: function(originalPropertyText) 25345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (typeof originalPropertyText === "string") { 25365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this.originalPropertyText; 25375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.applyStyleText(originalPropertyText, true, false, true); 25385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 25395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._newProperty) 25405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.treeOutline.removeChild(this); 25415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 25425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateTitle(); 25435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 25445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _findSibling: function(moveDirection) 25475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var target = this; 25495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) do { 25505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) target = (moveDirection === "forward" ? target.nextSibling : target.previousSibling); 25515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } while(target && target.inherited); 25525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return target; 25545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 25555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) editingCommitted: function(element, userInput, previousContent, context, moveDirection) 25575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 25585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._removePrompt(); 25595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.editingEnded(context); 25605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var isEditingName = context.isEditingName; 25615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Determine where to move to before making changes 25635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var createNewProperty, moveToPropertyName, moveToSelector; 256453e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var isDataPasted = "originalName" in context; 256553e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue); 256653e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var isPropertySplitPaste = isDataPasted && isEditingName && this.valueElement.textContent !== context.originalValue; 25675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var moveTo = this; 25685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var moveToOther = (isEditingName ^ (moveDirection === "forward")); 25695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var abandonNewProperty = this._newProperty && !userInput && (moveToOther || isEditingName); 257053e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) if (moveDirection === "forward" && (!isEditingName || isPropertySplitPaste) || moveDirection === "backward" && isEditingName) { 25715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveTo = moveTo._findSibling(moveDirection); 25725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveTo) 25735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveToPropertyName = moveTo.name; 25745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else if (moveDirection === "forward" && (!this._newProperty || userInput)) 25755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) createNewProperty = true; 25765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else if (moveDirection === "backward") 25775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveToSelector = true; 25785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 25795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 25805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Make the Changes and trigger the moveToNextCallback after updating. 25815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var moveToIndex = moveTo && this.treeOutline ? this.treeOutline.children.indexOf(moveTo) : -1; 25825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var blankInput = /^\s*$/.test(userInput); 258353e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var shouldCommitNewProperty = this._newProperty && (isPropertySplitPaste || moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput)); 2584926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 25855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) { 2586926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section); 25875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var propertyText; 25885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent))) 25895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) propertyText = ""; 25905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else { 25915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (isEditingName) 25925267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) propertyText = userInput + ": " + this.property.value; 25935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 25945267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) propertyText = this.property.name + ": " + userInput; 25955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 25965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.applyStyleText(propertyText, true, true, false); 25975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else { 25985267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) if (isEditingName) 25995267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) this.property.name = userInput; 26005267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) else 26015267f701546148b83dfbe1d151cb184385bb5c22Torne (Richard Coles) this.property.value = userInput; 26025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!isDataPasted && !this._newProperty) 26035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.updateTitle(); 2604926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) moveToNextCallback.call(this, this._newProperty, false, section); 26055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // The Callback to start editing the next/previous property/selector. 26085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function moveToNextCallback(alreadyNew, valueChanged, section) 26095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 26105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!moveDirection) 26115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // User just tabbed through without changes. 26145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveTo && moveTo.parent) { 26155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveTo.startEditing(!isEditingName ? moveTo.nameElement : moveTo.valueElement); 26165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // User has made a change then tabbed, wiping all the original treeElements. 26205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Recalculate the new treeElement for the same property we were going to edit next. 26215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveTo && !moveTo.parent) { 26225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var propertyElements = section.propertiesTreeOutline.children; 26235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveDirection === "forward" && blankInput && !isEditingName) 26245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) --moveToIndex; 26255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveToIndex >= propertyElements.length && !this._newProperty) 26265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) createNewProperty = true; 26275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else { 26285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var treeElement = moveToIndex >= 0 ? propertyElements[moveToIndex] : null; 26295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (treeElement) { 263053e740f4a82e17f3ae59772501622dc354e42336Torne (Richard Coles) var elementToEdit = !isEditingName || isPropertySplitPaste ? treeElement.nameElement : treeElement.valueElement; 26315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (alreadyNew && blankInput) 26325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) elementToEdit = moveDirection === "forward" ? treeElement.nameElement : treeElement.valueElement; 26335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) treeElement.startEditing(elementToEdit); 26345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } else if (!alreadyNew) 26365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveToSelector = true; 26375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Create a new attribute in this section (or move to next editable selector if possible). 26415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (createNewProperty) { 26425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (alreadyNew && !valueChanged && (isEditingName ^ (moveDirection === "backward"))) 26435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.addNewBlankProperty().startEditing(); 26465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (abandonNewProperty) { 26505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) moveTo = this._findSibling(moveDirection); 26515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var sectionToEdit = (moveTo || moveDirection === "backward") ? section : section.nextEditableSibling(); 26525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (sectionToEdit) { 26535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (sectionToEdit.rule) 26545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sectionToEdit.startEditingSelector(); 26555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 26565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) sectionToEdit._moveEditorFromSelector(moveDirection); 26575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 26595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (moveToSelector) { 26625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (section.rule) 26635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.startEditingSelector(); 26645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) else 26655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section._moveEditorFromSelector(moveDirection); 26665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 26695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _removePrompt: function() 26715c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 26725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // BUG 53242. This cannot go into editingEnded(), as it should always happen first for any editing outcome. 26735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._prompt) { 26745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._prompt.detach(); 26755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete this._prompt; 26765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 26785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _hasBeenModifiedIncrementally: function() 26805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 26815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // New properties applied via up/down or live editing have an originalPropertyText and will be deleted later 26825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // on, if cancelled, when the empty string gets applied as their style text. 26835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return typeof this.originalPropertyText === "string" || (!!this.property.propertyText && this._newProperty); 26845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 26855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) applyStyleText: function(styleText, updateInterface, majorChange, isRevert) 26875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 26885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function userOperationFinishedCallback(parentPane, updateInterface) 26895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 26905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (updateInterface) 26915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) delete parentPane._userOperation; 26925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 26935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 26945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Leave a way to cancel editing after incremental changes. 26955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!isRevert && !updateInterface && !this._hasBeenModifiedIncrementally()) { 26965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Remember the rule's original CSS text on [Page](Up|Down), so it can be restored 26975c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // if the editing is canceled. 26985c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.originalPropertyText = this.property.propertyText; 26995c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27005c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27015c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this.treeOutline) 27025c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 27035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2704926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) var section = this.section(); 27055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleText = styleText.replace(/\s/g, " ").trim(); // Replace with whitespace. 27065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var styleTextLength = styleText.length; 27075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!styleTextLength && updateInterface && !isRevert && this._newProperty && !this._hasBeenModifiedIncrementally()) { 27085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // The user deleted everything and never applied a new property value via Up/Down scrolling/live editing, so remove the tree element and update. 27095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.parent.removeChild(this); 27105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.afterUpdate(); 27115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 27125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var currentNode = this._parentPane.node; 27155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (updateInterface) 27165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._parentPane._userOperation = true; 27175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function callback(userCallback, originalPropertyText, newStyle) 27195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 27205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!newStyle) { 27215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (updateInterface) { 27225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // It did not apply, cancel editing. 27235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._revertStyleUponEditingCanceled(originalPropertyText); 27245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 27265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 27275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._newProperty) 27305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._newPropertyInStyle = true; 2731926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) newStyle.parentRule = this.style.parentRule; 27325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.style = newStyle; 27335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.property = newStyle.propertyAt(this.property.index); 27345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._styleRule.style = this.style; 27355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (section && section.pane) 27375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) section.pane.dispatchEventToListeners("style edited"); 27385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2739926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) if (updateInterface && currentNode === this.node()) { 27405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._updatePane(userCallback); 27415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 27425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) userCallback(); 27455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 27465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Append a ";" if the new text does not end in ";". 27485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // FIXME: this does not handle trailing comments. 27495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (styleText.length && !/;\s*$/.test(styleText)) 27505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) styleText += ";"; 27515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var overwriteProperty = !!(!this._newProperty || this._newPropertyInStyle); 27525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.property.setText(styleText, majorChange, overwriteProperty, callback.bind(this, userOperationFinishedCallback.bind(null, this._parentPane, updateInterface), this.originalPropertyText)); 27535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 27545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) ondblclick: function() 27565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 27575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; // handled 27585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 27595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) isEventWithinDisclosureTriangle: function(event) 27615c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2762926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) return event.target === this._expandElement; 27635c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 27645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2765926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) __proto__: WebInspector.StylePropertyTreeElementBase.prototype 27665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 27675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/** 27695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @constructor 27705c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @extends {WebInspector.TextPrompt} 2771926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {!WebInspector.CSSMetadata} cssCompletions 2772926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {!WebInspector.StylePropertyTreeElement} sidebarPane 2773926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {boolean} isEditingName 27745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 2775926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles)WebInspector.StylesSidebarPane.CSSPropertyPrompt = function(cssCompletions, sidebarPane, isEditingName) 27765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles){ 27775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Use the same callback both for applyItemCallback and acceptItemCallback. 27785c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.TextPrompt.call(this, this._buildPropertyCompletions.bind(this), WebInspector.StyleValueDelimiters); 27795c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.setSuggestBoxEnabled("generic-suggest"); 27805c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._cssCompletions = cssCompletions; 27815c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sidebarPane = sidebarPane; 27825c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._isEditingName = isEditingName; 27835c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 27845c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 27855c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)WebInspector.StylesSidebarPane.CSSPropertyPrompt.prototype = { 27865c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onKeyDown: function(event) 27875c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 27885c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) switch (event.keyIdentifier) { 27895c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "Up": 27905c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "Down": 27915c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "PageUp": 27925c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) case "PageDown": 27935c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._handleNameOrValueUpDown(event)) { 27945c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.preventDefault(); 27955c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 27965c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 279793ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) break; 279893ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) case "Enter": 279993ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) if (this.autoCompleteElement && !this.autoCompleteElement.textContent.length) { 280093ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) this.tabKeyPressed(); 280193ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) return; 280293ac45cfc74041c8ae536ce58a9534d46db2024eTorne (Richard Coles) } 28035c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) break; 28045c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 28055c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28065c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.TextPrompt.prototype.onKeyDown.call(this, event); 28075c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28085c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28095c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) onMouseWheel: function(event) 28105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 28115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (this._handleNameOrValueUpDown(event)) { 28125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) event.consume(true); 28135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return; 28145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 28155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) WebInspector.TextPrompt.prototype.onMouseWheel.call(this, event); 28165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 2818591b958dee2cf159d33a0b931e6231072eaf38d5Ben Murdoch /** @override */ 28195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) tabKeyPressed: function() 28205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 28215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this.acceptAutoComplete(); 28225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Always tab to the next field. 28245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 28255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28277757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch /** 28287757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch * @param {Event} event 28297757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch */ 28305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _handleNameOrValueUpDown: function(event) 28315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 28325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) function finishHandler(originalValue, replacementString) 28335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 28345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Synthesize property text disregarding any comments, custom whitespace etc. 28355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) this._sidebarPane.applyStyleText(this._sidebarPane.nameElement.textContent + ": " + this._sidebarPane.valueElement.textContent, false, false, false); 28365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) } 2837926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) 28385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) // Handle numeric value increment/decrement only at this point. 28395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._sidebarPane.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this))) 28405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return true; 28415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 28435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28457757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch /** 28467757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch * @param {string} word 28477757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch * @return {boolean} 28487757ec2eadfa2dd8ac2aeed0a4399e9b07ec38cbBen Murdoch */ 28495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) _isValueSuggestion: function(word) 28505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 28515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) if (!word) 28525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return false; 28535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) word = word.toLowerCase(); 28545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) return this._cssCompletions.keySet().hasOwnProperty(word); 28555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) /** 28585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {Element} proxyElement 28595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * @param {Range} wordRange 2860fff8884795cb540f87cf6e6d67b629519b00eb8bBen Murdoch * @param {boolean} force 2861926b001d589ce2f10facb93dd4b87578ea35a855Torne (Richard Coles) * @param {function(!Array.<string>, number=)} completionsReadyCallback 28625c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 2863fff8884795cb540f87cf6e6d67b629519b00eb8bBen Murdoch _buildPropertyCompletions: function(proxyElement, wordRange, force, completionsReadyCallback) 28645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) { 2865f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) var prefix = wordRange.toString().toLowerCase(); 2866f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) if (!prefix && !force && (this._isEditingName || proxyElement.textContent.length)) { 2867f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) completionsReadyCallback([]); 2868f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) return; 2869f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) } 2870f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) 2871f5e4ad553afbc08dd2e729bb77e937a9a94d5827Torne (Richard Coles) var results = this._cssCompletions.startsWith(prefix); 28725c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) var selectedIndex = this._cssCompletions.mostUsedOf(results); 28735c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) completionsReadyCallback(results, selectedIndex); 28745c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) }, 28755c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 28765c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) __proto__: WebInspector.TextPrompt.prototype 28775c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 2878