Changeset 94842 in webkit


Ignore:
Timestamp:
Sep 9, 2011 3:16:14 AM (13 years ago)
Author:
apavlov@chromium.org
Message:

Web Inspector: live edit both for JS and CSS is not discoverable.
​https://bugs.webkit.org/show_bug.cgi?id=65962

Source/WebCore:

Add the "Edit" button to SourceFrame, so that resources/scripts can be edited both in the
Resources and the Scripts panels. The button is grayed out if the resource/script is not editable.

Reviewed by Yury Semikhatsky.

  • inspector/front-end/Images/statusbarButtonGlyphs.png:
  • inspector/front-end/ResourceView.js:

(WebInspector.EditableResourceSourceFrame.prototype.canEditSource):

  • inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel.prototype.get statusBarItems):
(WebInspector.ScriptsPanel.prototype.set visibleView):

  • inspector/front-end/SourceFrame.js:

(WebInspector.SourceFrame):
(WebInspector.SourceFrame.prototype.get statusBarItems):
(WebInspector.SourceFrame.prototype._initializeTextViewer):
(WebInspector.SourceFrame.prototype._editButtonClicked):
(WebInspector.SourceFrame.prototype.canEditSource):
(WebInspector.SourceFrame.prototype.startEditing):
(WebInspector.SourceFrame.prototype.commitEditing):
(WebInspector.SourceFrame.prototype._setReadOnly):
(WebInspector.TextViewerDelegateForSourceFrame.prototype.doubleClick):

  • inspector/front-end/TextViewer.js:

(WebInspector.TextEditorMainPanel.prototype.set readOnly):
(WebInspector.TextEditorMainPanel.prototype._updateSelectionOnStartEditing):

  • inspector/front-end/inspector.css:

(button.edit-source-status-bar-item .glyph):
(button.edit-source-status-bar-item.toggled-on .glyph):

LayoutTests:

Reviewed by Yury Semikhatsky.

  • inspector/debugger/scripts-panel.html:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r94841 r94842  
     12011-09-08  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Web Inspector: live edit both for JS and CSS is not discoverable.
     4        https://bugs.webkit.org/show_bug.cgi?id=65962
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        * inspector/debugger/scripts-panel.html:
     9
    1102011-09-09  Shinya Kawanaka  <shinyak@google.com>
    211

  • trunk/LayoutTests/inspector/debugger/scripts-panel.html

    r94571 r94842  
    1212        model.breakpointsForUISourceCode = function() { return []; };
    1313        model.messagesForUISourceCode = function() { return []; };
     14        model.canEditScriptSource = function() { return true; };
    1415        return model;
    1516    }

  • trunk/Source/WebCore/ChangeLog

    r94841 r94842  
     12011-09-08  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Web Inspector: live edit both for JS and CSS is not discoverable.
     4        https://bugs.webkit.org/show_bug.cgi?id=65962
     5
     6        Add the "Edit" button to SourceFrame, so that resources/scripts can be edited both in the
     7        Resources and the Scripts panels. The button is grayed out if the resource/script is not editable.
     8
     9        Reviewed by Yury Semikhatsky.
     10
     11        * inspector/front-end/Images/statusbarButtonGlyphs.png:
     12        * inspector/front-end/ResourceView.js:
     13        (WebInspector.EditableResourceSourceFrame.prototype.canEditSource):
     14        * inspector/front-end/ScriptsPanel.js:
     15        (WebInspector.ScriptsPanel.prototype.get statusBarItems):
     16        (WebInspector.ScriptsPanel.prototype.set visibleView):
     17        * inspector/front-end/SourceFrame.js:
     18        (WebInspector.SourceFrame):
     19        (WebInspector.SourceFrame.prototype.get statusBarItems):
     20        (WebInspector.SourceFrame.prototype._initializeTextViewer):
     21        (WebInspector.SourceFrame.prototype._editButtonClicked):
     22        (WebInspector.SourceFrame.prototype.canEditSource):
     23        (WebInspector.SourceFrame.prototype.startEditing):
     24        (WebInspector.SourceFrame.prototype.commitEditing):
     25        (WebInspector.SourceFrame.prototype._setReadOnly):
     26        (WebInspector.TextViewerDelegateForSourceFrame.prototype.doubleClick):
     27        * inspector/front-end/TextViewer.js:
     28        (WebInspector.TextEditorMainPanel.prototype.set readOnly):
     29        (WebInspector.TextEditorMainPanel.prototype._updateSelectionOnStartEditing):
     30        * inspector/front-end/inspector.css:
     31        (button.edit-source-status-bar-item .glyph):
     32        (button.edit-source-status-bar-item.toggled-on .glyph):
     33
    1342011-09-09  Shinya Kawanaka  <shinyak@google.com>
    235

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

    r94754 r94842  
    120120
    121121WebInspector.EditableResourceSourceFrame.prototype = {
    122     doubleClick: function(lineNumber)
     122    canEditSource: function()
    123123    {
    124         if (!this.resource.isEditable())
    125             return;
    126 
    127         if (this._commitEditingInProgress)
    128             return;
    129 
    130         this._textViewer.readOnly = false;
    131         WebInspector.markBeingEdited(this._textViewer.element, true);
     124        return this.resource.isEditable() && !this._commitEditingInProgress;
    132125    },
    133126

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

    r94760 r94842  
    152152    this._toggleFormatSourceButton.addEventListener("click", this._toggleFormatSource.bind(this), false);
    153153
     154    this._scriptViewStatusBarItemsContainer = document.createElement("div");
     155    this._scriptViewStatusBarItemsContainer.style.display = "inline-block";
     156
    154157    this._debuggerEnabled = Preferences.debuggerAlwaysEnabled;
    155158
    … …  
    197200    get statusBarItems()
    198201    {
    199         return [this.enableToggleButton.element, this._pauseOnExceptionButton.element, this._toggleFormatSourceButton.element];
     202        return [this.enableToggleButton.element, this._pauseOnExceptionButton.element, this._toggleFormatSourceButton.element, this._scriptViewStatusBarItemsContainer];
    200203    },
    201204
    … …  
    591594        this._visibleView = x;
    592595
    593         if (x)
     596        if (x) {
    594597            x.show(this.viewsContainerElement);
     598            this._scriptViewStatusBarItemsContainer.removeChildren();
     599            var statusBarItems = x.statusBarItems || [];
     600            for (var i = 0; i < statusBarItems.length; ++i)
     601                this._scriptViewStatusBarItemsContainer.appendChild(statusBarItems[i]);
     602        }
    595603    },
    596604

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

    r94665 r94842  
    4444    this.element.appendChild(this._textViewer.element);
    4545
     46    this._editButton = new WebInspector.StatusBarButton(WebInspector.UIString("Edit"), "edit-source-status-bar-item");
     47    this._editButton.addEventListener("click", this._editButtonClicked.bind(this), this);
     48
    4649    this._currentSearchResultIndex = -1;
    4750    this._searchResults = [];
    … …  
    9598            this._popoverHelper.hidePopover();
    9699        this._clearLineHighlight();
     100    },
     101
     102    get statusBarItems()
     103    {
     104        return [this._editButton.element];
    97105    },
    98106
    … …  
    308316
    309317        this._textViewer.endUpdates();
     318
     319        if (!this.canEditSource())
     320            this._editButton.disabled = true;
    310321    },
    311322
    … …  
    817828    },
    818829
    819     doubleClick: function(lineNumber)
    820     {
    821         if (!this._delegate.canEditScriptSource())
    822             return;
     830    _editButtonClicked: function()
     831    {
     832        if (!this.canEditSource())
     833            return;
     834
     835        const shouldStartEditing = !this._editButton.toggled;
     836        if (shouldStartEditing)
     837            this.startEditing();
     838        else
     839            this.commitEditing();
     840    },
     841
     842    canEditSource: function()
     843    {
     844        return this._delegate.canEditScriptSource();
     845    },
     846
     847    startEditing: function(lineNumber)
     848    {
     849        if (!this.canEditSource())
     850            return false;
    823851
    824852        if (this._commitEditingInProgress)
    825             return;
     853            return false;
    826854
    827855        this._setReadOnly(false);
     856        return true;
    828857    },
    829858
    … …  
    868897        this._commitEditingInProgress = true;
    869898        this._textViewer.readOnly = true;
     899        this._editButton.toggled = false;
    870900        this.editContent(this._textModel.text, didEditContent.bind(this));
    871901    },
    … …  
    888918
    889919        this._textViewer.readOnly = readOnly;
     920        this._editButton.toggled = !readOnly;
    890921        WebInspector.markBeingEdited(this._textViewer.element, !readOnly);
    891922        if (readOnly)
    … …  
    905936    doubleClick: function(lineNumber)
    906937    {
    907         this._sourceFrame.doubleClick(lineNumber);
     938        this._sourceFrame.startEditing(lineNumber);
    908939    },
    909940

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

    r94749 r94842  
    906906        if (this._readOnly)
    907907            this._container.removeStyleClass("text-editor-editable");
    908         else
     908        else {
    909909            this._container.addStyleClass("text-editor-editable");
     910            this._updateSelectionOnStartEditing();
     911        }
    910912        this.endDomUpdates();
    911913    },
    … …  
    914916    {
    915917        return this._readOnly;
     918    },
     919
     920    _updateSelectionOnStartEditing: function()
     921    {
     922        // focust() needs to go first for the case when the last selection was inside the editor and
     923        // the "Edit" button was clicked. In this case we bail at the check below, but the
     924        // editor does not receive the focus, thus "Esc" does not cancel editing until at least
     925        // one change has been made to the editor contents.
     926        this._container.focus();
     927        var selection = window.getSelection();
     928        if (selection.rangeCount && this._container.isAncestor(selection.getRangeAt(0).commonAncestorContainer))
     929            return;
     930
     931        selection.removeAllRanges();
     932        var range = document.createRange();
     933        range.setStart(this._container, 0);
     934        range.setEnd(this._container, 0);
     935        selection.addRange(range);
    916936    },
    917937

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

    r94754 r94842  
    23782378}
    23792379
     2380button.edit-source-status-bar-item .glyph {
     2381    -webkit-mask-position: -64px -48px;
     2382}
     2383
     2384button.edit-source-status-bar-item.toggled-on .glyph {
     2385    background-color: rgb(66, 129, 235);
     2386}
     2387
    23802388.scripts-pause-on-exceptions-status-bar-item .glyph {
    23812389    -webkit-mask-position: -256px 0;
Note: See TracChangeset for help on using the changeset viewer.