Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-01 14:45:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

+ Merging; looks like we had a little collision in the group DOM area

Browse Source
This commit is contained in:
Ian Gilman 2010-04-09 10:21:12 -07:00
commit 24e393f848
6 changed files with 186 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
browser/base/content/tabcandy/app/tabitems.js
View File

@ -132,7 +132,8 @@ window.TabItems = {
}
});
$("<div class='close'>x</div>").appendTo($div);
$("<div class='close'><img src='img/closetab.png'/></div>").appendTo($div);
$("<div class='expander'><img src='img/expand.png'/></div>").appendTo($div);
if($div.length == 1) {
var p = Page.findOpenSpaceFor($div); // TODO shouldn't know about Page

15
browser/base/content/tabcandy/core/mirror.js
View File

@ -109,7 +109,14 @@ function Mirror(tab, manager) {
this.tab = tab;
this.manager = manager;
var div = $("<div class='tab'><span class='name'>&nbsp;</span><img class='fav'/><canvas class='thumb'/></div>")
var html = "<div class='tab'>" +
"<div class='favicon'><img/></div>" +
"<div class='thumb'><div class='thumbShadow'></div><canvas/></div>" +
"<span class='tab-title'>&nbsp;</span>" +
"</div>";
var div = $(html)
.data("tab", this.tab)
.appendTo("body");
@ -121,9 +128,9 @@ function Mirror(tab, manager) {
this.needsPaint = 0;
this.canvasSizeForced = false;
this.el = div.get(0);
this.favEl = $('.fav', div).get(0);
this.nameEl = $('.name', div).get(0);
this.canvasEl = $('.thumb', div).get(0);
this.favEl = $('.favicon>img', div).get(0);
this.nameEl = $('.tab-title', div).get(0);
this.canvasEl = $('.thumb canvas', div).get(0);
var doc = this.tab.contentDocument;
if( !_isIframe(doc) ) {

BIN
browser/themes/pinstripe/browser/tabcandy/closetab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 B

BIN
browser/themes/pinstripe/browser/tabcandy/expand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 B

177
browser/themes/pinstripe/browser/tabcandy/tabcandy.css
View File

@ -1,12 +1,152 @@
.active{
-moz-box-shadow: 5px 5px 4px rgba(0,0,0,.5);
html {
padding-bottom: 20px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
.willGroup{
border: 1px inset rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 10px rgba(255,0,0,1);
body {
font-family: Tahoma, sans-serif !important;
padding: 0px;
background-color: rgba(240,240,240,1);
color: rgba(0,0,0,0.4);;
font-size:12px;
line-height: 16px;
margin: 0 auto;
}
/* Tab Styling
----------------------------------*/
.tab {
position: absolute;
margin: 10px;
width: 160px;
padding: 4px 6px 6px 4px;
border: 1px solid rgba(230,230,230,1);
background-color: rgba(245,245,245,1);
-moz-border-radius: 0.4em;
-moz-box-shadow:
inset rgba(255, 255, 255, 0.6) 0 2px 0px,
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
inset rgba(255, 255, 255, 0.6) 2px 0px 0px,
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
}
.tab canvas {
border: 1px solid rgba(0,0,0,0.2);
width: 100%;
height: 130px;
}
.thumb {
width: 100%;
}
.thumbShadow {
position: absolute;
border-bottom: 5px solid rgba(0,0,0,0.05);
margin-right: -12px;
bottom: 8px;
width: 94.5%;
}
.favicon {
position: absolute;
background-color: rgba(245,245,245,1);
-moz-border-radius-bottomright: 0.4em;
-moz-box-shadow:
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
padding: 4px 6px 6px 4px;
top: 4px;
left: 4px;
border-right: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.favicon img {
border: none;
width: 16px;
height: 16px;
}
.close {
position: absolute;
top: 6px;
right: 6px;
}
.expander {
position: absolute;
bottom: 12px;
right: 6px;
}
.close img, .expander img{
opacity: 0.2;
border: none;
}
.favicon img:hover, .close img:hover, .expander img:hover{
opacity: 1;
border: none;
}
.tab-title {
position: absolute;
bottom: -20px;
text-align: center;
text-shadow: rgba(255,255,255,1) 0 1px;
width: 94.5%;
}
/* Tab Group
----------------------------------*/
.group .tab {
position: relative;
float: left;
margin: 10px;
width: 160px;
padding: 4px 6px 6px 4px;
border: 1px solid rgba(230,230,230,0);
background-color: rgba(245,245,245,0);
-moz-border-radius: 0.4em;
-moz-box-shadow:
inset rgba(255, 255, 255, 0) 0 2px 0px,
inset rgba(255, 255, 255, 0) 0 -2px 0px,
inset rgba(255, 255, 255, 0) 2px 0px 0px,
inset rgba(255, 255, 255, 0) -2px 0px 0px;
}
.group {
position: relative;
float: left;
margin: 20px;
padding: 10px 10px 30px 10px;
border: 1px solid rgba(230,230,230,1);
background-color: rgba(245,245,245,1);
-moz-border-radius: 0.4em;
-moz-box-shadow:
inset rgba(255, 255, 255, 0.6) 0 2px 0px,
inset rgba(255, 255, 255, 0.6) 0 -2px 0px,
inset rgba(255, 255, 255, 0.6) 2px 0px 0px,
inset rgba(255, 255, 255, 0.6) -2px 0px 0px;
}
.group .expander {
}
/*
.group {
cursor: move;
overflow: hidden;
@ -17,6 +157,22 @@
background-color: white;
-moz-box-shadow: inset 2px 2px 12px rgba(0,0,0,.15);
}
*/
// -----------------------------------------------------
// Other
// -----------------------------------------------------
.active{
-moz-box-shadow: 5px 5px 4px rgba(0,0,0,.5);
}
.willGroup{
border: 1px inset rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 10px rgba(255,0,0,1);
}
.titlebar{
border: 1px solid #ccc;
@ -24,6 +180,8 @@
line-height: 18px;
height: 18px;
background: -moz-linear-gradient(90deg, #ccc,#eee);
display: none;
visibility: hidden;
}
input.name{
@ -34,10 +192,17 @@ input.name{
/* Resizable
----------------------------------*/
.resizer{
background-image: url(../img/resizer.png);
background-image: url(../img/expand.png);
position: absolute;
bottom: 6px;
right: 6px;
opacity: .2;
}
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }

112
content/candies/revision-a/index.html
View File

@ -7,88 +7,7 @@
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="icon" href="chrome://tabcandy/content/tabcandy.png"/>
<link rel="stylesheet" href="css/groups.css" type="text/css">
<style media="screen" type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: Geneva;
}
.tab{
font-size: 9px;
position: absolute;
display: block;
float:left;
/* margin: 10px; */
padding: 0;
background-color: rgba(255,255,255,.8);
z-index: 0;
width: 160px;
height: 137px;
overflow: hidden;
}
.fav{
position: absolute;
width: 16px;
height: 16px;
background-color: rgba(255,255,255,.8);
-moz-border-radius: 0 0 5px 0;
padding: 3px;
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.2);
}
.thumb{
width: 100%;
height: 80%;
background-color: #ccc;
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.3);
}
.thumb:hover{
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}
.name{
display:block;
width:160px;
white-space: nowrap;
overflow: hidden;
}
.name:before{
display:inline-block;
height:12px;
width:20px;
content:" ";
position: absolute;
right:0px;
background: -moz-linear-gradient(0deg, rgba(255,255,255,0), white);
overflow: hidden;
}
.close{
position: absolute;
top:12px; right:0;
margin: 1px;
width:12px; height:12px;
background-color: rgba(0,0,0,.6);
font-size: 10px;
text-align: center;
line-height:13px;
color: #DDD;
cursor: pointer;
-moz-border-radius: 10px;
-moz-box-shadow: inset 1px 1px 0px rgba(0,0,0,.5), inset -1px -1px 0px rgba(255,255,255,.5);
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
font-family: Helvetica;
}
.titlebar .close {
top: 2px;
right: 2px;
}
<style media="screen" type="text/css">
#actions{
position: absolute;
top: 5px;
@ -100,34 +19,6 @@
margin: 5px;
}
.unhighlight{
opacity: .1;
z-index: -100;
}
.lasso-menu{
background-color: white;
width: 100px;
height: 100px;
border: 1px solid #DDD;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
line-height: 100px;
text-align: center;
cursor: pointer;
}
.scale-animate{
-moz-transition-property: height, width, left, top;
-moz-transition-duration: .17s;
-moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);
}
.scale-down-animate{
-moz-transition-property: height, width, left, top;
-moz-transition-duration: .26s;
-moz-transition-timing-function: ease-out;
}
</style>
</head>
@ -138,6 +29,7 @@
<a id="tabbar" class="action" href="#">Toggle Tab Bar</a>
</div>
</div>
<script type="text/javascript;version=1.8">
</script>