Modified: trunk/Source/WebCore/ChangeLog (103683 => 103684)
--- trunk/Source/WebCore/ChangeLog 2011-12-26 14:30:26 UTC (rev 103683)
+++ trunk/Source/WebCore/ChangeLog 2011-12-26 14:59:42 UTC (rev 103684)
@@ -1,3 +1,27 @@
+2011-12-26 Alexander Pavlov <[email protected]>
+
+ Web Inspector: [Scripts] Implement iterative match highlighting in the "Go to Function" dialog item list
+ https://bugs.webkit.org/show_bug.cgi?id=75226
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/front-end/_javascript_OutlineDialog.js:
+ (WebInspector._javascript_OutlineDialog):
+ (WebInspector._javascript_OutlineDialog.prototype._createSearchRegExp):
+ (WebInspector._javascript_OutlineDialog.prototype._filterFunctions):
+ (WebInspector._javascript_OutlineDialog.prototype._onKeyDown.previousItem):
+ (WebInspector._javascript_OutlineDialog.prototype._onKeyDown.nextItem):
+ (WebInspector._javascript_OutlineDialog.prototype._onKeyDown):
+ (WebInspector._javascript_OutlineDialog.prototype._updateSelection):
+ (WebInspector._javascript_OutlineDialog.prototype._onScroll):
+ (WebInspector._javascript_OutlineDialog.MatchHighlighter):
+ (WebInspector._javascript_OutlineDialog.MatchHighlighter.prototype.highlightViewportItems):
+ (WebInspector._javascript_OutlineDialog.MatchHighlighter.prototype.clearHighlight):
+ (WebInspector._javascript_OutlineDialog.MatchHighlighter.prototype._highlightItem):
+ (WebInspector._javascript_OutlineDialog.MatchHighlighter.prototype._viewportRowRange):
+ * inspector/front-end/_javascript_OutlineDialog.css:
+ (.js-outline-dialog > .container > div.item > span.highlight):
+
2011-12-26 Vsevolod Vlasov <[email protected]>
Web Inspector: Extract FileSelector from ScriptsPanel.
Modified: trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.js (103683 => 103684)
--- trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.js 2011-12-26 14:30:26 UTC (rev 103683)
+++ trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.js 2011-12-26 14:59:42 UTC (rev 103684)
@@ -81,6 +81,7 @@
this._functionItemContainer = document.createElement("div");
this._functionItemContainer.className = "container monospace";
+ this._functionItemContainer.addEventListener("scroll", this._onScroll.bind(this), false);
this._panel = panel;
this._view = view;
@@ -91,6 +92,8 @@
this._previousFocusElement = WebInspector.currentFocusElement();
WebInspector.setCurrentFocusElement(this._promptElement);
this._promptElement.select();
+
+ this._highlighter = new WebInspector._javascript_OutlineDialog.MatchHighlighter(this);
}
/**
@@ -204,7 +207,6 @@
{
var trimmedQuery = query.trim();
var regExpString = trimmedQuery.escapeForRegExp().replace(/\\\*/g, ".*").replace(/(?!^)([A-Z])/g, "[^A-Z]*$1");
- console.log(regExpString);
var isSuffix = (query.charAt(query.length - 1) === " ");
if (isSuffix)
regExpString += "$";
@@ -226,9 +228,12 @@
this._visibleElements.push(element);
}
this._updateSelection(this._functionItemContainer.firstChild);
+ delete this._query;
+ this._highlighter.clearHighlight();
return;
}
+ this._query = query;
var regExp = this._createSearchRegExp(query);
var firstElement;
var newVisibleElements = [];
@@ -244,6 +249,7 @@
}
this._visibleElements = newVisibleElements;
this._updateSelection(firstElement);
+ this._highlighter.highlightViewportItems(query);
return;
}
@@ -259,6 +265,7 @@
}
this._visibleElements = newVisibleElements;
this._updateSelection(firstElement);
+ this._highlighter.highlightViewportItems(query);
},
_selectFirstItem: function()
@@ -302,16 +309,18 @@
{
var scrollItemsLeft = isPageScroll && this._rowsPerViewport ? this._rowsPerViewport : 1;
var candidate = itemElement;
+ var lastVisibleCandidate = candidate;
do {
candidate = candidate.previousSibling;
if (!candidate) {
if (isPageScroll)
- return this._functionItemContainer.firstChild;
+ return lastVisibleCandidate;
else
candidate = this._functionItemContainer.lastChild;
}
if (candidate.style.display === "none")
continue;
+ lastVisibleCandidate = candidate;
--scrollItemsLeft;
} while (scrollItemsLeft && candidate !== this._selectedElement);
@@ -322,16 +331,18 @@
{
var scrollItemsLeft = isPageScroll && this._rowsPerViewport ? this._rowsPerViewport : 1;
var candidate = itemElement;
+ var lastVisibleCandidate = candidate;
do {
candidate = candidate.nextSibling;
if (!candidate) {
if (isPageScroll)
- return this._functionItemContainer.lastChild;
+ return lastVisibleCandidate;
else
candidate = this._functionItemContainer.firstChild;
}
if (candidate.style.display === "none")
continue;
+ lastVisibleCandidate = candidate;
--scrollItemsLeft;
} while (scrollItemsLeft && candidate !== this._selectedElement);
@@ -396,8 +407,10 @@
if (newSelectedElement) {
newSelectedElement.addStyleClass("selected");
newSelectedElement.scrollIntoViewIfNeeded(false);
- if (!this._rowsPerViewport)
- this._rowsPerViewport = Math.floor(this._functionItemContainer.offsetHeight / newSelectedElement.offsetHeight);
+ if (!this._itemHeight) {
+ this._itemHeight = newSelectedElement.offsetHeight;
+ this._rowsPerViewport = Math.floor(this._functionItemContainer.offsetHeight / this._itemHeight);
+ }
}
},
@@ -419,6 +432,11 @@
this._updateSelection(itemElement);
},
+ _onScroll: function()
+ {
+ this._highlighter.highlightViewportItems(this._query);
+ },
+
_highlightFunctionLine: function()
{
var lineNumber = this._selectedElement._line;
@@ -426,3 +444,65 @@
this._view.highlightLine(lineNumber);
}
}
+
+/**
+* @constructor
+*/
+WebInspector._javascript_OutlineDialog.MatchHighlighter = function(dialog)
+{
+ this._dialog = dialog;
+}
+
+WebInspector._javascript_OutlineDialog.MatchHighlighter.prototype = {
+ highlightViewportItems: function(query)
+ {
+ var regex = this._dialog._createSearchRegExp(query, true);
+ var range = this._viewportRowRange();
+ var visibleElements = this._dialog._visibleElements;
+ for (var i = range[0]; i < range[1]; ++i)
+ this._highlightItem(visibleElements[i], regex);
+ },
+
+ clearHighlight: function()
+ {
+ var range = this._viewportRowRange();
+ var visibleElements = this._dialog._visibleElements;
+ for (var i = range[0]; i < range[1]; ++i) {
+ var element = visibleElements[i];
+ if (element._domChanges) {
+ revertDomChanges(element._domChanges);
+ delete element._domChanges;
+ }
+ }
+ },
+
+ _highlightItem: function(element, regex)
+ {
+ if (element._domChanges) {
+ revertDomChanges(element._domChanges);
+ delete element._domChanges;
+ }
+
+ var text = element._text;
+ var ranges = [];
+
+ var match;
+ while ((match = regex.exec(text)) !== null) {
+ ranges.push({ offset: match.index, length: regex.lastIndex - match.index });
+ }
+
+ var changes = [];
+ highlightRangesWithStyleClass(element, ranges, "highlight", changes);
+
+ if (changes.length)
+ element._domChanges = changes;
+ },
+
+ _viewportRowRange: function()
+ {
+ var dialog = this._dialog;
+ var startIndex = Math.floor(dialog._functionItemContainer.scrollTop / dialog._itemHeight);
+ var endIndex = Math.min(dialog._visibleElements.length, startIndex + dialog._rowsPerViewport + 1);
+ return [startIndex, endIndex];
+ }
+}
Modified: trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.css (103683 => 103684)
--- trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.css 2011-12-26 14:30:26 UTC (rev 103683)
+++ trunk/Source/WebCore/inspector/front-end/_javascript_OutlineDialog.css 2011-12-26 14:59:42 UTC (rev 103684)
@@ -53,3 +53,8 @@
.js-outline-dialog > .container > div.item.selected {
background-color: rgb(224, 224, 224);
}
+
+.js-outline-dialog > .container > div.item > span.highlight {
+ color: black;
+ font-weight: bold;
+}
