Quick searches for sync-internals

Added some quick searches that are usually performed in
sync to find out which objects are not updated and have
pending updates not being done.

Currently it implements IS_UNSYNCED, IS_UNAPPLIED_UPDATE, both, and
IS_DEL.


BUG=154378

Review URL: https://codereview.chromium.org/138273009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@245463 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/sync_internals/search.html

 <p>
-<input id="sync-search-query" type="search" 
+<input id="sync-search-query" type="search"
        placeholder="Search Sync Data">
 <button id="sync-search-submit">Search</button>
-
+  <span id="sync-search-quicklink-container">Quick Search:
+    <a class='sync-search-quicklink' data-query="&quot;IS_UNAPPLIED_UPDATE&quot;: true"
+      href="#">Unapplied Updates</a>
+    <a class='sync-search-quicklink' data-query="&quot;IS_UNSYNCED&quot;: true"
+      href="#">Unsynced</a>
+    <a class='sync-search-quicklink' data-query="((&quot;IS_UNAPPLIED_UPDATE&quot;: true)[\s\S]*(&quot;IS_UNSYNCED&quot;: true))|((&quot;IS_UNSYNCED&quot;: true)[\s\S]*(&quot;IS_UNAPPLIED_UPDATE&quot;: true))"
+      href="#">Conflicted</a>
+    <a class='sync-search-quicklink' data-query="&quot;IS_DEL&quot;: true"
+      href="#">Deleted</a>
+  </span>
+</p>
+<p>
 <span id="sync-search-status"></span>
 </p>
 

chrome/browser/resources/sync_internals/search.js

@@ -7,6 +7,13 @@
 
 cr.ui.decorate('#sync-results-splitter', cr.ui.Splitter);
 
+var allLinks = document.getElementsByClassName('sync-search-quicklink');
+
+chrome.sync.decorateQuickQueryControls(
+  allLinks,
+  $('sync-search-submit'),
+  $('sync-search-query'));
+
 chrome.sync.decorateSearchControls(
   $('sync-search-query'),
   $('sync-search-submit'),

chrome/browser/resources/sync_internals/sync_search.css

@@ -10,6 +10,12 @@
   background-color: rgb(255,170,170);
 }
 
+.sync-search-quicklink {
+  background-color: rgb(239,243,255);
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 #sync-search-status {
   color: rgb(51,51,51);
   font-style: italic;

chrome/browser/resources/sync_internals/sync_search.js

@@ -7,6 +7,35 @@
 cr.define('chrome.sync', function() {
   var currSearchId = 0;
 
+  var setQueryString = function(queryControl, query) {
+    queryControl.value = query;
+  };
+
+  var createDoQueryFunction = function(queryControl, submitControl, query) {
+    return function() {
+      setQueryString(queryControl, query);
+      submitControl.click();
+    };
+  };
+
+  /**
+   * Decorates the quick search controls
+   *
+   * @param {Array of DOM elements} quickLinkArray The <a> object which
+   *     will be given a link to a quick filter option.
+   * @param {!HTMLInputElement} queryControl The <input> object of
+   *     type=search where the user types in his query.
+   */
+  var decorateQuickQueryControls = function(quickLinkArray, submitControl,
+                                            queryControl) {
+    for (var index = 0; index < allLinks.length; ++index) {
+      var quickQuery = allLinks[index].getAttribute('data-query');
+      var quickQueryFunction = createDoQueryFunction(queryControl,
+          submitControl, quickQuery);
+      allLinks[index].addEventListener('click', quickQueryFunction);
+    }
+  };
+
   /**
    * Runs a search with the given query.
    *
@@ -38,7 +67,7 @@ cr.define('chrome.sync', function() {
    *
    * @param {!HTMLInputElement} queryControl The <input> object of
    *     type=search where the user types in his query.
-   * @param {!HTMLButtonElement} submitControl The <button> object of
+   * @param {!HTMLButtonElement} submitControl The <button> object
    *     where the user can click to do his query.
    * @param {!HTMLElement} statusControl The <span> object display the
    *     search status.
@@ -102,6 +131,7 @@ cr.define('chrome.sync', function() {
   }
 
   return {
-    decorateSearchControls: decorateSearchControls
+    decorateSearchControls: decorateSearchControls,
+    decorateQuickQueryControls: decorateQuickQueryControls
   };
 });