Diff
Modified: trunk/Source/WebCore/ChangeLog (125598 => 125599)
--- trunk/Source/WebCore/ChangeLog 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/ChangeLog 2012-08-14 20:47:37 UTC (rev 125599)
@@ -1,3 +1,63 @@
+2012-08-14 Jan Keromnes <j...@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/_javascript_SourceFrame.js:
+ (WebInspector._javascript_SourceFrame):
+ (WebInspector._javascript_SourceFrame.prototype._addBreakpointDecoration):
+ (WebInspector._javascript_SourceFrame.prototype._removeBreakpointDecoration):
+ (WebInspector._javascript_SourceFrame.prototype.setExecutionLine):
+ (WebInspector._javascript_SourceFrame.prototype.clearExecutionLine):
+ (WebInspector._javascript_SourceFrame.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 <e...@google.com>
REGRESSION (r109851): Video controls do not render
Modified: trunk/Source/WebCore/inspector/front-end/CodeMirrorTextEditor.js (125598 => 125599)
--- trunk/Source/WebCore/inspector/front-end/CodeMirrorTextEditor.js 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/inspector/front-end/CodeMirrorTextEditor.js 2012-08-14 20:47:37 UTC (rev 125599)
@@ -49,6 +49,7 @@
lineNumbers: true,
fixedGutter: true,
onChange: this._onChange.bind(this),
+ onGutterClick: this._onGutterClick.bind(this)
});
this._lastRange = this.range();
@@ -114,23 +115,65 @@
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
+ },
+
+ /**
* @param {WebInspector.TextRange} range
*/
markAndRevealRange: function(range)
@@ -144,13 +187,21 @@
*/
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 @@
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 @@
var xhr = new XMLHttpRequest();
xhr.open("GET", file, false);
xhr.send(null);
- console.log(xhr.responseText);
window.eval(xhr.responseText);
}
Modified: trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js (125598 => 125599)
--- trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js 2012-08-14 20:47:37 UTC (rev 125599)
@@ -61,6 +61,8 @@
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,27 +137,86 @@
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._mainPanel.removeDecoration(lineNumber, decoration);
- this._gutterPanel.removeDecoration(lineNumber, decoration);
+ 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, element);
+ this._gutterPanel.removeDecoration(lineNumber, element);
+ },
+
+ /**
* @param {WebInspector.TextRange} range
*/
markAndRevealRange: function(range)
Modified: trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js (125598 => 125599)
--- trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js 2012-08-14 20:47:37 UTC (rev 125599)
@@ -49,9 +49,10 @@
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,17 +338,8 @@
};
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)
@@ -355,29 +347,9 @@
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();
+ this.textEditor.removeBreakpoint(lineNumber);
},
- _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();
- },
-
_onKeyDown: function(event)
{
if (event.keyIdentifier === "U+001B") { // Escape key
@@ -442,7 +414,7 @@
{
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 @@
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 @@
},
/**
+ * @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
*/
Modified: trunk/Source/WebCore/inspector/front-end/TextEditor.js (125598 => 125599)
--- trunk/Source/WebCore/inspector/front-end/TextEditor.js 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/inspector/front-end/TextEditor.js 2012-08-14 20:47:37 UTC (rev 125599)
@@ -34,6 +34,10 @@
*/
WebInspector.TextEditor = function() { };
+WebInspector.TextEditor.Events = {
+ GutterClick: "gutterClick"
+};
+
WebInspector.TextEditor.prototype = {
/**
@@ -63,17 +67,36 @@
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
+ * @param {boolean} disabled
+ * @param {boolean} conditional
*/
- addDecoration: function(lineNumber, decoration) { },
+ addBreakpoint: function(lineNumber, disabled, conditional) { },
/**
* @param {number} lineNumber
- * @param {string|Element} decoration
*/
- removeDecoration: function(lineNumber, decoration) { },
+ removeBreakpoint: function(lineNumber) { },
/**
+ * @param {number} lineNumber
+ */
+ setExecutionLine: function(lineNumber) { },
+
+ clearExecutionLine: function() { },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ addDecoration: function(lineNumber, element) { },
+
+ /**
+ * @param {number} lineNumber
+ * @param {Element} element
+ */
+ removeDecoration: function(lineNumber, element) { },
+
+ /**
* @param {WebInspector.TextRange} range
*/
markAndRevealRange: function(range) { },
Modified: trunk/Source/WebCore/inspector/front-end/cmdevtools.css (125598 => 125599)
--- trunk/Source/WebCore/inspector/front-end/cmdevtools.css 2012-08-14 20:45:10 UTC (rev 125598)
+++ trunk/Source/WebCore/inspector/front-end/cmdevtools.css 2012-08-14 20:47:37 UTC (rev 125599)
@@ -1,3 +1,6 @@
+.CodeMirror {
+ line-height: 1.2em !important;
+}
.CodeMirror-scroll {
height: 100% !important;
}
@@ -2,5 +5,26 @@
-.CodeMirror {
- line-height: 1.2em !important;
+.cm-highlight {
+ -webkit-animation: "fadeout" 2s 0s;
}
+@-webkit-keyframes fadeout {
+ from {background-color: rgb(255, 255, 120); }
+ to { background-color: white; }
+}
+.cm-breakpoint {
+ color: white !important;
+ margin-right: -8px !important;
+ margin-left: -6px !important;
+ border-width: 0 8px 0px 2px !important;
+ -webkit-border-image: url(Images/breakpointBorder.png) 1 14 1 2;
+}
+.cm-breakpoint-disabled {
+ opacity: 0.5;
+}
+.cm-breakpoint-conditional {
+ -webkit-border-image: url(Images/breakpointConditionalBorder.png) 1 14 1 2;
+}
+.cm-execution-line {
+ background-color: rgb(171, 191, 254) !important;
+ outline: 1px solid rgb(64, 115, 244);
+}
@@ -26,3 +50,34 @@
.cm-s-web-inspector-html span.cm-tag {color: rgb(136, 18, 128);}
.cm-s-web-inspector-html span.cm-attribute {color: rgb(153, 69, 0);}
.cm-s-web-inspector-html span.cm-link {color: #00e;}
+
+.webkit-html-message-bubble {
+ -webkit-box-shadow: black 0px 2px 5px;
+ -webkit-border-radius: 9px;
+ -webkit-border-fit: lines;
+ font-size: 10px;
+ font-family: Lucida Grande, sans-serif;
+ font-weight: bold;
+ margin: 0px 10px;
+ padding: 0 7px 1px;
+ z-index: 5;
+}
+.webkit-html-warning-message {
+ background-color: rgb(100%, 62%, 42%);
+ border: 2px solid rgb(100%, 52%, 21%);
+}
+.webkit-html-error-message {
+ background-color: rgb(100%, 42%, 42%);
+ border: 2px solid rgb(100%, 31%, 31%);
+}
+.webkit-html-message-line {
+ padding-left: 23px;
+ text-indent: -20px;
+}
+.webkit-html-message-line-hover {
+ padding-left: 23px;
+ text-indent: -20px;
+ white-space: auto;
+ text-overflow: auto;
+ overflow: auto;
+}
