UI changes to support syncing foreign sessions. Changes were largely made to the sync options and new tab page.

BUG=30519
TEST=None
 
Review URL: http://codereview.chromium.org/3767009

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

5 files changed, 173 insertions, 8 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 98b0b5c..4ab7852 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -202,6 +202,42 @@ html[dir=rtl] .item {
   -webkit-box-orient: horizontal;
 }
 
+.foreign-session-client {
+  float: left;
+  max-width: 114px; /* Selected so that we can fit 5 items in EN-US */
+  font-weight: normal;
+  margin: 0;
+  position: relative;
+}
+
+html[dir=rtl] .foreign-session-client {
+  float: right;
+}
+
+.foreign-session-client > p  {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 100%;
+  margin: 0 10px;
+}
+
+#foreign-sessions .nav {
+  max-width: none !important;
+}
+
+.nav > a {
+  /* no icon */
+  padding: 0;
+}
+
+.nav > a:after {
+  content: '\u00bb'; /* raque gets flipped automatically in rtl */
+  font-size: 115%;
+  -webkit-padding-start: 2px;
+}
+
 #sync-status > div {
   border-radius: 6px;
   padding: 5px 0;
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 302e3db..db64c26 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -45,6 +45,7 @@ function registerCallback(name) {
 
 chrome.send('getMostVisited');
 chrome.send('getRecentlyClosedTabs');
+chrome.send('getForeignSessions');
 chrome.send('getApps');
 
 registerCallback('mostVisitedPages');
@@ -52,6 +53,7 @@ registerCallback('recentlyClosedTabs');
 registerCallback('syncMessageChanged');
 registerCallback('getAppsCallback');
 registerCallback('setShownSections');
+registerCallback('foreignSessions');
 
 </script>
 <!-- template data placeholder -->
@@ -182,6 +184,16 @@ if ('mode' in hashParams) {
       <div class="miniview"></div>
     </div>
 
+    <!-- Start disabled until sync is enabled and foreign sessions are
+         available. -->
+    <div id="foreign-sessions" class="section hidden disabled" section="SYNC">
+      <h2>
+        <div class="back"></div>
+        <span i18n-content="foreignsessions"></span>
+      </h2>
+      <div class="miniview"></div>
+    </div>
+
     <div id="sync-status" class="section disabled">
       <div>
         <h3></h3>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 524dbea..6b3be4a 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -112,6 +112,77 @@ function updateSimpleSection(id, section) {
   }
 }
 
+var sessionItems = [];
+
+function foreignSessions(data) {
+  logEvent('received foreign sessions');
+  // We need to store the foreign sessions so we can update the layout on a
+  // resize.
+  sessionItems = data;
+  renderForeignSessions();
+  layoutSections();
+}
+
+function renderForeignSessions() {
+  // Remove all existing items and create new items.
+  var sessionElement = $('foreign-sessions');
+  var parentSessionElement = sessionElement.lastElementChild;
+  parentSessionElement.textContent = '';
+
+  // For each client, create entries and append the lists together.
+  sessionItems.forEach(function(item, i) {
+    // TODO(zea): Get real client names. See issue 59672
+    var name = 'Client ' + i;
+    parentSessionElement.appendChild(createForeignSession(item, name));
+  });
+
+  layoutForeignSessions();
+}
+
+function layoutForeignSessions() {
+  var sessionElement = $('foreign-sessions');
+  // We cannot use clientWidth here since the width has a transition.
+  var availWidth = useSmallGrid() ? 692 : 920;
+  var parentSessEl = sessionElement.lastElementChild;
+
+  if (parentSessEl.hasChildNodes()) {
+    sessionElement.classList.remove('disabled');
+  } else {
+    sessionElement.classList.add('disabled');
+  }
+}
+
+function createForeignSession(client, name) {
+  // Vertically stack the windows in a client.
+  var stack = document.createElement('div');
+  stack.className = 'foreign-session-client';
+  stack.textContent = name;
+
+  client.forEach(function(win) {
+    // We know these are lists of multiple tabs, don't need the special case for
+    // single url + favicon.
+    var el = document.createElement('p');
+    el.className = 'item link window';
+    el.tabItems = win.tabs;
+    el.tabIndex = 0;
+    el.textContent = formatTabsText(win.tabs.length);
+
+    el.sessionId = win.sessionId;
+    el.xtitle = win.title;
+    el.sessionTag = win.sessionTag;
+
+    // Add the actual tab listing.
+    stack.appendChild(el);
+
+    // TODO(zea): Should there be a clickHandler as well? We appear to be
+    // breaking windowTooltip's hide: removeEventListener(onMouseOver) when we
+    // click.
+  });
+  return stack;
+}
+
+var recentItems = [];
+
 function recentlyClosedTabs(data) {
   logEvent('received recently closed tabs');
   // We need to store the recent items so we can update the layout on a resize.
@@ -120,8 +191,6 @@ function recentlyClosedTabs(data) {
   layoutSections();
 }
 
-var recentItems = [];
-
 function renderRecentlyClosed() {
   // Remove all existing items and create new items.
   var recentElement = $('recently-closed');
@@ -158,6 +227,7 @@ function createRecentItem(data) {
   }
   el.sessionId = data.sessionId;
   el.xtitle = data.title;
+  el.sessionTag = data.sessionTag;
   var wrapperEl = document.createElement('span');
   wrapperEl.appendChild(el);
   return wrapperEl;
@@ -208,6 +278,7 @@ function handleWindowResize() {
     mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
+    renderForeignSessions();
     updateAllMiniviewClippings();
   }
 
@@ -845,15 +916,30 @@ function maybeReopenTab(e) {
     chrome.send('reopenTab', [String(el.sessionId)]);
     e.preventDefault();
 
-    // HACK(arv): After the window onblur event happens we get a mouseover event
-    // on the next item and we want to make sure that we do not show a tooltip
-    // for that.
-    window.setTimeout(function() {
-      windowTooltip.hide();
-    }, 2 * WindowTooltip.DELAY);
+    setWindowTooltipTimeout();
   }
 }
 
+function maybeReopenSession(e) {
+  var el = findAncestor(e.target, function(el) {
+    return el.sessionId;
+  });
+  if (el) {
+    chrome.send('reopenForeignSession', [String(el.sessionTag)]);
+
+    setWindowTooltipTimeout();
+  }
+}
+
+// HACK(arv): After the window onblur event happens we get a mouseover event
+// on the next item and we want to make sure that we do not show a tooltip
+// for that.
+function setWindowTooltipTimeout(e) {
+  window.setTimeout(function() {
+    windowTooltip.hide();
+  }, 2 * WindowTooltip.DELAY);
+}
+
 function maybeShowWindowTooltip(e) {
   var f = function(el) {
     return el.tabItems !== undefined;
@@ -875,6 +961,15 @@ recentlyClosedElement.addEventListener('keydown',
 recentlyClosedElement.addEventListener('mouseover', maybeShowWindowTooltip);
 recentlyClosedElement.addEventListener('focus', maybeShowWindowTooltip, true);
 
+var foreignSessionElement = $('foreign-sessions');
+
+foreignSessionElement.addEventListener('click', maybeReopenSession);
+foreignSessionElement.addEventListener('keydown',
+                                       handleIfEnterKey(maybeReopenSession));
+
+foreignSessionElement.addEventListener('mouseover', maybeShowWindowTooltip);
+foreignSessionElement.addEventListener('focus', maybeShowWindowTooltip, true);
+
 /**
  * This object represents a tooltip representing a closed window. It is
  * shown when hovering over a closed window item or when the item is focused. It
diff --git a/chrome/browser/resources/options/sync_options.html b/chrome/browser/resources/options/sync_options.html
index e377355..d2b5aea 100644
--- a/chrome/browser/resources/options/sync_options.html
+++ b/chrome/browser/resources/options/sync_options.html
@@ -59,6 +59,14 @@
           </label>
         </td>
       </tr>
+      <tr>
+        <td class="option-name">
+          <label class="checkbox">
+            <input id="sessions-check" pref="sync.sessions" type="checkbox">
+            <span i18n-content="syncsessions"></span>
+          </label>
+        </td>
+      </tr>
     </table>
   </section>
 </div>
diff --git a/chrome/browser/sync/resources/configure.html b/chrome/browser/sync/resources/configure.html
index e7e6137..0ba65c4 100644
--- a/chrome/browser/sync/resources/configure.html
+++ b/chrome/browser/sync/resources/configure.html
@@ -254,6 +254,12 @@ html[os='mac'] input[type='submit'] {
     }

 

     setCheckboxesToKeepEverythingSynced(args.keepEverythingSynced);
+    if (args.sessionsRegistered) {
+      document.getElementById("sessionsCheckbox").checked = args.syncSessions;
+      document.getElementById("sessionsItem").className = "sync-item-show";
+    } else {
+      document.getElementById("sessionsItem").className = "sync-item-hide";
+    }
   }
 
   function setEncryptionCheckboxes(args) {
@@ -330,6 +336,7 @@ html[os='mac'] input[type='submit'] {
         "syncExtensions": syncAll || f.extensionsCheckbox.checked,
         "syncTypedUrls": syncAll || f.typedUrlsCheckbox.checked,
         "syncApps": syncAll || f.appsCheckbox.checked,
+        "syncSessions": syncAll || f.sessionsCheckbox.checked,
         "usePassphrase": document.getElementById("usePassphraseCheckbox").checked
     });
     chrome.send("Configure", [result]);
@@ -443,6 +450,13 @@ html[os='mac'] input[type='submit'] {
               <label id="themesCheckboxLabel" name="dataTypeLabel" for="themesCheckbox"
                      i18n-content="themes" i18n-values="title:themes"></label>
             </div>
+            <!-- Sessions -->
+            <div class="sync-item-show" id="sessionsItem">
+              <input id="sessionsCheckbox" name="dataTypeCheckbox" type="checkbox">
+              <label id="sessionsCheckboxLabel" name="dataTypeLabel" 
+                     for="sessionsCheckbox" i18n-content="foreignsessions"
+                     il8n-values="title:sessions"></label>
+            </div>
           </div>
         </div>
       </div>