UI changes to support syncing foreign sessions. Changes were largely made to ...

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // To avoid creating tons of unnecessary nodes. We assume we cannot fit more
 // than this many items in the miniview.
 var MAX_MINIVIEW_ITEMS = 15;
 
 // Extra spacing at the top of the layout.
 var LAYOUT_SPACING_TOP = 25;
@@ skipping 94 matching lines @@
     $(id).classList.remove('hidden');
     if (maxiview)
       maxiview.classList.remove('hidden');
   } else {
     $(id).classList.add('hidden');
     if (maxiview)
       maxiview.classList.add('hidden');
   }
 }
 
+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.
   recentItems = data;
   renderRecentlyClosed();
   layoutSections();
 }
 
-var recentItems = [];
-
 function renderRecentlyClosed() {
   // Remove all existing items and create new items.
   var recentElement = $('recently-closed');
   var parentEl = recentElement.lastElementChild;
   parentEl.textContent = '';
   var recentMenu = $('recently-closed-menu');
   clearClosedMenu(recentMenu);
 
   recentItems.forEach(function(item) {
     parentEl.appendChild(createRecentItem(item));
@@ skipping 16 matching lines @@
   } else {
     el = document.createElement('a');
     el.className = 'item';
     el.href = data.url;
     el.style.backgroundImage = url('chrome://favicon/' + data.url);
     el.dir = data.direction;
     el.textContent = data.title;
   }
   el.sessionId = data.sessionId;
   el.xtitle = data.title;
+  el.sessionTag = data.sessionTag;
   var wrapperEl = document.createElement('span');
   wrapperEl.appendChild(el);
   return wrapperEl;
 }
 
 function addRecentMenuItem(menu, data) {
   var isWindow = data.type == 'window';
   var a = document.createElement('a');
   if (isWindow) {
     a.textContent = formatTabsText(data.tabs.length);
@@ skipping 30 matching lines @@
   }
 
   var oldLayoutMode = layoutMode;
   var b = useSmallGrid();
   layoutMode = b ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
     mostVisited.useSmallGrid = b;
     mostVisited.layout();
     renderRecentlyClosed();
+    renderForeignSessions();
     updateAllMiniviewClippings();
   }
 
   layoutSections();
 }
 
 // Stores some information about each section necessary to layout. A new
 // instance is constructed for each section on each layout.
 function SectionLayoutInfo(section) {
   this.section = section;
@@ skipping 617 matching lines @@
 }
 
 function maybeReopenTab(e) {
   var el = findAncestor(e.target, function(el) {
     return el.sessionId !== undefined;
   });
   if (el) {
     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;
   };
   var el = findAncestor(e.target, f);
   var relatedEl = findAncestor(e.relatedTarget, f);
   if (el && el != relatedEl) {
     windowTooltip.handleMouseOver(e, el, el.tabItems);
   }
 }
 
 
 var recentlyClosedElement = $('recently-closed');
 
 recentlyClosedElement.addEventListener('click', maybeReopenTab);
 recentlyClosedElement.addEventListener('keydown',
                                        handleIfEnterKey(maybeReopenTab));
 
 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
  * gets hidden when blurred or when mousing out of the menu or the item.
  * @param {Element} tooltipEl The element to use as the tooltip.
  * @constructor
  */
 function WindowTooltip(tooltipEl) {
   this.tooltipEl = tooltipEl;
   this.boundHide_ = this.hide.bind(this);
@@ skipping 226 matching lines @@
   var promoText1 = $('apps-promo-text1');
   promoText1.innerHTML = promoText1.textContent;
   promoText1.querySelector('a').href = localStrings.getString('web_store_url');
 
   $('apps-promo-hide').addEventListener('click', function() {
     chrome.send('hideAppsPromo', []);
     document.documentElement.classList.remove('apps-promo-visible');
     layoutSections();
   });
 });