mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 06:35:42 +00:00
Bug 677669 - Always show the tab bar in tablet mode [r=mfinkle]
This commit is contained in:
Matt Brubeck
parent
ba619306bd
commit
6fc0ee69ae
@ -186,6 +186,8 @@ var BrowserUI = {
|
||||
},
|
||||
|
||||
lockToolbar: function lockToolbar() {
|
||||
if (Elements.urlbarState.getAttribute("tablet"))
|
||||
return;
|
||||
this._toolbarLocked++;
|
||||
document.getElementById("toolbar-moveable-container").top = "0";
|
||||
if (this._toolbarLocked == 1)
|
||||
@ -379,11 +381,6 @@ var BrowserUI = {
|
||||
return this._toolbarH;
|
||||
},
|
||||
|
||||
get sidebarW() {
|
||||
delete this._sidebarW;
|
||||
return this._sidebarW = Elements.controls.getBoundingClientRect().width;
|
||||
},
|
||||
|
||||
sizeControls: function(windowW, windowH) {
|
||||
// tabs
|
||||
document.getElementById("tabs").resize();
|
||||
@ -553,10 +550,12 @@ var BrowserUI = {
|
||||
|
||||
updateTabletLayout: function updateTabletLayout() {
|
||||
let tabletPref = Services.prefs.getIntPref("browser.ui.layout.tablet");
|
||||
if (tabletPref == 1 || (tabletPref == -1 && Util.isTablet()))
|
||||
if (tabletPref == 1 || (tabletPref == -1 && Util.isTablet())) {
|
||||
this.unlockToolbar();
|
||||
Elements.urlbarState.setAttribute("tablet", "true");
|
||||
else
|
||||
} else {
|
||||
Elements.urlbarState.removeAttribute("tablet");
|
||||
}
|
||||
},
|
||||
|
||||
update: function(aState) {
|
||||
|
||||
@ -1038,7 +1038,7 @@ var Browser = {
|
||||
},
|
||||
|
||||
tryFloatToolbar: function tryFloatToolbar(dx, dy) {
|
||||
if (this.floatedWhileDragging)
|
||||
if (this.floatedWhileDragging || Elements.urlbarState.getAttribute("tablet"))
|
||||
return;
|
||||
|
||||
let [leftvis, ritevis, leftw, ritew] = Browser.computeSidebarVisibility(dx, dy);
|
||||
@ -2899,7 +2899,6 @@ Tab.prototype = {
|
||||
let notification = this._notification = document.createElement("notificationbox");
|
||||
notification.classList.add("inputHandler");
|
||||
|
||||
// Create the browser using the current width the dynamically size the height
|
||||
let browser = this._browser = document.createElement("browser");
|
||||
browser.setAttribute("class", "viewable-width viewable-height");
|
||||
this._chromeTab.linkedBrowser = browser;
|
||||
@ -3155,15 +3154,18 @@ function rendererFactory(aBrowser, aCanvas) {
|
||||
*/
|
||||
var ViewableAreaObserver = {
|
||||
get width() {
|
||||
return this._width || window.innerWidth;
|
||||
let width = this._width || window.innerWidth;
|
||||
if (Elements.urlbarState.getAttribute("tablet")) {
|
||||
let sidebarWidth = Math.round(Elements.tabs.getBoundingClientRect().width);
|
||||
width -= sidebarWidth;
|
||||
}
|
||||
return width;
|
||||
},
|
||||
|
||||
get height() {
|
||||
let height = (this._height || window.innerHeight);
|
||||
if (Elements.urlbarState.getAttribute("tablet")) {
|
||||
let toolbarHeight = Math.round(document.getElementById("toolbar-main").getBoundingClientRect().height);
|
||||
height -= toolbarHeight;
|
||||
}
|
||||
if (Elements.urlbarState.getAttribute("tablet"))
|
||||
height -= BrowserUI.toolbarH;
|
||||
return height;
|
||||
},
|
||||
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
<stack flex="1" id="stack">
|
||||
<scrollbox id="controls-scrollbox" style="overflow: hidden; -moz-box-orient: horizontal; position: relative;" flex="1" observes="bcast_urlbarState">
|
||||
<vbox id="tabs-sidebar" class="sidebar" observes="bcast_uidiscovery">
|
||||
<spacer class="toolbar-height"/>
|
||||
<spacer class="toolbar-height" id="tabs-spacer" observes="bcast_urlbarState"/>
|
||||
<!-- Left toolbar -->
|
||||
<vbox id="tabs-container" class="panel-dark" flex="1">
|
||||
<vbox id="tabs" flex="1"
|
||||
@ -213,7 +213,7 @@
|
||||
</vbox>
|
||||
|
||||
<!-- Page Area -->
|
||||
<stack>
|
||||
<stack id="page-stack" observes="bcast_urlbarState">
|
||||
<scrollbox id="page-scrollbox">
|
||||
<vbox>
|
||||
<!-- Main Toolbar -->
|
||||
|
||||
@ -1575,46 +1575,6 @@ setting {
|
||||
to { -moz-transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Tablet mode */
|
||||
|
||||
.spacer-actionbar,
|
||||
.button-actionbar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.button-actionbar[disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button-actionbar:hover:active {
|
||||
background-color: #8db8d8;
|
||||
}
|
||||
|
||||
#toolbar-main[tablet="true"] > .spacer-actionbar,
|
||||
#toolbar-main[tablet="true"] > .button-actionbar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #controls-sidebar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar {
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
|
||||
visibility: collapse;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
|
||||
right: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
|
||||
left: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Text selection handles */
|
||||
|
||||
#selectionhandle-start,
|
||||
@ -1640,4 +1600,6 @@ setting {
|
||||
#search-engines-popup {
|
||||
max-width: -moz-calc(@tablet_panel_minwidth@);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%include tablet.css
|
||||
|
||||
@ -1545,46 +1545,6 @@ setting {
|
||||
to { -moz-transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Tablet mode */
|
||||
|
||||
.spacer-actionbar,
|
||||
.button-actionbar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.button-actionbar[disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button-actionbar:hover:active {
|
||||
background-color: #8db8d8;
|
||||
}
|
||||
|
||||
#toolbar-main[tablet="true"] > .spacer-actionbar,
|
||||
#toolbar-main[tablet="true"] > .button-actionbar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #controls-sidebar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar {
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
|
||||
visibility: collapse;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
|
||||
right: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
|
||||
left: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Text selection handles */
|
||||
|
||||
#selectionhandle-start,
|
||||
@ -1603,11 +1563,4 @@ setting {
|
||||
list-style-image: url("chrome://browser/skin/images/handle-end.png");
|
||||
}
|
||||
|
||||
@media (min-width: @tablet_panel_minwidth@) {
|
||||
#awesome-panels {
|
||||
-moz-box-shadow: 0px 0px @shadow_width_small@ black;
|
||||
}
|
||||
#search-engines-popup {
|
||||
max-width: -moz-calc(@tablet_panel_minwidth@);
|
||||
}
|
||||
}
|
||||
%include ../tablet.css
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
|
||||
%filter substitution
|
||||
%include defines.inc
|
||||
%define honeycomb 1
|
||||
|
||||
/* main toolbar (URL bar) -------------------------------------------------- */
|
||||
#toolbar-main {
|
||||
@ -1694,42 +1695,6 @@ setting {
|
||||
to { -moz-transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* Tablet mode */
|
||||
|
||||
.spacer-actionbar,
|
||||
.button-actionbar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.button-actionbar[disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#toolbar-main[tablet="true"] > .spacer-actionbar,
|
||||
#toolbar-main[tablet="true"] > .button-actionbar {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #controls-sidebar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar {
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: @touch_button_xlarge@;
|
||||
visibility: collapse;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
|
||||
left: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
|
||||
right: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Text selection handles */
|
||||
|
||||
#selectionhandle-start,
|
||||
@ -1814,3 +1779,5 @@ setting {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
%include ../tablet.css
|
||||
|
||||
70
mobile/themes/core/tablet.css
Normal file
70
mobile/themes/core/tablet.css
Normal file
@ -0,0 +1,70 @@
|
||||
|
||||
.spacer-actionbar,
|
||||
.button-actionbar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.button-actionbar[disabled="true"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
%ifndef honeycomb
|
||||
.button-actionbar:hover:active {
|
||||
background-color: #8db8d8;
|
||||
}
|
||||
%endif
|
||||
|
||||
#toolbar-main[tablet="true"] > .spacer-actionbar,
|
||||
#toolbar-main[tablet="true"] > .button-actionbar {
|
||||
visibility: visible;
|
||||
}
|
||||
#toolbar-main[tablet="true"] > #tool-tabs {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #controls-sidebar {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#tabs-spacer[tablet="true"] {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
@media (@orientation@: portrait) {
|
||||
#toolbar-main[tablet="true"] > #tool-tabs {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar {
|
||||
border: none;
|
||||
%ifdef honeycomb
|
||||
top: @touch_button_xlarge@;
|
||||
%else
|
||||
top: -moz-calc(@touch_button_xlarge@ + @margin_normal@);
|
||||
%endif
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(ltr) {
|
||||
left: 0;
|
||||
}
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar:-moz-locale-dir(rtl) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#controls-scrollbox[tablet="true"] > #tabs-sidebar[open] {
|
||||
position: fixed;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
%ifndef honeycomb
|
||||
@media (min-width: @tablet_panel_minwidth@) {
|
||||
#awesome-panels {
|
||||
-moz-box-shadow: 0px 0px @shadow_width_small@ black;
|
||||
}
|
||||
#search-engines-popup {
|
||||
max-width: -moz-calc(@tablet_panel_minwidth@);
|
||||
}
|
||||
}
|
||||
%endif
|
||||
Loading…
Reference in New Issue
Block a user