chrome/browser/resources/net_internals/tabswitcherview.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.

/**
 * TabSwitcher is an implementation of View that handles tab switching.
 *
 *  +-----------------------------------+
 *  | Tab1 / Tab2 / Tab3 / ..           |  <- tab handle view
 *  +-----------------------------------+
 *  |                                   |
 *  |                                   |
 *  |                                   |
 *  |   stacked tab content areas       |
 *  |   (only 1 is visible at a time)   |
 *  |                                   |
 *  |                                   |
 *  |                                   |
 *  +-----------------------------------+
 *
 * @parameter {!View} tabHandleView the view that contains the tab handles.
 *
 * @constructor
 */
function TabSwitcherView(tabHandleDivId) {
  document.getElementById(tabHandleDivId).classList.add('tab-switcher-view');
  var tabHandleView = new DivView(tabHandleDivId);

  View.call(this);
  this.tabHandleView_ = tabHandleView;
  this.tabs_ = [];
}

inherits(TabSwitcherView, View);

TabSwitcherView.prototype.setGeometry = function(left, top, width, height) {
  TabSwitcherView.superClass_.setGeometry.call(this, left, top, width, height);

  this.tabHandleView_.setGeometry(
      left, top, width, this.tabHandleView_.getHeight());

  var contentTop = this.tabHandleView_.getBottom();
  var contentHeight = height - this.tabHandleView_.getHeight();

  // Position each of the tabs content areas.
  for (var i = 0; i < this.tabs_.length; ++i) {
    var tab = this.tabs_[i];
    tab.contentView.setGeometry(left, contentTop, width, contentHeight);
  }
};

TabSwitcherView.prototype.show = function(isVisible) {
  TabSwitcherView.superClass_.show.call(this, isVisible);

  this.tabHandleView_.show(isVisible);

  var activeTab = this.findActiveTab();
  if (activeTab)
    activeTab.contentView.show(isVisible);
};

/**
 * Adds a new tab (initially hidden).
 *
 * @param {String} id The ID for DOM node that will be made clickable to select
 *                    this tab. This is also the ID we use to identify the
 *                    "tab".
 * @param {!View} view The tab's actual contents.
 */
TabSwitcherView.prototype.addTab = function(id, contentView, switchOnClick) {
  var tab = new TabEntry(id, contentView);
  this.tabs_.push(tab);

  if (switchOnClick) {
    // Attach a click handler, used to switch to the tab.
    var self = this;
    tab.getTabHandleNode().onclick = function() {
      self.switchToTab(id, null);
    };
  }

  // Start tabs off as hidden.
  tab.contentView.show(false);
};

/**
 * Returns the currently selected tab, or null if there is none.
 * @returns {!TabEntry}
 */
TabSwitcherView.prototype.findActiveTab = function() {
  for (var i = 0; i < this.tabs_.length; ++i) {
    var tab = this.tabs_[i];
    if (tab.active)
      return tab;
  }
  return null;
};

/**
 * Returns the tab with ID |id|.
 * @returns {!TabEntry}
 */
TabSwitcherView.prototype.findTabById = function(id) {
  for (var i = 0; i < this.tabs_.length; ++i) {
    var tab = this.tabs_[i];
    if (tab.id == id)
      return tab;
  }
  return null;
};

/**
 * Focuses on tab with ID |id|.  |params| is a dictionary that will be
 * passed to the tab's setParameters function, if it's non-null.
 */
TabSwitcherView.prototype.switchToTab = function(id, params) {
  var oldTab = this.findActiveTab();
  if (oldTab)
    oldTab.setSelected(false);

  var newTab = this.findTabById(id);
  newTab.setSelected(true);
  if (params)
    newTab.contentView.setParameters(params);

  // Update data needed by newly active tab, as it may be
  // significantly out of date.
  if (typeof g_browser != 'undefined' && g_browser.checkForUpdatedInfo)
    g_browser.checkForUpdatedInfo();
};

TabSwitcherView.prototype.getAllTabIds = function() {
  var ids = [];
  for (var i = 0; i < this.tabs_.length; ++i)
    ids.push(this.tabs_[i].id);
  return ids;
};

// Shows/hides the DOM node that is used to select the tab.  Will not change
// the active tab.
TabSwitcherView.prototype.showTabHandleNode = function(id, isVisible) {
  var tab = this.findTabById(id);
  setNodeDisplay(tab.getTabHandleNode(), isVisible);
};

//-----------------------------------------------------------------------------

/**
 * @constructor
 */
function TabEntry(id, contentView) {
  this.id = id;
  this.contentView = contentView;
}

TabEntry.prototype.setSelected = function(isSelected) {
  this.active = isSelected;
  changeClassName(this.getTabHandleNode(), 'selected', isSelected);
  this.contentView.show(isSelected);
};

/**
 * Returns the DOM node that is used to select the tab.
 */
TabEntry.prototype.getTabHandleNode = function() {
  return document.getElementById(this.id);
};