Changeset 48281 in webkit


Ignore:
Timestamp:
Sep 10, 2009 8:17:10 PM (15 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Move the option to create a new style rule under the Styles' gear menu.

​https://bugs.webkit.org/show_bug.cgi?id=29039

Reviewed by Sam Weinig.

  • inspector/front-end/StylesSidebarPane.js:

(WebInspector.StylesSidebarPane): Add "New Style Rule" option to the gear menu.
(WebInspector.StylesSidebarPane.prototype._update): Check instanceof BlankStylePropertiesSection instead.
(WebInspector.StylesSidebarPane.prototype._changeSetting): Added. Keeps the color format setting selected
while calling the correct action.
(WebInspector.StylesSidebarPane.prototype._createNewRule): Creates a new section and edits the selector.
(WebInspector.StylesSidebarPane.prototype.addBlankSection): Insert the section in a cleaner way.
(WebInspector.StylesSidebarPane.prototype.removeSection): Added. Removes the passed in section.
(WebInspector.StylesSidebarPane.prototype.appropriateSelectorForNode): Return an empty string if there is no node.
(WebInspector.StylePropertiesSection.prototype.expand): Removed the check for _blank.
(WebInspector.StylePropertiesSection.prototype.startEditingSelector): No need for the context, the original selector
is remembered by the editing code.
(WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled): Do nothing. The original text is already
restored by the editing code.
(WebInspector.BlankStylePropertiesSection): Call the StylePropertiesSection constructor with appropriate data.
Remove event listener code.
(WebInspector.BlankStylePropertiesSection.prototype.expand): Added. Does nothing to prevent expanding.
(WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted.callback): Correctly construct the
WebInspector.CSSStyleDeclaration. Call editingSelectorCancelled instead of editingCancelled.
(WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted): Renamed from editingCommitted to
override the base class.
(WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCancelled): Remove the section.
(WebInspector.BlankStylePropertiesSection.prototype.makeNormal): Removed event listener code. Removed the delete lines
since they were doing nothing (deleting nonexistent properties that exist only on the prototype.) Change prototypes at
the end to correctly swtich to a real StylePropertiesSection.

  • inspector/front-end/inspector.js:

(WebInspector.startEditing.editingCancelled): Ceck for null/undefined callbacks.
(WebInspector.startEditing.editingCommitted): Ditto.

Location:
trunk/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r48280 r48281  
     12009-09-08  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Move the option to create a new style rule under the Styles' gear menu.
     4
     5        https://bugs.webkit.org/show_bug.cgi?id=29039
     6
     7        Reviewed by Sam Weinig.
     8
     9        * inspector/front-end/StylesSidebarPane.js:
     10        (WebInspector.StylesSidebarPane): Add "New Style Rule" option to the gear menu.
     11        (WebInspector.StylesSidebarPane.prototype._update): Check instanceof BlankStylePropertiesSection instead.
     12        (WebInspector.StylesSidebarPane.prototype._changeSetting): Added. Keeps the color format setting selected
     13        while calling the correct action.
     14        (WebInspector.StylesSidebarPane.prototype._createNewRule): Creates a new section and edits the selector.
     15        (WebInspector.StylesSidebarPane.prototype.addBlankSection): Insert the section in a cleaner way.
     16        (WebInspector.StylesSidebarPane.prototype.removeSection): Added. Removes the passed in section.
     17        (WebInspector.StylesSidebarPane.prototype.appropriateSelectorForNode): Return an empty string if there is no node.
     18        (WebInspector.StylePropertiesSection.prototype.expand): Removed the check for _blank.
     19        (WebInspector.StylePropertiesSection.prototype.startEditingSelector): No need for the context, the original selector
     20        is remembered by the editing code.
     21        (WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled): Do nothing. The original text is already
     22        restored by the editing code.
     23        (WebInspector.BlankStylePropertiesSection): Call the StylePropertiesSection constructor with appropriate data.
     24        Remove event listener code.
     25        (WebInspector.BlankStylePropertiesSection.prototype.expand): Added. Does nothing to prevent expanding.
     26        (WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted.callback): Correctly construct the
     27        WebInspector.CSSStyleDeclaration. Call editingSelectorCancelled instead of editingCancelled.
     28        (WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted): Renamed from editingCommitted to
     29        override the base class.
     30        (WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCancelled): Remove the section.
     31        (WebInspector.BlankStylePropertiesSection.prototype.makeNormal): Removed event listener code. Removed the delete lines
     32        since they were doing nothing (deleting nonexistent properties that exist only on the prototype.) Change prototypes at
     33        the end to correctly swtich to a real StylePropertiesSection.
     34        * inspector/front-end/inspector.js:
     35        (WebInspector.startEditing.editingCancelled): Ceck for null/undefined callbacks.
     36        (WebInspector.startEditing.editingCommitted): Ditto.
     37
    1382009-09-10  Laszlo Gombos  <laszlo.1.gombos@nokia.com>
    239

  • trunk/WebCore/inspector/front-end/StylesSidebarPane.js

    r48102 r48281  
    3636    var option = document.createElement("option");
    3737    option.value = "hex";
     38    option.action = this._changeColorFormat.bind(this);
    3839    if (Preferences.colorFormat === "hex")
    3940        option.selected = true;
    … …  
    4344    option = document.createElement("option");
    4445    option.value = "rgb";
     46    option.action = this._changeColorFormat.bind(this);
    4547    if (Preferences.colorFormat === "rgb")
    4648        option.selected = true;
    … …  
    5052    option = document.createElement("option");
    5153    option.value = "hsl";
     54    option.action = this._changeColorFormat.bind(this);
    5255    if (Preferences.colorFormat === "hsl")
    5356        option.selected = true;
    … …  
    5558    this.settingsSelectElement.appendChild(option);
    5659
     60    this.settingsSelectElement.appendChild(document.createElement("hr"));
     61
     62    option = document.createElement("option");
     63    option.action = this._createNewRule.bind(this);
     64    option.label = WebInspector.UIString("New Style Rule");
     65    this.settingsSelectElement.appendChild(option);
     66
    5767    this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
    58     this.settingsSelectElement.addEventListener("change", this._changeColorFormat.bind(this), false);
     68    this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
    5969
    6070    this.titleElement.appendChild(this.settingsSelectElement);
    … …  
    93103
    94104        var self = this;
    95         var callback = function(styles) {
     105        function callback(styles)
     106        {
    96107            if (!styles)
    97108                return;
    98109            node._setStyles(styles.computedStyle, styles.inlineStyle, styles.styleAttributes, styles.matchedCSSRules);
    99110            self._update(refresh, body, node, editedSection, forceUpdate);
    100         };
     111        }
     112
    101113        InjectedScriptAccess.getStyles(node.id, !Preferences.showUserAgentStyles, callback);
    102114    },
    … …  
    114126            for (var i = 0; i < this.sections.length; ++i) {
    115127                var section = this.sections[i];
    116                 if (section._blank)
     128                if (section instanceof WebInspector.BlankStylePropertiesSection)
    117129                    continue;
    118130                if (section.computedStyle)
    … …  
    298310                this.sections.push(section);
    299311            }
    300 
    301             this.addBlankSection();
    302         }
     312        }
     313    },
     314
     315    _changeSetting: function(event)
     316    {
     317        var options = this.settingsSelectElement.options;
     318        var selectedOption = options[this.settingsSelectElement.selectedIndex];
     319        selectedOption.action(event);
     320
     321        // Select the correct color format setting again, since it needs to be selected.
     322        var selectedIndex = 0;
     323        for (var i = 0; i < options.length; ++i) {
     324            if (options[i].value === Preferences.colorFormat) {
     325                selectedIndex = i;
     326                break;
     327            }
     328        }
     329
     330        this.settingsSelectElement.selectedIndex = selectedIndex;
    303331    },
    304332
    … …  
    314342    },
    315343
     344    _createNewRule: function(event)
     345    {
     346        this.addBlankSection().startEditingSelector();
     347    },
     348
    316349    addBlankSection: function()
    317350    {
    318         var blankSection = new WebInspector.BlankStylePropertiesSection();
     351        var blankSection = new WebInspector.BlankStylePropertiesSection(this.appropriateSelectorForNode());
    319352        blankSection.pane = this;
    320353
    321         this.bodyElement.insertBefore(blankSection.element, this.bodyElement.firstChild.nextSibling.nextSibling); // 0 is computed, 1 is element.style
    322         var computed = this.sections.shift();
    323         var elementStyle = this.sections.shift();
    324         this.sections.unshift(blankSection);
    325         this.sections.unshift(elementStyle);
    326         this.sections.unshift(computed);
     354        var elementStyleSection = this.sections[1];       
     355        this.bodyElement.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
     356
     357        this.sections.splice(2, 0, blankSection);
     358
     359        return blankSection;
     360    },
     361
     362    removeSection: function(section)
     363    {
     364        var index = this.sections.indexOf(section);
     365        if (index === -1)
     366            return;
     367        this.sections.splice(index, 1);
     368        if (section.element.parentNode)
     369            section.element.parentNode.removeChild(section.element);
    327370    },
    328371
    … …  
    331374        var node = this.node;
    332375        if (!node)
    333             return;
     376            return "";
    334377
    335378        var id = node.getAttribute("id");
    … …  
    354397{
    355398    WebInspector.PropertiesSection.call(this, styleRule.selectorText);
     399
    356400    this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);
    357401    this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);
    … …  
    437481    expand: function(dontRememberState)
    438482    {
    439         if (this._blank)
    440             return;
    441 
    442483        WebInspector.PropertiesSection.prototype.expand.call(this);
    443484        if (dontRememberState)
    … …  
    602643            return;
    603644
    604         var context = this.styleRule.selectorText;
    605         WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), context);
     645        WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), null);
    606646        window.getSelection().setBaseAndExtent(element, 0, element, 1);
    607647    },
    … …  
    626666
    627667        var self = this;
    628         var callback = function(result) {
     668        function callback(result)
     669        {
    629670            if (!result) {
    630671                // Invalid Syntax for a Selector
    631                 self.editingSelectorCancelled(element, context);
    632672                moveToNextIfNeeded.call(self);
    633673                return;
    … …  
    647687            self.rule = newRule;
    648688            self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRule };
     689
    649690            var oldIdentifier = this.identifier;
    650691            self.identifier = newRule.selectorText + ":" + self.subtitleElement.textContent;
     692
    651693            self.pane.update();
     694
    652695            WebInspector.panels.elements.renameSelector(oldIdentifier, this.identifier, oldContent, newContent);
     696
    653697            moveToNextIfNeeded.call(self);
    654         };
     698        }
    655699
    656700        InjectedScriptAccess.applyStyleRuleText(this.rule.id, newContent, this.pane.node.id, callback);
    657701    },
    658702
    659     editingSelectorCancelled: function(element, context)
    660     {
    661         element.textContent = context;
     703    editingSelectorCancelled: function()
     704    {
     705        // Do nothing, this is overridden by BlankStylePropertiesSection.
    662706    }
    663707}
    … …  
    665709WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
    666710
    667 WebInspector.BlankStylePropertiesSection = function()
     711WebInspector.BlankStylePropertiesSection = function(defaultSelectorText)
    668712{
    669     WebInspector.PropertiesSection.call(this, WebInspector.UIString("Double-Click to Add"), null);
    670 
    671     this._blank = true;
    672     this._dblclickListener = this._dblclick.bind(this);
     713    WebInspector.StylePropertiesSection.call(this, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, "", false, {}, false);
     714
    673715    this.element.addStyleClass("blank-section");
    674     this.titleElement.addStyleClass("blank-title");
    675     this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);
    676     this.titleElement.addEventListener("dblclick", this._dblclickListener, false);
    677716}
    678717
    679718WebInspector.BlankStylePropertiesSection.prototype = {
    680     _dblclick: function(event)
    681     {
    682         this.startEditing();
    683     },
    684 
    685     startEditing: function()
    686     {
    687         var element = this.titleElement;
    688         if (WebInspector.isBeingEdited(element))
    689             return;
    690 
    691         this.titleElement.textContent = this.pane.appropriateSelectorForNode();
    692         this.titleElement.removeStyleClass("blank-title");
    693         WebInspector.startEditing(this.titleElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), "");
    694         window.getSelection().setBaseAndExtent(element, 0, element, 1);
    695     },
    696 
    697     editingCancelled: function()
    698     {
    699         this.titleElement.textContent = WebInspector.UIString("Double-Click to Add");
    700         this.titleElement.addStyleClass("blank-title");
    701     },
    702 
    703     editingCommitted: function(element, newContent, oldContent, context)
     719    expand: function()
     720    {
     721        // Do nothing, blank sections are not expandable.
     722    },
     723
     724    editingSelectorCommitted: function(element, newContent, oldContent, context)
    704725    {
    705726        var self = this;
    706         var callback = function(result) {
     727        function callback(result)
     728        {
    707729            if (!result) {
    708730                // Invalid Syntax for a Selector
    709                 self.editingCancelled();
     731                self.editingSelectorCancelled();
    710732                return;
    711733            }
    712             var styleRule = result[0];
     734
     735            var rule = result[0];
    713736            var doesSelectorAffectSelectedNode = result[1];
    714             self.makeNormal(WebInspector.CSSStyleDeclaration.parseRule(styleRule));
     737
     738            var styleRule = WebInspector.CSSStyleDeclaration.parseRule(rule);
     739            styleRule.rule = rule;
     740
     741            self.makeNormal(styleRule);
    715742
    716743            if (!doesSelectorAffectSelectedNode) {
    … …  
    722749            self.expand();
    723750
    724             self.pane.addBlankSection();
    725751            self.addNewBlankProperty().startEditing();
    726         };
     752        }
     753
    727754        InjectedScriptAccess.addStyleSelector(newContent, this.pane.node.id, callback);
    728755    },
    729756
     757    editingSelectorCancelled: function()
     758    {
     759        this.pane.removeSection(this);
     760    },
     761
    730762    makeNormal: function(styleRule)
    731763    {
    732         this.titleElement.removeEventListener("dblclick", this._dblclickListener, false);
    733         this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);
    734         this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);
    735764        this.element.removeStyleClass("blank-section");
    736         delete this._blank;
    737         delete this._dblclick;
    738         delete this.startEditing;
    739         delete this.editingCancelled;
    740         delete this.editingCommitted;
    741         delete this._dblclickListener;
    742         delete this.makeNormal;
     765
    743766        this.styleRule = styleRule;
    744767        this.rule = styleRule.rule;
    745768        this.computedStyle = false;
    746769        this.editable = true;
    747         this.identifier = styleRule.selectorText + ":inspector";
    748         // leftovers are: this.noAffect if applicable
     770        this.identifier = styleRule.selectorText + ":via inspector";
     771
     772        this.__proto__ = WebInspector.StylePropertiesSection.prototype;
    749773    }
    750774}
    … …  
    10171041
    10181042        var self = this;
    1019         var callback = function(newPayload) {
     1043        function callback(newPayload)
     1044        {
    10201045            if (!newPayload)
    10211046                return;
    … …  
    10321057
    10331058            self.updateAll(true);
    1034         };
     1059        }
     1060
    10351061        InjectedScriptAccess.toggleStyleEnabled(this.style.id, this.name, disabled, callback);
    10361062    },
    … …  
    12511277
    12521278        // The Callback to start editing the next property
    1253         function moveToNextCallback(alreadyNew, valueChanged, section) {
     1279        function moveToNextCallback(alreadyNew, valueChanged, section)
     1280        {
    12541281            if (!moveDirection)
    12551282                return;
    … …  
    13041331
    13051332        var self = this;
    1306         var callback = function(result) {
     1333        function callback(result)
     1334        {
    13071335            if (!result) {
    13081336                // The user typed something, but it didn't parse. Just abort and restore
    … …  
    13341362            if (!self.rule)
    13351363                WebInspector.panels.elements.treeOutline.update();
    1336         };
     1364        }
     1365
    13371366        InjectedScriptAccess.applyStyleText(this.style.id, styleText.trimWhitespace(), this.name, callback);
    13381367    }

  • trunk/WebCore/inspector/front-end/inspector.js

    r48102 r48281  
    14571457
    14581458    function editingCancelled() {
    1459         this.innerText = oldText;
     1459        this.textContent = oldText;
    14601460
    14611461        cleanUpAfterEditing.call(this);
    14621462
    1463         cancelledCallback(this, context);
     1463        if (cancelledCallback)
     1464            cancelledCallback(this, context);
    14641465    }
    14651466
    … …  
    14671468        cleanUpAfterEditing.call(this);
    14681469
    1469         committedCallback(this, this.textContent, oldText, context, moveDirection);
     1470        if (committedCallback)
     1471            committedCallback(this, this.textContent, oldText, context, moveDirection);
    14701472    }
    14711473
Note: See TracChangeset for help on using the changeset viewer.