зеркало из https://github.com/mozilla/gecko-dev.git
Backed out 3 changesets (bug 1138818) for bc1 orange CLOSED TREE
Backed out changeset 70121f99d5f1 (bug 1138818) Backed out changeset cb5842311d43 (bug 1138818) Backed out changeset 5b45e43dec40 (bug 1138818)
This commit is contained in:
Wes Kocher
Родитель
750a9ef8a9
Коммит
0c1c3eca7b
|
|
@ -1631,9 +1631,6 @@ pref("browser.newtab.preload", true);
|
|||
// Remembers if the about:newtab intro has been shown
|
||||
pref("browser.newtabpage.introShown", false);
|
||||
|
||||
// Remembers if the about:newtab update intro has been shown
|
||||
pref("browser.newtabpage.updateIntroShown", false);
|
||||
|
||||
// Toggles the content of 'about:newtab'. Shows the grid when enabled.
|
||||
pref("browser.newtabpage.enabled", true);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,231 +5,53 @@
|
|||
#endif
|
||||
|
||||
const PREF_INTRO_SHOWN = "browser.newtabpage.introShown";
|
||||
const PREF_UPDATE_INTRO_SHOWN = "browser.newtabpage.updateIntroShown";
|
||||
|
||||
// These consts indicate the type of intro/onboarding we show.
|
||||
const WELCOME = "welcome";
|
||||
const UPDATE = "update";
|
||||
|
||||
// The maximum paragraph ID listed for 'newtab.intro.paragraph'
|
||||
// strings in newTab.properties
|
||||
const MAX_PARAGRAPH_ID = 9;
|
||||
|
||||
const NUM_INTRO_PAGES = 3;
|
||||
|
||||
let gIntro = {
|
||||
_nodeIDSuffixes: [
|
||||
"mask",
|
||||
"modal",
|
||||
"numerical-progress",
|
||||
"text",
|
||||
"buttons",
|
||||
"image",
|
||||
"header",
|
||||
"footer"
|
||||
"panel",
|
||||
"what",
|
||||
],
|
||||
|
||||
_imageTypes: {
|
||||
COG : "cog",
|
||||
PIN_REMOVE : "pin-remove",
|
||||
SUGGESTED : "suggested"
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* The paragraphs & buttons to show on each page in the intros.
|
||||
*
|
||||
* _introPages.welcome and _introPages.update contain an array of
|
||||
* indices of paragraphs to be used to lookup text in _paragraphs
|
||||
* for each page of the intro.
|
||||
*
|
||||
* Similarly, _introPages.buttons is used to lookup text for buttons
|
||||
* on each page of the intro.
|
||||
*/
|
||||
_introPages: {
|
||||
"welcome": [[0,1],[2,3],[4,5]],
|
||||
"update": [[6,5],[4,3],[0,1]],
|
||||
"buttons": [["skip", "continue"],["back", "next"],["back", "gotit"]],
|
||||
"welcome-images": ["cog", "pin-remove", "suggested"],
|
||||
"update-images": ["suggested", "pin-remove", "cog"]
|
||||
},
|
||||
|
||||
_paragraphs: [],
|
||||
|
||||
_nodes: {},
|
||||
|
||||
_images: {},
|
||||
|
||||
init: function() {
|
||||
for (let idSuffix of this._nodeIDSuffixes) {
|
||||
this._nodes[idSuffix] = document.getElementById("newtab-intro-" + idSuffix);
|
||||
}
|
||||
},
|
||||
|
||||
_setImage: function(imageType) {
|
||||
// Remove previously existing images, if any.
|
||||
let currImageHolder = this._nodes.image;
|
||||
while (currImageHolder.firstChild) {
|
||||
currImageHolder.removeChild(currImageHolder.firstChild);
|
||||
}
|
||||
|
||||
this._nodes.image.appendChild(this._images[imageType]);
|
||||
},
|
||||
|
||||
_goToPage: function(pageNum) {
|
||||
this._currPage = pageNum;
|
||||
|
||||
this._nodes["numerical-progress"].innerHTML = `${this._bold(pageNum + 1)} / ${NUM_INTRO_PAGES}`;
|
||||
this._nodes["numerical-progress"].setAttribute("page", pageNum);
|
||||
|
||||
// Set the page's image
|
||||
let imageType = this._introPages[this._onboardingType + "-images"][pageNum];
|
||||
this._setImage(imageType);
|
||||
|
||||
// Set the paragraphs
|
||||
let paragraphNodes = this._nodes.text.getElementsByTagName("p");
|
||||
let paragraphIDs = this._introPages[this._onboardingType][pageNum];
|
||||
paragraphIDs.forEach((arg, index) => {
|
||||
paragraphNodes[index].innerHTML = this._paragraphs[arg];
|
||||
});
|
||||
|
||||
// Set the buttons
|
||||
let buttonNodes = this._nodes.buttons.getElementsByTagName("input");
|
||||
let buttonIDs = this._introPages.buttons[pageNum];
|
||||
buttonIDs.forEach((arg, index) => {
|
||||
buttonNodes[index].setAttribute("value", newTabString("intro." + arg));
|
||||
});
|
||||
},
|
||||
|
||||
_bold: function(str) {
|
||||
return `<strong>${str}</strong>`
|
||||
},
|
||||
|
||||
_link: function(url, text) {
|
||||
return `<a href="${url}" target="_blank">${text}</a>`;
|
||||
},
|
||||
|
||||
_span: function(text, className) {
|
||||
return `<span class="${className}">${text}</span>`;
|
||||
},
|
||||
|
||||
_exitIntro: function() {
|
||||
this._nodes.mask.style.opacity = 0;
|
||||
this._nodes.mask.addEventListener("transitionend", () => {
|
||||
this._nodes.mask.style.display = "none";
|
||||
});
|
||||
},
|
||||
|
||||
_back: function() {
|
||||
if (this._currPage == 0) {
|
||||
// We're on the first page so 'back' means exit.
|
||||
this._exitIntro();
|
||||
return;
|
||||
}
|
||||
this._goToPage(this._currPage - 1);
|
||||
},
|
||||
|
||||
_next: function() {
|
||||
if (this._currPage == (NUM_INTRO_PAGES - 1)) {
|
||||
// We're on the last page so 'next' means exit.
|
||||
this._exitIntro();
|
||||
return;
|
||||
}
|
||||
this._goToPage(this._currPage + 1);
|
||||
},
|
||||
|
||||
_generateImages: function() {
|
||||
Object.keys(this._imageTypes).forEach(type => {
|
||||
let image = "";
|
||||
let imageClass = "";
|
||||
switch (this._imageTypes[type]) {
|
||||
case this._imageTypes.COG:
|
||||
image = document.getElementById("newtab-customize-panel").cloneNode(true);
|
||||
image.removeAttribute("hidden");
|
||||
image.removeAttribute("type");
|
||||
image.classList.add("newtab-intro-image-customize");
|
||||
break;
|
||||
case this._imageTypes.PIN_REMOVE:
|
||||
imageClass = "-hover";
|
||||
// fall-through
|
||||
case this._imageTypes.SUGGESTED:
|
||||
image = document.createElementNS(HTML_NAMESPACE, "div");
|
||||
image.classList.add("newtab-intro-cell-wrapper");
|
||||
|
||||
// Create the cell's inner HTML code.
|
||||
image.innerHTML =
|
||||
'<div class="newtab-intro-cell' + imageClass + '">' +
|
||||
' <div class="newtab-site newtab-intro-image-tile" type="sponsored">' +
|
||||
' <a class="newtab-link">' +
|
||||
' <span class="newtab-thumbnail"/>' +
|
||||
' <span class="newtab-title">Example Title</span>' +
|
||||
' </a>' +
|
||||
' <input type="button" class="newtab-control newtab-control-pin"/>' +
|
||||
' <input type="button" class="newtab-control newtab-control-block"/>' + (imageClass ? "" :
|
||||
' <span class="newtab-sponsored">' + newTabString("suggested.tag") + '</span>') +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
break;
|
||||
}
|
||||
this._images[this._imageTypes[type]] = image;
|
||||
});
|
||||
},
|
||||
|
||||
_generateParagraphs: function() {
|
||||
let customizeIcon = '<input type="button" class="newtab-control newtab-customize"/>';
|
||||
|
||||
let substringMappings = {
|
||||
"2": [this._link(TILES_PRIVACY_LINK, newTabString("privacy.link"))],
|
||||
"4": [customizeIcon, this._bold(newTabString("intro.controls"))],
|
||||
"6": [this._bold(newTabString("intro.remove")), this._bold(newTabString("intro.pin"))],
|
||||
"7": [this._link(TILES_INTRO_LINK, newTabString("learn.link"))],
|
||||
"8": [this._link(TILES_INTRO_LINK, newTabString("learn.link"))]
|
||||
}
|
||||
|
||||
for (let i = 1; i <= MAX_PARAGRAPH_ID; i++) {
|
||||
try {
|
||||
this._paragraphs.push(newTabString("intro.paragraph" + i, substringMappings[i]));
|
||||
} catch (ex) {
|
||||
// Paragraph with this ID doesn't exist so continue
|
||||
}
|
||||
}
|
||||
this._nodes.panel.addEventListener("popupshowing", e => this._setUpPanel());
|
||||
this._nodes.panel.addEventListener("popuphidden", e => this._hidePanel());
|
||||
this._nodes.what.addEventListener("click", e => this.showPanel());
|
||||
},
|
||||
|
||||
showIfNecessary: function() {
|
||||
if (!Services.prefs.getBoolPref(PREF_INTRO_SHOWN)) {
|
||||
this._onboardingType = WELCOME;
|
||||
this.showPanel();
|
||||
} else if (!Services.prefs.getBoolPref(PREF_UPDATE_INTRO_SHOWN)) {
|
||||
this._onboardingType = UPDATE;
|
||||
Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
|
||||
this.showPanel();
|
||||
}
|
||||
Services.prefs.setBoolPref(PREF_INTRO_SHOWN, true);
|
||||
Services.prefs.setBoolPref(PREF_UPDATE_INTRO_SHOWN, true);
|
||||
},
|
||||
|
||||
showPanel: function() {
|
||||
this._nodes.mask.style.display = "block";
|
||||
this._nodes.mask.style.opacity = 1;
|
||||
|
||||
if (!this._paragraphs.length) {
|
||||
// It's our first time showing the panel. Do some initial setup
|
||||
this._generateParagraphs();
|
||||
this._generateImages();
|
||||
}
|
||||
this._goToPage(0);
|
||||
|
||||
// Header text
|
||||
let brand = Services.strings.createBundle("chrome://branding/locale/brand.properties");
|
||||
let brandShortName = brand.GetStringFromName("brandShortName");
|
||||
let boldSubstr = this._onboardingType == WELCOME ? this._span(brandShortName, "bold") : "";
|
||||
this._nodes.header.innerHTML = newTabString("intro.header." + this._onboardingType, [boldSubstr]);
|
||||
|
||||
// Footer links
|
||||
let footerLinkNodes = this._nodes.footer.getElementsByTagName("li");
|
||||
[this._link(TILES_INTRO_LINK, newTabString("learn.link2")),
|
||||
this._link(TILES_PRIVACY_LINK, newTabString("privacy.link2")),
|
||||
].forEach((arg, index) => {
|
||||
footerLinkNodes[index].innerHTML = arg;
|
||||
});
|
||||
// Point the panel at the 'what' link
|
||||
this._nodes.panel.hidden = false;
|
||||
this._nodes.panel.openPopup(this._nodes.what);
|
||||
},
|
||||
|
||||
_setUpPanel: function() {
|
||||
// Build the panel if necessary
|
||||
if (this._nodes.panel.childNodes.length == 1) {
|
||||
['<a href="' + TILES_INTRO_LINK + '">' + newTabString("learn.link") + "</a>",
|
||||
'<a href="' + TILES_PRIVACY_LINK + '">' + newTabString("privacy.link") + "</a>",
|
||||
'<input type="button" class="newtab-customize"/>',
|
||||
].forEach((arg, index) => {
|
||||
let paragraph = document.createElementNS(HTML_NAMESPACE, "p");
|
||||
this._nodes.panel.appendChild(paragraph);
|
||||
paragraph.innerHTML = newTabString("intro.paragraph" + (index + 1), [arg]);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_hidePanel: function() {
|
||||
this._nodes.panel.hidden = true;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ input[type=button] {
|
|||
position: absolute;
|
||||
right: 70px;
|
||||
top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#newtab-intro-what:-moz-locale-dir(rtl) {
|
||||
|
|
@ -158,24 +157,13 @@ input[type=button] {
|
|||
}
|
||||
|
||||
/* CELLS */
|
||||
.newtab-cell,
|
||||
.newtab-intro-cell,
|
||||
.newtab-intro-cell-hover {
|
||||
.newtab-cell {
|
||||
display: -moz-box;
|
||||
height: 210px;
|
||||
margin: 20px 10px 35px;
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
.newtab-intro-cell-wrapper {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.newtab-intro-cell,
|
||||
.newtab-intro-cell-hover {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* SITES */
|
||||
.newtab-site {
|
||||
position: relative;
|
||||
|
|
@ -318,8 +306,7 @@ input[type=button] {
|
|||
}
|
||||
|
||||
.newtab-control:-moz-focusring,
|
||||
.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control,
|
||||
.newtab-intro-cell-hover .newtab-control {
|
||||
.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -571,11 +558,6 @@ input[type=button] {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item,
|
||||
.newtab-customize-complex-option {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newtab-customize-panel-item:not([selected]),
|
||||
.newtab-customize-panel-subitem:not([selected]){
|
||||
color: #7A7A7A;
|
||||
|
|
@ -590,7 +572,7 @@ input[type=button] {
|
|||
.selectable:not([selected]):hover {
|
||||
background: url("chrome://global/skin/menu/shared-menu-check-hover.svg") no-repeat #FFFFFF;
|
||||
background-size: 16px 16px;
|
||||
background-position: 15px 15px;
|
||||
background-position: 15px 20px;
|
||||
color: #171F26;
|
||||
}
|
||||
|
||||
|
|
@ -602,7 +584,7 @@ input[type=button] {
|
|||
.newtab-search-panel-engine[selected] {
|
||||
background: url("chrome://global/skin/menu/shared-menu-check-active.svg") no-repeat transparent;
|
||||
background-size: 16px 16px;
|
||||
background-position: 15px 15px;
|
||||
background-position: 15px 20px;
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -624,7 +606,7 @@ input[type=button] {
|
|||
.newtab-customize-panel-subitem {
|
||||
font-size: 12px;
|
||||
padding-left: 40px;
|
||||
padding-bottom: 15px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid threedshadow;
|
||||
}
|
||||
|
||||
|
|
@ -635,244 +617,10 @@ input[type=button] {
|
|||
.newtab-customize-panel-superitem {
|
||||
line-height: 14px;
|
||||
border-bottom: medium none !important;
|
||||
padding: 15px 0px 10px 40px;
|
||||
padding: 20px 0px 10px 40px;
|
||||
}
|
||||
|
||||
.searchSuggestionTable {
|
||||
font: message-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Onboarding styling
|
||||
*/
|
||||
|
||||
#newtab-intro-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #424F5A;
|
||||
z-index:102;
|
||||
background-color: rgba(66,79,90,0.95);
|
||||
transition: opacity .5s linear;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#newtab-intro-modal {
|
||||
font-family: "Helvetica";
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#FFFFFF, #F9F9F9);
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
#newtab-intro-header {
|
||||
font-size: 28px;
|
||||
color: #737980;
|
||||
text-align: center;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #E0DFE0;
|
||||
padding-bottom: 10px;
|
||||
width: 600px;
|
||||
display: block;
|
||||
margin: 0px auto;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#newtab-intro-header .bold {
|
||||
font-weight: 500;
|
||||
color: #343F48;
|
||||
}
|
||||
|
||||
#newtab-intro-footer {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
margin: 0px auto;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background-color: white;
|
||||
box-shadow: 0 -1px 4px -1px #EBEBEB;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
#newtab-intro-footer > ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#newtab-intro-footer > ul > li {
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#newtab-intro-footer > ul > li > a {
|
||||
text-decoration: none;
|
||||
color: #4A90E2;
|
||||
}
|
||||
|
||||
#newtab-intro-footer > ul > li > a:visited {
|
||||
color: #171F26;
|
||||
}
|
||||
|
||||
#newtab-intro-footer > ul > :first-child {
|
||||
border-right: solid 1px #C1C1C1;
|
||||
}
|
||||
|
||||
#newtab-intro-body {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 50px;
|
||||
margin: 25px 50px 30px;
|
||||
}
|
||||
|
||||
#newtab-intro-content > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#newtab-intro-content {
|
||||
height: 210px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#newtab-intro-buttons {
|
||||
height: 90px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
#newtab-intro-tile {
|
||||
width: 290px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#newtab-intro-text,
|
||||
#newtab-intro-image {
|
||||
height: 100%;
|
||||
width: 270px;
|
||||
right: 0px;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
#newtab-intro-image {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.newtab-intro-image-tile {
|
||||
}
|
||||
|
||||
.newtab-intro-image-customize {
|
||||
display: block;
|
||||
box-shadow: 3px 3px 5px #888;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.newtab-intro-image-customize .newtab-customize-panel-item:not([selected]):hover {
|
||||
background-color: inherit;
|
||||
color: #7A7A7A;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#newtab-intro-text > p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
#newtab-intro-text .newtab-control {
|
||||
background-size: 18px auto;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
vertical-align: middle;
|
||||
opacity: 1;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
#newtab-intro-buttons > input {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
margin: 0px 5px;
|
||||
vertical-align: bottom;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #2C72E2;
|
||||
background-color: #FFFFFF;
|
||||
color: #4A90E2;
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
#newtab-intro-buttons > input[default] {
|
||||
background-color: #4A90E2;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#newtab-intro-buttons > input:hover {
|
||||
background-color: #2C72E2;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#newtab-intro-progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#newtab-intro-numerical-progress {
|
||||
text-align: center;
|
||||
top: 15px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #424F5A;
|
||||
}
|
||||
|
||||
#newtab-intro-graphical-progress {
|
||||
text-align: left;
|
||||
border-radius: 1.5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 10px auto 0px;
|
||||
height: 3px;
|
||||
top: 8px;
|
||||
width: 35px;
|
||||
background-color: #DCDCDC;
|
||||
}
|
||||
|
||||
#indicator {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: inline-block;
|
||||
width: 0%;
|
||||
height: 4px;
|
||||
background: none repeat scroll 0% 0% #FF9500;
|
||||
transition: width 0.3s ease-in-out 0s;
|
||||
}
|
||||
|
||||
#newtab-intro-numerical-progress[page="0"] + #newtab-intro-graphical-progress > #indicator {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
#newtab-intro-numerical-progress[page="1"] + #newtab-intro-graphical-progress > #indicator {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
#newtab-intro-numerical-progress[page="2"] + #newtab-intro-graphical-progress > #indicator {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,35 +58,6 @@
|
|||
</xul:hbox>
|
||||
</xul:panel>
|
||||
|
||||
<div id="newtab-intro-mask">
|
||||
<div id="newtab-intro-modal">
|
||||
<div id="newtab-intro-progress">
|
||||
<div id="newtab-intro-numerical-progress"/>
|
||||
<div id="newtab-intro-graphical-progress">
|
||||
<span id="indicator"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newtab-intro-header"/>
|
||||
<div id="newtab-intro-body">
|
||||
<div id="newtab-intro-content">
|
||||
<div id="newtab-intro-image"/>
|
||||
<div id="newtab-intro-text">
|
||||
<p/><p/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newtab-intro-buttons">
|
||||
<input type="button" onclick="gIntro._back()"/>
|
||||
<input type="button" default="true" onclick="gIntro._next()"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newtab-intro-footer">
|
||||
<ul>
|
||||
<li/><li/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="newtab-scrollbox">
|
||||
|
||||
<div id="newtab-vertical-margin">
|
||||
|
|
|
|||
|
|
@ -2,96 +2,50 @@
|
|||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
const INTRO_PREF = "browser.newtabpage.introShown";
|
||||
const UPDATE_INTRO_PREF = "browser.newtabpage.updateIntroShown";
|
||||
const PRELOAD_PREF = "browser.newtab.preload";
|
||||
|
||||
function runTests() {
|
||||
let origIntro = Services.prefs.getBoolPref(INTRO_PREF);
|
||||
let origUpdateIntro = Services.prefs.getBoolPref(UPDATE_INTRO_PREF);
|
||||
let origPreload = Services.prefs.getBoolPref(PRELOAD_PREF);
|
||||
registerCleanupFunction(_ => {
|
||||
Services.prefs.setBoolPref(INTRO_PREF, origIntro);
|
||||
Services.prefs.setBoolPref(INTRO_PREF, origUpdateIntro);
|
||||
Services.prefs.setBoolPref(PRELOAD_PREF, origPreload);
|
||||
});
|
||||
|
||||
// Test with preload false
|
||||
Services.prefs.setBoolPref(INTRO_PREF, false);
|
||||
Services.prefs.setBoolPref(UPDATE_INTRO_PREF, false);
|
||||
Services.prefs.setBoolPref(PRELOAD_PREF, false);
|
||||
|
||||
let intro;
|
||||
let brand = Services.strings.createBundle("chrome://branding/locale/brand.properties");
|
||||
let brandShortName = brand.GetStringFromName("brandShortName");
|
||||
let panel;
|
||||
function maybeWaitForPanel() {
|
||||
// If already open, no need to wait
|
||||
if (panel.state == "open") {
|
||||
executeSoon(TestRunner.next);
|
||||
return;
|
||||
}
|
||||
|
||||
// We're expecting the panel to open, so wait for it
|
||||
panel.addEventListener("popupshown", TestRunner.next);
|
||||
isnot(panel.state, "open", "intro panel can be slow to show");
|
||||
}
|
||||
|
||||
yield addNewTabPageTab();
|
||||
intro = getContentDocument().getElementById("newtab-intro-mask");
|
||||
is(intro.style.opacity, 1, "intro automatically shown on first opening");
|
||||
is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
|
||||
'Welcome to New Tab on <span xmlns="http://www.w3.org/1999/xhtml" class="bold">' + brandShortName + '</span>!', "we show the first-run intro.");
|
||||
panel = getContentDocument().getElementById("newtab-intro-panel");
|
||||
yield maybeWaitForPanel();
|
||||
is(panel.state, "open", "intro automatically shown on first opening");
|
||||
is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
|
||||
is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab avoids showing update if intro was shown");
|
||||
|
||||
yield addNewTabPageTab();
|
||||
intro = getContentDocument().getElementById("newtab-intro-mask");
|
||||
is(intro.style.opacity, 0, "intro not shown on second opening");
|
||||
panel = getContentDocument().getElementById("newtab-intro-panel");
|
||||
is(panel.state, "closed", "intro not shown on second opening");
|
||||
|
||||
// Test with preload true
|
||||
Services.prefs.setBoolPref(INTRO_PREF, false);
|
||||
Services.prefs.setBoolPref(PRELOAD_PREF, true);
|
||||
|
||||
yield addNewTabPageTab();
|
||||
intro = getContentDocument().getElementById("newtab-intro-mask");
|
||||
is(intro.style.opacity, 1, "intro automatically shown on preloaded opening");
|
||||
is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
|
||||
'Welcome to New Tab on <span xmlns="http://www.w3.org/1999/xhtml" class="bold">' + brandShortName + '</span>!', "we show the first-run intro.");
|
||||
panel = getContentDocument().getElementById("newtab-intro-panel");
|
||||
yield maybeWaitForPanel();
|
||||
is(panel.state, "open", "intro automatically shown on preloaded opening");
|
||||
is(Services.prefs.getBoolPref(INTRO_PREF), true, "newtab remembers that the intro was shown");
|
||||
is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab avoids showing update if intro was shown");
|
||||
|
||||
// Test with first run true but update false
|
||||
Services.prefs.setBoolPref(UPDATE_INTRO_PREF, false);
|
||||
|
||||
yield addNewTabPageTab();
|
||||
intro = getContentDocument().getElementById("newtab-intro-mask");
|
||||
is(intro.style.opacity, 1, "intro automatically shown on preloaded opening");
|
||||
is(getContentDocument().getElementById("newtab-intro-header").innerHTML,
|
||||
"New Tab got an update!", "we show the update intro.");
|
||||
is(Services.prefs.getBoolPref(INTRO_PREF), true, "INTRO_PREF stays true");
|
||||
is(Services.prefs.getBoolPref(UPDATE_INTRO_PREF), true, "newtab remembers that the update intro was show");
|
||||
|
||||
// Test clicking the 'next' and 'back' buttons.
|
||||
let buttons = getContentDocument().getElementById("newtab-intro-buttons").getElementsByTagName("input");
|
||||
let progress = getContentDocument().getElementById("newtab-intro-numerical-progress");
|
||||
let back = buttons[0];
|
||||
let next = buttons[1];
|
||||
|
||||
synthesizeNativeMouseLDown(next);
|
||||
synthesizeNativeMouseLUp(next).then(() => {
|
||||
is(progress.getAttribute("page"), 1, "we get to the 2nd page");
|
||||
is(intro.style.opacity, 1, "intro visible");
|
||||
}, Cu.reportError);
|
||||
|
||||
synthesizeNativeMouseLDown(next);
|
||||
synthesizeNativeMouseLUp(next).then(() => {
|
||||
is(progress.getAttribute("page"), 2, "we get to the 3rd page");
|
||||
is(intro.style.opacity, 1, "intro visible");
|
||||
}, Cu.reportError);
|
||||
|
||||
synthesizeNativeMouseLDown(back);
|
||||
synthesizeNativeMouseLUp(back).then(() => {
|
||||
is(progress.getAttribute("page"), 1, "go back to 2nd page");
|
||||
is(intro.style.opacity, 1, "intro visible");
|
||||
}, Cu.reportError);
|
||||
|
||||
synthesizeNativeMouseLDown(back);
|
||||
synthesizeNativeMouseLUp(back).then(() => {
|
||||
is(progress.getAttribute("page"), 0, "go back to 1st page");
|
||||
is(intro.style.opacity, 1, "intro visible");
|
||||
}, Cu.reportError);
|
||||
|
||||
synthesizeNativeMouseLDown(back);
|
||||
synthesizeNativeMouseLUp(back).then(() => {
|
||||
is(progress.getAttribute("page"), 0, "another back will 'skip tutorial'");
|
||||
is(intro.style.opacity, 0, "intro exited");
|
||||
}, Cu.reportError);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,6 @@ newtab.block=Remove this site
|
|||
# and enhanced tiles on the same line as the tile's title, so prefer short
|
||||
# strings to avoid overlap. This string should be uppercase.
|
||||
newtab.sponsored.button=SPONSORED
|
||||
# LOCALIZATION NOTE(newtab.suggested.button): This text appears for sponsored
|
||||
# and suggested tiles on the same line as the tile's title, so prefer short
|
||||
# strings to avoid overlap. This string should be uppercase.
|
||||
newtab.suggested.tag=SUGGESTED
|
||||
# LOCALIZATION NOTE(newtab.suggested.button): %1$S will be replaced inline by
|
||||
# one of the user's top 100 sites that triggered this suggested tile.
|
||||
# This text appears for suggested tiles under the tile's title, so prefer short
|
||||
|
|
@ -34,38 +30,14 @@ newtab.suggested.explain=This site is suggested to you by Mozilla. You can remov
|
|||
# the gear icon used to customize the new tab window. %2$S will be replaced by
|
||||
# an active link using string newtab.learn.link as text.
|
||||
newtab.enhanced.explain=A Mozilla partner has visually enhanced this tile, replacing the screenshot. You can turn off enhanced tiles by clicking the %1$S button for your preferences. %2$S
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph1): %1$S will be replaced inline by
|
||||
# active link using string newtab.learn.link as text.
|
||||
newtab.intro.paragraph1=When you open a new tab, you’ll see tiles from the sites you frequently visit, along with tiles that we think might be of interest to you. Some of these tiles may be sponsored by Mozilla partners. We’ll always indicate to you which tiles are sponsored. %1$S
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph2): %1$S will be replaced inline by
|
||||
# active link using string newtab.privacy.link as text.
|
||||
newtab.intro.paragraph2=In order to provide this service, Mozilla collects and uses certain analytics information relating to your use of the tiles in accordance with our %1$S.
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph4): %1$S will be replaced inline by
|
||||
# the gear icon used to customize the new tab window. %2$S will be replaced by
|
||||
# newtab.intro.controls as text
|
||||
newtab.intro.paragraph4=You can turn off this feature by clicking the gear (%1$S) button and selecting "Show blank page" in the %2$S menu.
|
||||
newtab.intro.paragraph5=New Tab will show the sites you visit most frequently, along with sites we think might be of interest to you. To get started, you'll see several sites from Mozilla.
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph6): %1$S will be replaced by
|
||||
# newtab.intro.remove as bold text. %2$S will be replaced by
|
||||
# newtab.intro.pin as bold text
|
||||
newtab.intro.paragraph6=You can %1$S or %2$S any site by using the controls available on rollover.
|
||||
newtab.intro.paragraph7=Some of the sites you will see may be suggested by Mozilla and may be sponsored by a Mozilla partner. We'll always indicate which sites are sponsored.
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph8): %1$S will be replaced inline by
|
||||
# an active link using string newtab.learn.link as text.
|
||||
newtab.intro.paragraph8=Firefox will only show sites that most closely match your interests on the Web. %1$S
|
||||
newtab.intro.paragraph9=Now when you open New Tab, you'll also see sites we think might be interesting to you.
|
||||
# LOCALIZATION NOTE(newtab.intro.controls): the controls in the gear icon
|
||||
# menu for customizing the new tab window. Used in newtab.intro.paragraph4
|
||||
newtab.intro.controls=New Tab Controls
|
||||
# LOCALIZATION NOTE(newtab.intro.paragraph3): %1$S will be replaced inline by
|
||||
# the gear icon used to customize the new tab window.
|
||||
newtab.intro.paragraph3=You can turn off the tiles feature by clicking the %1$S button for your preferences.
|
||||
newtab.learn.link=Learn more…
|
||||
newtab.privacy.link=Privacy Notice
|
||||
newtab.learn.link2=More about New Tab
|
||||
newtab.privacy.link2=About your privacy
|
||||
newtab.intro.remove=remove
|
||||
newtab.intro.pin=pin
|
||||
# LOCALIZATION NOTE(newtab.intro.header.welcome): %1$S will be replaced by
|
||||
# newtab.intro.firefox as bold text.
|
||||
newtab.intro.header.welcome=Welcome to New Tab on %1$S!
|
||||
newtab.intro.header.update=New Tab got an update!
|
||||
newtab.intro.skip=Skip this
|
||||
newtab.intro.continue=Continue tour
|
||||
newtab.intro.back=Back
|
||||
newtab.intro.next=Next
|
||||
newtab.intro.gotit=Got it!
|
||||
|
|
|
|||
|
|
@ -146,7 +146,6 @@ browser.jar:
|
|||
skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css)
|
||||
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
|
||||
skin/classic/browser/newtab/controls.svg (../shared/newtab/controls.svg)
|
||||
skin/classic/browser/newtab/whimsycorn.png (../shared/newtab/whimsycorn.png)
|
||||
skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png)
|
||||
skin/classic/browser/panic-panel/header-small.png (../shared/panic-panel/header-small.png)
|
||||
skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png)
|
||||
|
|
|
|||
|
|
@ -231,7 +231,6 @@ browser.jar:
|
|||
skin/classic/browser/feeds/feedIcon16.png (feeds/feedIcon16.png)
|
||||
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
|
||||
skin/classic/browser/newtab/controls.svg (../shared/newtab/controls.svg)
|
||||
skin/classic/browser/newtab/whimsycorn.png (../shared/newtab/whimsycorn.png)
|
||||
skin/classic/browser/setDesktopBackground.css
|
||||
skin/classic/browser/monitor.png
|
||||
skin/classic/browser/monitor_16-10.png
|
||||
|
|
|
|||
|
|
@ -87,9 +87,7 @@
|
|||
}
|
||||
|
||||
/* CELLS */
|
||||
.newtab-cell,
|
||||
.newtab-intro-cell,
|
||||
.newtab-intro-cell-hover {
|
||||
.newtab-cell {
|
||||
background-color: rgba(255,255,255,.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -108,19 +106,12 @@
|
|||
}
|
||||
|
||||
.newtab-cell:not([ignorehover]) > .newtab-site:hover,
|
||||
.newtab-site[dragged],
|
||||
.newtab-intro-cell-hover {
|
||||
.newtab-site[dragged] {
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 0 6px 2px #4cb1ff;
|
||||
margin: -2px;
|
||||
}
|
||||
|
||||
.newtab-intro-cell .newtab-thumbnail,
|
||||
.newtab-intro-cell-hover .newtab-thumbnail {
|
||||
background-color: #cae1f4;
|
||||
background-image: url("chrome://browser/skin/newtab/whimsycorn.png");
|
||||
}
|
||||
|
||||
.newtab-site[dragged] {
|
||||
transition-property: box-shadow, background-color;
|
||||
background-color: rgb(242,242,242);
|
||||
|
|
|
|||
|
|
@ -187,7 +187,6 @@ browser.jar:
|
|||
skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css)
|
||||
* skin/classic/browser/newtab/newTab.css (newtab/newTab.css)
|
||||
skin/classic/browser/newtab/controls.svg (../shared/newtab/controls.svg)
|
||||
skin/classic/browser/newtab/whimsycorn.png (../shared/newtab/whimsycorn.png)
|
||||
skin/classic/browser/panic-panel/header.png (../shared/panic-panel/header.png)
|
||||
skin/classic/browser/panic-panel/header-small.png (../shared/panic-panel/header-small.png)
|
||||
skin/classic/browser/panic-panel/icons.png (../shared/panic-panel/icons.png)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче