Changeset 57003 in webkit


Ignore:
Timestamp:
Apr 2, 2010 8:43:08 AM (14 years ago)
Author:
pfeldman@chromium.org
Message:

2010-04-01 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: start editing DOM and styles on click-and-pause (part 1).

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

  • inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeElement.prototype.onattach): (WebInspector.ElementsTreeElement.prototype.selectOnMouseDown): (WebInspector.ElementsTreeElement.prototype.ondblclick): (WebInspector.ElementsTreeElement.prototype._handleClickAndPause): (WebInspector.ElementsTreeElement.prototype._startEditingTarget): (WebInspector.ElementsTreeElement.prototype._startEditingAttribute): (WebInspector.ElementsTreeElement.prototype._startEditingTextNode): (WebInspector.ElementsTreeElement.prototype._startEditingTagName): (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML):
  • inspector/front-end/StylesSidebarPane.js: (WebInspector.StylePropertiesSection.prototype._handleEmptySpaceDoubleClick): (WebInspector.StylePropertiesSection.prototype._handleSelectorClick): (WebInspector.StylePropertiesSection.prototype._handleSelectorClickAndPause): (WebInspector.StylePropertiesSection.prototype._handleSelectorDoubleClick): (WebInspector.StylePropertiesSection.prototype._startEditingOnMouseEvent): (WebInspector.StylePropertyTreeElement.prototype.onattach): (WebInspector.StylePropertyTreeElement.prototype):
  • inspector/front-end/inspector.css:
  • inspector/front-end/inspector.js:
  • inspector/front-end/treeoutline.js: (TreeElement.prototype._attach): (TreeElement.treeElementMouseDown): (TreeElement.prototype.selectOnMouseDown):
Location:
trunk/WebCore
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r57000 r57003  
     12010-04-01  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        Web Inspector: start editing DOM and styles on click-and-pause.
     6
     7        https://bugs.webkit.org/show_bug.cgi?id=36965
     8
     9        * inspector/front-end/ElementsTreeOutline.js:
     10        (WebInspector.ElementsTreeElement.prototype.onattach):
     11        (WebInspector.ElementsTreeElement.prototype.selectOnMouseDown):
     12        (WebInspector.ElementsTreeElement.prototype.ondblclick):
     13        (WebInspector.ElementsTreeElement.prototype._handleClickAndPause):
     14        (WebInspector.ElementsTreeElement.prototype._startEditingTarget):
     15        (WebInspector.ElementsTreeElement.prototype._startEditingAttribute):
     16        (WebInspector.ElementsTreeElement.prototype._startEditingTextNode):
     17        (WebInspector.ElementsTreeElement.prototype._startEditingTagName):
     18        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML):
     19        * inspector/front-end/StylesSidebarPane.js:
     20        (WebInspector.StylePropertiesSection.prototype._handleEmptySpaceDoubleClick):
     21        (WebInspector.StylePropertiesSection.prototype._handleSelectorClick):
     22        (WebInspector.StylePropertiesSection.prototype._handleSelectorClickAndPause):
     23        (WebInspector.StylePropertiesSection.prototype._handleSelectorDoubleClick):
     24        (WebInspector.StylePropertiesSection.prototype._startEditingOnMouseEvent):
     25        (WebInspector.StylePropertyTreeElement.prototype.onattach):
     26        (WebInspector.StylePropertyTreeElement.prototype):
     27        * inspector/front-end/inspector.css:
     28        * inspector/front-end/inspector.js:
     29        * inspector/front-end/treeoutline.js:
     30        (TreeElement.prototype._attach):
     31        (TreeElement.treeElementMouseDown):
     32        (TreeElement.prototype.selectOnMouseDown):
     33
    1342010-04-02  Laszlo Gombos  <laszlo.1.gombos@nokia.com>
    235

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

    r56727 r57003  
    471471    onattach: function()
    472472    {
    473         this.listItemElement.addEventListener("mousedown", this.onmousedown.bind(this), false);
    474 
    475473        if (this._hovered) {
    476474            this.updateSelection();
    … …  
    688686    },
    689687
    690     onmousedown: function(event)
    691     {
     688    selectOnMouseDown: function(event)
     689    {
     690        TreeElement.prototype.selectOnMouseDown.call(this, event);
     691
    692692        if (this._editing)
    693             return;
    694 
    695         if (this.isEventWithinDisclosureTriangle(event))
    696693            return;
    697694
    … …  
    711708            return;
    712709
    713         if (this._startEditingFromEvent(event))
     710        if (this._startEditingTarget(event.target))
    714711            return;
    715712
    … …  
    733730    },
    734731
    735     _startEditingFromEvent: function(event)
     732    _startEditingTarget: function(eventTarget)
    736733    {
    737734        if (this.treeOutline.focusedDOMNode != this.representedObject)
    … …  
    741738            return false;
    742739
    743         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
     740        var textNode = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-text-node");
    744741        if (textNode)
    745742            return this._startEditingTextNode(textNode);
    746743
    747         var attribute = event.target.enclosingNodeOrSelfWithClass("webkit-html-attribute");
     744        var attribute = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-attribute");
    748745        if (attribute)
    749             return this._startEditingAttribute(attribute, event.target);
    750 
    751         var tagName = event.target.enclosingNodeOrSelfWithClass("webkit-html-tag-name");
     746            return this._startEditingAttribute(attribute, eventTarget);
     747
     748        var tagName = eventTarget.enclosingNodeOrSelfWithClass("webkit-html-tag-name");
    752749        if (tagName)
    753750            return this._startEditingTagName(tagName);
    754751
    755         var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
     752        var newAttribute = eventTarget.enclosingNodeOrSelfWithClass("add-attribute");
    756753        if (newAttribute)
    757754            return this._addNewAttribute();
    … …  
    864861        removeZeroWidthSpaceRecursive(attribute);
    865862
    866         this._editing = true;
    867 
    868         WebInspector.startEditing(attribute, this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
     863        this._editing = WebInspector.startEditing(attribute, this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
    869864        window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
    870865
    … …  
    877872            return true;
    878873
    879         this._editing = true;
    880 
    881         WebInspector.startEditing(textNode, this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
     874        this._editing = WebInspector.startEditing(textNode, this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
    882875        window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
    883876
    … …  
    900893            return true;
    901894
    902         this._editing = true;
    903 
    904895        var closingTagElement = this._distinctClosingTagElement();
    905896
    … …  
    924915        tagNameElement.addEventListener('keyup', keyupListener, false);
    925916
    926         WebInspector.startEditing(tagNameElement, editingComitted.bind(this), editingCancelled.bind(this), tagName);
     917        this._editing = WebInspector.startEditing(tagNameElement, editingComitted.bind(this), editingCancelled.bind(this), tagName);
    927918        window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
    928919        return true;
    … …  
    933924        if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
    934925            return true;
    935 
    936         this._editing = true;
    937926
    938927        this._htmlEditElement = document.createElement("div");
    … …  
    980969        }
    981970
    982         WebInspector.startEditing(this._htmlEditElement, commit.bind(this), dispose.bind(this), null, true);
     971        this._editing = WebInspector.startEditing(this._htmlEditElement, commit.bind(this), dispose.bind(this), null, true);
    983972    },
    984973
    … …  
    12551244        var node = this.representedObject;
    12561245        var result = "<span class=\"webkit-html-tag" + (isClosingTag && isDistinctTreeElement ? " close" : "")  + "\">&lt;";
    1257         result += "<span class=\"webkit-html-tag-name\">" + (isClosingTag ? "/" : "") + tagName + "</span>";
     1246        result += "<span " + (isClosingTag ? "" : "class=\"webkit-html-tag-name\"") + ">" + (isClosingTag ? "/" : "") + tagName + "</span>";
    12581247        if (!isClosingTag && node.hasAttributes()) {
    12591248            for (var i = 0; i < node.attributes.length; ++i) {

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

    r56846 r57003  
    543543    WebInspector.PropertiesSection.call(this, styleRule.selectorText);
    544544
    545     this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);
    546     this.titleElement.addEventListener("click", this._clickSelector.bind(this), false);
    547     this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);
     545    this.titleElement.addEventListener("dblclick", this._handleSelectorDoubleClick.bind(this), false);
     546    this.titleElement.addEventListener("click", this._handleSelectorClick.bind(this), false);
     547    this.element.addEventListener("dblclick", this._handleEmptySpaceDoubleClick.bind(this), false);
    548548
    549549    this.styleRule = styleRule;
    … …  
    562562
    563563    this._usedProperties = usedProperties;
     564
     565    if (this.rule)
     566        this.titleElement.addStyleClass("styles-selector");
    564567
    565568    if (computedStyle) {
    … …  
    763766    },
    764767
    765     _dblclickEmptySpace: function(event)
     768    _handleEmptySpaceDoubleClick: function(event)
    766769    {
    767770        if (event.target.hasStyleClass("header")) {
    … …  
    773776    },
    774777
    775     _clickSelector: function(event)
     778    _handleSelectorClick: function(event)
    776779    {
    777780        event.stopPropagation();
    778781    },
    779782
    780     _dblclickSelector: function(event)
     783    _handleSelectorDoubleClick: function(event)
     784    {
     785        this._startEditingOnMouseEvent();
     786        event.stopPropagation();
     787    },
     788
     789    _startEditingOnMouseEvent: function()
    781790    {
    782791        if (!this.editable)
    … …  
    793802
    794803        this.startEditingSelector();
    795         event.stopPropagation();
    796804    },
    797805

  • trunk/WebCore/inspector/front-end/audits.css

    r55999 r57003  
    218218    font-size: 11px;
    219219    line-height: 14px;
     220    -webkit-user-select: text;
    220221}
    221222

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

    r56772 r57003  
    39283928}
    39293929
     3930.styles-selector {
     3931    cursor: text;
     3932    -webkit-user-select: text;
     3933}
     3934
    39303935.workers-list {
    39313936    list-style: none;

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

    r56840 r57003  
    18971897
    18981898    WebInspector.currentFocusElement = element;
     1899    return {
     1900        cancel: editingCancelled.bind(element),
     1901        commit: editingCommitted.bind(element)
     1902    };
    18991903}
    19001904

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

    r56683 r57003  
    568568            this._listItemNode.addStyleClass("selected");
    569569
    570         this._listItemNode.addEventListener("mousedown", TreeElement.treeElementSelected, false);
     570        this._listItemNode.addEventListener("mousedown", TreeElement.treeElementMouseDown, false);
    571571        this._listItemNode.addEventListener("click", TreeElement.treeElementToggled, false);
    572572        this._listItemNode.addEventListener("dblclick", TreeElement.treeElementDoubleClicked, false);
    … …  
    596596}
    597597
    598 TreeElement.treeElementSelected = function(event)
     598TreeElement.treeElementMouseDown = function(event)
    599599{
    600600    var element = event.currentTarget;
    … …  
    605605        return;
    606606
    607     element.treeElement.select();
     607    element.treeElement.selectOnMouseDown(event);
    608608}
    609609
    … …  
    768768}
    769769
     770TreeElement.prototype.selectOnMouseDown = function(event)
     771{
     772    this.select();
     773}
     774
    770775TreeElement.prototype.select = function(supressOnSelect)
    771776{
Note: See TracChangeset for help on using the changeset viewer.