chrome/content/tab.html
author Edward Lee <edilee@mozilla.com>
Tue, 14 Apr 2009 12:35:55 -0500
changeset 215 d4fa124c0f79
parent 146 70b107b1c32d
permissions -rw-r--r--
Bug 484613 - Save site data after changes and reload them for next session Save data after adding, getting from db, moving, removing as JSON in pref. Load from pref on first load of jsm.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
  <title>New Tab</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <link rel="icon" href="chrome://abouttab/content/newTab.png" style="display:none"/>
  <style media="screen" type="text/css">
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }
  #container {
    min-height: 100%;
    position: relative;
  }

  /*------- Action Button ----------*/
 
  .actions {
    position: relative;
  }
  
  #action {
    border: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
    padding: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    -moz-border-radius: 5px;
    z-index: 10000;
    color: #555;
    text-decoration: none;
    display: none;
    
    -moz-border-top-colors: #F9F9F9; 
    -moz-border-bottom-colors: #ECECEC;    
    -moz-border-left-colors: #F1F1F1;
    -moz-border-right-colors: #F1F1F1;          
    -moz-box-shadow: #BBB 1px 1px 2.5px;
    
  }
  #action:hover {
    background-color: #EEE;
  }
  #action #title {
    font-weight: bold;
  }

  /*------- Closed Tabs ----------*/

  #closed-tabs-list {
    /*float:right;*/
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
   
  }
  #closed-tabs-list .closed-tab-box {
    color: rgba(255,255,255,0.95);
    background: url("chrome://global/skin/notification/info-bar-background.png") #404040 repeat-x top left;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #2a2a2a;
    
    padding-right: 10px;
    
    font-family: Helvetica;
    font-size: small;
    height: 30px;
    padding: none;
    text-align:right;
    line-height: 30px;
    
  }
  #closed-tabs-list .undo {
    display: block;
    white-space: nowrap;
  }

  .undo img{
    opacity: .5;
    position: relative;
    top: 2px;
  }
  
  .undo .tab-name{
    text-overflow: ellipsis;
    overflow: hidden;
    font-variant: small-caps;
    font-size: 80%;
  }
  
  button {
    cursor: pointer;    
    -moz-appearance: none;
    background: url("chrome://global/skin/icons/white-gray-gradient.gif") transparent repeat-x center center;
    -moz-background-clip: padding;
    border: 1px solid;
    border-bottom-width: 2px;
    -moz-border-radius: 10px;
    -moz-border-top-colors: rgba(0,0,0,0.5);
    -moz-border-right-colors: rgba(0,0,0,0.5);
    -moz-border-bottom-colors: rgba(255,255,255,0.35) rgba(0,0,0,0.5);
    -moz-border-left-colors: rgba(0,0,0,0.5);
    padding: 0 5px;
    min-width: 60px;
    min-height: 17px;
  }



  /*------- Thumbstrip ----------*/

  #footer {
    background: white;
    left: 10px;
    top: 10px;
    height: 100%;
    position: absolute;
    width: 300px;
  }
  
  #footer .thumb-box {
    cursor: pointer;
    height: 130px;
    width: 188px;
    margin-bottom: 30px;
    position: relative;
  }
  
  #footer .thumb-box .tb-favicon {
    background: white;
    height: 16px;
    outline: 1px solid rgba(0, 0, 0, .1);
    -moz-outline-radius: 3px;
    position: absolute;
    right: -40px;
    top: 5px;
    width: 16px;
    z-index: 2;
  }
  #footer .thumb-box .tb-thumb {
    border: 6px solid white;
    -moz-border-radius: 5px;
    filter: url(chrome://abouttab/content/gray.svg#gray);
    position: absolute;
    height: 130px;
    width: 188px;
    z-index: 1;
    -moz-border-top-colors: #F9F9F9;
    -moz-border-bottom-colors: #ECECEC;    
    -moz-border-left-colors: #F1F1F1;
    -moz-border-right-colors: #F1F1F1;          
    -moz-box-shadow: #BBB 1px 1px 2.5px;
  }
  #footer .thumb-box:hover .tb-thumb {
    filter: none;
  }
  #footer .tb-title {
    color: #777;
    font-family: Helvetica;
    font-size: 13px;
    line-height: 17px;
    position: absolute;
    left: 237px;
    text-align: left;
    top: -7px;
    width: 350px;
  }
  #footer .tb-title .siteName {
    font-weight: bold;
    margin-bottom: .5em;
    font-size: 15px;
  }
  #footer .tb-title *:hover,
  #footer .tb-title .hovered {
    color: black;
  }
  
  .feed{
    font-size: 95%;
  }
  
</style>
</head>

<body>
<script type="text/javascript;version=1.8" src="chrome://abouttab/content/jquery.js"></script>
<script type="text/javascript;version=1.8" src="chrome://abouttab/content/init.js"></script>

<script type="text/javascript;version=1.8" src="chrome://abouttab/content/actions.js"></script>
<script type="text/javascript;version=1.8" src="chrome://abouttab/content/ambnews.js"></script>

<div class="actions">
<a id="action">
  <span id="title">Search for </span>
  "<span id="content"></span>"
</a>
</div>

<div id="container">
  <div id="closed-tabs-list"></div>
  <div id="footer"></div>
</div>

<script type="text/javascript;version=1.8">
Cu.import("resource://abouttab/thumbs.js");
const kThumbWidth = 180;
const kThumbRatio = .727;
const kThumbPad = 10;

function setupThumbs() {
  let maxThumbs = Math.floor(window.innerHeight / (kThumbWidth * kThumbRatio + kThumbPad));
  let footer = $("#footer");

  function addThumb(row) {
    let text, site, thumb;
    let thumbBox = $("<div/>").
      attr("class", "thumb-box").
      attr("id", row.id).
      append($("<img/>").attr("src", row.iconSrc).attr("class", "tb-favicon")).
      // Text for site name and feeds
      append(text = $("<p/>").
        attr("class", "tb-title").
        // Site name
        append(site = $("<div/>").
          attr("class", "siteName").
          text(row.title))).
      // Thumbnail image
      append(thumb = $("<div/>").
        attr("class", "tb-thumb").
        hover(function(event) {
          site.addClass("hovered");
        }, function() {
          site.removeClass("hovered");
        })).
      appendTo(footer).
      data("site", row).
      mousedown(openURI);

    // Add the thumbnail to the thumb when we asyncly get the image
    Thumbs.get(row.uri, function(image) {
      thumb.css("background-image", "url(" + image + ")");
    });

    // Get feeds for the site
    let onFeed = function(feed) {
      for (let i = 0; i < 3 && i < feed.length; i++) {
        $("<div/>").
          attr("class", "feed").
          data("site", feed[i]).
          append(feed[i].title).
          mousedown(openURI).
          hide().
          fadeIn("slow").
          appendTo(text);
      }
    };
    Feeds.get(row.id, onFeed);
  }

  // Create a thumbnail for the first several sites
  Sites.get(maxThumbs, function(sites) sites.forEach(addThumb));
}

let prefClosedTab = "about-tab-closed-tab";
function _pushTab( tabName ){ Application.prefs.setValue( prefClosedTab, tabName ); }
function _popTab() { Application.prefs.setValue( prefClosedTab, "" ); }
function _peekTab(){ return Application.prefs.getValue( prefClosedTab, null ); }

// This function setups the recently closed tabs list.
function setupTabs() {
  let closedTabs = document.getElementById("closed-tabs-list");  

  wm = Cc["@mozilla.org/appshell/window-mediator;1"]
    .getService(Ci.nsIWindowMediator);
  let win = wm.getEnumerator("navigator:browser").getNext();
  let browser = win.getBrowser();
  let ss = Cc["@mozilla.org/browser/sessionstore;1"]
    .getService(Ci.nsISessionStore);

  for (let pair in Iterator(JSON.parse(ss.getClosedTabData(win)))) {
    let [index, tab] = pair;
    
    // Don't display about: or "New Tab page"
    if (tab.state.index == 1 && tab.state.entries[0].url.match(/^(about:|chrome:\/\/abouttab)/))
      continue;
    
    // If we've already shown this tab, don't show it again.
    if( _peekTab() == tab.title ) return;
    
    $("#footer").css("top", "40px")
    //$("#action").css("top", "20px")  
    
    let defaultImg = "chrome://mozapps/skin/places/defaultFavicon.png";
    $("<div class='closed-tab-box'/>").
      append("<span class='undo'>Re-open the tab you just closed: <img src='" + (tab.image? tab.image : defaultImg) +
             "' width='16' height='16'/><span class='tab-name'>" + tab.title + "</span> <button>Undo</button></span>").
      appendTo(closedTabs).
      click(function(event) {
        // Forget that we showed this tab after reopening it
        _popTab();
        ss.undoCloseTab(win, index);
        window.close();
      });

    // If an action is shown and a tab has been closed, they will overlap. This hacks a fix.
    // TODO: This should be done by having all things in the right column flow, instead of
    // being absolute'ly positioned.   
    $(".actions").css("top", "30px");
      
    _pushTab( tab.title );

    // Only show a single undo closed tab
    break;
  }
}

// Run stuff when we're ready
$(function() {
  addAction();
  setupThumbs();
  setupTabs();
});
</script>
</body>
</html>