Bug 1554579 - Pinned tab becomes too wide when picture-in-picture icon is present. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D34418

--HG--
extra : moz-landing-system : lando

browser/base/content/tabbrowser-tab.js

@@ -53,7 +53,6 @@ class MozTabbrowserTab extends MozElements.MozTab {
       ".tab-icon-overlay": "crashed,busy,soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked",
       ".tab-label-container": "pinned,selected=visuallyselected,labeldirection",
       ".tab-label": "text=label,accesskey,fadein,pinned,selected=visuallyselected,attention",
-      ".tab-icon-pip": "pictureinpicture",
       ".tab-icon-sound": "soundplaying,soundplaying-scheduledremoval,pinned,muted,blocked,selected=visuallyselected,activemedia-blocked,pictureinpicture",
       ".tab-close-button": "fadein,pinned,selected=visuallyselected",
     };
@@ -81,8 +80,6 @@ class MozTabbrowserTab extends MozElements.MozTab {
                   flex="1">
               <label class="tab-text tab-label" role="presentation"/>
             </hbox>
-            <image class="tab-icon-pip"
-                   role="presentation"/>
             <image class="tab-icon-sound" role="presentation"/>
             <image class="tab-close-button close-icon" role="presentation"/>
           </hbox>

browser/base/content/tabbrowser.css

@@ -11,10 +11,8 @@
 .tab-icon-image:not([src]):not([pinned]):not([crashed]):not([sharing]),
 .tab-icon-image[busy],
 .tab-throbber:not([busy]),
-.tab-icon-pip:not([pictureinpicture]),
-.tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]),
+.tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]):not([pictureinpicture]),
 .tab-icon-sound[pinned],
-.tab-icon-sound[pictureinpicture],
 .tab-sharing-icon-overlay,
 .tab-icon-overlay {
   display: none;

browser/themes/shared/tabs.inc.css

@@ -377,7 +377,6 @@
   padding: 10px calc(@horizontalTabPadding@ - 2px);
 }
 
-.tab-icon-pip,
 .tab-icon-sound {
   margin-inline-start: 1px;
   width: 16px;
@@ -385,16 +384,6 @@
   padding: 0;
 }
 
-.tab-icon-pip[pictureinpicture] {
-  background-image: url(chrome://global/skin/media/pictureinpicture.svg);
-  -moz-context-properties: fill, stroke;
-  fill: currentColor;
-  stroke: currentColor;
-  width: 14px;
-  height: 14px;
-  margin-inline-start: 5px
-}
-
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted],
 .tab-icon-sound[activemedia-blocked] {
@@ -411,21 +400,27 @@
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
 }
 
-:root[lwtheme-image] .tab-icon-pip:-moz-lwtheme-darktext[pictureinpicture],
+.tab-icon-sound[pictureinpicture] {
+  list-style-image: url(chrome://global/skin/media/pictureinpicture.svg);
+  width: 14px;
+  height: 14px;
+}
+
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[pictureinpicture],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[muted],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
   filter: drop-shadow(1px 1px 1px white);
 }
 
-:root[lwtheme-image] .tab-icon-pip:-moz-lwtheme-brighttext[pictureinpicture],
+:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[pictureinpicture],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted],
 :root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
   filter: drop-shadow(1px 1px 1px black);
 }
 
-.tab-icon-pip[pictureinpicture]:not(:hover),
+.tab-icon-sound[pictureinpicture]:not(:hover),
 .tab-icon-sound[soundplaying]:not(:hover),
 .tab-icon-sound[muted]:not(:hover),
 .tab-icon-sound[activemedia-blocked]:not(:hover) {

toolkit/themes/shared/media/pictureinpicture.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" version="1.1">
   <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
-    <path stroke="context-stroke" d="M0.5 0.5h13v13h-13z"/>
+    <path stroke="context-fill" d="M0.5 0.5h13v13h-13z"/>
     <path fill="context-fill" d="M8 10h8v6h-8z"/>
-    <path stroke="context-stroke" d="M0.5 5.5h7v-5h-5.5a1.5 1.5 0 0 0 -1.5 1.5v3.5z"/>
+    <path stroke="context-fill" d="M0.5 5.5h7v-5h-5.5a1.5 1.5 0 0 0 -1.5 1.5v3.5z"/>
   </g>
 </svg>