Bug 1383217 - Update Ctrl+Tab preview styling to better match activity stream and photon. r?mardak
MozReview-Commit-ID: 5Andq55RyEU
--- 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;
}