Commit 05aabbec authored by apavlov@chromium.org's avatar apavlov@chromium.org

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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@94842 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent e7d6fb2a
2011-09-08 Alexander Pavlov <apavlov@chromium.org>
Web Inspector: live edit both for JS and CSS is not discoverable.
https://bugs.webkit.org/show_bug.cgi?id=65962
Reviewed by Yury Semikhatsky.
* inspector/debugger/scripts-panel.html:
2011-09-09 Shinya Kawanaka <shinyak@google.com>
Crashes in WebCore::AppendNodeCommand::create().
......@@ -11,6 +11,7 @@ function test()
var model = new WebInspector.Object();
model.breakpointsForUISourceCode = function() { return []; };
model.messagesForUISourceCode = function() { return []; };
model.canEditScriptSource = function() { return true; };
return model;
}
function addUISouceCode(model, url)
......
2011-09-08 Alexander Pavlov <apavlov@chromium.org>
Web Inspector: live edit both for JS and CSS is not discoverable.
https://bugs.webkit.org/show_bug.cgi?id=65962
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):
2011-09-09 Shinya Kawanaka <shinyak@google.com>
Crashes in WebCore::AppendNodeCommand::create().
......@@ -119,16 +119,9 @@ WebInspector.EditableResourceSourceFrame = function(resource)
}
WebInspector.EditableResourceSourceFrame.prototype = {
doubleClick: function(lineNumber)
canEditSource: function()
{
if (!this.resource.isEditable())
return;
if (this._commitEditingInProgress)
return;
this._textViewer.readOnly = false;
WebInspector.markBeingEdited(this._textViewer.element, true);
return this.resource.isEditable() && !this._commitEditingInProgress;
},
editContent: function(newText, callback)
......
......@@ -151,6 +151,9 @@ WebInspector.ScriptsPanel = function(presentationModel)
this._toggleFormatSourceButton.toggled = false;
this._toggleFormatSourceButton.addEventListener("click", this._toggleFormatSource.bind(this), false);
this._scriptViewStatusBarItemsContainer = document.createElement("div");
this._scriptViewStatusBarItemsContainer.style.display = "inline-block";
this._debuggerEnabled = Preferences.debuggerAlwaysEnabled;
this.reset();
......@@ -196,7 +199,7 @@ WebInspector.ScriptsPanel.prototype = {
get statusBarItems()
{
return [this.enableToggleButton.element, this._pauseOnExceptionButton.element, this._toggleFormatSourceButton.element];
return [this.enableToggleButton.element, this._pauseOnExceptionButton.element, this._toggleFormatSourceButton.element, this._scriptViewStatusBarItemsContainer];
},
get defaultFocusedElement()
......@@ -590,8 +593,13 @@ WebInspector.ScriptsPanel.prototype = {
this._visibleView = x;
if (x)
if (x) {
x.show(this.viewsContainerElement);
this._scriptViewStatusBarItemsContainer.removeChildren();
var statusBarItems = x.statusBarItems || [];
for (var i = 0; i < statusBarItems.length; ++i)
this._scriptViewStatusBarItemsContainer.appendChild(statusBarItems[i]);
}
},
canShowAnchorLocation: function(anchor)
......
......@@ -43,6 +43,9 @@ WebInspector.SourceFrame = function(delegate, url)
this.addChildView(this._textViewer);
this.element.appendChild(this._textViewer.element);
this._editButton = new WebInspector.StatusBarButton(WebInspector.UIString("Edit"), "edit-source-status-bar-item");
this._editButton.addEventListener("click", this._editButtonClicked.bind(this), this);
this._currentSearchResultIndex = -1;
this._searchResults = [];
......@@ -96,6 +99,11 @@ WebInspector.SourceFrame.prototype = {
this._clearLineHighlight();
},
get statusBarItems()
{
return [this._editButton.element];
},
get loaded()
{
return !!this._content;
......@@ -307,6 +315,9 @@ WebInspector.SourceFrame.prototype = {
this.dispatchEventToListeners(WebInspector.SourceFrame.Events.Loaded);
this._textViewer.endUpdates();
if (!this.canEditSource())
this._editButton.disabled = true;
},
_setTextViewerDecorations: function()
......@@ -816,15 +827,33 @@ WebInspector.SourceFrame.prototype = {
this._textViewer.inheritScrollPositions(sourceFrame._textViewer);
},
doubleClick: function(lineNumber)
_editButtonClicked: function()
{
if (!this._delegate.canEditScriptSource())
if (!this.canEditSource())
return;
const shouldStartEditing = !this._editButton.toggled;
if (shouldStartEditing)
this.startEditing();
else
this.commitEditing();
},
canEditSource: function()
{
return this._delegate.canEditScriptSource();
},
startEditing: function(lineNumber)
{
if (!this.canEditSource())
return false;
if (this._commitEditingInProgress)
return;
return false;
this._setReadOnly(false);
return true;
},
commitEditing: function()
......@@ -867,6 +896,7 @@ WebInspector.SourceFrame.prototype = {
}
this._commitEditingInProgress = true;
this._textViewer.readOnly = true;
this._editButton.toggled = false;
this.editContent(this._textModel.text, didEditContent.bind(this));
},
......@@ -887,6 +917,7 @@ WebInspector.SourceFrame.prototype = {
this._popoverHelper.hidePopover();
this._textViewer.readOnly = readOnly;
this._editButton.toggled = !readOnly;
WebInspector.markBeingEdited(this._textViewer.element, !readOnly);
if (readOnly)
this._delegate.setScriptSourceIsBeingEdited(false);
......@@ -904,7 +935,7 @@ WebInspector.TextViewerDelegateForSourceFrame = function(sourceFrame)
WebInspector.TextViewerDelegateForSourceFrame.prototype = {
doubleClick: function(lineNumber)
{
this._sourceFrame.doubleClick(lineNumber);
this._sourceFrame.startEditing(lineNumber);
},
beforeTextChanged: function()
......
......@@ -905,8 +905,10 @@ WebInspector.TextEditorMainPanel.prototype = {
this._readOnly = readOnly;
if (this._readOnly)
this._container.removeStyleClass("text-editor-editable");
else
else {
this._container.addStyleClass("text-editor-editable");
this._updateSelectionOnStartEditing();
}
this.endDomUpdates();
},
......@@ -915,6 +917,24 @@ WebInspector.TextEditorMainPanel.prototype = {
return this._readOnly;
},
_updateSelectionOnStartEditing: function()
{
// focust() needs to go first for the case when the last selection was inside the editor and
// the "Edit" button was clicked. In this case we bail at the check below, but the
// editor does not receive the focus, thus "Esc" does not cancel editing until at least
// one change has been made to the editor contents.
this._container.focus();
var selection = window.getSelection();
if (selection.rangeCount && this._container.isAncestor(selection.getRangeAt(0).commonAncestorContainer))
return;
selection.removeAllRanges();
var range = document.createRange();
range.setStart(this._container, 0);
range.setEnd(this._container, 0);
selection.addRange(range);
},
setEditableRange: function(startLine, endLine)
{
this.beginDomUpdates();
......
......@@ -2377,6 +2377,14 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
-webkit-mask-position: -96px -24px;
}
button.edit-source-status-bar-item .glyph {
-webkit-mask-position: -64px -48px;
}
button.edit-source-status-bar-item.toggled-on .glyph {
background-color: rgb(66, 129, 235);
}
.scripts-pause-on-exceptions-status-bar-item .glyph {
-webkit-mask-position: -256px 0;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment