Bug 680077 - Update tabs pane for Honeycomb theme (r=mbrubeck)

This commit is contained in:
Lucas Rocha 2011-09-07 13:47:39 -07:00
Родитель d9eeb81652
Коммит 48ce3953de
27 изменённых файлов: 143 добавлений и 18 удалений

Просмотреть файл

@ -555,6 +555,21 @@ var BrowserUI = {
} else { } else {
Elements.urlbarState.removeAttribute("tablet"); Elements.urlbarState.removeAttribute("tablet");
} }
// Tablet mode changes the size of the thumbnails
// in the tabs container. Hence we have to force a
// thumbnail update on all tabs.
setTimeout(function(self) {
self._updateAllTabThumbnails();
}, 0, this);
},
_updateAllTabThumbnails: function() {
let tabs = Browser.tabs;
tabs.forEach(function(tab) {
tab.updateThumbnail({ force: true });
});
}, },
update: function(aState) { update: function(aState) {

Просмотреть файл

@ -200,14 +200,14 @@
<vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery"> <vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery">
<spacer class="toolbar-height" id="tabs-spacer" observes="bcast_urlbarState"/> <spacer class="toolbar-height" id="tabs-spacer" observes="bcast_urlbarState"/>
<!-- Left toolbar --> <!-- Left toolbar -->
<vbox id="tabs-container" class="panel-dark" flex="1"> <vbox id="tabs-container" class="panel-dark" flex="1" observes="bcast_urlbarState">
<vbox id="tabs" flex="1" <vbox id="tabs" flex="1" observes="bcast_urlbarState"
onselect="BrowserUI.selectTab(this);" onselect="BrowserUI.selectTab(this);"
onreloadtab="BrowserUI.undoCloseTab()" onreloadtab="BrowserUI.undoCloseTab()"
onclosetab="BrowserUI.closeTab(this)" onclosetab="BrowserUI.closeTab(this)"
onclosereloadtab="this._container.removeTab(this)"/> onclosereloadtab="this._container.removeTab(this)"/>
<hbox id="tabs-controls"> <hbox id="tabs-controls">
<toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab"/> <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab" observes="bcast_urlbarState"/>
</hbox> </hbox>
</vbox> </vbox>
</vbox> </vbox>

Просмотреть файл

@ -7,13 +7,13 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="documenttab"> <binding id="documenttab">
<content> <content observes="bcast_urlbarState">
<xul:stack anonid="page" class="documenttab-container" flex="1"> <xul:stack anonid="page" class="documenttab-container" flex="1">
<html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" moz-opaque="true" empty="true" <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" moz-opaque="true" empty="true"
onclick="document.getBindingParent(this)._onClick()"/> onclick="document.getBindingParent(this)._onClick()" observes="bcast_urlbarState"/>
<xul:hbox anonid="reload" class="documenttab-reload" left="0" top="0" onclick="document.getBindingParent(this)._onUndo();"/> <xul:hbox anonid="reload" class="documenttab-reload" left="0" top="0" onclick="document.getBindingParent(this)._onUndo();" observes="bcast_urlbarState"/>
<xul:hbox anonid="close-container" class="documenttab-close-container" start="-16" top="0" align="center" onclick="document.getBindingParent(this)._onClose()"> <xul:hbox anonid="close-container" class="documenttab-close-container" top="0" align="center" onclick="document.getBindingParent(this)._onClose()" observes="bcast_urlbarState">
<xul:image anonid="close" class="documenttab-close" mousethrough="always"/> <xul:image anonid="close" class="documenttab-close" mousethrough="always" observes="bcast_urlbarState"/>
</xul:hbox> </xul:hbox>
</xul:stack> </xul:stack>
</content> </content>
@ -27,17 +27,41 @@
<constructor> <constructor>
<![CDATA[ <![CDATA[
let thumbnail = this.thumbnail; this.updateTabletLayout(this.thumbnail);
let reload = this._reload;
let closeContainer = this._closeContainer;
thumbnail.width = reload.width = 104;
thumbnail.height = reload.height = 65;
closeContainer.width = 55;
closeContainer.height = 65;
]]> ]]>
</constructor> </constructor>
<method name="updateTabletLayout">
<parameter name="thumbnail"/>
<body>
<![CDATA[
let tabWidth, tabHeight, closeWidth, closeHeight;
if (Util.isTablet()) {
tabWidth = 176;
tabHeight = 110;
closeWidth = 41;
closeHeight = 117;
} else {
tabWidth = 104;
tabHeight = 65;
closeWidth = 55;
closeHeight = 65;
}
if (tabWidth != thumbnail.width) {
let reload = this._reload;
let closeContainer = this._closeContainer;
thumbnail.width = reload.width = tabWidth;
thumbnail.height = reload.height = tabHeight;
closeContainer.width = closeWidth;
closeContainer.height = closeHeight;
}
]]>
</body>
</method>
<method name="_onClick"> <method name="_onClick">
<body> <body>
<![CDATA[ <![CDATA[
@ -77,14 +101,18 @@
<body> <body>
<![CDATA[ <![CDATA[
let thumbnail = this.thumbnail; let thumbnail = this.thumbnail;
// Ensure the thumbnail will have the correct
// dimensions for tablet and phone modes
this.updateTabletLayout(thumbnail);
if (browser.currentURI.spec == "about:blank") { if (browser.currentURI.spec == "about:blank") {
thumbnail.setAttribute("empty", "true"); thumbnail.setAttribute("empty", "true");
return; return;
} }
thumbnail.removeAttribute("empty"); thumbnail.removeAttribute("empty");
const tabWidth = 104; const tabWidth = thumbnail.width;
const tabHeight = 65; const tabHeight = thumbnail.height;
let ratio = tabHeight / tabWidth; let ratio = tabHeight / tabWidth;
if (browser.contentDocumentWidth > 0) if (browser.contentDocumentWidth > 0)

Просмотреть файл

@ -986,6 +986,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
.documenttab-close-container { .documenttab-close-container {
position: relative; position: relative;
left: -16px; left: -16px;
-moz-margin-start: -16px;
-moz-margin-end: 49px; -moz-margin-end: 49px;
} }

Просмотреть файл

@ -935,6 +935,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
.documenttab-close-container { .documenttab-close-container {
position: relative; position: relative;
left: -16px; left: -16px;
-moz-margin-start: -16px;
-moz-margin-end: 49px; -moz-margin-end: 49px;
} }

Двоичные данные
mobile/themes/core/gingerbread/images/close-active-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичные данные
mobile/themes/core/gingerbread/images/close-background-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 546 B

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 263 B

Просмотреть файл

@ -1019,6 +1019,7 @@ documenttab[selected="true"] > stack > .documenttab-thumbnail {
.documenttab-close-container { .documenttab-close-container {
position: relative; position: relative;
left: -16px; left: -16px;
-moz-margin-start: -16px;
-moz-margin-end: 49px; -moz-margin-end: 49px;
} }

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 2.0 KiB

После

Ширина:  |  Высота:  |  Размер: 1.2 KiB

Двоичные данные
mobile/themes/core/honeycomb/images/close-active-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичные данные
mobile/themes/core/honeycomb/images/close-background-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 2.2 KiB

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
mobile/themes/core/honeycomb/images/close-default-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 2.1 KiB

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 546 B

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 940 B

После

Ширина:  |  Высота:  |  Размер: 208 B

Двоичные данные
mobile/themes/core/honeycomb/images/newtab-default-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 263 B

Двоичные данные
mobile/themes/core/images/close-active-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичные данные
mobile/themes/core/images/close-background-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичные данные
mobile/themes/core/images/close-default-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 626 B

Двоичные данные
mobile/themes/core/images/close-inactive-tab-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 546 B

Двоичные данные
mobile/themes/core/images/newtab-default-tablet-hdpi.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 263 B

Просмотреть файл

@ -90,6 +90,7 @@ chrome.jar:
skin/images/row-header-bg.png (images/row-header-bg.png) skin/images/row-header-bg.png (images/row-header-bg.png)
skin/images/console-default-hdpi.png (images/console-default-hdpi.png) skin/images/console-default-hdpi.png (images/console-default-hdpi.png)
skin/images/newtab-default-hdpi.png (images/newtab-default-hdpi.png) skin/images/newtab-default-hdpi.png (images/newtab-default-hdpi.png)
skin/images/newtab-default-tablet-hdpi.png (images/newtab-default-tablet-hdpi.png)
skin/images/tab-active-hdpi.png (images/tab-active-hdpi.png) skin/images/tab-active-hdpi.png (images/tab-active-hdpi.png)
skin/images/tab-inactive-hdpi.png (images/tab-inactive-hdpi.png) skin/images/tab-inactive-hdpi.png (images/tab-inactive-hdpi.png)
skin/images/tab-closed-hdpi.png (images/tab-closed-hdpi.png) skin/images/tab-closed-hdpi.png (images/tab-closed-hdpi.png)
@ -110,8 +111,12 @@ chrome.jar:
skin/images/unlocked-hdpi.png (images/unlocked-hdpi.png) skin/images/unlocked-hdpi.png (images/unlocked-hdpi.png)
skin/images/locked-hdpi.png (images/locked-hdpi.png) skin/images/locked-hdpi.png (images/locked-hdpi.png)
skin/images/close-default-hdpi.png (images/close-default-hdpi.png) skin/images/close-default-hdpi.png (images/close-default-hdpi.png)
skin/images/close-default-tablet-hdpi.png (images/close-default-tablet-hdpi.png)
skin/images/close-active-hdpi.png (images/close-active-hdpi.png) skin/images/close-active-hdpi.png (images/close-active-hdpi.png)
skin/images/close-active-tablet-hdpi.png (images/close-active-tablet-hdpi.png)
skin/images/close-inactive-tab-hdpi.png (images/close-inactive-tab-hdpi.png) skin/images/close-inactive-tab-hdpi.png (images/close-inactive-tab-hdpi.png)
skin/images/close-inactive-tab-tablet-hdpi.png (images/close-inactive-tab-tablet-hdpi.png)
skin/images/close-background-hdpi.png (images/close-background-hdpi.png)
skin/images/check-30.png (images/check-30.png) skin/images/check-30.png (images/check-30.png)
skin/images/search-glass-30.png (images/search-glass-30.png) skin/images/search-glass-30.png (images/search-glass-30.png)
skin/images/search-clear-30.png (images/search-clear-30.png) skin/images/search-clear-30.png (images/search-clear-30.png)
@ -214,6 +219,7 @@ chrome.jar:
skin/gingerbread/images/row-header-bg.png (gingerbread/images/row-header-bg.png) skin/gingerbread/images/row-header-bg.png (gingerbread/images/row-header-bg.png)
skin/gingerbread/images/console-default-hdpi.png (gingerbread/images/console-default-hdpi.png) skin/gingerbread/images/console-default-hdpi.png (gingerbread/images/console-default-hdpi.png)
skin/gingerbread/images/newtab-default-hdpi.png (gingerbread/images/newtab-default-hdpi.png) skin/gingerbread/images/newtab-default-hdpi.png (gingerbread/images/newtab-default-hdpi.png)
skin/gingerbread/images/newtab-default-tablet-hdpi.png (gingerbread/images/newtab-default-tablet-hdpi.png)
skin/gingerbread/images/tab-active-hdpi.png (gingerbread/images/tab-active-hdpi.png) skin/gingerbread/images/tab-active-hdpi.png (gingerbread/images/tab-active-hdpi.png)
skin/gingerbread/images/tab-inactive-hdpi.png (gingerbread/images/tab-inactive-hdpi.png) skin/gingerbread/images/tab-inactive-hdpi.png (gingerbread/images/tab-inactive-hdpi.png)
skin/gingerbread/images/tab-closed-hdpi.png (gingerbread/images/tab-closed-hdpi.png) skin/gingerbread/images/tab-closed-hdpi.png (gingerbread/images/tab-closed-hdpi.png)
@ -233,8 +239,12 @@ chrome.jar:
skin/gingerbread/images/unlocked-hdpi.png (gingerbread/images/unlocked-hdpi.png) skin/gingerbread/images/unlocked-hdpi.png (gingerbread/images/unlocked-hdpi.png)
skin/gingerbread/images/locked-hdpi.png (gingerbread/images/locked-hdpi.png) skin/gingerbread/images/locked-hdpi.png (gingerbread/images/locked-hdpi.png)
skin/gingerbread/images/close-default-hdpi.png (gingerbread/images/close-default-hdpi.png) skin/gingerbread/images/close-default-hdpi.png (gingerbread/images/close-default-hdpi.png)
skin/gingerbread/images/close-default-tablet-hdpi.png (gingerbread/images/close-default-tablet-hdpi.png)
skin/gingerbread/images/close-active-hdpi.png (gingerbread/images/close-active-hdpi.png) skin/gingerbread/images/close-active-hdpi.png (gingerbread/images/close-active-hdpi.png)
skin/gingerbread/images/close-active-tablet-hdpi.png (gingerbread/images/close-active-tablet-hdpi.png)
skin/gingerbread/images/close-background-hdpi.png (gingerbread/images/close-background-hdpi.png)
skin/gingerbread/images/close-inactive-tab-hdpi.png (gingerbread/images/close-inactive-tab-hdpi.png) skin/gingerbread/images/close-inactive-tab-hdpi.png (gingerbread/images/close-inactive-tab-hdpi.png)
skin/gingerbread/images/close-inactive-tab-tablet-hdpi.png (gingerbread/images/close-inactive-tab-tablet-hdpi.png)
skin/gingerbread/images/check-30.png (gingerbread/images/check-30.png) skin/gingerbread/images/check-30.png (gingerbread/images/check-30.png)
skin/gingerbread/images/search-glass-30.png (gingerbread/images/search-glass-30.png) skin/gingerbread/images/search-glass-30.png (gingerbread/images/search-glass-30.png)
skin/gingerbread/images/search-clear-30.png (gingerbread/images/search-clear-30.png) skin/gingerbread/images/search-clear-30.png (gingerbread/images/search-clear-30.png)
@ -339,6 +349,7 @@ chrome.jar:
skin/honeycomb/images/row-header-bg.png (honeycomb/images/row-header-bg.png) skin/honeycomb/images/row-header-bg.png (honeycomb/images/row-header-bg.png)
skin/honeycomb/images/console-default-hdpi.png (honeycomb/images/console-default-hdpi.png) skin/honeycomb/images/console-default-hdpi.png (honeycomb/images/console-default-hdpi.png)
skin/honeycomb/images/newtab-default-hdpi.png (honeycomb/images/newtab-default-hdpi.png) skin/honeycomb/images/newtab-default-hdpi.png (honeycomb/images/newtab-default-hdpi.png)
skin/honeycomb/images/newtab-default-tablet-hdpi.png (honeycomb/images/newtab-default-tablet-hdpi.png)
skin/honeycomb/images/tab-active-hdpi.png (honeycomb/images/tab-active-hdpi.png) skin/honeycomb/images/tab-active-hdpi.png (honeycomb/images/tab-active-hdpi.png)
skin/honeycomb/images/tab-inactive-hdpi.png (honeycomb/images/tab-inactive-hdpi.png) skin/honeycomb/images/tab-inactive-hdpi.png (honeycomb/images/tab-inactive-hdpi.png)
skin/honeycomb/images/tab-closed-hdpi.png (honeycomb/images/tab-closed-hdpi.png) skin/honeycomb/images/tab-closed-hdpi.png (honeycomb/images/tab-closed-hdpi.png)
@ -359,8 +370,12 @@ chrome.jar:
skin/honeycomb/images/unlocked-hdpi.png (honeycomb/images/unlocked-hdpi.png) skin/honeycomb/images/unlocked-hdpi.png (honeycomb/images/unlocked-hdpi.png)
skin/honeycomb/images/locked-hdpi.png (honeycomb/images/locked-hdpi.png) skin/honeycomb/images/locked-hdpi.png (honeycomb/images/locked-hdpi.png)
skin/honeycomb/images/close-default-hdpi.png (honeycomb/images/close-default-hdpi.png) skin/honeycomb/images/close-default-hdpi.png (honeycomb/images/close-default-hdpi.png)
skin/honeycomb/images/close-default-tablet-hdpi.png (honeycomb/images/close-default-tablet-hdpi.png)
skin/honeycomb/images/close-active-hdpi.png (honeycomb/images/close-active-hdpi.png) skin/honeycomb/images/close-active-hdpi.png (honeycomb/images/close-active-hdpi.png)
skin/honeycomb/images/close-active-tablet-hdpi.png (honeycomb/images/close-active-tablet-hdpi.png)
skin/honeycomb/images/close-background-hdpi.png (honeycomb/images/close-background-hdpi.png)
skin/honeycomb/images/close-inactive-tab-hdpi.png (honeycomb/images/close-inactive-tab-hdpi.png) skin/honeycomb/images/close-inactive-tab-hdpi.png (honeycomb/images/close-inactive-tab-hdpi.png)
skin/honeycomb/images/close-inactive-tab-tablet-hdpi.png (honeycomb/images/close-inactive-tab-tablet-hdpi.png)
skin/honeycomb/images/check-30.png (images/check-30.png) skin/honeycomb/images/check-30.png (images/check-30.png)
skin/honeycomb/images/check-selected-hdpi.png (honeycomb/images/check-selected-hdpi.png) skin/honeycomb/images/check-selected-hdpi.png (honeycomb/images/check-selected-hdpi.png)
skin/honeycomb/images/check-unselected-hdpi.png (honeycomb/images/check-unselected-hdpi.png) skin/honeycomb/images/check-unselected-hdpi.png (honeycomb/images/check-unselected-hdpi.png)

Просмотреть файл

@ -30,6 +30,70 @@
visibility: collapse; visibility: collapse;
} }
#tabs-container[tablet="true"] {
-moz-border-end: 0px;
background: #000;
}
#tabs[tablet="true"] > scrollbox {
max-width: 200px;
}
#tabs[tablet="true"] .tabs-list {
-moz-column-width: 200px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
}
documenttab[tablet="true"] {
width: 200px;
padding: @padding_xxnormal@;
-moz-margin-start: 0px;
background: none;
}
documenttab[tablet="true"][selected="true"] {
background: none;
}
.documenttab-thumbnail[tablet="true"] {
border-radius: @border_radius_tiny@;
}
.documenttab-close-container[tablet="true"] {
left: 0px;
-moz-margin-end: 0px;
-moz-margin-start: 135px;
-moz-box-pack: end;
-moz-box-align: center;
}
documenttab[selected="true"] > stack > .documenttab-close-container[tablet="true"] {
background: url("chrome://browser/skin/images/close-background-hdpi.png");
background-repeat: no-repeat;
background-position: right;
-moz-margin-end: -@padding_xxnormal@;
padding-right: 2px;
}
.documenttab-close[tablet="true"] {
width: 30px;
height: 44px;
list-style-image: url("chrome://browser/skin/images/close-inactive-tab-tablet-hdpi.png");
}
documenttab[selected="true"] > stack > hbox > .documenttab-close[tablet="true"] {
list-style-image: url("chrome://browser/skin/images/close-default-tablet-hdpi.png");
}
.documenttab-close-container:hover:active > .documenttab-close[tablet="true"] {
list-style-image: url("chrome://browser/skin/images/close-active-tablet-hdpi.png");
}
#newtab-button[tablet="true"] {
list-style-image: url("images/newtab-default-tablet-hdpi.png");
}
@media (@orientation@: portrait) { @media (@orientation@: portrait) {
#toolbar-main[tablet="true"] > #tool-tabs { #toolbar-main[tablet="true"] > #tool-tabs {
visibility: visible; visibility: visible;