Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 04:15:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 861465 - Hide overlay buttons when showing app bars or in fullscreen mode. r=mbrubeck

Browse Source
This commit is contained in:
Frank Yan 2013-05-16 22:14:29 -07:00
parent afcc697d9e
commit 1dabec7d89
3 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
browser/metro/base/content/browser.js
View File

@ -98,12 +98,12 @@ var Browser = {
ContentAreaObserver.init();
function fullscreenHandler() {
if (!window.fullScreen)
Elements.toolbar.setAttribute("fullscreen", "true");
if (Browser.selectedBrowser.contentWindow.document.mozFullScreenElement)
Elements.stack.setAttribute("fullscreen", "true");
else
Elements.toolbar.removeAttribute("fullscreen");
Elements.stack.removeAttribute("fullscreen");
}
window.addEventListener("fullscreen", fullscreenHandler, false);
window.addEventListener("mozfullscreenchange", fullscreenHandler, true);
BrowserUI.init();

18
browser/metro/base/content/browser.xul
View File

@ -367,11 +367,16 @@
</toolbar>
</appbar>
<!-- Selection overlay - this should be below any content that can have selectable text -->
<!-- onclick addresses dom bug 835175, str in bug 832957 -->
<box onclick="false" class="selection-overlay-hidden" id="selection-overlay"/>
<!-- Selection overlay - this should be below any content that can have selectable text -->
<!-- onclick addresses dom bug 835175, str in bug 832957 -->
<box onclick="false" class="selection-overlay-hidden" id="selection-overlay"/>
<flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.title;">
<html:div id="overlay-back" class="overlay-button"
observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
<html:div id="overlay-plus" class="overlay-button"
observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
<flyoutpanel id="about-flyoutpanel" headertext="&aboutHeader.title;">
<label id="about-product-label" value="&aboutHeader.product.label;"/>
<label value="&aboutHeader.company.label;"/>
#expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
@ -680,9 +685,4 @@
</hbox>
</stack>
<html:div id="overlay-back" class="overlay-button"
observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
<html:div id="overlay-plus" class="overlay-button"
observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
</window>

21
browser/metro/theme/browser.css
View File

@ -881,34 +881,45 @@ setting[type="radio"] > vbox {
background-position: left 6px center;
}
#stack[fullscreen] > .overlay-button,
#appbar[visible] ~ .overlay-button,
.overlay-button[disabled] {
box-shadow: none;
visibility: collapse;
}
#stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
#stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
#appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
#appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
#overlay-back[disabled]:-moz-locale-dir(ltr),
#overlay-plus[disabled]:-moz-locale-dir(rtl) {
transform: translateX(-60px);
}
#stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
#stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
#appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
#appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
#overlay-plus[disabled]:-moz-locale-dir(ltr),
#overlay-back[disabled]:-moz-locale-dir(rtl) {
transform: translateX(60px);
}
.overlay-button:not([disabled]):hover {
.overlay-button:hover {
background-color: hsla(210,30%,10%,.4);
background-size: 90px;
border-color: hsla(0,0%,100%,.9);
}
#overlay-back:not([disabled]):-moz-locale-dir(ltr):hover,
#overlay-plus:not([disabled]):-moz-locale-dir(rtl):hover {
#overlay-back:-moz-locale-dir(ltr):hover,
#overlay-plus:-moz-locale-dir(rtl):hover {
background-position: right 12px center;
transform: translateX(40px) scale(1.2);
}
#overlay-plus:not([disabled]):-moz-locale-dir(ltr):hover,
#overlay-back:not([disabled]):-moz-locale-dir(rtl):hover {
#overlay-plus:-moz-locale-dir(ltr):hover,
#overlay-back:-moz-locale-dir(rtl):hover {
background-position: left 12px center;
transform: translateX(-40px) scale(1.2);
}