Bug 1383217 - Update Ctrl+Tab preview styling to better match activity stream and photon. r?mardak draft
authorDão Gottwald <dao@mozilla.com>
Thu, 21 Dec 2017 14:08:30 +0100
changeset 714005 9dd9b8de4e9ca212d4ef6b864095d3978f124b04
parent 713529 2ff08db67b917fba1558986f3f2f796260f970f8
child 744485 176baf81fbaff1148a72f0fa940ffd7df059aaae
push id93808
push userdgottwald@mozilla.com
push dateThu, 21 Dec 2017 13:08:52 +0000
reviewersmardak
bugs1383217
milestone59.0a1
Bug 1383217 - Update Ctrl+Tab preview styling to better match activity stream and photon. r?mardak MozReview-Commit-ID: 5Andq55RyEU
browser/base/content/browser-tabPreviews.xml
browser/base/content/browser.css
browser/themes/shared/ctrlTab.inc.css
--- a/browser/base/content/browser-tabPreviews.xml
+++ b/browser/base/content/browser-tabPreviews.xml
@@ -6,29 +6,27 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <bindings id="tabPreviews"
           xmlns="http://www.mozilla.org/xbl"
           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:xbl="http://www.mozilla.org/xbl">
   <binding id="ctrlTab-preview" extends="chrome://global/content/bindings/button.xml#button-base">
     <content pack="center">
-      <xul:stack>
-        <xul:vbox class="ctrlTab-preview-inner" align="center" pack="center"
-                  xbl:inherits="width=canvaswidth">
-          <xul:hbox class="tabPreview-canvas" xbl:inherits="style=canvasstyle">
-            <children/>
-          </xul:hbox>
-          <xul:label xbl:inherits="value=label" crop="end" class="plain"/>
-        </xul:vbox>
+      <xul:vbox class="ctrlTab-preview-inner">
+        <xul:hbox class="ctrlTab-canvas" xbl:inherits="style=canvasstyle,width=canvaswidth">
+          <children/>
+        </xul:hbox>
         <xul:hbox class="ctrlTab-favicon-container" xbl:inherits="hidden=noicon">
           <xul:image class="ctrlTab-favicon" xbl:inherits="src=image"/>
         </xul:hbox>
-      </xul:stack>
+        <xul:label class="ctrlTab-label plain" xbl:inherits="value=label" crop="end"/>
+      </xul:vbox>
     </content>
+
     <handlers>
       <handler event="mouseover" action="ctrlTab._mouseOverFocus(this);"/>
       <handler event="command" action="ctrlTab.pick(this);"/>
       <handler event="click" button="1" action="ctrlTab.remove(this);"/>
 #ifdef XP_MACOSX
 # Control+click is a right click on OS X
       <handler event="click" button="2" action="ctrlTab.pick(this);"/>
 #endif
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -907,45 +907,16 @@ html|*.pointerlockfswarning-domain-text:
 }
 
 html|*#fullscreen-exit-button {
   pointer-events: auto;
 }
 
 /* ::::: Ctrl-Tab Panel ::::: */
 
-.ctrlTab-preview > html|img,
-.ctrlTab-preview > html|canvas {
-  min-width: inherit;
-  max-width: inherit;
-  min-height: inherit;
-  max-height: inherit;
-}
-
-.ctrlTab-favicon-container {
-  -moz-box-align: start;
-%ifdef XP_MACOSX
-  -moz-box-pack: end;
-%else
-  -moz-box-pack: start;
-%endif
-}
-
-.ctrlTab-favicon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Apply crisp rendering for favicons at exactly 2dppx resolution */
-@media (resolution: 2dppx) {
-  .ctrlTab-favicon {
-    image-rendering: -moz-crisp-edges;
-  }
-}
-
 .ctrlTab-preview {
   -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
 }
 
 
 /* notification anchors should only be visible when their associated
    notifications are */
 .notification-anchor-icon {
--- a/browser/themes/shared/ctrlTab.inc.css
+++ b/browser/themes/shared/ctrlTab.inc.css
@@ -6,58 +6,77 @@
 
 /* Ctrl-Tab */
 
 #ctrlTab-panel {
   -moz-appearance: none;
 %ifdef XP_MACOSX
   -moz-window-shadow: none;
 %endif
-  background: hsla(0,0%,33%,.85);
+  background: hsla(0,0%,40%,.85);
   color: white;
   border-style: none;
   padding: 20px 10px 10px;
 %ifndef XP_MACOSX
   font-weight: bold;
 %endif
   text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%);
 }
 
-.ctrlTab-favicon[src] {
-  background-color: white;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
+.ctrlTab-preview > html|img,
+.ctrlTab-preview > html|canvas {
+  min-width: inherit;
+  max-width: inherit;
+  min-height: inherit;
+  max-height: inherit;
+}
+
+.ctrlTab-favicon-container {
+  position: relative;
+  -moz-box-pack: end;
 }
 
-.ctrlTab-preview-inner > .tabPreview-canvas {
-  box-shadow: 1px 1px 2px hsl(0,0%,12%);
+.ctrlTab-favicon[src] {
+  width: 42px;
+  height: 42px;
+  margin-top: -44px;
+  margin-bottom: 2px;
+  margin-inline-end: -6px;
+  padding: 5px;
+  background-color: #F9F9FA;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
 }
 
-.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
-  margin-bottom: 2px;
+.ctrlTab-preview:not(#ctrlTab-showAll) > .ctrlTab-preview-inner > .ctrlTab-canvas {
+  box-shadow: 1px 1px 2px hsl(0,0%,12%);
+  margin-bottom: 8px;
 }
 
 .ctrlTab-preview-inner {
   padding: 8px;
   border: 2px solid transparent;
   border-radius: .5em;
 }
 
-.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
+.ctrlTab-preview:not(#ctrlTab-showAll) > .ctrlTab-preview-inner {
   margin: -10px -10px 0;
 }
 
-#ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
+#ctrlTab-showAll:not(:focus) > .ctrlTab-preview-inner {
   background-color: rgba(255,255,255,.2);
 }
 
-.ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
+.ctrlTab-preview:focus > .ctrlTab-preview-inner {
   color: white;
-  background-color: rgba(0,0,0,.6);
+  background-color: rgba(0,0,0,.75);
   text-shadow: none;
-  border-color: white;
+  border-color: #45a1ff;
+}
+
+.ctrlTab-label {
+  text-align: center;
 }
 
 #ctrlTab-showAll {
   margin-top: .5em;
 }