Bug 1554579 - Pinned tab becomes too wide when picture-in-picture icon is present. r=dao
authormeandave <djustice@mozilla.com>
Mon, 24 Jun 2019 16:10:58 +0000
changeset 480029 d3c9483c4d79657ec4d0ba54ee102d15cb74f497
parent 480028 fd5473e29a285c5191c15b7f1a0aa0a116632b91
child 480030 00b675dfb3dedafee6346876a311d252912a4d3a
push id36200
push useraiakab@mozilla.com
push dateTue, 25 Jun 2019 21:58:14 +0000
treeherdermozilla-central@b23bd78e4d94 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1554579
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1554579 - Pinned tab becomes too wide when picture-in-picture icon is present. r=dao Differential Revision: https://phabricator.services.mozilla.com/D34418
browser/base/content/tabbrowser-tab.js
browser/base/content/tabbrowser.css
browser/themes/shared/tabs.inc.css
toolkit/themes/shared/media/pictureinpicture.svg
--- a/browser/base/content/tabbrowser-tab.js
+++ b/browser/base/content/tabbrowser-tab.js
@@ -48,17 +48,16 @@ class MozTabbrowserTab extends MozElemen
       ".tab-content": "pinned,selected=visuallyselected,titlechanged,attention",
       ".tab-throbber": "fadein,pinned,busy,progress,selected=visuallyselected",
       ".tab-icon-pending": "fadein,pinned,busy,progress,selected=visuallyselected,pendingicon",
       ".tab-icon-image": "src=image,triggeringprincipal=iconloadingprincipal,requestcontextid,fadein,pinned,selected=visuallyselected,busy,crashed,sharing",
       ".tab-sharing-icon-overlay": "sharing,selected=visuallyselected,pinned",
       ".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",
     };
   }
 
   get fragment() {
     if (!this._fragment) {
       this._fragment = MozXULElement.parseXULToFragment(`
@@ -76,18 +75,16 @@ class MozTabbrowserTab extends MozElemen
             <image class="tab-sharing-icon-overlay" role="presentation"/>
             <image class="tab-icon-overlay" role="presentation"/>
             <hbox class="tab-label-container"
                   onoverflow="this.setAttribute('textoverflow', 'true');"
                   onunderflow="this.removeAttribute('textoverflow');"
                   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>
         </stack>
       `);
     }
     return this.ownerDocument.importNode(this._fragment, true);
   }
--- a/browser/base/content/tabbrowser.css
+++ b/browser/base/content/tabbrowser.css
@@ -6,20 +6,18 @@
 #tabbrowser-tabs[closebuttons="activetab"] > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]),
 .tab-icon-pending:not([pendingicon]),
 .tab-icon-pending[busy],
 .tab-icon-pending[pinned],
 .tab-icon-image:not([src]):not([pinned]):not([crashed])[selected],
 .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;
 }
 
 .tab-sharing-icon-overlay[sharing]:not([selected]),
 .tab-icon-overlay[soundplaying][pinned],
 .tab-icon-overlay[muted][pinned],
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -372,65 +372,60 @@
   stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
 }
 
 :root[uidensity=touch] .tab-close-button {
   margin-inline-end: -@horizontalTabPadding@;
   padding: 10px calc(@horizontalTabPadding@ - 2px);
 }
 
-.tab-icon-pip,
 .tab-icon-sound {
   margin-inline-start: 1px;
   width: 16px;
   height: 16px;
   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] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .tab-icon-sound[muted] {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
 }
 
 .tab-icon-sound[activemedia-blocked] {
   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) {
   opacity: .8;
 }
 
 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
--- a/toolkit/themes/shared/media/pictureinpicture.svg
+++ b/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>