wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 486262 - Part 1: Provide a visual indicator for tabs that are playing audio; r=dao,jaws

Browse Source
This commit is contained in:
Ehsan Akhgari 2015-07-04 16:24:50 -04:00
parent d73df9eb52
commit 615368bcbe
8 changed files with 289 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/app/profile/firefox.js
View File

@ -495,6 +495,12 @@ pref("browser.tabs.drawInTitlebar", true);
// false return to the adjacent tab (old default)
pref("browser.tabs.selectOwnerOnClose", true);
#ifdef RELEASE_BUILD
pref("browser.tabs.showAudioPlayingIcon", false);
#else
pref("browser.tabs.showAudioPlayingIcon", true);
#endif
pref("browser.ctrlTab.previews", false);
// By default, do not export HTML at shutdown.

39
browser/base/content/tabbrowser.xml
View File

@ -4237,6 +4237,40 @@
this.setIcon(tab, icon);
]]>
</handler>
<handler event="DOMMediaPlaybackStarted">
<![CDATA[
if (!Services.prefs.getBoolPref("browser.tabs.showAudioPlayingIcon") ||
!event.isTrusted)
return;
var browser = event.originalTarget;
var tab = this.getTabForBrowser(browser);
if (!tab)
return;
if (!tab.hasAttribute("soundplaying")) {
tab.setAttribute("soundplaying", true);
this._tabAttrModified(tab, ["soundplaying"]);
}
]]>
</handler>
<handler event="DOMMediaPlaybackStopped">
<![CDATA[
if (!Services.prefs.getBoolPref("browser.tabs.showAudioPlayingIcon") ||
!event.isTrusted)
return;
var browser = event.originalTarget;
var tab = this.getTabForBrowser(browser);
if (!tab)
return;
if (tab.hasAttribute("soundplaying")) {
tab.removeAttribute("soundplaying");
this._tabAttrModified(tab, ["soundplaying"]);
}
]]>
</handler>
</handlers>
</binding>
@ -5651,7 +5685,7 @@
class="tab-icon-image"
validate="never"
role="presentation"/>
<xul:image xbl:inherits="crashed,busy"
<xul:image xbl:inherits="crashed,busy,soundplaying,pinned"
class="tab-icon-overlay"
role="presentation"/>
<xul:label flex="1"
@ -5659,6 +5693,9 @@
xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected,visuallyselected"
class="tab-text tab-label"
role="presentation"/>
<xul:image xbl:inherits="soundplaying,pinned"
class="tab-icon-sound"
role="presentation"/>
<xul:toolbarbutton anonid="close-button"
xbl:inherits="fadein,pinned,selected,visuallyselected"
class="tab-close-button close-icon"/>

2
browser/themes/linux/jar.mn
View File

@ -243,6 +243,8 @@ browser.jar:
skin/classic/browser/tabbrowser/tab-active-middle.png (tabbrowser/tab-active-middle.png)
skin/classic/browser/tabbrowser/tab-arrow-left.png (tabbrowser/tab-arrow-left.png)
skin/classic/browser/tabbrowser/tab-arrow-left-inverted.png (tabbrowser/tab-arrow-left-inverted.png)
skin/classic/browser/tabbrowser/tab-audio.svg (../shared/tabbrowser/tab-audio.svg)
skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg)
skin/classic/browser/tabbrowser/tab-background-end.png (tabbrowser/tab-background-end.png)
skin/classic/browser/tabbrowser/tab-background-middle.png (tabbrowser/tab-background-middle.png)
skin/classic/browser/tabbrowser/tab-background-start.png (tabbrowser/tab-background-start.png)

2
browser/themes/osx/jar.mn
View File

@ -337,6 +337,8 @@ browser.jar:
skin/classic/browser/tabbrowser/tab-arrow-right@2x.png (tabbrowser/tab-arrow-right@2x.png)
skin/classic/browser/tabbrowser/tab-arrow-right-inverted.png (tabbrowser/tab-arrow-right-inverted.png)
skin/classic/browser/tabbrowser/tab-arrow-right-inverted@2x.png (tabbrowser/tab-arrow-right-inverted@2x.png)
skin/classic/browser/tabbrowser/tab-audio.svg (../shared/tabbrowser/tab-audio.svg)
skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg)
skin/classic/browser/tabbrowser/tab-background-end.png (tabbrowser/tab-background-end.png)
skin/classic/browser/tabbrowser/tab-background-end@2x.png (tabbrowser/tab-background-end@2x.png)
skin/classic/browser/tabbrowser/tab-background-middle.png (tabbrowser/tab-background-middle.png)

85
browser/themes/shared/tabbrowser/tab-audio-small.svg Normal file
View File

@ -0,0 +1,85 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<style>
use:not(:target) {
display: none;
}
.icon {
fill: #4d4d4d;
}
.icon.hover {
fill: #333333;
}
.icon.pressed {
fill: #000;
}
.icon.dark {
fill: #ccc;
}
.icon.dark.hover {
fill: #b2b2b2;
}
.icon.dark.pressed {
fill: #fff;
}
.muted {
opacity: .7;
stroke: #4d4d4d;
stroke-width: 0;
}
.muted.hover {
opacity: .85;
stroke: #333333;
}
.muted.pressed {
opacity: 1;
stroke: #000;
}
.muted.dark {
stroke: #ccc;
}
.muted.dark.hover {
stroke: #b2b2b2;
}
.muted.dark.pressed {
stroke: #fff;
}
</style>
<defs>
<clipPath id="clip-wave">
<path d="M 11,7 l 3,-8 l 2,0 l 0,18 l -2,0 l -3,-8 z" />
</clipPath>
<mask id="disabled-cutout">
<rect width="16" height="16" fill="#fff" />
<line x1="4" y1="14" x2="14" y2="4" stroke="#000" stroke-width="2" />
</mask>
<g id="shape-tab-audio">
<rect x="3" y="6" width="5" height="4" rx="1" ry="1" />
<polygon points="5.5,6.5 9,3 9,13 5.5,9.5" />
<path d="M 10,6.5 a 1.5 1.5 0 0,1 0,3 z" />
<path d="M 10,4 a 4 4 0 0,1 0,8 l 0,-1 a 3 3 0 0,0 0,-6 z" clip-path="url(#clip-wave)" />
</g>
<g id="shape-tab-audio-muted">
<g mask="url(#disabled-cutout)">
<rect x="4" y="6" width="5" height="4" rx="1" ry="1" />
<polygon points="6.5,6.5 10,3 10,13 6.5,9.5" />
</g>
<line x1="3" y1="14" x2="13" y2="4" stroke-width="1.5" />
</g>
</defs>
<use id="tab-audio" class="icon" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-hover" class="icon hover" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-pressed" class="icon pressed" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted" class="icon muted" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-hover" class="icon muted hover" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-pressed" class="icon muted pressed" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-dark" class="icon dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-hover" class="icon hover dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-pressed" class="icon pressed dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted-dark" class="icon muted dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-hover" class="icon muted hover dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-pressed" class="icon muted pressed dark" xlink:href="#shape-tab-audio-muted" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

86
browser/themes/shared/tabbrowser/tab-audio.svg Normal file
View File

@ -0,0 +1,86 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<style>
use:not(:target) {
display: none;
}
.icon {
fill: #666;
}
.icon.hover {
fill: #4d4d4d;
}
.icon.pressed {
fill: #000;
}
.icon.dark {
fill: #999;
}
.icon.dark.hover {
fill: #b2b2b2;
}
.icon.dark.pressed {
fill: #fff;
}
.muted {
opacity: .7;
stroke: #666;
stroke-width: 0;
}
.muted.hover {
opacity: .85;
stroke: #4d4d4d;
}
.muted.pressed {
opacity: 1;
stroke: #000;
}
.muted.dark {
stroke: #999;
}
.muted.dark.hover {
stroke: #b2b2b2;
}
.muted.dark.pressed {
stroke: #fff;
}
</style>
<defs>
<clipPath id="clip-wave">
<path d="M 10,7 l 3,-8 l 2,0 l 0,18 l -2,0 l -3,-8 z" />
</clipPath>
<mask id="disabled-cutout">
<rect width="16" height="16" fill="#fff" />
<line x1="4" y1="14" x2="14" y2="4" stroke="#000" stroke-width="2" />
</mask>
<g id="shape-tab-audio">
<rect x="2" y="5" width="6" height="6" rx="2" ry="2" />
<polygon points="4,6 9,2 9,14 4,10" />
<path d="M 10,7 a 1 1 0 0,1 0,2 z" />
<path d="M 10,5 a 3 3 0 0,1 0,6 l 0,-1 a 2 2 0 0,0 0,-4 z" clip-path="url(#clip-wave)" />
<path d="M 10,3 a 5 5 0 0,1 0,10 l 0,-1 a 4 4 0 0,0 0,-8 z" clip-path="url(#clip-wave)" />
</g>
<g id="shape-tab-audio-muted">
<g mask="url(#disabled-cutout)">
<rect x="3" y="5" width="6" height="6" rx="2" ry="2" />
<polygon points="5,6 10,2 10,14 5,10" />
</g>
<line x1="2" y1="13" x2="14" y2="3" stroke-width="1.5" />
</g>
</defs>
<use id="tab-audio" class="icon" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-hover" class="icon hover" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-pressed" class="icon pressed" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted" class="icon muted" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-hover" class="icon muted hover" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-pressed" class="icon muted pressed" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-dark" class="icon dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-hover" class="icon hover dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-dark-pressed" class="icon pressed dark" xlink:href="#shape-tab-audio"/>
<use id="tab-audio-muted-dark" class="icon muted dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-hover" class="icon muted hover dark" xlink:href="#shape-tab-audio-muted" />
<use id="tab-audio-muted-dark-pressed" class="icon muted pressed dark" xlink:href="#shape-tab-audio-muted" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

69
browser/themes/shared/tabs.inc.css
View File

@ -72,6 +72,7 @@
.tab-throbber,
.tab-icon-image,
.tab-icon-sound,
.tab-close-button {
margin-top: 1px;
}
@ -90,7 +91,7 @@
.tab-icon-overlay {
width: 16px;
height: 16px;
margin-top: 10px;
margin-top: -12px;
-moz-margin-start: -16px;
display: none;
}
@ -100,6 +101,34 @@
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}
.tab-icon-overlay[soundplaying][pinned] {
display: -moz-box;
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
border-radius: 8px;
}
.tab-icon-overlay[soundplaying][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover");
background-color: white;
}
.tab-icon-overlay[soundplaying][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed");
background-color: white;
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-dark");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover");
}
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed");
}
.tab-throbber[busy] {
list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
}
@ -119,6 +148,42 @@
padding: 0;
}
.tab-icon-sound {
-moz-margin-start: 4px;
width: 16px;
height: 16px;
padding: 0;
}
.tab-icon-sound:not([soundplaying]),
.tab-icon-sound[pinned] {
display: none;
}
.tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
}
.tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
}
.tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover");
}
#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed");
}
.tab-background,
.tabs-newtab-button {
/* overlap the tab curves */
@ -300,6 +365,8 @@
.tab-background-middle,
.tabs-newtab-button,
.tab-icon-overlay[soundplaying],
.tab-icon-sound,
.tab-close-button {
pointer-events: auto;
}

2
browser/themes/windows/jar.mn
View File

@ -343,6 +343,8 @@ browser.jar:
skin/classic/browser/tabbrowser/tab-arrow-left-XPVista7@2x.png (tabbrowser/tab-arrow-left-XPVista7@2x.png)
skin/classic/browser/tabbrowser/tab-arrow-left-inverted.png (tabbrowser/tab-arrow-left-inverted.png)
skin/classic/browser/tabbrowser/tab-arrow-left-inverted@2x.png (tabbrowser/tab-arrow-left-inverted@2x.png)
skin/classic/browser/tabbrowser/tab-audio.svg (../shared/tabbrowser/tab-audio.svg)
skin/classic/browser/tabbrowser/tab-audio-small.svg (../shared/tabbrowser/tab-audio-small.svg)
skin/classic/browser/tabbrowser/tab-background-start.png (tabbrowser/tab-background-start.png)
skin/classic/browser/tabbrowser/tab-background-start@2x.png (tabbrowser/tab-background-start@2x.png)
skin/classic/browser/tabbrowser/tab-background-middle.png (tabbrowser/tab-background-middle.png)