Bug 941284 - First run experience r=mbrubeck
--HG-- extra : rebase_source : fa7ac4b0baf2bcb0b7ca47086c275959f4303e8d
@ -21,4 +21,7 @@ browser.jar:
|
||||
content/branding/metro-about.css (metro-about.css)
|
||||
content/branding/metro-about-footer.png (metro-about-footer.png)
|
||||
content/branding/metro-about-wordmark.png (metro-about-wordmark.png)
|
||||
content/branding/metro_firstrun_logo.png (metro_firstrun_logo.png)
|
||||
content/branding/metro_firstrun_logo@1.4x.png (metro_firstrun_logo@1.4x.png)
|
||||
content/branding/metro_firstrun_logo@1.8x.png (metro_firstrun_logo@1.8x.png)
|
||||
#endif
|
||||
|
BIN
browser/branding/aurora/content/metro_firstrun_logo.png
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
browser/branding/aurora/content/metro_firstrun_logo@1.4x.png
Normal file
After Width: | Height: | Size: 98 KiB |
BIN
browser/branding/aurora/content/metro_firstrun_logo@1.8x.png
Normal file
After Width: | Height: | Size: 146 KiB |
@ -21,4 +21,7 @@ browser.jar:
|
||||
content/branding/metro-about.css (metro-about.css)
|
||||
content/branding/metro-about-footer.png (metro-about-footer.png)
|
||||
content/branding/metro-about-wordmark.png (metro-about-wordmark.png)
|
||||
content/branding/metro_firstrun_logo.png (metro_firstrun_logo.png)
|
||||
content/branding/metro_firstrun_logo@1.4x.png (metro_firstrun_logo@1.4x.png)
|
||||
content/branding/metro_firstrun_logo@1.8x.png (metro_firstrun_logo@1.8x.png)
|
||||
#endif
|
||||
|
BIN
browser/branding/nightly/content/metro_firstrun_logo.png
Normal file
After Width: | Height: | Size: 51 KiB |
BIN
browser/branding/nightly/content/metro_firstrun_logo@1.4x.png
Normal file
After Width: | Height: | Size: 88 KiB |
BIN
browser/branding/nightly/content/metro_firstrun_logo@1.8x.png
Normal file
After Width: | Height: | Size: 132 KiB |
@ -20,4 +20,7 @@ browser.jar:
|
||||
content/branding/metro-about.css (metro-about.css)
|
||||
content/branding/metro-about-footer.png (metro-about-footer.png)
|
||||
content/branding/metro-about-wordmark.png (metro-about-wordmark.png)
|
||||
content/branding/metro_firstrun_logo.png (metro_firstrun_logo.png)
|
||||
content/branding/metro_firstrun_logo@1.4x.png (metro_firstrun_logo@1.4x.png)
|
||||
content/branding/metro_firstrun_logo@1.8x.png (metro_firstrun_logo@1.8x.png)
|
||||
#endif
|
||||
|
BIN
browser/branding/official/content/metro_firstrun_logo.png
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
browser/branding/official/content/metro_firstrun_logo@1.4x.png
Normal file
After Width: | Height: | Size: 78 KiB |
BIN
browser/branding/official/content/metro_firstrun_logo@1.8x.png
Normal file
After Width: | Height: | Size: 113 KiB |
@ -21,4 +21,7 @@ browser.jar:
|
||||
content/branding/metro-about.css (metro-about.css)
|
||||
content/branding/metro-about-footer.png (metro-about-footer.png)
|
||||
content/branding/metro-about-wordmark.png (metro-about-wordmark.png)
|
||||
content/branding/metro_firstrun_logo.png (metro_firstrun_logo.png)
|
||||
content/branding/metro_firstrun_logo@1.4x.png (metro_firstrun_logo@1.4x.png)
|
||||
content/branding/metro_firstrun_logo@1.8x.png (metro_firstrun_logo@1.8x.png)
|
||||
#endif
|
||||
|
BIN
browser/branding/unofficial/content/metro_firstrun_logo.png
Normal file
After Width: | Height: | Size: 51 KiB |
BIN
browser/branding/unofficial/content/metro_firstrun_logo@1.4x.png
Normal file
After Width: | Height: | Size: 88 KiB |
BIN
browser/branding/unofficial/content/metro_firstrun_logo@1.8x.png
Normal file
After Width: | Height: | Size: 132 KiB |
@ -213,7 +213,7 @@ let Util = {
|
||||
aURL == "about:empty" ||
|
||||
aURL == "about:home" ||
|
||||
aURL == "about:newtab" ||
|
||||
aURL == "about:start");
|
||||
aURL.startsWith("about:newtab"));
|
||||
},
|
||||
|
||||
// Title to use for emptyURL tabs.
|
||||
|
@ -308,7 +308,7 @@ var BrowserUI = {
|
||||
|
||||
isStartURI: function isStartURI(aURI) {
|
||||
aURI = aURI || Browser.selectedBrowser.currentURI.spec;
|
||||
return aURI == kStartURI || aURI == "about:start" || aURI == "about:home";
|
||||
return aURI.startsWith(kStartURI) || aURI == "about:start" || aURI == "about:home";
|
||||
},
|
||||
|
||||
updateStartURIAttributes: function (aURI) {
|
||||
|
69
browser/metro/base/content/startui/FirstRunOverlay.xul
Normal file
@ -0,0 +1,69 @@
|
||||
<?xml version="1.0"?>
|
||||
|
||||
<?xml-stylesheet href="chrome://browser/skin/firstrun.css" type="text/css"?>
|
||||
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
|
||||
%browserDTD;
|
||||
<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
|
||||
%brandDTD;
|
||||
]>
|
||||
|
||||
<overlay id="firstrun"
|
||||
xmlns:html="http://www.w3.org/1999/xhtml"
|
||||
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<hbox id="start-container">
|
||||
<box id="instruction-topsites-box" insertafter="start-topsites" class="firstrun">
|
||||
<box id="instruction-topsites">
|
||||
<vbox align="center">
|
||||
<image class="instruction-arrow arrow-left" />
|
||||
<label class="instruction-label" value="&firstRunTopSites.label;"/>
|
||||
</vbox>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
<vbox id="firstrun-welcome" insertafter="instruction-topsites-box" class="firstrun" align="center" pack="center">
|
||||
<image class="welcome-image" />
|
||||
<label class="welcome-title" value="&firstRunWelcome.label;"/>
|
||||
<label class="welcome-subtitle" value="&firstRunDifferent.label;"/>
|
||||
</vbox>
|
||||
|
||||
<box insertafter="start-bookmarks" class="firstrun">
|
||||
<box id="instruction-bookmarks">
|
||||
<vbox align="center">
|
||||
<image class="instruction-arrow arrow-right" />
|
||||
<label class="instruction-label" value="&firstRunBookmarks.label;"/>
|
||||
</vbox>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
<box id="instruction-history-container" insertafter="start-history" class="firstrun">
|
||||
<box id="instruction-history">
|
||||
<vbox align="center">
|
||||
<image class="instruction-arrow arrow-right" />
|
||||
<label class="instruction-label" value="&firstRunHistory.label;"/>
|
||||
</vbox>
|
||||
</box>
|
||||
</box>
|
||||
|
||||
<box id="instruction-tabs" class="firstrun">
|
||||
<vbox align="center">
|
||||
<image class="instruction-arrow arrow-top" />
|
||||
<label class="instruction-label" value="&firstRunTabs.label;"/>
|
||||
</vbox>
|
||||
</box>
|
||||
|
||||
<box id="instruction-menu" class="firstrun">
|
||||
<hbox>
|
||||
<label class="instruction-label" value="&firstRunMenu.label;"/>
|
||||
<image class="instruction-arrow arrow-down" />
|
||||
</hbox>
|
||||
</box>
|
||||
|
||||
</hbox>
|
||||
</overlay>
|
@ -26,6 +26,11 @@ var StartUI = {
|
||||
document.getElementById("bcast_preciseInput").setAttribute("input",
|
||||
this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
|
||||
|
||||
// NOTE: location.search doesn't work for about: pages
|
||||
if (location.href.indexOf("?firstrun") > 0) {
|
||||
document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);
|
||||
}
|
||||
|
||||
this._adjustDOMforViewState(this.chromeWin.ContentAreaObserver.viewstate);
|
||||
|
||||
TopSitesStartView.init();
|
||||
|
@ -99,6 +99,7 @@ chrome.jar:
|
||||
content/BookmarksView.js (content/startui/BookmarksView.js)
|
||||
content/HistoryView.js (content/startui/HistoryView.js)
|
||||
content/TopSitesView.js (content/startui/TopSitesView.js)
|
||||
content/FirstRunOverlay.xul (content/startui/FirstRunOverlay.xul)
|
||||
#ifdef MOZ_SERVICES_SYNC
|
||||
content/RemoteTabsView.js (content/startui/RemoteTabsView.js)
|
||||
#endif
|
||||
|
188
browser/metro/theme/firstrun.css
Normal file
@ -0,0 +1,188 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/* Rearrange about:start ---------------------- */
|
||||
|
||||
/* Disable all instructions in snapped mode */
|
||||
#start-container[viewstate="snapped"] .firstrun {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Keep only first column of tiles */
|
||||
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
|
||||
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
|
||||
#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
|
||||
-moz-column-count: 1 !important;
|
||||
}
|
||||
|
||||
/* Add some bottom padding to make sure bottom tile will not be
|
||||
below instruction */
|
||||
#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Keep only first few items */
|
||||
#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
|
||||
#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
|
||||
#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Add some space for the instructions */
|
||||
#start-container[viewstate="portrait"] {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
/* Remove watermark */
|
||||
.meta {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
|
||||
/* Welcome pane ---------------------- */
|
||||
|
||||
/* Logo and welcome message */
|
||||
#firstrun-welcome {
|
||||
width: 550px;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.welcome-image {
|
||||
background-image: url("chrome://branding/content/metro_firstrun_logo.png");
|
||||
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
#firstrun-welcome .welcome-title {
|
||||
font-size: 25px;
|
||||
color: #4d4e53;
|
||||
line-height: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#firstrun-welcome .welcome-subtitle {
|
||||
font-size: 16px;
|
||||
color: #808080;
|
||||
line-height: 22px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Instructions ---------------------- */
|
||||
|
||||
.instruction-label {
|
||||
font-size: 16px;
|
||||
color: #808080;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.instruction-arrow {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-top,
|
||||
.instruction-arrow.arrow-down {
|
||||
background-image: url("chrome://browser/skin/images/arrow-top.png");
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-left,
|
||||
.instruction-arrow.arrow-right {
|
||||
background-image: url("chrome://browser/skin/images/arrow-left.png");
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-right {
|
||||
transform: rotate(180deg) scaleY(-1);
|
||||
}
|
||||
|
||||
#instruction-tabs {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
transform: translateX(calc(630px - 50%));
|
||||
}
|
||||
|
||||
#start-container[viewstate="portrait"] #instruction-tabs {
|
||||
transform: translateX(calc(50vw - 50%));
|
||||
}
|
||||
|
||||
#start-container[viewstate="landscape"] #instruction-topsites {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#start-container[viewstate="portrait"] #instruction-topsites {
|
||||
transform: translateX(calc(150px + 50%)) translateY(-60px);
|
||||
}
|
||||
|
||||
#start-container[viewstate="landscape"] #instruction-history,
|
||||
#start-container[viewstate="landscape"] #instruction-bookmarks {
|
||||
position: absolute;
|
||||
top: 310px;
|
||||
transform: translateX(calc(-300px - 50%));
|
||||
}
|
||||
|
||||
#start-container[viewstate="portrait"] #instruction-history,
|
||||
#start-container[viewstate="portrait"] #instruction-bookmarks {
|
||||
transform: translateX(-55px);
|
||||
}
|
||||
|
||||
#start-container[viewstate="landscape"] #instruction-menu {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 37px;
|
||||
}
|
||||
|
||||
#start-container[viewstate="portrait"] #instruction-menu {
|
||||
position: absolute;
|
||||
right: 37px;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
|
||||
#start-container[viewstate="landscape"] #start-history {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
/* Higher resolution images ---------------------- */
|
||||
|
||||
@media (min-resolution: @min_res_140pc@) {
|
||||
/* Load 140% image when scaled by 140% */
|
||||
.instruction-arrow.arrow-top,
|
||||
.instruction-arrow.arrow-down {
|
||||
background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-left,
|
||||
.instruction-arrow.arrow-right {
|
||||
background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
|
||||
}
|
||||
|
||||
.welcome-image {
|
||||
background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-resolution: @min_res_180pc@) {
|
||||
/* Load 180% image when scaled by 180% */
|
||||
.instruction-arrow.arrow-top,
|
||||
.instruction-arrow.arrow-down {
|
||||
background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
|
||||
}
|
||||
|
||||
.instruction-arrow.arrow-left,
|
||||
.instruction-arrow.arrow-right {
|
||||
background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
|
||||
}
|
||||
|
||||
.welcome-image {
|
||||
background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
|
||||
}
|
||||
}
|
BIN
browser/metro/theme/images/arrow-left.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
browser/metro/theme/images/arrow-left@1.4x.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
browser/metro/theme/images/arrow-left@1.8x.png
Normal file
After Width: | Height: | Size: 3.4 KiB |
BIN
browser/metro/theme/images/arrow-top.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
browser/metro/theme/images/arrow-top@1.4x.png
Normal file
After Width: | Height: | Size: 2.8 KiB |
BIN
browser/metro/theme/images/arrow-top@1.8x.png
Normal file
After Width: | Height: | Size: 3.5 KiB |
@ -22,6 +22,7 @@ chrome.jar:
|
||||
* skin/tiles.css (tiles.css)
|
||||
skin/touchcontrols.css (touchcontrols.css)
|
||||
skin/netError.css (netError.css)
|
||||
skin/firstrun.css (firstrun.css)
|
||||
% override chrome://global/skin/about.css chrome://browser/skin/about.css
|
||||
% override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
|
||||
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
|
||||
@ -135,3 +136,10 @@ chrome.jar:
|
||||
skin/images/overlay-back.png (images/overlay-back.png)
|
||||
skin/images/overlay-plus.png (images/overlay-plus.png)
|
||||
skin/images/autoscroll.png (images/autoscroll.png)
|
||||
|
||||
skin/images/arrow-top.png (images/arrow-top.png)
|
||||
skin/images/arrow-top@1.4x.png (images/arrow-top@1.4x.png)
|
||||
skin/images/arrow-top@1.8x.png (images/arrow-top@1.8x.png)
|
||||
skin/images/arrow-left.png (images/arrow-left.png)
|
||||
skin/images/arrow-left@1.4x.png (images/arrow-left@1.4x.png)
|
||||
skin/images/arrow-left@1.8x.png (images/arrow-left@1.8x.png)
|
||||
|
@ -333,23 +333,23 @@ richgriditem[bending] > .tile-content {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* Empty/unused tiles */
|
||||
richgriditem:not([value]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
richgriditem[tiletype="thumbnail"]:not([value]) {
|
||||
visibility: visible;
|
||||
}
|
||||
richgriditem:not([value]) > .tile-content {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
|
||||
/* Empty/unused tiles */
|
||||
richgriditem:not([value]) > .tile-content {
|
||||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
|
||||
background-image: url("chrome://browser/skin/images/firefox-watermark.png");
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(255,255,255, 0.2);
|
||||
background-position: center center;
|
||||
background-size: @compactgrid_row_height@;
|
||||
}
|
||||
richgriditem[tiletype="thumbnail"]:not([value]) > .tile-content {
|
||||
background-size: @grid_row_height@;
|
||||
}
|
||||
|
||||
|