Merge pull request #6629 from Slowlife01/pip

feat: add minimize button to pip window

src/toolkit/components/pictureinpicture/content/player-js.patch

@@ -0,0 +1,16 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.js b/toolkit/components/pictureinpicture/content/player.js
+index 9a4971d5d24dba6e543be8ea321c6be8c43ad859..b0788967e51736b1ec95daf96a1504bfd7c1dea7 100644
+--- a/toolkit/components/pictureinpicture/content/player.js
++++ b/toolkit/components/pictureinpicture/content/player.js
+@@ -722,6 +722,11 @@ let Player = {
+         document.getElementById("large").click();
+         break;
+       }
++
++      case "minimize": {
++        this.closePipWindow({ reason: "CloseButton" });
++        break;
++      }
+     }
+     // If the click came from a element that is not inside the subtitles settings panel
+     // then we want to hide the panel

src/toolkit/components/pictureinpicture/content/player-xhtml.patch

@@ -0,0 +1,29 @@
+diff --git a/toolkit/components/pictureinpicture/content/player.xhtml b/toolkit/components/pictureinpicture/content/player.xhtml
+index 440ce51e8e67e4d3a7bdcb78f38f2fb6684c9848..6b48a3178f9de460dd3b08728f5638ef2751de21 100644
+--- a/toolkit/components/pictureinpicture/content/player.xhtml
++++ b/toolkit/components/pictureinpicture/content/player.xhtml
+@@ -52,13 +52,22 @@
+       tabindex="10"
+ #endif
+       />
+-      <button id="unpip"
+-      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++      <button id="minimize"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-minimize-btn" data-l10n-attrs="tooltip"
+ #ifdef XP_MACOSX
+       mac="true"
+       tabindex="10"
+ #else
+       tabindex="9"
++#endif
++      />
++      <button id="unpip"
++      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
++#ifdef XP_MACOSX
++      mac="true"
++      tabindex="11"
++#else
++      tabindex="10"
+ #endif
+       />
+     <div id="controls-bottom-gradient" class="control-item"></div>

src/toolkit/themes/shared/pictureinpicture/player-css.patch

@@ -0,0 +1,22 @@
+diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
+index a3ffe31d47cc81a0cb578acc9177aaa6f41668eb..cf69507804b7c50f9afcfabb744098cfbe409396 100644
+--- a/toolkit/themes/shared/pictureinpicture/player.css
++++ b/toolkit/themes/shared/pictureinpicture/player.css
+@@ -724,3 +724,17 @@ input:checked + .slider::before {
+     justify-self: center;
+   }
+ }
++
++#minimize {
++  background-image: url("chrome://browser/skin/zen-icons/unpin.svg");
++  background-color: rgba(255, 255, 255, .8);
++  position: absolute;
++  fill: var(--close-btn-fill-color);
++  right: 50px;
++  top: 10px;
++}
++
++#minimize[mac="true"] {
++  right: auto;
++  left: 50px;
++}