From becd71a8600c7229f765d8eda21c1843c4f4adf1 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Fri, 16 Nov 2018 20:59:11 +0800 Subject: Issue #638 - Part 1: Provide a visual indicator for muting/unmuting tabs --- application/palemoon/themes/linux/browser.css | 73 +++++++++++++++++++++++++++ application/palemoon/themes/linux/jar.mn | 2 + 2 files changed, 75 insertions(+) (limited to 'application/palemoon/themes/linux') diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css index c6587babc..cf48dc819 100644 --- a/application/palemoon/themes/linux/browser.css +++ b/application/palemoon/themes/linux/browser.css @@ -1758,6 +1758,79 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-margin-end: -1px; } +/* Tab sound indicator */ +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound:not(:-moz-any([soundplaying],[muted])), +.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"); +} + +.tab-icon-sound[muted], +.tab-icon-sound[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); +} + +.tab-icon-sound[muted]:hover, +.tab-icon-sound[blocked]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); +} + +.tab-icon-sound[muted]:hover:active, +.tab-icon-sound[blocked]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-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"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked], +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover, +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover:active, +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed"); +} + +.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), +.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { + transition: opacity .3s linear var(--soundplaying-removal-delay); + opacity: 0; +} + /* Tabstrip new tab button */ .tabs-newtab-button, #TabsToolbar > #new-tab-button , diff --git a/application/palemoon/themes/linux/jar.mn b/application/palemoon/themes/linux/jar.mn index 8b2e9dc77..8cb6878e8 100644 --- a/application/palemoon/themes/linux/jar.mn +++ b/application/palemoon/themes/linux/jar.mn @@ -123,6 +123,8 @@ browser.jar: skin/classic/browser/tabbrowser/tab.png (tabbrowser/tab.png) skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png) skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.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) #ifdef MOZ_SERVICES_SYNC skin/classic/browser/sync-16-throbber.png skin/classic/browser/sync-16.png -- cgit v1.2.3 From 719234847ecbab2fe8b4b4c2f153fa0c12bffbc6 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Fri, 16 Nov 2018 22:40:59 +0800 Subject: Issue #638 - Part 4: Add tab sound icon to tab drop-down list --- application/palemoon/themes/linux/browser.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'application/palemoon/themes/linux') diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css index cf48dc819..3439bb3fb 100644 --- a/application/palemoon/themes/linux/browser.css +++ b/application/palemoon/themes/linux/browser.css @@ -1771,6 +1771,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- display: none; } +.alltabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } @@ -1783,6 +1784,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); } +.alltabs-endimage[muted], +.alltabs-endimage[blocked], .tab-icon-sound[muted], .tab-icon-sound[blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); -- cgit v1.2.3 From 66cc7d91a44fd6789b80cd61ee7b84c63d402122 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 10:25:16 +0800 Subject: Issue #638 - Part 7: Remove hover and active states for sound indicator --- application/palemoon/themes/linux/browser.css | 50 ++++----------------------- 1 file changed, 7 insertions(+), 43 deletions(-) (limited to 'application/palemoon/themes/linux') diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css index 3439bb3fb..1eed36741 100644 --- a/application/palemoon/themes/linux/browser.css +++ b/application/palemoon/themes/linux/browser.css @@ -1766,7 +1766,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.tab-icon-sound:not(:-moz-any([soundplaying],[muted])), +.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])), .tab-icon-sound[pinned] { display: none; } @@ -1776,56 +1776,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- 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"); -} - .alltabs-endimage[muted], -.alltabs-endimage[blocked], -.tab-icon-sound[muted], -.tab-icon-sound[blocked] { +.tab-icon-sound[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } -.tab-icon-sound[muted]:hover, -.tab-icon-sound[blocked]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); -} - -.tab-icon-sound[muted]:hover:active, -.tab-icon-sound[blocked]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-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"); +.alltabs-endimage[blocked], +.tab-icon-sound[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked"); } +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying], #TabsToolbar[brighttext] .tab-icon-sound[blocked], #TabsToolbar[brighttext] .tab-icon-sound[muted] { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover, -#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); -} - -#TabsToolbar[brighttext] .tab-icon-sound[blocked]:hover:active, -#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { - list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed"); + filter: invert(1); } .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), -- cgit v1.2.3 From a6b250b47730cc4751cfc5ca9e96a4b74e4d6572 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 10:55:10 +0800 Subject: Issue #638 - Part 8: Add overlay sound icon for pinned tabs - This also moves some styles to tabbrowser.css --- application/palemoon/themes/linux/browser.css | 54 ++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 5 deletions(-) (limited to 'application/palemoon/themes/linux') diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css index 1eed36741..33ae211d6 100644 --- a/application/palemoon/themes/linux/browser.css +++ b/application/palemoon/themes/linux/browser.css @@ -1766,11 +1766,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.tab-icon-sound:not(:-moz-any([soundplaying],[muted],[blocked])), -.tab-icon-sound[pinned] { - display: none; -} - .alltabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); @@ -1798,6 +1793,55 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- opacity: 0; } +/* Tab icon overlay */ +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: -8px; + margin-inline-start: -15px; + margin-inline-end: -1px; + position: relative; +} + +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[blocked]:not([crashed]) { + border-radius: 10px; +} + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover, +.tab-icon-overlay[blocked]:not([crashed]):hover { + background-color: white; +} + +.tab-icon-overlay[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); +} + +.tab-icon-overlay[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +.tab-icon-overlay[blocked] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover), +.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked"); +} + /* Tabstrip new tab button */ .tabs-newtab-button, #TabsToolbar > #new-tab-button , -- cgit v1.2.3 From deb4791e21e9cda73083f0c61c44a51270f433e2 Mon Sep 17 00:00:00 2001 From: FranklinDM Date: Sat, 17 Nov 2018 12:11:34 +0800 Subject: Issue #638 - Part 10: Rename all tabs sound icon to be consistent with others - alltabs => allTabs --- application/palemoon/themes/linux/browser.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'application/palemoon/themes/linux') diff --git a/application/palemoon/themes/linux/browser.css b/application/palemoon/themes/linux/browser.css index 33ae211d6..516677fe6 100644 --- a/application/palemoon/themes/linux/browser.css +++ b/application/palemoon/themes/linux/browser.css @@ -1766,17 +1766,17 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 0; } -.alltabs-endimage[soundplaying], +.allTabs-endimage[soundplaying], .tab-icon-sound[soundplaying] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); } -.alltabs-endimage[muted], +.allTabs-endimage[muted], .tab-icon-sound[muted] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); } -.alltabs-endimage[blocked], +.allTabs-endimage[blocked], .tab-icon-sound[blocked] { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked"); } -- cgit v1.2.3