Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

.github/workflows/twilight-release-schedule.yml

@@ -14,7 +14,7 @@ on:
         description: 'Use sccache'
         required: false
         type: boolean
-        default: true
+        default: false
 
 jobs:
   twilight-release-schedule:

.github/workflows/windows-release-build.yml

@@ -280,21 +280,16 @@ jobs:
         if: ${{ !inputs.generate-gpo }}
         run: |
           set -x
-          if test "${{ matrix.arch }}" = "aarch64"; then
+          mkdir obj-${{ matrix.arch }}-pc-windows-msvc/
-            find engine/obj-aarch64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type d -not -name 'dist' -exec rm -rf {} \;
+          cp -r --no-dereference engine/obj-${{ matrix.arch }}-pc-windows-msvc/* obj-${{ matrix.arch }}-pc-windows-msvc/ || true
-            find engine/obj-aarch64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type f -not -name 'dist' -exec rm -f {} \;
-          else
-            find engine/obj-x86_64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type d -not -name 'dist' -exec rm -rf {} \;
-            find engine/obj-x86_64-pc-windows-msvc/ -mindepth 1 -maxdepth 1 -type f -not -name 'dist' -exec rm -f {} \;
-          fi
 
       - name: Upload dist object
         if: ${{ !inputs.generate-gpo }}
         uses: actions/upload-artifact@v4
         with:
-          retention-days: 5
+          retention-days: 2
           name: windows-x64-obj-${{ matrix.arch == 'aarch64' && 'arm64' || matrix.arch }}
-          path: engine/obj-${{ matrix.arch == 'aarch64' && 'aarch64' || 'x86_64' }}-pc-windows-msvc/
+          path: obj-${{ matrix.arch }}-pc-windows-msvc
 
       - name: Upload artifact (if Twilight branch, binary)
         if: ${{ inputs.release-branch == 'twilight' && !inputs.generate-gpo }}

build/winsign/sign.ps1

@@ -6,6 +6,7 @@ param(
 $ErrorActionPreference = "Stop"
 
 echo "Preparing environment"
+git pull --recurse
 mkdir windsign-temp -ErrorAction SilentlyContinue
 
 # Download in parallel
@@ -18,18 +19,34 @@ mkdir windsign-temp -ErrorAction SilentlyContinue
 #    echo "Downloaded git objects repo to"
 #} -Verbose -ArgumentList $PWD -Debug
 
+Start-Job -Name "DownloadGitl10n" -ScriptBlock {
+    param($PWD)
+    cd $PWD
+    $env:ZEN_L10N_CURR_DIR=[regex]::replace($PWD, "^([A-Z]):", { "/" + $args.value.Substring(0, 1).toLower() }) -replace "\\", "/"
+    C:\mozilla-build\start-shell.bat $PWD\scripts\download-language-packs.sh
+    echo "Fetched l10n and firefox's one"
+} -Verbose -ArgumentList $PWD -Debug
+
 gh run download $GithubRunId --name windows-x64-obj-arm64 -D windsign-temp\windows-x64-obj-arm64
 echo "Downloaded arm64 artifacts"
 gh run download $GithubRunId --name windows-x64-obj-x86_64 -D windsign-temp\windows-x64-obj-x86_64
 echo "Downloaded x86_64 artifacts"
 
-
+Wait-Job -Name "DownloadGitl10n"
-#Wait-Job -Name "DownloadGitObjectsRepo"
 
 mkdir engine\obj-x86_64-pc-windows-msvc\ -ErrorAction SilentlyContinue
 
 surfer -- ci --brand release
 
+# Collect all .exe and .dll files into a list
+$files = Get-ChildItem windsign-temp\windows-x64-obj-x86_64\ -Recurse -Include *.exe
+$files += Get-ChildItem windsign-temp\windows-x64-obj-x86_64\ -Recurse -Include *.dll
+
+$files = Get-ChildItem windsign-temp\windows-x64-obj-arm64\ -Recurse -Include *.exe
+$files += Get-ChildItem windsign-temp\windows-x64-obj-arm64\ -Recurse -Include *.dll
+
+signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
+
 function SignAndPackage($name) {
     echo "Executing on $name"
     rmdir .\dist -Recurse -ErrorAction SilentlyContinue
@@ -37,13 +54,7 @@ function SignAndPackage($name) {
     cp windsign-temp\windows-x64-obj-$name engine\obj-x86_64-pc-windows-msvc\ -Recurse
     echo "Signing $name"
 
-    # Collect all .exe and .dll files into a list
-    $files = Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.exe
-    $files += Get-ChildItem engine\obj-x86_64-pc-windows-msvc\ -Recurse -Include *.dll
-
-    signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
     echo "Packaging $name"
-    $env:SURFER_SIGNING_MODE="sign"
     $env:MAR="..\\build\\winsign\\mar.exe"
     if ($name -eq "arm64") {
         $env:SURFER_COMPAT="aarch64"
@@ -61,7 +72,6 @@ function SignAndPackage($name) {
     #  - update_manifest/*
     #  - windows.mar
     #  - zen.installer.exe
-    #  - zen.win-x86_64.zip
     echo "Creating tar for $name"
     rm .\windsign-temp\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
     mkdir windsign-temp\windows-x64-signed-$name
@@ -82,27 +92,9 @@ function SignAndPackage($name) {
         mv .\dist\zen.installer.exe windsign-temp\windows-x64-signed-$name\zen.installer.exe
     }
 
-    # Move the zip
-    echo "Moving zip for $name"
-    if ($name -eq "arm64") {
-        mv (Get-Item .\dist\*.en-US.win64-aarch64.zip) windsign-temp\windows-x64-signed-$name\zen.win-arm64.zip
-    } else {
-        mv (Get-Item .\dist\*.en-US.win64.zip) windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
-    }
-
-    # Extract the zip, sign everything inside, and repackage it
-    #Expand-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name.zip -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name
-    #rm windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
-    #$files = Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.exe
-    #$files += Get-ChildItem windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -Include *.dll
-    #signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
-    #Compress-Archive -Path windsign-temp\windows-x64-signed-$name\zen.win-$name -DestinationPath windsign-temp\windows-x64-signed-$name\zen.win-$name.zip
-    rmdir windsign-temp\windows-x64-signed-$name\zen.win-$name -Recurse -ErrorAction SilentlyContinue
-
     # Move the manifest
     mv .\dist\update\. windsign-temp\windows-x64-signed-$name\update_manifest
 
-    echo "Invoking tar for $name"
     # note: We need to sign it into a parent folder, called windows-x64-signed-$name
     rmdir .\windsign-temp\windows-binaries\windows-x64-signed-$name -Recurse -ErrorAction SilentlyContinue
     mv windsign-temp\windows-x64-signed-$name .\windsign-temp\windows-binaries -Force
@@ -113,6 +105,9 @@ function SignAndPackage($name) {
 SignAndPackage arm64
 SignAndPackage x86_64
 
+$files = Get-ChildItem .\windsign-temp\windows-binaries -Recurse -Include *.exe
+signtool.exe sign /n "$SignIdentity" /t http://time.certum.pl/ /fd sha256 /v $files
+
 echo "All artifacts signed and packaged, ready for release!"
 echo "Commiting the changes to the repository"
 cd windsign-temp\windows-binaries

scripts/download-language-packs.sh

@@ -1,5 +1,9 @@
 set -ex
 
+if ! [ -z "$ZEN_L10N_CURR_DIR" ]; then
+  cd $ZEN_L10N_CURR_DIR
+fi
+
 CURRENT_DIR=$(pwd)
 
 git config --global init.defaultBranch main

src/browser/base/content/zen-media-controls.inc.xhtml

@@ -36,6 +36,12 @@
           class="toolbarbutton-1" />
         <toolbarbutton id="zen-media-mute-button"
           class="toolbarbutton-1" />
+        <hbox id="media-device-buttons">
+          <toolbarbutton id="zen-media-mute-mic-button"
+            class="toolbarbutton-1" />
+          <toolbarbutton id="zen-media-mute-camera-button"
+            class="toolbarbutton-1" />
+        </hbox>
       </hbox>
     </vbox>
   </toolbaritem>

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,4 +1,4 @@
-#include zen-media-player.inc.xhtml
+#include zen-media-controls.inc.xhtml
 <toolbar brighttext="true"
   id="zen-sidebar-bottom-buttons"
   fullscreentoolbar="true"

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -19,6 +19,24 @@
     --toolbarbutton-outer-padding: 2px;
   }
 
+  &:not([media-sharing]) {
+    #media-device-buttons {
+      display: none;
+    }
+  }
+
+  #media-device-buttons {
+    gap: 2px;
+  }
+
+  &[media-sharing] #zen-media-controls-hbox > toolbarbutton:not(:first-child) {
+    display: none;
+
+    #media-device-buttons {
+      display: flex;
+    }
+  }
+
   &:not([can-pip]) {
     #zen-media-info-vbox {
       width: calc(100% - 26px);
@@ -206,7 +224,7 @@
 }
 
 #zen-media-info-vbox {
-  #zen-media-controls-toolbar:not([media-position-hidden='true']) & {
+  #zen-media-controls-toolbar:not([media-position-hidden]) & {
     transition-delay: 0.01s !important;
   }
   overflow-x: hidden;
@@ -251,7 +269,7 @@
   align-items: center;
   padding-top: 0px !important;
 
-  #zen-media-controls-toolbar[media-position-hidden='true'] & {
+  #zen-media-controls-toolbar[media-position-hidden] & {
     display: none;
   }
 }

src/browser/base/zen-components/ZenGlanceManager.mjs

@@ -464,8 +464,12 @@
       this.#currentGlanceID = tab.getAttribute('glance-id');
       if (gBrowser.selectedTab === this.#currentParentTab && this.#currentBrowser) {
         const curTab = this.#currentTab;
+        const prevTab = event.detail.previousTab;
         setTimeout(() => {
           gBrowser.selectedTab = curTab;
+          if (prevTab?.linkedBrowser) {
+            prevTab.linkedBrowser.closest('.browserSidebarContainer').classList.remove('deck-selected');
+          }
         }, 0);
       } else if (gBrowser.selectedTab === this.#currentTab) {
         setTimeout(this.onLocationChangeOpenGlance.bind(this), 0);

src/browser/base/zen-components/ZenMediaController.mjs

@@ -27,6 +27,8 @@
     _tabTimeout = null;
     _controllerSwitchTimeout = null;
 
+    #isSeeking = false;
+
     init() {
       if (!Services.prefs.getBoolPref('zen.mediacontrols.enabled', true)) return;
 
@@ -50,6 +52,11 @@
     }
 
     #initEventListeners() {
+      this.mediaControlBar.addEventListener('mousedown', (event) => {
+        if (event.target.closest(':is(toolbarbutton,#zen-media-progress-hbox)')) return;
+        else this.onMediaFocus();
+      });
+
       this.mediaControlBar.addEventListener('command', (event) => {
         const button = event.target.closest('toolbarbutton');
         if (!button) return;
@@ -75,6 +82,12 @@
           case 'zen-media-playpause-button':
             this.onMediaToggle();
             break;
+          case 'zen-media-mute-mic-button':
+            this.onMicrophoneMuteToggle();
+            break;
+          case 'zen-media-mute-camera-button':
+            this.onCameraMuteToggle();
+            break;
         }
       });
 
@@ -82,6 +95,8 @@
       this.mediaProgressBar.addEventListener('change', this.onMediaSeekComplete.bind(this));
 
       window.addEventListener('TabSelect', (event) => {
+        if (this.isSharing) return;
+
         const linkedBrowser = event.target.linkedBrowser;
         this.switchController();
 
@@ -123,25 +138,29 @@
       });
 
       window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
+      window.webrtcUI.on('peer-request-allowed', this._onMediaShareStart.bind(this));
     }
 
     onTabDiscardedOrClosed(event) {
-      const linkedBrowser = event.target.linkedBrowser;
+      const { linkedBrowser } = event.target;
-      if (!linkedBrowser?.browsingContext?.mediaController) return;
+
-      this.deinitMediaController(
+      if (linkedBrowser?.browserId === this._currentBrowser?.browserId) {
-        linkedBrowser.browsingContext.mediaController,
+        this.deinitMediaSharingControls(linkedBrowser);
-        true,
+        this.hideMediaControls();
-        linkedBrowser.browserId === this._currentBrowser?.browserId,
+      }
-        true
+
-      );
+      if (linkedBrowser?.browsingContext.mediaController) {
+        this.deinitMediaController(
+          linkedBrowser.browsingContext.mediaController,
+          true,
+          linkedBrowser.browserId === this._currentBrowser?.browserId,
+          true
+        );
+      }
     }
 
     async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
-      if (!mediaController) return;
+      if (shouldForget && mediaController) {
-
-      const retrievedMediaController = this.mediaControllersMap.get(mediaController.id);
-
-      if (shouldForget) {
         mediaController.removeEventListener('pictureinpicturemodechange', this.onPipModeChange);
         mediaController.removeEventListener('positionstatechange', this.onPositionstateChange);
         mediaController.removeEventListener('playbackstatechange', this.onPlaybackstateChange);
@@ -167,6 +186,26 @@
       }
     }
 
+    get isSharing() {
+      return this.mediaControlBar.hasAttribute('media-sharing');
+    }
+
+    set isSharing(value) {
+      if (this._currentBrowser && !value) {
+        const webRTC = this._currentBrowser.browsingContext.currentWindowGlobal.getActor('WebRTC');
+        webRTC.sendAsyncMessage('webrtc:UnmuteMicrophone');
+        webRTC.sendAsyncMessage('webrtc:UnmuteCamera');
+      }
+
+      if (!value) {
+        this.mediaControlBar.removeAttribute('mic-muted');
+        this.mediaControlBar.removeAttribute('camera-muted');
+      } else {
+        this.mediaControlBar.setAttribute('media-position-hidden', '');
+        this.mediaControlBar.setAttribute('media-sharing', '');
+      }
+    }
+
     hideMediaControls() {
       if (this.mediaControlBar.hasAttribute('hidden')) return;
 
@@ -183,18 +222,22 @@
         )
         .then(() => {
           this.mediaControlBar.setAttribute('hidden', 'true');
+          this.mediaControlBar.removeAttribute('media-sharing');
           gZenUIManager.updateTabsToolbar();
           gZenUIManager.restoreScrollbarState();
         });
     }
 
     showMediaControls() {
-      if (!this._currentMediaController) return;
-
-      if (this._currentMediaController.isBeingUsedInPIPModeOrFullscreen) return this.hideMediaControls();
       if (!this.mediaControlBar.hasAttribute('hidden')) return;
 
-      this.updatePipButton();
+      if (!this.isSharing) {
+        if (!this._currentMediaController) return;
+        if (this._currentMediaController.isBeingUsedInPIPModeOrFullscreen) return this.hideMediaControls();
+
+        this.updatePipButton();
+      }
+
       const mediaInfoElements = [this.mediaTitle, this.mediaArtist];
       for (const element of mediaInfoElements) {
         element.removeAttribute('overflow'); // So we can properly recalculate the overflow
@@ -282,7 +325,7 @@
         lastUpdated: Date.now(),
       });
 
-      if (!this._currentBrowser) {
+      if (!this._currentBrowser && !this.isSharing) {
         this.setupMediaController(mediaController, browser);
         this.setupMediaControlUI(metadata, positionState);
       }
@@ -295,6 +338,70 @@
       mediaController.addEventListener('deactivated', this.onDeactivated);
     }
 
+    activateMediaDeviceControls(browser) {
+      if (browser?.browsingContext.currentWindowGlobal.hasActivePeerConnections()) {
+        this.mediaControlBar.removeAttribute('can-pip');
+        this._currentBrowser = browser;
+
+        const tab = window.gBrowser.getTabForBrowser(browser);
+        const iconURL = browser.mIconURL || `page-icon:${browser.currentURI.spec}`;
+
+        this.isSharing = true;
+
+        this.mediaFocusButton.style.listStyleImage = `url(${iconURL})`;
+        this.mediaTitle.textContent = tab.label;
+        this.mediaArtist.textContent = '';
+
+        this.showMediaControls();
+        tab.addEventListener('TabAttrModified', this._onTabAttrModified.bind(this));
+      }
+    }
+
+    deinitMediaSharingControls(browser) {
+      const tab = window.gBrowser.getTabForBrowser(browser);
+      if (tab) tab.removeEventListener('TabAttrModified', this._onTabAttrModified.bind(this));
+
+      this.isSharing = false;
+      this._currentBrowser = null;
+    }
+
+    _onTabAttrModified(event) {
+      const { changed } = event.detail;
+      const { linkedBrowser } = event.target;
+
+      if (changed.includes('sharing') && !linkedBrowser.browsingContext.currentWindowGlobal.hasActivePeerConnections()) {
+        if (this._currentBrowser?.browserId === linkedBrowser.browserId) {
+          event.target.removeEventListener('TabAttrModified', this._onTabAttrModified.bind(this));
+          this.deinitMediaSharingControls(linkedBrowser);
+
+          this.hideMediaControls();
+          this.switchController(true);
+        }
+      }
+    }
+
+    _onMediaShareStart(event) {
+      const { innerWindowID } = event;
+
+      for (const browser of window.gBrowser.browsers) {
+        if (browser.innerWindowID === innerWindowID) {
+          const webRTC = browser.browsingContext.currentWindowGlobal.getActor('WebRTC');
+          webRTC.sendAsyncMessage('webrtc:UnmuteMicrophone');
+          webRTC.sendAsyncMessage('webrtc:UnmuteCamera');
+
+          if (this._currentBrowser) this.deinitMediaSharingControls(this._currentBrowser);
+          if (this._currentMediaController) {
+            this._currentMediaController.pause();
+            this.deinitMediaController(this._currentMediaController, true, true).then(() =>
+              this.activateMediaDeviceControls(browser)
+            );
+          } else this.activateMediaDeviceControls(browser);
+
+          break;
+        }
+      }
+    }
+
     _onDeactivated(event) {
       this.deinitMediaController(event.target, true, event.target.id === this._currentMediaController.id, true);
       this.switchController();
@@ -339,6 +446,9 @@
     switchController(force = false) {
       let timeout = 3000;
 
+      if (this.isSharing) return;
+      if (this.#isSeeking) return;
+
       if (this._controllerSwitchTimeout) {
         clearTimeout(this._controllerSwitchTimeout);
         this._controllerSwitchTimeout = null;
@@ -466,6 +576,8 @@
     }
 
     onMediaSeekDrag(event) {
+      this.#isSeeking = true;
+
       this._currentMediaController?.pause();
       const newTime = (event.target.value / 100) * this._currentDuration;
       this.mediaCurrentTime.textContent = this.formatSecondsToTime(newTime);
@@ -477,11 +589,18 @@
         this._currentMediaController.seekTo(newPosition);
         this._currentMediaController.play();
       }
+
+      this.#isSeeking = false;
     }
 
     onMediaFocus() {
       if (!this._currentBrowser) return;
-      this._currentMediaController?.focus();
+
+      if (this._currentMediaController) this._currentMediaController.focus();
+      else if (this._currentBrowser) {
+        const tab = window.gBrowser.getTabForBrowser(this._currentBrowser);
+        if (tab) window.ZenWorkspaces.switchTabIfNeeded(tab);
+      }
     }
 
     onMediaMute() {
@@ -503,9 +622,13 @@
     }
 
     onControllerClose() {
-      this._currentMediaController?.pause();
+      if (this._currentMediaController) {
+        this._currentMediaController.pause();
+        this.deinitMediaController(this._currentMediaController);
+      } else if (this.isSharing) this.deinitMediaSharingControls(this._currentBrowser);
+
+      this.hideMediaControls();
       this.switchController(true);
-      this.deinitMediaController(this._currentMediaController);
     }
 
     onMediaPip() {
@@ -514,22 +637,37 @@
         .sendAsyncMessage('PictureInPicture:KeyToggle');
     }
 
+    onMicrophoneMuteToggle() {
+      if (this._currentBrowser) {
+        const shouldMute = this.mediaControlBar.hasAttribute('mic-muted') ? 'webrtc:UnmuteMicrophone' : 'webrtc:MuteMicrophone';
+
+        this._currentBrowser.browsingContext.currentWindowGlobal.getActor('WebRTC').sendAsyncMessage(shouldMute);
+        this.mediaControlBar.toggleAttribute('mic-muted');
+      }
+    }
+
+    onCameraMuteToggle() {
+      if (this._currentBrowser) {
+        const shouldMute = this.mediaControlBar.hasAttribute('camera-muted') ? 'webrtc:UnmuteCamera' : 'webrtc:MuteCamera';
+
+        this._currentBrowser.browsingContext.currentWindowGlobal.getActor('WebRTC').sendAsyncMessage(shouldMute);
+        this.mediaControlBar.toggleAttribute('camera-muted');
+      }
+    }
+
     updateMuteState() {
       if (!this._currentBrowser) return;
-      if (this._currentBrowser._audioMuted) {
+      this.mediaControlBar.toggleAttribute('muted', this._currentBrowser._audioMuted);
-        this.mediaControlBar.setAttribute('muted', '');
-      } else {
-        this.mediaControlBar.removeAttribute('muted');
-      }
     }
 
     updatePipButton() {
       if (!this._currentBrowser) return;
-      const { totalPipCount, totalPipDisabled } = PictureInPicture.getEligiblePipVideoCount(this._currentBrowser);
+      if (this.isSharing) return;
 
-      if (totalPipCount === 1 || (totalPipDisabled > 0 && lazy.RESPECT_PIP_DISABLED))
+      const { totalPipCount, totalPipDisabled } = PictureInPicture.getEligiblePipVideoCount(this._currentBrowser);
-        this.mediaControlBar.setAttribute('can-pip', '');
+      const canPip = totalPipCount === 1 || (totalPipDisabled > 0 && lazy.RESPECT_PIP_DISABLED);
-      else this.mediaControlBar.removeAttribute('can-pip');
+
+      this.mediaControlBar.toggleAttribute('can-pip', canPip);
     }
   }
 

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -189,7 +189,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       !this._lastOpenedTab ||
       (this._lastOpenedTab &&
         this._lastOpenedTab.getAttribute('zen-workspace-id') !== draggedTab.getAttribute('zen-workspace-id') &&
-        !this._lastOpenedTab.hasAttribute('zen-essential'))
+        !this._lastOpenedTab.hasAttribute('zen-essential')) ||
+      draggedTab === this._lastOpenedTab
     ) {
       return;
     }

src/browser/themes/shared/zen-icons/icons.css

@@ -1181,6 +1181,24 @@ menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
   list-style-image: url('close.svg') !important;
 }
 
+#zen-media-mute-mic-button {
+  list-style-image: url('microphone-fill.svg') !important;
+}
+
+#zen-media-controls-toolbar[mic-muted] #zen-media-mute-mic-button {
+  list-style-image: url('microphone-blocked-fill.svg') !important;
+  fill: rgb(224, 41, 29);
+}
+
+#zen-media-mute-camera-button {
+  list-style-image: url('video-fill.svg') !important;
+}
+
+#zen-media-controls-toolbar[camera-muted] #zen-media-mute-camera-button {
+  list-style-image: url('video-blocked-fill.svg') !important;
+  fill: rgb(224, 41, 29);
+}
+
 #zen-media-pip-button {
   list-style-image: url('chrome://global/skin/media/picture-in-picture-open.svg') !important;
 }

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -75,7 +75,9 @@
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
   skin/classic/browser/zen-icons/menu.svg                      (../shared/zen-icons/lin/menu.svg) 
+  skin/classic/browser/zen-icons/microphone-blocked-fill.svg                      (../shared/zen-icons/lin/microphone-blocked-fill.svg) 
   skin/classic/browser/zen-icons/microphone-blocked.svg                      (../shared/zen-icons/lin/microphone-blocked.svg) 
+  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
   skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
   skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
   skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
@@ -125,8 +127,10 @@
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
+  skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-open.svg                      (../shared/zen-icons/lin/video-open.svg) 
   skin/classic/browser/zen-icons/video-save.svg                      (../shared/zen-icons/lin/video-save.svg) 
+  skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 
   skin/classic/browser/zen-icons/window.svg                      (../shared/zen-icons/lin/window.svg) 
   skin/classic/browser/zen-icons/xr-blocked.svg                      (../shared/zen-icons/lin/xr-blocked.svg) 
   skin/classic/browser/zen-icons/xr.svg                      (../shared/zen-icons/lin/xr.svg) 
@@ -209,7 +213,9 @@
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
   skin/classic/browser/zen-icons/menu.svg                      (../shared/zen-icons/lin/menu.svg) 
+  skin/classic/browser/zen-icons/microphone-blocked-fill.svg                      (../shared/zen-icons/lin/microphone-blocked-fill.svg) 
   skin/classic/browser/zen-icons/microphone-blocked.svg                      (../shared/zen-icons/lin/microphone-blocked.svg) 
+  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
   skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
   skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
   skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
@@ -259,8 +265,10 @@
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
+  skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-open.svg                      (../shared/zen-icons/lin/video-open.svg) 
   skin/classic/browser/zen-icons/video-save.svg                      (../shared/zen-icons/lin/video-save.svg) 
+  skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 
   skin/classic/browser/zen-icons/window.svg                      (../shared/zen-icons/lin/window.svg) 
   skin/classic/browser/zen-icons/xr-blocked.svg                      (../shared/zen-icons/lin/xr-blocked.svg) 
   skin/classic/browser/zen-icons/xr.svg                      (../shared/zen-icons/lin/xr.svg) 
@@ -343,7 +351,9 @@
   skin/classic/browser/zen-icons/media-unmute.svg                      (../shared/zen-icons/lin/media-unmute.svg) 
   skin/classic/browser/zen-icons/menu-bar.svg                      (../shared/zen-icons/lin/menu-bar.svg) 
   skin/classic/browser/zen-icons/menu.svg                      (../shared/zen-icons/lin/menu.svg) 
+  skin/classic/browser/zen-icons/microphone-blocked-fill.svg                      (../shared/zen-icons/lin/microphone-blocked-fill.svg) 
   skin/classic/browser/zen-icons/microphone-blocked.svg                      (../shared/zen-icons/lin/microphone-blocked.svg) 
+  skin/classic/browser/zen-icons/microphone-fill.svg                      (../shared/zen-icons/lin/microphone-fill.svg) 
   skin/classic/browser/zen-icons/microphone.svg                      (../shared/zen-icons/lin/microphone.svg) 
   skin/classic/browser/zen-icons/midi.svg                      (../shared/zen-icons/lin/midi.svg) 
   skin/classic/browser/zen-icons/move-tab.svg                      (../shared/zen-icons/lin/move-tab.svg) 
@@ -393,8 +403,10 @@
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
+  skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-open.svg                      (../shared/zen-icons/lin/video-open.svg) 
   skin/classic/browser/zen-icons/video-save.svg                      (../shared/zen-icons/lin/video-save.svg) 
+  skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 
   skin/classic/browser/zen-icons/window.svg                      (../shared/zen-icons/lin/window.svg) 
   skin/classic/browser/zen-icons/xr-blocked.svg                      (../shared/zen-icons/lin/xr-blocked.svg) 
   skin/classic/browser/zen-icons/xr.svg                      (../shared/zen-icons/lin/xr.svg) 

src/browser/themes/shared/zen-icons/lin/microphone-blocked-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M6.721,11.279l6.279-6.279c0-2.206-1.794-4-4-4s-4,1.794-4,4v3c0,1.358,.683,2.556,1.721,3.279Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M9.202,11.979c2.042-.104,3.673-1.736,3.777-3.777l-3.777,3.777Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M4.583,13.417l1.066-1.066c-1.304-1.006-2.149-2.58-2.149-4.351,0-.414-.336-.75-.75-.75s-.75,.336-.75,.75c0,2.185,1.01,4.133,2.583,5.417Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path><path d="M15.25,7.25c-.414,0-.75,.336-.75,.75,0,3.033-2.467,5.5-5.5,5.5-.408,0-.804-.048-1.186-.132l-1.203,1.203c.521,.19,1.069,.327,1.639,.388v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c3.508-.376,6.25-3.352,6.25-6.958,0-.414-.336-.75-.75-.75Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path><path d="M2,16.75c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L15.47,1.47c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061L2.53,16.53c-.146,.146-.338,.22-.53,.22Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/microphone-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M9,12c2.206,0,4-1.794,4-4v-3c0-2.206-1.794-4-4-4s-4,1.794-4,4v3c0,2.206,1.794,4,4,4Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M15.25,7.25c-.414,0-.75,.336-.75,.75,0,3.033-2.467,5.5-5.5,5.5s-5.5-2.467-5.5-5.5c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75c0,3.606,2.742,6.583,6.25,6.958v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c3.508-.376,6.25-3.352,6.25-6.958,0-.414-.336-.75-.75-.75Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/video-blocked-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M6.182,15h3.568c1.517,0,2.75-1.233,2.75-2.75v-3.568l-6.318,6.318Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M3.089,14.911L12.477,5.523c-.118-1.409-1.288-2.523-2.727-2.523H3.75c-1.517,0-2.75,1.233-2.75,2.75v6.5c0,1.288,.893,2.363,2.089,2.661Zm1.911-8.911c.552,0,1,.448,1,1s-.448,1-1,1-1-.448-1-1,.448-1,1-1Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M17.386,5.019c-.368-.217-.805-.227-1.183-.04l-2.203,2.203v4.637l2.147,1.181c.19,.105,.397,.157,.604,.157,.219,0,.438-.059,.635-.175,.385-.228,.614-.63,.614-1.077V6.096c0-.447-.229-.849-.614-1.077Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path><path d="M2,16.75c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L15.47,1.47c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061L2.53,16.53c-.146,.146-.338,.22-.53,.22Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path></svg>

src/browser/themes/shared/zen-icons/lin/video-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.386,5.019c-.385-.227-.848-.234-1.238-.019l-2.148,1.181v5.637l2.147,1.181c.19,.105,.397,.157,.604,.157,.219,0,.438-.059,.635-.175,.385-.228,.614-.63,.614-1.077V6.096c0-.447-.229-.849-.614-1.077Z" fill="context-fill" stroke-opacity="context-fill-opacity" data-color="color-2"></path><path d="M9.75,3H3.75c-1.517,0-2.75,1.233-2.75,2.75v6.5c0,1.517,1.233,2.75,2.75,2.75h6c1.517,0,2.75-1.233,2.75-2.75V5.75c0-1.517-1.233-2.75-2.75-2.75Zm-4.75,5c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Z" fill="context-fill" stroke-opacity="context-fill-opacity"></path></svg>