diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index e5aa95a7a88a..de86ff48dc62 100755 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -6777,6 +6777,14 @@ var gIdentityHandler = { this.refreshIdentityBlock(); }, + updateSharingIndicator() { + let sharing = gBrowser.selectedTab.getAttribute("sharing"); + if (sharing) + this._identityBox.setAttribute("sharing", sharing); + else + this._identityBox.removeAttribute("sharing"); + }, + /** * Attempt to provide proper IDN treatment for host names */ diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index b137c4235db2..1e98e57213ec 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -706,6 +706,7 @@ + diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml index 9557eafa6704..32fb6aa6e037 100644 --- a/browser/base/content/tabbrowser.xml +++ b/browser/base/content/tabbrowser.xml @@ -1225,6 +1225,7 @@ } updateUserContextUIIndicator(); + gIdentityHandler.updateSharingIndicator(); this.tabContainer._setPositionalAttributes(); @@ -1380,6 +1381,9 @@ else tab.removeAttribute("sharing"); this._tabAttrModified(tab, ["sharing"]); + + if (aBrowser == this.mCurrentBrowser) + gIdentityHandler.updateSharingIndicator(); ]]> diff --git a/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css index 028836b5cab3..ee88e5389a5a 100644 --- a/browser/themes/shared/identity-block/identity-block.inc.css +++ b/browser/themes/shared/identity-block/identity-block.inc.css @@ -94,6 +94,49 @@ opacity: 1; } +/* SHARING ICON */ + +#sharing-icon { + width: 16px; + height: 16px; + margin-inline-start: -16px; + position: relative; + display: none; +} + +#identity-box[sharing="camera"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera"); +} + +#identity-box[sharing="microphone"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone"); +} + +#identity-box[sharing="screen"] > #sharing-icon { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen"); +} + +#identity-box[sharing] > #sharing-icon { + display: -moz-box; + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: rgb(224, 41, 29); + animation-delay: -1.5s; +} + +#identity-box[sharing] > #identity-icon, +#sharing-icon { + animation: 3s linear pulse infinite; +} + +@keyframes pulse { + 0%, 16.66%, 83.33%, 100% { + opacity: 0; + } + 33.33%, 66.66% { + opacity: 1; + } +} + /* TRACKING PROTECTION ICON */ #tracking-protection-icon {