<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[192165] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/192165">192165</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-11-09 10:43:26 -0800 (Mon, 09 Nov 2015)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Convert DatabaseContentView to use View base class
https://bugs.webkit.org/show_bug.cgi?id=150959

Reviewed by Timothy Hatcher.

Update DatabaseContentView to inherit from View. This required that query results be
promoted to a first-class view object, and that ConsolePrompt's DOM element not be wrapped
inside a container element.

Two new query result view classes (and their base class) wrap up DOM element creation
which was being performed by DatabaseContentView.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Main.html:
New files.

* UserInterface/Views/ConsolePrompt.js:
(WebInspector.ConsolePrompt):
Removed unused parameter.

* UserInterface/Views/DatabaseContentView.css:
(.storage-view):
(.storage-view &gt; .console-prompt):
(.storage-view &gt; .console-prompt::before):
(:matches(.database-user-query, .database-query-result)::before):
(.database-query-result.no-results):
(.database-query-prompt): Deleted.
(:matches(.database-user-query, .database-query-prompt, .database-query-result)::before): Deleted.
(.database-query-prompt::before): Deleted.
Modified styles to create prompt without needing a wrapper element.

* UserInterface/Views/DatabaseContentView.js:
(WebInspector.DatabaseContentView):
(WebInspector.DatabaseContentView.prototype.shown):
(WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded.accumulateMatches):
(WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded.tableNamesCallback):
(WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded):
(WebInspector.DatabaseContentView.prototype._messagesClicked):
(WebInspector.DatabaseContentView.prototype._queryFinished):
(WebInspector.DatabaseContentView.prototype._queryError):
(WebInspector.DatabaseContentView.prototype.updateLayout): Deleted.
No longer needed.
(WebInspector.DatabaseContentView.prototype._appendViewQueryResult): Deleted.
(WebInspector.DatabaseContentView.prototype._appendErrorQueryResult): Deleted.
(WebInspector.DatabaseContentView.prototype._appendQueryResult): Deleted.
Removed methods subsumed under DatabaseUserQueryView.

* UserInterface/Views/DatabaseUserQueryErrorView.js: Added.
(WebInspector.DatabaseUserQueryErrorView):
Displays supplied error message.

* UserInterface/Views/DatabaseUserQuerySuccessView.js: Added.
(WebInspector.DatabaseUserQuerySuccessView):
Creates data grid if results exist, otherwise displays &quot;no results&quot; message.
(WebInspector.DatabaseUserQuerySuccessView.prototype.get dataGrid):
External access to view's data grid for autosizing columns, etc.
(WebInspector.DatabaseUserQuerySuccessView.prototype.layout):
Update grid layout manually, since the grid's parent in the DOM isn't the view's root element.

* UserInterface/Views/DatabaseUserQueryViewBase.js: Added.
Base class for success and error message views.
(WebInspector.DatabaseUserQueryViewBase):
Creates DOM common to subclasses.
(WebInspector.DatabaseUserQueryViewBase.prototype.get resultElement):
Protected getter exposing the content root for both subclasses.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptjs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQueryErrorViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQuerySuccessViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQueryViewBasejs">trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/ChangeLog        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -1,3 +1,72 @@
</span><ins>+2015-11-09  Matt Baker  &lt;mattbaker@apple.com&gt;
+
+        Web Inspector: Convert DatabaseContentView to use View base class
+        https://bugs.webkit.org/show_bug.cgi?id=150959
+
+        Reviewed by Timothy Hatcher.
+
+        Update DatabaseContentView to inherit from View. This required that query results be
+        promoted to a first-class view object, and that ConsolePrompt's DOM element not be wrapped
+        inside a container element.
+
+        Two new query result view classes (and their base class) wrap up DOM element creation
+        which was being performed by DatabaseContentView.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/Main.html:
+        New files.
+
+        * UserInterface/Views/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt):
+        Removed unused parameter.
+
+        * UserInterface/Views/DatabaseContentView.css:
+        (.storage-view):
+        (.storage-view &gt; .console-prompt):
+        (.storage-view &gt; .console-prompt::before):
+        (:matches(.database-user-query, .database-query-result)::before):
+        (.database-query-result.no-results):
+        (.database-query-prompt): Deleted.
+        (:matches(.database-user-query, .database-query-prompt, .database-query-result)::before): Deleted.
+        (.database-query-prompt::before): Deleted.
+        Modified styles to create prompt without needing a wrapper element.
+
+        * UserInterface/Views/DatabaseContentView.js:
+        (WebInspector.DatabaseContentView):
+        (WebInspector.DatabaseContentView.prototype.shown):
+        (WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded.accumulateMatches):
+        (WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded.tableNamesCallback):
+        (WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded):
+        (WebInspector.DatabaseContentView.prototype._messagesClicked):
+        (WebInspector.DatabaseContentView.prototype._queryFinished):
+        (WebInspector.DatabaseContentView.prototype._queryError):
+        (WebInspector.DatabaseContentView.prototype.updateLayout): Deleted.
+        No longer needed.
+        (WebInspector.DatabaseContentView.prototype._appendViewQueryResult): Deleted.
+        (WebInspector.DatabaseContentView.prototype._appendErrorQueryResult): Deleted.
+        (WebInspector.DatabaseContentView.prototype._appendQueryResult): Deleted.
+        Removed methods subsumed under DatabaseUserQueryView.
+
+        * UserInterface/Views/DatabaseUserQueryErrorView.js: Added.
+        (WebInspector.DatabaseUserQueryErrorView):
+        Displays supplied error message.
+
+        * UserInterface/Views/DatabaseUserQuerySuccessView.js: Added.
+        (WebInspector.DatabaseUserQuerySuccessView):
+        Creates data grid if results exist, otherwise displays &quot;no results&quot; message.
+        (WebInspector.DatabaseUserQuerySuccessView.prototype.get dataGrid):
+        External access to view's data grid for autosizing columns, etc.
+        (WebInspector.DatabaseUserQuerySuccessView.prototype.layout):
+        Update grid layout manually, since the grid's parent in the DOM isn't the view's root element.
+
+        * UserInterface/Views/DatabaseUserQueryViewBase.js: Added.
+        Base class for success and error message views.
+        (WebInspector.DatabaseUserQueryViewBase):
+        Creates DOM common to subclasses.
+        (WebInspector.DatabaseUserQueryViewBase.prototype.get resultElement):
+        Protected getter exposing the content root for both subclasses.
+
</ins><span class="cx"> 2015-11-07  Nikita Vasilyev  &lt;nvasilyev@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: [Regression] [Mavericks] Toolbar is too dark while docked
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -468,6 +468,7 @@
</span><span class="cx"> localizedStrings[&quot;Property&quot;] = &quot;Property&quot;;
</span><span class="cx"> localizedStrings[&quot;Query Parameters&quot;] = &quot;Query Parameters&quot;;
</span><span class="cx"> localizedStrings[&quot;Query String&quot;] = &quot;Query String&quot;;
</span><ins>+localizedStrings[&quot;Query returned no results.&quot;] = &quot;Query returned no results.&quot;;
</ins><span class="cx"> localizedStrings[&quot;Radial Gradient&quot;] = &quot;Radial Gradient&quot;;
</span><span class="cx"> localizedStrings[&quot;Radius&quot;] = &quot;Radius&quot;;
</span><span class="cx"> localizedStrings[&quot;Range Issue&quot;] = &quot;Range Issue&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -356,6 +356,9 @@
</span><span class="cx">     &lt;script src=&quot;Views/TreeOutline.js&quot;&gt;&lt;/script&gt;
</span><span class="cx"> 
</span><span class="cx">     &lt;script src=&quot;Views/ButtonNavigationItem.js&quot;&gt;&lt;/script&gt;
</span><ins>+    &lt;script src=&quot;Views/DatabaseUserQueryViewBase.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/DatabaseUserQueryErrorView.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;Views/DatabaseUserQuerySuccessView.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;Views/DOMTreeContentView.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/DetailsSidebarPanel.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;Views/GeneralTreeElement.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -25,9 +25,9 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.ConsolePrompt = class ConsolePrompt extends WebInspector.View
</span><span class="cx"> {
</span><del>-    constructor(delegate, mimeType, element)
</del><ins>+    constructor(delegate, mimeType)
</ins><span class="cx">     {
</span><del>-        super(element);
</del><ins>+        super();
</ins><span class="cx"> 
</span><span class="cx">         mimeType = parseMIMEType(mimeType).type;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -25,6 +25,8 @@
</span><span class="cx"> 
</span><span class="cx"> .storage-view {    
</span><span class="cx">     font-family: Menlo, monospace;
</span><ins>+
+    outline: none;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> .storage-view .data-grid {
</span><span class="lines">@@ -42,19 +44,27 @@
</span><span class="cx">     -webkit-text-size-adjust: auto;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.database-query-prompt {
</del><ins>+.storage-view &gt; .console-prompt {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    padding: 4px 0;
+}
+
+.storage-view &gt; .console-prompt::before {
</ins><span class="cx">     position: relative;
</span><del>-    padding: 4px 22px 4px 11px;
-    min-height: 16px;
-    white-space: pre-wrap;
-    -webkit-user-modify: read-write-plaintext-only;
-    -webkit-user-select: text;
-    
-    /* Added to remove outline */
-    outline: none;
</del><ins>+    z-index: 1;
+
+    top: 2px;
+    left: 4px;
+
+    width: 10px;
+    height: 10px;
+
+    content: url(../Images/UserInputPrompt.svg);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-:matches(.database-user-query, .database-query-prompt, .database-query-result)::before {
</del><ins>+:matches(.database-user-query, .database-query-result)::before {
</ins><span class="cx">     position: absolute;
</span><span class="cx">     display: block;
</span><span class="cx">     z-index: 1;
</span><span class="lines">@@ -67,10 +77,6 @@
</span><span class="cx">     -webkit-user-select: none;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.database-query-prompt::before {
-    background-image: url(../Images/UserInputPrompt.svg);
-}
-
</del><span class="cx"> .database-user-query {
</span><span class="cx">     position: relative;
</span><span class="cx">     border-bottom: 1px solid hsl(0, 0%, 96%);
</span><span class="lines">@@ -99,6 +105,10 @@
</span><span class="cx">     -webkit-user-select: text;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+.database-query-result.no-results {
+    -webkit-user-select: text;
+}
+
</ins><span class="cx"> .database-query-result.error::before {
</span><span class="cx">     background-image: url(../Images/Error.svg);
</span><span class="cx">     background-size: 10px 10px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js (192164 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js        2015-11-09 18:36:45 UTC (rev 192164)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -33,13 +33,9 @@
</span><span class="cx"> 
</span><span class="cx">         this.element.classList.add(&quot;storage-view&quot;, &quot;query&quot;, &quot;monospace&quot;);
</span><span class="cx"> 
</span><del>-        this._promptElement = document.createElement(&quot;div&quot;);
-        this._promptElement.classList.add(&quot;database-query-prompt&quot;);
-        this.element.appendChild(this._promptElement);
</del><ins>+        this._prompt = new WebInspector.ConsolePrompt(this, &quot;text/x-sql&quot;);
+        this.addSubview(this._prompt);
</ins><span class="cx"> 
</span><del>-        this.prompt = new WebInspector.ConsolePrompt(this, &quot;text/x-sql&quot;);
-        this._promptElement.appendChild(this.prompt.element);
-
</del><span class="cx">         this.element.addEventListener(&quot;click&quot;, this._messagesClicked.bind(this), true);
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="lines">@@ -47,21 +43,10 @@
</span><span class="cx"> 
</span><span class="cx">     shown()
</span><span class="cx">     {
</span><del>-        this.prompt.shown();
</del><ins>+        // FIXME: remove once &lt;https://webkit.org/b/150741&gt; is fixed.
+        this._prompt.shown();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    updateLayout()
-    {
-        this.prompt.updateLayout();
-
-        var results = this.element.querySelectorAll(&quot;.database-query-result&quot;);
-        for (var i = 0; i &lt; results.length; ++i) {
-            var resultElement = results[i];
-            if (resultElement.dataGrid)
-                resultElement.dataGrid.updateLayout();
-        }
-    }
-
</del><span class="cx">     saveToCookie(cookie)
</span><span class="cx">     {
</span><span class="cx">         cookie.type = WebInspector.ContentViewCookieType.Database;
</span><span class="lines">@@ -71,16 +56,15 @@
</span><span class="cx"> 
</span><span class="cx">     consolePromptCompletionsNeeded(prompt, defaultCompletions, base, prefix, suffix)
</span><span class="cx">     {
</span><del>-        var results = [];
</del><ins>+        let results = [];
</ins><span class="cx"> 
</span><span class="cx">         prefix = prefix.toLowerCase();
</span><span class="cx"> 
</span><span class="cx">         function accumulateMatches(textArray)
</span><span class="cx">         {
</span><del>-            for (var i = 0; i &lt; textArray.length; ++i) {
-                var lowerCaseText = textArray[i].toLowerCase();
-                if (lowerCaseText.startsWith(prefix))
-                    results.push(textArray[i]);
</del><ins>+            for (let text of textArray) {
+                if (text.toLowerCase().startsWith(prefix))
+                    results.push(text);
</ins><span class="cx">             }
</span><span class="cx">         }
</span><span class="cx"> 
</span><span class="lines">@@ -89,7 +73,7 @@
</span><span class="cx">             accumulateMatches(tableNames);
</span><span class="cx">             accumulateMatches([&quot;SELECT&quot;, &quot;FROM&quot;, &quot;WHERE&quot;, &quot;LIMIT&quot;, &quot;DELETE FROM&quot;, &quot;CREATE&quot;, &quot;DROP&quot;, &quot;TABLE&quot;, &quot;INDEX&quot;, &quot;UPDATE&quot;, &quot;INSERT INTO&quot;, &quot;VALUES&quot;]);
</span><span class="cx"> 
</span><del>-            this.prompt.updateCompletions(results, &quot; &quot;);
</del><ins>+            this._prompt.updateCompletions(results, &quot; &quot;);
</ins><span class="cx">         }
</span><span class="cx"> 
</span><span class="cx">         this.database.getTableNames(tableNamesCallback.bind(this));
</span><span class="lines">@@ -104,72 +88,38 @@
</span><span class="cx"> 
</span><span class="cx">     _messagesClicked()
</span><span class="cx">     {
</span><del>-        this.prompt.focus();
</del><ins>+        this._prompt.focus();
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _queryFinished(query, columnNames, values)
</span><span class="cx">     {
</span><del>-        var dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
-        var trimmedQuery = query.trim();
</del><ins>+        let trimmedQuery = query.trim();
+        let queryView = new WebInspector.DatabaseUserQuerySuccessView(trimmedQuery, columnNames, values);
+        this.insertSubviewBefore(queryView, this._prompt);
</ins><span class="cx"> 
</span><del>-        if (dataGrid) {
-            dataGrid.element.classList.add(&quot;inline&quot;);
-            this._appendViewQueryResult(trimmedQuery, dataGrid);
-            dataGrid.autoSizeColumns(5);
-        }
</del><ins>+        if (queryView.dataGrid)
+            queryView.dataGrid.autoSizeColumns(5);
</ins><span class="cx"> 
</span><ins>+        this._prompt.element.scrollIntoView(false);
+
</ins><span class="cx">         if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i))
</span><span class="cx">             this.dispatchEventToListeners(WebInspector.DatabaseContentView.Event.SchemaUpdated, this.database);
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     _queryError(query, error)
</span><span class="cx">     {
</span><ins>+        let message;
</ins><span class="cx">         if (error.message)
</span><del>-            var message = error.message;
</del><ins>+            message = error.message;
</ins><span class="cx">         else if (error.code === 2)
</span><del>-            var message = WebInspector.UIString(&quot;Database no longer has expected version.&quot;);
</del><ins>+            message = WebInspector.UIString(&quot;Database no longer has expected version.&quot;);
</ins><span class="cx">         else
</span><del>-            var message = WebInspector.UIString(&quot;An unexpected error %s occurred.&quot;).format(error.code);
</del><ins>+            message = WebInspector.UIString(&quot;An unexpected error %s occurred.&quot;).format(error.code);
</ins><span class="cx"> 
</span><del>-        this._appendErrorQueryResult(query, message);
</del><ins>+        let queryView = new WebInspector.DatabaseUserQueryErrorView(query, message);
+        this.insertSubviewBefore(queryView, this._prompt);
+        this._prompt.element.scrollIntoView(false);
</ins><span class="cx">     }
</span><del>-
-    _appendViewQueryResult(query, view)
-    {
-        var resultElement = this._appendQueryResult(query);
-
-        // Add our DataGrid with the results to the database query result div.
-        resultElement.dataGrid = view;
-        resultElement.appendChild(view.element);
-
-        this._promptElement.scrollIntoView(false);
-    }
-
-    _appendErrorQueryResult(query, errorText)
-    {
-        var resultElement = this._appendQueryResult(query);
-        resultElement.classList.add(&quot;error&quot;);
-        resultElement.textContent = errorText;
-
-        this._promptElement.scrollIntoView(false);
-    }
-
-    _appendQueryResult(query)
-    {
-        var element = document.createElement(&quot;div&quot;);
-        element.className = &quot;database-user-query&quot;;
-        this.element.insertBefore(element, this._promptElement);
-
-        var commandTextElement = document.createElement(&quot;span&quot;);
-        commandTextElement.className = &quot;database-query-text&quot;;
-        commandTextElement.textContent = query;
-        element.appendChild(commandTextElement);
-
-        var resultElement = document.createElement(&quot;div&quot;);
-        resultElement.className = &quot;database-query-result&quot;;
-        element.appendChild(resultElement);
-        return resultElement;
-    }
</del><span class="cx"> };
</span><span class="cx"> 
</span><span class="cx"> WebInspector.DatabaseContentView.Event = {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQueryErrorViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js (0 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQueryErrorView = class DatabaseUserQueryErrorView extends WebInspector.DatabaseUserQueryViewBase
+{
+    constructor(query, message)
+    {
+        super(query);
+
+        this.resultElement.classList.add(&quot;error&quot;);
+        this.resultElement.textContent = message;
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQuerySuccessViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js (0 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -0,0 +1,57 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQuerySuccessView = class DatabaseUserQuerySuccessView extends WebInspector.DatabaseUserQueryViewBase
+{
+    constructor(query, columnNames, values)
+    {
+        super(query);
+
+        this._dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+        if (this._dataGrid) {
+            this._dataGrid.element.classList.add(&quot;inline&quot;);
+            this.resultElement.appendChild(this._dataGrid.element);
+        } else {
+            this.resultElement.classList.add(&quot;no-results&quot;);
+            this.resultElement.textContent = WebInspector.UIString(&quot;Query returned no results.&quot;);
+        }
+    }
+
+    // Public
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    }
+
+    // Protected
+
+    layout()
+    {
+        // FIXME: remove once &lt;https://webkit.org/b/150982&gt; is fixed.
+        if (this._dataGrid)
+            this._dataGrid.updateLayout();
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDatabaseUserQueryViewBasejs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js (0 => 192165)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js        2015-11-09 18:43:26 UTC (rev 192165)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQueryViewBase = class DatabaseUserQueryViewBase extends WebInspector.View
+{
+    constructor(query)
+    {
+        super();
+
+        this.element.className = &quot;database-user-query&quot;;
+
+        let commandTextElement = document.createElement(&quot;span&quot;);
+        commandTextElement.className = &quot;database-query-text&quot;;
+        commandTextElement.textContent = query;
+        this.element.appendChild(commandTextElement);
+
+        this._resultElement = document.createElement(&quot;div&quot;);
+        this._resultElement.className = &quot;database-query-result&quot;;
+        this.element.appendChild(this._resultElement);
+    }
+
+    // Protected
+
+    get resultElement()
+    {
+        // FIXME: remove once &lt;https://webkit.org/b/150982&gt; is fixed.
+        return this._resultElement;
+    }
+};
</ins></span></pre>
</div>
</div>

</body>
</html>