Permalink
Browse files

Web Inspector: Render breakpoint gutter markers and execution line in…

… CodeMirrorTextEditor


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

Patch by Jan Keromnes <janx@linux.com> on 2012-08-14
Reviewed by Pavel Feldman.

Divided TextEditor.addDecoration into addBreakpoint, setExecutionLine
and addDecoration. Same for removeDecoration. Render breakpoint
markers and execution line in CodeMirrorTextEditor.

* inspector/front-end/CodeMirrorTextEditor.js:
(WebInspector.CodeMirrorTextEditor):
(WebInspector.CodeMirrorTextEditor.prototype._onGutterClick):
(WebInspector.CodeMirrorTextEditor.prototype.addBreakpoint):
(WebInspector.CodeMirrorTextEditor.prototype.removeBreakpoint):
(WebInspector.CodeMirrorTextEditor.prototype.setExecutionLine):
(WebInspector.CodeMirrorTextEditor.prototype.clearExecutionLine):
(WebInspector.CodeMirrorTextEditor.prototype.addDecoration):
(WebInspector.CodeMirrorTextEditor.prototype.removeDecoration):
(WebInspector.CodeMirrorTextEditor.prototype.highlightLine):
(WebInspector.CodeMirrorTextEditor.prototype.clearLineHighlight):
(WebInspector.CodeMirrorTextEditor.prototype.removeAttribute):
* inspector/front-end/DefaultTextEditor.js:
(WebInspector.DefaultTextEditor.prototype._onMouseDown):
(WebInspector.DefaultTextEditor.prototype.addBreakpoint):
(WebInspector.DefaultTextEditor.prototype.removeBreakpoint):
(WebInspector.DefaultTextEditor.prototype.setExecutionLine):
(WebInspector.DefaultTextEditor.prototype.clearExecutionLine):
(WebInspector.DefaultTextEditor.prototype.addDecoration):
(WebInspector.DefaultTextEditor.prototype.removeDecoration):
* inspector/front-end/JavaScriptSourceFrame.js:
(WebInspector.JavaScriptSourceFrame):
(WebInspector.JavaScriptSourceFrame.prototype._addBreakpointDecoration):
(WebInspector.JavaScriptSourceFrame.prototype._removeBreakpointDecoration):
(WebInspector.JavaScriptSourceFrame.prototype.setExecutionLine):
(WebInspector.JavaScriptSourceFrame.prototype.clearExecutionLine):
(WebInspector.JavaScriptSourceFrame.prototype._handleGutterClick):
* inspector/front-end/TextEditor.js:
(WebInspector.TextEditor.prototype.addBreakpoint):
(WebInspector.TextEditor.prototype.removeBreakpoint):
(WebInspector.TextEditor.prototype.setExecutionLine):
(WebInspector.TextEditor.prototype.clearExecutionLine):
(WebInspector.TextEditor.prototype.addDecoration):
(WebInspector.TextEditor.prototype.removeDecoration):
* inspector/front-end/cmdevtools.css:
(.CodeMirror):
(.cm-highlight):
(@-webkit-keyframes fadeout):
(to):
(.cm-breakpoint):
(.cm-breakpoint-disabled):
(.cm-breakpoint-conditional):
(.cm-execution-line):
(.webkit-html-message-bubble):
(.webkit-html-warning-message):
(.webkit-html-error-message):
(.webkit-html-message-line):
(.webkit-html-message-line-hover):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@125599 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information...
1 parent c7ebee6 commit f7f2f4745490e7ad19cbd34fb4549909402a2d3e commit-queue committed Aug 14, 2012
@@ -1,3 +1,63 @@
+2012-08-14 Jan Keromnes <janx@linux.com>
+
+ Web Inspector: Render breakpoint gutter markers and execution line in CodeMirrorTextEditor
+ https://bugs.webkit.org/show_bug.cgi?id=93686
+
+ Reviewed by Pavel Feldman.
+
+ Divided TextEditor.addDecoration into addBreakpoint, setExecutionLine
+ and addDecoration. Same for removeDecoration. Render breakpoint
+ markers and execution line in CodeMirrorTextEditor.
+
+ * inspector/front-end/CodeMirrorTextEditor.js:
+ (WebInspector.CodeMirrorTextEditor):
+ (WebInspector.CodeMirrorTextEditor.prototype._onGutterClick):
+ (WebInspector.CodeMirrorTextEditor.prototype.addBreakpoint):
+ (WebInspector.CodeMirrorTextEditor.prototype.removeBreakpoint):
+ (WebInspector.CodeMirrorTextEditor.prototype.setExecutionLine):
+ (WebInspector.CodeMirrorTextEditor.prototype.clearExecutionLine):
+ (WebInspector.CodeMirrorTextEditor.prototype.addDecoration):
+ (WebInspector.CodeMirrorTextEditor.prototype.removeDecoration):
+ (WebInspector.CodeMirrorTextEditor.prototype.highlightLine):
+ (WebInspector.CodeMirrorTextEditor.prototype.clearLineHighlight):
+ (WebInspector.CodeMirrorTextEditor.prototype.removeAttribute):
+ * inspector/front-end/DefaultTextEditor.js:
+ (WebInspector.DefaultTextEditor.prototype._onMouseDown):
+ (WebInspector.DefaultTextEditor.prototype.addBreakpoint):
+ (WebInspector.DefaultTextEditor.prototype.removeBreakpoint):
+ (WebInspector.DefaultTextEditor.prototype.setExecutionLine):
+ (WebInspector.DefaultTextEditor.prototype.clearExecutionLine):
+ (WebInspector.DefaultTextEditor.prototype.addDecoration):
+ (WebInspector.DefaultTextEditor.prototype.removeDecoration):
+ * inspector/front-end/JavaScriptSourceFrame.js:
+ (WebInspector.JavaScriptSourceFrame):
+ (WebInspector.JavaScriptSourceFrame.prototype._addBreakpointDecoration):
+ (WebInspector.JavaScriptSourceFrame.prototype._removeBreakpointDecoration):
+ (WebInspector.JavaScriptSourceFrame.prototype.setExecutionLine):
+ (WebInspector.JavaScriptSourceFrame.prototype.clearExecutionLine):
+ (WebInspector.JavaScriptSourceFrame.prototype._handleGutterClick):
+ * inspector/front-end/TextEditor.js:
+ (WebInspector.TextEditor.prototype.addBreakpoint):
+ (WebInspector.TextEditor.prototype.removeBreakpoint):
+ (WebInspector.TextEditor.prototype.setExecutionLine):
+ (WebInspector.TextEditor.prototype.clearExecutionLine):
+ (WebInspector.TextEditor.prototype.addDecoration):
+ (WebInspector.TextEditor.prototype.removeDecoration):
+ * inspector/front-end/cmdevtools.css:
+ (.CodeMirror):
+ (.cm-highlight):
+ (@-webkit-keyframes fadeout):
+ (to):
+ (.cm-breakpoint):
+ (.cm-breakpoint-disabled):
+ (.cm-breakpoint-conditional):
+ (.cm-execution-line):
+ (.webkit-html-message-bubble):
+ (.webkit-html-warning-message):
+ (.webkit-html-error-message):
+ (.webkit-html-message-line):
+ (.webkit-html-message-line-hover):
+
2012-08-13 Adrienne Walker <enne@google.com>
REGRESSION (r109851): Video controls do not render
@@ -49,6 +49,7 @@ WebInspector.CodeMirrorTextEditor = function(url, delegate)
lineNumbers: true,
fixedGutter: true,
onChange: this._onChange.bind(this),
+ onGutterClick: this._onGutterClick.bind(this)
});
this._lastRange = this.range();
@@ -114,20 +115,62 @@ WebInspector.CodeMirrorTextEditor.prototype = {
this._codeMirror.scrollTo(coords.x, coords.y);
},
+ _onGutterClick: function(instance, lineNumber, event)
+ {
+ this.dispatchEventToListeners(WebInspector.TextEditor.Events.GutterClick, { lineNumber: lineNumber, event: event });
+ },
+
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
+ * @param {boolean} disabled
+ * @param {boolean} conditional
*/
- addDecoration: function(lineNumber, decoration)
+ addBreakpoint: function(lineNumber, disabled, conditional)
{
+ var className = "cm-breakpoint" + (disabled ? " cm-breakpoint-disabled" : "") + (conditional ? " cm-breakpoint-conditional" : "");
+ this._codeMirror.setMarker(lineNumber, null, className);
},
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
*/
- removeDecoration: function(lineNumber, decoration)
+ removeBreakpoint: function(lineNumber)
{
+ this._codeMirror.clearMarker(lineNumber);
+ },
+
+ /**
+ * @param {number} lineNumber
+ */
+ setExecutionLine: function(lineNumber)
+ {
+ this._executionLine = this._codeMirror.getLineHandle(lineNumber)
+ this._codeMirror.setLineClass(this._executionLine, null, "cm-execution-line");
+ },
+
+ clearExecutionLine: function()
+ {
+ if (typeof this._executionLine == "number")
+ this._codeMirror.setLineClass(this._executionLine, null, null);
+ delete this._executionLine;
+ },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ addDecoration: function(lineNumber, element)
+ {
+ // TODO implement so that it doesn't hide context code
+ },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ removeDecoration: function(lineNumber, element)
+ {
+ // TODO implement so that it doesn't hide context code
},
/**
@@ -144,13 +187,21 @@ WebInspector.CodeMirrorTextEditor.prototype = {
*/
highlightLine: function(lineNumber)
{
- var line = this._codeMirror.getLine(lineNumber);
- var mark = this._codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: line.length }, "CodeMirror-searching");
- setTimeout(mark.clear.bind(mark), 1000);
+ this.clearLineHighlight();
+ this._codeMirror.setLineClass(lineNumber, null, "cm-highlight");
+ this._highlightedLine = lineNumber;
+ this._clearHighlightTimeout = setTimeout(this.clearLineHighlight.bind(this), 2000);
},
clearLineHighlight: function()
{
+ if (this._clearHighlightTimeout)
+ clearTimeout(this._clearHighlightTimeout);
+ delete this._clearHighlightTimeout;
+
+ if (typeof this._highlightedLine == "number")
+ this._codeMirror.setLineClass(this._highlightedLine, null, null);
+ delete this._highlightedLine;
},
/**
@@ -307,7 +358,7 @@ WebInspector.CodeMirrorTextEditor.prototype = {
removeAttribute: function(line, name)
{
var handle = this._codeMirror.getLineHandle(line);
- if (handle.attributes)
+ if (handle && handle.attributes)
delete handle.attributes[name];
},
@@ -334,7 +385,6 @@ WebInspector.CodeMirrorTextEditor.prototype = {
var xhr = new XMLHttpRequest();
xhr.open("GET", file, false);
xhr.send(null);
- console.log(xhr.responseText);
window.eval(xhr.responseText);
}
@@ -61,6 +61,8 @@ WebInspector.DefaultTextEditor = function(url, delegate)
this._mainPanel.element.addEventListener("scroll", this._handleScrollChanged.bind(this), false);
this._mainPanel._container.addEventListener("focus", this._handleFocused.bind(this), false);
+ this._gutterPanel.element.addEventListener("mousedown", this._onMouseDown.bind(this), true);
+
this.element.appendChild(this._mainPanel.element);
this.element.appendChild(this._gutterPanel.element);
@@ -135,24 +137,83 @@ WebInspector.DefaultTextEditor.prototype = {
this._mainPanel.revealLine(lineNumber);
},
+ _onMouseDown: function(event)
+ {
+ var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
+ if (!target)
+ return;
+ this.dispatchEventToListeners(WebInspector.TextEditor.Events.GutterClick, { lineNumber: target.lineNumber, event: event });
+ },
+
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
+ * @param {boolean} disabled
+ * @param {boolean} conditional
*/
- addDecoration: function(lineNumber, decoration)
+ addBreakpoint: function(lineNumber, disabled, conditional)
{
- this._mainPanel.addDecoration(lineNumber, decoration);
- this._gutterPanel.addDecoration(lineNumber, decoration);
+ this.beginUpdates();
+ this._gutterPanel.addDecoration(lineNumber, "webkit-breakpoint");
+ if (disabled)
+ this._gutterPanel.addDecoration(lineNumber, "webkit-breakpoint-disabled");
+ else
+ this._gutterPanel.removeDecoration(lineNumber, "webkit-breakpoint-disabled");
+ if (conditional)
+ this._gutterPanel.addDecoration(lineNumber, "webkit-breakpoint-conditional");
+ else
+ this._gutterPanel.removeDecoration(lineNumber, "webkit-breakpoint-conditional");
+ this.endUpdates();
},
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
*/
- removeDecoration: function(lineNumber, decoration)
+ removeBreakpoint: function(lineNumber)
+ {
+ this.beginUpdates();
+ this._gutterPanel.removeDecoration(lineNumber, "webkit-breakpoint");
+ this._gutterPanel.removeDecoration(lineNumber, "webkit-breakpoint-disabled");
+ this._gutterPanel.removeDecoration(lineNumber, "webkit-breakpoint-conditional");
+ this.endUpdates();
+ },
+
+ /**
+ * @param {number} lineNumber
+ */
+ setExecutionLine: function(lineNumber)
+ {
+ this._executionLineNumber = lineNumber;
+ this._mainPanel.addDecoration(lineNumber, "webkit-execution-line");
+ this._gutterPanel.addDecoration(lineNumber, "webkit-execution-line");
+ },
+
+ clearExecutionLine: function()
+ {
+ if (typeof this._executionLineNumber === "number") {
+ this._mainPanel.removeDecoration(this._executionLineNumber, "webkit-execution-line");
+ this._gutterPanel.removeDecoration(this._executionLineNumber, "webkit-execution-line");
+ }
+ delete this._executionLineNumber;
+ },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ addDecoration: function(lineNumber, element)
+ {
+ this._mainPanel.addDecoration(lineNumber, element);
+ this._gutterPanel.addDecoration(lineNumber, element);
+ },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ removeDecoration: function(lineNumber, element)
{
- this._mainPanel.removeDecoration(lineNumber, decoration);
- this._gutterPanel.removeDecoration(lineNumber, decoration);
+ this._mainPanel.removeDecoration(lineNumber, element);
+ this._gutterPanel.removeDecoration(lineNumber, element);
},
/**
@@ -49,9 +49,10 @@ WebInspector.JavaScriptSourceFrame = function(scriptsPanel, javaScriptSource)
this._popoverHelper = new WebInspector.ObjectPopoverHelper(this.textEditor.element,
this._getPopoverAnchor.bind(this), this._resolveObjectForPopover.bind(this), this._onHidePopover.bind(this), true);
- this.textEditor.element.addEventListener("mousedown", this._onMouseDown.bind(this), true);
this.textEditor.element.addEventListener("keydown", this._onKeyDown.bind(this), true);
+ this.textEditor.addEventListener(WebInspector.TextEditor.Events.GutterClick, this._handleGutterClick.bind(this), this);
+
this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointAdded, this._breakpointAdded, this);
this._breakpointManager.addEventListener(WebInspector.BreakpointManager.Events.BreakpointRemoved, this._breakpointRemoved, this);
@@ -337,45 +338,16 @@ WebInspector.JavaScriptSourceFrame.prototype = {
};
this.textEditor.setAttribute(lineNumber, "breakpoint", breakpoint);
- this.textEditor.beginUpdates();
- this.textEditor.addDecoration(lineNumber, "webkit-breakpoint");
- if (!enabled || mutedWhileEditing)
- this.textEditor.addDecoration(lineNumber, "webkit-breakpoint-disabled");
- else
- this.textEditor.removeDecoration(lineNumber, "webkit-breakpoint-disabled");
- if (!!condition)
- this.textEditor.addDecoration(lineNumber, "webkit-breakpoint-conditional");
- else
- this.textEditor.removeDecoration(lineNumber, "webkit-breakpoint-conditional");
- this.textEditor.endUpdates();
+ var disabled = !enabled || (mutedWhileEditing && !this._javaScriptSource.supportsEnabledBreakpointsWhileEditing());
+ this.textEditor.addBreakpoint(lineNumber, disabled, !!condition);
},
_removeBreakpointDecoration: function(lineNumber)
{
if (this._preserveDecorations)
return;
this.textEditor.removeAttribute(lineNumber, "breakpoint");
- this.textEditor.beginUpdates();
- this.textEditor.removeDecoration(lineNumber, "webkit-breakpoint");
- this.textEditor.removeDecoration(lineNumber, "webkit-breakpoint-disabled");
- this.textEditor.removeDecoration(lineNumber, "webkit-breakpoint-conditional");
- this.textEditor.endUpdates();
- },
-
- _onMouseDown: function(event)
- {
- if (this._javaScriptSource.isDirty() && !this._javaScriptSource.supportsEnabledBreakpointsWhileEditing())
- return;
-
- if (event.button != 0 || event.altKey || event.ctrlKey || event.metaKey)
- return;
- var target = event.target.enclosingNodeOrSelfWithClass("webkit-line-number");
- if (!target)
- return;
- var lineNumber = target.lineNumber;
-
- this._toggleBreakpoint(lineNumber, event.shiftKey);
- event.preventDefault();
+ this.textEditor.removeBreakpoint(lineNumber);
},
_onKeyDown: function(event)
@@ -442,7 +414,7 @@ WebInspector.JavaScriptSourceFrame.prototype = {
{
this._executionLineNumber = lineNumber;
if (this.loaded) {
- this.textEditor.addDecoration(lineNumber, "webkit-execution-line");
+ this.textEditor.setExecutionLine(lineNumber);
this.revealLine(this._executionLineNumber);
if (this.canEditSource())
this.setSelection(WebInspector.TextRange.createFromLocation(lineNumber, 0));
@@ -452,7 +424,7 @@ WebInspector.JavaScriptSourceFrame.prototype = {
clearExecutionLine: function()
{
if (this.loaded && typeof this._executionLineNumber === "number")
- this.textEditor.removeDecoration(this._executionLineNumber, "webkit-execution-line");
+ this.textEditor.clearExecutionLine();
delete this._executionLineNumber;
},
@@ -539,6 +511,24 @@ WebInspector.JavaScriptSourceFrame.prototype = {
},
/**
+ * @param {Event} event
+ */
+ _handleGutterClick: function(event)
+ {
+ if (this._javaScriptSource.isDirty() && !this._javaScriptSource.supportsEnabledBreakpointsWhileEditing())
+ return;
+
+ var lineNumber = event.data.lineNumber;
+ var eventObject = /** @type {Event} */ event.data.event;
+
+ if (eventObject.button != 0 || eventObject.altKey || eventObject.ctrlKey || eventObject.metaKey)
+ return;
+
+ this._toggleBreakpoint(lineNumber, eventObject.shiftKey);
+ eventObject.consume(true);
+ },
+
+ /**
* @param {number} lineNumber
* @param {boolean} onlyDisable
*/
Oops, something went wrong. Retry.

0 comments on commit f7f2f47

Please sign in to comment.