Changeset 52556 in webkit


Ignore:
Timestamp:
Dec 25, 2009 6:24:07 AM (14 years ago)
Author:
pfeldman@chromium.org
Message:

2009-12-25 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Implement Edit Inner HTML action.

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

  • English.lproj/localizedStrings.js:
  • bindings/js/JSInjectedScriptHostCustom.cpp: (WebCore::JSInjectedScriptHost::pushNodePathToFrontend):
  • bindings/v8/custom/V8InjectedScriptHostCustom.cpp: (WebCore::V8InjectedScriptHost::pushNodePathToFrontendCallback):
  • inspector/InjectedScriptHost.cpp: (WebCore::InjectedScriptHost::pushNodePathToFrontend):
  • inspector/InjectedScriptHost.h:
  • inspector/InjectedScriptHost.idl:
  • inspector/InspectorDOMAgent.h:
  • inspector/front-end/ElementsPanel.js: (WebInspector.ElementsPanel.prototype.show): (WebInspector.ElementsPanel.prototype._updateModifiedNodesSoon): (WebInspector.ElementsPanel.prototype.updateModifiedNodes):
  • inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu): (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.commit): (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.dispose): (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML): ():
  • inspector/front-end/InjectedScript.js: (InjectedScript.getNodePropertyValue): (InjectedScript.setOuterHTML): (InjectedScript.performSearch.addNodesToResults): (InjectedScript._inspectObject): (InjectedScript._copy): (InjectedScript.pushNodeToFrontend):
  • inspector/front-end/InjectedScriptAccess.js:
  • inspector/front-end/InspectorFrontendHostStub.js: (.WebInspector.InspectorFrontendHostStub.prototype.hiddenPanels): (.WebInspector.InspectorFrontendHostStub.prototype.windowUnloading):
  • inspector/front-end/inspector.css:
  • inspector/front-end/inspector.js: (WebInspector.startEditing.keyDownEventListener): (WebInspector.startEditing):
Location:
trunk/WebCore
Files:
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r52555 r52556  
     12009-12-25  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        Web Inspector: Implement Edit Inner HTML action.
     6
     7        https://bugs.webkit.org/show_bug.cgi?id=32924
     8
     9        * English.lproj/localizedStrings.js:
     10        * bindings/js/JSInjectedScriptHostCustom.cpp:
     11        (WebCore::JSInjectedScriptHost::pushNodePathToFrontend):
     12        * bindings/v8/custom/V8InjectedScriptHostCustom.cpp:
     13        (WebCore::V8InjectedScriptHost::pushNodePathToFrontendCallback):
     14        * inspector/InjectedScriptHost.cpp:
     15        (WebCore::InjectedScriptHost::pushNodePathToFrontend):
     16        * inspector/InjectedScriptHost.h:
     17        * inspector/InjectedScriptHost.idl:
     18        * inspector/InspectorDOMAgent.h:
     19        * inspector/front-end/ElementsPanel.js:
     20        (WebInspector.ElementsPanel.prototype.show):
     21        (WebInspector.ElementsPanel.prototype._updateModifiedNodesSoon):
     22        (WebInspector.ElementsPanel.prototype.updateModifiedNodes):
     23        * inspector/front-end/ElementsTreeOutline.js:
     24        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
     25        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.commit):
     26        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.dispose):
     27        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML):
     28        ():
     29        * inspector/front-end/InjectedScript.js:
     30        (InjectedScript.getNodePropertyValue):
     31        (InjectedScript.setOuterHTML):
     32        (InjectedScript.performSearch.addNodesToResults):
     33        (InjectedScript._inspectObject):
     34        (InjectedScript._copy):
     35        (InjectedScript.pushNodeToFrontend):
     36        * inspector/front-end/InjectedScriptAccess.js:
     37        * inspector/front-end/InspectorFrontendHostStub.js:
     38        (.WebInspector.InspectorFrontendHostStub.prototype.hiddenPanels):
     39        (.WebInspector.InspectorFrontendHostStub.prototype.windowUnloading):
     40        * inspector/front-end/inspector.css:
     41        * inspector/front-end/inspector.js:
     42        (WebInspector.startEditing.keyDownEventListener):
     43        (WebInspector.startEditing):
     44
    1452009-12-24  Dan Bernstein  <mitz@apple.com>
    246

  • trunk/WebCore/bindings/js/JSInjectedScriptHostCustom.cpp

    r51528 r52556  
    163163JSValue JSInjectedScriptHost::pushNodePathToFrontend(ExecState* exec, const ArgList& args)
    164164{
    165     if (args.size() < 2)
     165    if (args.size() < 3)
    166166        return jsUndefined();
    167167
    … …  
    174174        return jsUndefined();
    175175
    176     bool selectInUI = args.at(1).toBoolean(exec);
    177     return jsNumber(exec, impl()->pushNodePathToFrontend(node, selectInUI));
     176    bool withChildren = args.at(1).toBoolean(exec);
     177    bool selectInUI = args.at(2).toBoolean(exec);
     178    return jsNumber(exec, impl()->pushNodePathToFrontend(node, withChildren, selectInUI));
    178179}
    179180

  • trunk/WebCore/bindings/v8/custom/V8InjectedScriptHostCustom.cpp

    r52459 r52556  
    105105{
    106106    INC_STATS("InjectedScriptHost.pushNodePathToFrontend()");
    107     if (args.Length() < 2)
     107    if (args.Length() < 3)
    108108        return v8::Undefined();
    109109
    110110    InjectedScriptHost* host = V8DOMWrapper::convertToNativeObject<InjectedScriptHost>(V8ClassIndex::INJECTEDSCRIPTHOST, args.Holder());
    111111    Node* node = V8DOMWrapper::convertDOMWrapperToNode<Node>(v8::Handle<v8::Object>::Cast(args[0]));
    112     bool selectInUI = args[1]->ToBoolean()->Value();
     112    bool withChildren = args[1]->ToBoolean()->Value();
     113    bool selectInUI = args[2]->ToBoolean()->Value();
    113114    if (node)
    114         return v8::Number::New(host->pushNodePathToFrontend(node, selectInUI));
     115        return v8::Number::New(host->pushNodePathToFrontend(node, withChildren, selectInUI));
    115116
    116117    return v8::Undefined();

  • trunk/WebCore/inspector/InjectedScriptHost.cpp

    r52545 r52556  
    112112}
    113113
    114 long InjectedScriptHost::pushNodePathToFrontend(Node* node, bool selectInUI)
     114long InjectedScriptHost::pushNodePathToFrontend(Node* node, bool withChildren, bool selectInUI)
    115115{
    116116    InspectorFrontend* frontend = inspectorFrontend();
    … …  
    119119        return 0;
    120120    long id = domAgent->pushNodePathToFrontend(node);
     121    if (withChildren)
     122        domAgent->pushChildNodesToFrontend(id);
    121123    if (selectInUI)
    122124        frontend->updateFocusedNode(id);

  • trunk/WebCore/inspector/InjectedScriptHost.h

    r52545 r52556  
    6565    ScriptValue wrapObject(const ScriptValue& object, const String& objectGroup);
    6666    ScriptValue unwrapObject(const String& objectId);
    67     long pushNodePathToFrontend(Node* node, bool selectInUI);
     67    long pushNodePathToFrontend(Node* node, bool withChildren, bool selectInUI);
    6868
    6969    void addNodesToSearchResult(const String& nodeIds);

  • trunk/WebCore/inspector/InjectedScriptHost.idl

    r52545 r52556  
    4141        [Custom] long wrapObject(in DOMObject object, in DOMString objectGroup);
    4242        [Custom] DOMObject unwrapObject(in long objectId);
    43         [Custom] int pushNodePathToFrontend(in DOMObject node, in boolean selectInUI);
     43        [Custom] int pushNodePathToFrontend(in DOMObject node, in boolean withChildren, in boolean selectInUI);
    4444
    4545        void addNodesToSearchResult(in DOMString nodeIds);

  • trunk/WebCore/inspector/InspectorDOMAgent.h

    r51601 r52556  
    102102        Node* nodeForPath(const String& path);
    103103        long pushNodePathToFrontend(Node* node);
     104        void pushChildNodesToFrontend(long nodeId);
    104105
    105106   private:
    … …  
    114115
    115116        bool pushDocumentToFrontend();
    116         void pushChildNodesToFrontend(long nodeId);
    117117
    118118        ScriptObject buildObjectForNode(Node* node, int depth, NodeToIdMap* nodesMap);

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

    r52203 r52556  
    147147        this.treeOutline.updateSelection();
    148148        if (this.recentlyModifiedNodes.length)
    149             this._updateModifiedNodes();
     149            this.updateModifiedNodes();
    150150    },
    151151
    … …  
    492492        if ("_updateModifiedNodesTimeout" in this)
    493493            return;
    494         this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 0);
    495     },
    496 
    497     _updateModifiedNodes: function()
     494        this._updateModifiedNodesTimeout = setTimeout(this.updateModifiedNodes.bind(this), 0);
     495    },
     496
     497    updateModifiedNodes: function()
    498498    {
    499499        if ("_updateModifiedNodesTimeout" in this) {

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

    r52440 r52556  
    604604
    605605        // Add node-related actions.
     606        contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
    606607        contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
    607608        contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
    … …  
    718719
    719720        return true;
     721    },
     722
     723    _startEditingAsHTML: function(commitCallback, initialValue)
     724    {
     725        if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
     726            return true;
     727
     728        this._editing = true;
     729
     730        this._htmlEditElement = document.createElement("div");
     731        this._htmlEditElement.className = "source-code elements-tree-editor";
     732        this._htmlEditElement.textContent = initialValue;
     733
     734        // Hide header items.
     735        var child = this.listItemElement.firstChild;
     736        while (child) {
     737            child.style.display = "none";
     738            child = child.nextSibling;
     739        }
     740        // Hide children item.
     741        if (this._childrenListNode)
     742            this._childrenListNode.style.display = "none";
     743        // Append editor.
     744        this.listItemElement.appendChild(this._htmlEditElement);
     745
     746        this.updateSelection();
     747
     748        function commit()
     749        {
     750            commitCallback(this._htmlEditElement.textContent);
     751            dispose.call(this);
     752        }
     753
     754        function dispose()
     755        {
     756            delete this._editing;
     757
     758            // Remove editor.
     759            this.listItemElement.removeChild(this._htmlEditElement);
     760            delete this._htmlEditElement;
     761            // Unhide children item.
     762            if (this._childrenListNode)
     763                this._childrenListNode.style.removeProperty("display");
     764            // Unhide header items.
     765            var child = this.listItemElement.firstChild;
     766            while (child) {
     767                child.style.removeProperty("display");
     768                child = child.nextSibling;
     769            }
     770
     771            this.updateSelection();
     772        }
     773
     774        WebInspector.startEditing(this._htmlEditElement, commit.bind(this), dispose.bind(this), null, true);
    720775    },
    721776
    … …  
    9631018    },
    9641019
    965     _copyHTML: function(node)
     1020    _editAsHTML: function()
     1021    {
     1022        var treeOutline = this.treeOutline;
     1023        var node = this.representedObject;
     1024        var wasExpanded = this.expanded;
     1025
     1026        function selectNode(nodeId)
     1027        {
     1028            if (!nodeId)
     1029                return;
     1030
     1031            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
     1032            WebInspector.panels.elements.updateModifiedNodes();
     1033
     1034            WebInspector.updateFocusedNode(nodeId);
     1035            if (wasExpanded) {
     1036                var newTreeItem = treeOutline.findTreeElement(WebInspector.domAgent.nodeForId(nodeId));
     1037                if (newTreeItem)
     1038                    newTreeItem.expand();
     1039            }
     1040        }
     1041
     1042        function commitChange(value)
     1043        {
     1044            InjectedScriptAccess.setOuterHTML(node.id, value, wasExpanded, selectNode.bind(this));
     1045        }
     1046
     1047        InjectedScriptAccess.getNodePropertyValue(node.id, "outerHTML", this._startEditingAsHTML.bind(this, commitChange));
     1048    },
     1049
     1050    _copyHTML: function()
    9661051    {
    9671052        InspectorBackend.copyNode(this.representedObject.id);

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

    r52545 r52556  
    511511}
    512512
     513InjectedScript.getNodePropertyValue = function(nodeId, propertyName)
     514{
     515    var node = InjectedScript._nodeForId(nodeId);
     516    if (!node)
     517        return false;
     518    var result = node[propertyName];
     519    return result !== undefined ? result : false;
     520}
     521
     522InjectedScript.setOuterHTML = function(nodeId, value, expanded)
     523{
     524    var node = InjectedScript._nodeForId(nodeId);
     525    if (!node)
     526        return false;
     527
     528    var parent = node.parentNode;
     529    var prevSibling = node.previousSibling;
     530    node.outerHTML = value;
     531    var newNode = prevSibling ? prevSibling.nextSibling : parent.firstChild;
     532
     533    return InjectedScriptHost.pushNodePathToFrontend(newNode, expanded, false);
     534}
    513535
    514536InjectedScript.getCompletions = function(expression, includeInspectorCommandLineAPI, callFrameId)
    … …  
    647669            node[searchResultsProperty] = true;
    648670            InjectedScript._searchResults.push(node);
    649             var nodeId = InjectedScriptHost.pushNodePathToFrontend(node, false);
     671            var nodeId = InjectedScriptHost.pushNodePathToFrontend(node, false, false);
    650672            nodeIds.push(nodeId);
    651673        }
    … …  
    892914    inspectedWindow.console.log(o);
    893915    if (Object.type(o) === "node") {
    894         InjectedScriptHost.pushNodePathToFrontend(o, true);
     916        InjectedScriptHost.pushNodePathToFrontend(o, false, true);
    895917    } else {
    896918        switch (Object.describe(o)) {
    … …  
    908930{
    909931    if (Object.type(o) === "node") {
    910         var nodeId = InjectedScriptHost.pushNodePathToFrontend(o, false);
     932        var nodeId = InjectedScriptHost.pushNodePathToFrontend(o, false, false);
    911933        InjectedScriptHost.copyNode(nodeId);
    912934    } else {
    … …  
    10491071    if (!object || Object.type(object) !== "node")
    10501072        return false;
    1051     return InjectedScriptHost.pushNodePathToFrontend(object, false);
     1073    return InjectedScriptHost.pushNodePathToFrontend(object, false, false);
    10521074}
    10531075

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

    r52545 r52556  
    6666InjectedScriptAccess._installHandler("getComputedStyle");
    6767InjectedScriptAccess._installHandler("getInlineStyle");
     68InjectedScriptAccess._installHandler("getNodePropertyValue");
    6869InjectedScriptAccess._installHandler("getProperties");
    6970InjectedScriptAccess._installHandler("getPrototypes");
    … …  
    7475InjectedScriptAccess._installHandler("nodeByPath");
    7576InjectedScriptAccess._installHandler("searchCanceled");
     77InjectedScriptAccess._installHandler("setOuterHTML");
    7678InjectedScriptAccess._installHandler("setPropertyValue");
    7779InjectedScriptAccess._installHandler("setStyleProperty");

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

    r52547 r52556  
    9393    {
    9494        return "";
     95    },
     96
     97    windowUnloading: function()
     98    {
    9599    }
    96100}

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

    r52555 r52556  
    15041504}
    15051505
     1506.elements-tree-editor {
     1507    -webkit-user-select: text;
     1508    -webkit-user-modify: read-write-plaintext-only;
     1509}
     1510
    15061511.section .properties li.editing {
    15071512    margin-left: 10px;

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

    r52547 r52556  
    16241624}
    16251625
    1626 WebInspector.startEditing = function(element, committedCallback, cancelledCallback, context)
     1626WebInspector.startEditing = function(element, committedCallback, cancelledCallback, context, multiline)
    16271627{
    16281628    if (element.__editing)
    … …  
    16851685
    16861686    function keyDownEventListener(event) {
    1687         if (isEnterKey(event)) {
     1687        var isMetaOrCtrl = WebInspector.isMac() ?
     1688            event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
     1689            event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
     1690        if (isEnterKey(event) && (!multiline || isMetaOrCtrl)) {
    16881691            editingCommitted.call(element);
    16891692            event.preventDefault();
Note: See TracChangeset for help on using the changeset viewer.