Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 00:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1036284 - Update styling of newtab tiles to enhanced tiles spec [r=adw]

Browse Source 
Set appropriate sizes, coloring, opacity, etc.
This commit is contained in:
Ed Lee 2014-07-18 23:14:33 -07:00
parent 719633e43d
commit 1b5c2c4f7b
8 changed files with 64 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
browser/base/content/newtab/newTab.css
View File

@ -83,7 +83,7 @@ input[type=button] {
}
.newtab-side-margin {
min-width: 16px;
min-width: 10px;
-moz-box-flex: 1;
}
@ -108,9 +108,9 @@ input[type=button] {
/* CELLS */
.newtab-cell {
display: -moz-box;
height: 150px;
margin: 16px;
width: 243px;
height: 180px;
margin: 16px 10px;
width: 290px;
}
/* SITES */
@ -141,28 +141,18 @@ input[type=button] {
bottom: 0;
}
.newtab-thumbnail {
opacity: .8;
transition: opacity 100ms ease-out;
}
.newtab-thumbnail[dragged],
.newtab-link:-moz-focusring > .newtab-thumbnail,
.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-link > .newtab-thumbnail {
opacity: 1;
}
/* TITLES */
.newtab-title {
bottom: -21px;
position: absolute;
font-size: 13px;
left: 0;
line-height: 21px;
right: 0;
text-align: start;
white-space: nowrap;
overflow: hidden;
padding-top: 14px;
position: absolute;
right: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
/* CONTROLS */
@ -286,7 +276,7 @@ input[type=button] {
}
#newtab-search-text {
height: 32px;
height: 38px;
-moz-box-flex: 1;
padding: 0 8px;
@ -310,7 +300,8 @@ input[type=button] {
}
#newtab-search-submit {
height: 32px;
height: 38px;
font-size: 13px !important;
-moz-margin-start: -1px;
background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;

4
browser/base/content/newtab/sites.js
View File

@ -108,10 +108,10 @@ Site.prototype = {
let control = this._querySelector(".newtab-control-pin");
if (aPinned) {
control.setAttribute("pinned", true);
this.node.setAttribute("pinned", true);
control.setAttribute("title", newTabString("unpin"));
} else {
control.removeAttribute("pinned");
this.node.removeAttribute("pinned");
control.setAttribute("title", newTabString("pin"));
}
},

5
browser/base/content/test/newtab/head.js
View File

@ -32,7 +32,7 @@ let gDirectorySource = 'data:application/json,{"test":1}';
let requiredInnerHeight =
40 + 32 + // undo container + bottom margin
44 + 32 + // search bar + bottom margin
(3 * (150 + 32)) + // 3 rows * (tile height + title and bottom margin)
(3 * (180 + 32)) + // 3 rows * (tile height + title and bottom margin)
100; // breathing room
let oldInnerHeight = null;
@ -349,8 +349,7 @@ function checkGrid(aSitesPattern, aSites) {
return "";
let pinned = aSite.isPinned();
let pinButton = aSite.node.querySelector(".newtab-control-pin");
let hasPinnedAttr = pinButton.hasAttribute("pinned");
let hasPinnedAttr = aSite.node.hasAttribute("pinned");
if (pinned != hasPinnedAttr)
ok(false, "invalid state (site.isPinned() != site[pinned])");

1
browser/themes/linux/jar.mn
View File

@ -114,6 +114,7 @@ browser.jar:
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
skin/classic/browser/newtab/controls.png (../shared/newtab/controls.png)
skin/classic/browser/newtab/controls@2x.png (../shared/newtab/controls@2x.png)
skin/classic/browser/newtab/texture.png (../shared/newtab/texture.png)
skin/classic/browser/places/bookmarksMenu.png (places/bookmarksMenu.png)
skin/classic/browser/places/bookmarksToolbar.png (places/bookmarksToolbar.png)
skin/classic/browser/places/bookmarksToolbar-menuPanel.png (places/bookmarksToolbar-menuPanel.png)

1
browser/themes/osx/jar.mn
View File

@ -182,6 +182,7 @@ browser.jar:
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
skin/classic/browser/newtab/controls.png (../shared/newtab/controls.png)
skin/classic/browser/newtab/controls@2x.png (../shared/newtab/controls@2x.png)
skin/classic/browser/newtab/texture.png (../shared/newtab/texture.png)
skin/classic/browser/setDesktopBackground.css
skin/classic/browser/monitor.png
skin/classic/browser/monitor_16-10.png

58
browser/themes/shared/newtab/newTab.inc.css
View File

@ -12,7 +12,7 @@
#newtab-scrollbox:not([page-disabled]),
#newtab-scrollbox:not([page-disabled]) #newtab-margin-bottom {
color: rgb(0,0,0);
background-color: hsl(0,0%,95%);
background-image: url(chrome://browser/skin/newtab/texture.png);
}
/* UNDO */
@ -81,28 +81,27 @@
/* CELLS */
.newtab-cell {
background-color: rgba(255,255,255,.2);
border: 1px solid #dee0e1;
transition: border-color 100ms ease-out;
border-radius: 12px;
}
.newtab-cell:empty {
border: 1px dashed;
border-color: rgba(8,22,37,.15) rgba(8,22,37,.17) rgba(8,22,37,.19);
}
.newtab-cell:hover:not(:empty):not([dragged]):not([ignorehover]) {
border-color: rgba(8,22,37,.25) rgba(8,22,37,.27) rgba(8,22,37,.3);
outline: 2px dashed #c1c1c1;
-moz-outline-radius: 12px;
}
/* SITES */
.newtab-site {
border-radius: inherit;
box-shadow: 0 1px 3px #c1c1c1;
text-decoration: none;
transition-property: top, left, opacity, box-shadow, background-color;
}
.newtab-cell:not([ignorehover]) > .newtab-site:hover,
.newtab-site[dragged] {
box-shadow: 0 0 10px rgba(8,22,37,.3);
border: 2px solid #4a90e2;
box-shadow: 0 0 10px 3px #4cb1ff;
margin: -2px;
}
.newtab-site[dragged] {
@ -110,12 +109,19 @@
background-color: rgb(242,242,242);
}
/* LINKS */
.newtab-link {
border-radius: 10px;
}
/* THUMBNAILS */
.newtab-thumbnail {
background-origin: padding-box;
background-clip: padding-box;
background-repeat: no-repeat;
background-size: cover;
border-radius: inherit;
transition: opacity 100ms ease-out;
}
.newtab-site[type=affiliate] .newtab-thumbnail,
@ -125,10 +131,32 @@
background-size: auto;
}
/* Use a pseudo-element to overlay a gradient on the thumbnail */
.newtab-site[type=history]:not(:hover) .newtab-thumbnail:first-child::after {
background-image: linear-gradient(0deg, rgba(251, 251, 251, 0.8), rgba(251, 251, 251, 0) 50%);
border-radius: inherit;
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
/* TITLES */
.newtab-title {
color: #525c66;
font-size: 13px;
color: #9b9b9b;
}
.newtab-site:hover .newtab-title {
color: #4a4a4a;
}
.newtab-site[pinned] .newtab-title {
color: #d0021b;
font-style: italic;
font-weight: bold;
}
.newtab-site[type=sponsored] .newtab-title {
@ -159,15 +187,15 @@
background-position: -48px 0;
}
.newtab-control-pin[pinned] {
.newtab-site[pinned] .newtab-control-pin {
background-position: -72px 0;
}
.newtab-control-pin[pinned]:hover {
.newtab-site[pinned] .newtab-control-pin:hover {
background-position: -96px 0;
}
.newtab-control-pin[pinned]:active {
.newtab-site[pinned] .newtab-control-pin:active {
background-position: -120px 0;
}

BIN
browser/themes/shared/newtab/texture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
browser/themes/windows/jar.mn
View File

@ -136,6 +136,7 @@ browser.jar:
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
skin/classic/browser/newtab/controls.png (../shared/newtab/controls.png)
skin/classic/browser/newtab/controls@2x.png (../shared/newtab/controls@2x.png)
skin/classic/browser/newtab/texture.png (../shared/newtab/texture.png)
skin/classic/browser/places/places.css (places/places.css)
* skin/classic/browser/places/organizer.css (places/organizer.css)
skin/classic/browser/places/bookmark.png (places/bookmark.png)
@ -550,6 +551,7 @@ browser.jar:
* skin/classic/aero/browser/newtab/newTab.css (newtab/newTab.css)
skin/classic/aero/browser/newtab/controls.png (../shared/newtab/controls.png)
skin/classic/aero/browser/newtab/controls@2x.png (../shared/newtab/controls@2x.png)
skin/classic/aero/browser/newtab/texture.png (../shared/newtab/texture.png)
* skin/classic/aero/browser/places/places.css (places/places-aero.css)
* skin/classic/aero/browser/places/organizer.css (places/organizer-aero.css)
skin/classic/aero/browser/places/bookmark.png (places/bookmark-aero.png)