зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 98e7519f8247 (bug 1699515) for causing failures due to pocket/content/panels/js/home/overlay.js. CLOSED TREE
This commit is contained in:
Csoregi Natalia
Родитель
a6c4b1e757
Коммит
ea18332fb3
|
|
@ -42,7 +42,6 @@ browser/components/enterprisepolicies/schemas/schema.jsm
|
|||
browser/components/translation/cld2/
|
||||
# generated or library files in pocket
|
||||
browser/components/pocket/content/panels/js/tmpl.js
|
||||
browser/components/pocket/content/panels/js/main.bundle.js
|
||||
|
||||
# Ignore newtab files
|
||||
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
/* 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/. */
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
"react", // require("eslint-plugin-react")
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: "17.0.2",
|
||||
},
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["content/**/*.js", "content/**/*.jsx"],
|
||||
parserOptions: {
|
||||
sourceType: "module",
|
||||
},
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
},
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
12.22.7
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
# Pocket Integration
|
||||
|
||||
This is mostly everything related to Pocket in the browser. There are a few exceptions, like newtab, some reader mode integration, and some JSWindowActors, that live in other places.
|
||||
|
||||
Primarily though this directory includes code for setting up the save to Pocket button, setting up the panels that are used once the Pocket button is clicked, setting up the Pocket context menu item, and a little scaffolding for the reader mode Pocket integration.
|
||||
|
||||
## Basic Code Structure
|
||||
|
||||
We have three primary areas code wise.
|
||||
|
||||
There are some JSMs that handle communication with the browser. This includes some telemetry, some API functions usable by other parts of the browser, like newtab, and some initialization and setup code. These files live in `/content`
|
||||
|
||||
There is also some standard js, html, and css that run inside the panels. Panels are the contents inside the drop downs if you click the save to Pocket button. Panels run in their own browser process, and have their own js. This js also has a build/bundle step. These files live in `/content/panels`. We have three panels. There is a sign up panel that is displayed if you click the save to Pocket button while not signed in. There is a saved panel, if you click the save to Pocket button while signed in, and on a page that is savable. Finally there is a home panel, if you click the save to Pocket button while signed in, on a page that is not savable, like about:home.
|
||||
|
||||
## Build Panels
|
||||
|
||||
We use webpack and node to build the panel bundle. So if you change anything in `/content/panels/js` or `/content/panels/css`, you probably need to build the bundle.
|
||||
|
||||
The build step makes changes to the bundle files, that need to be included in your patch.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
You need node.js installed, and a working local build of Firefox. The current or active version of node is probably fine. At the time of this writing, node version 14 and up is active, and is recommended.
|
||||
|
||||
### How to Build
|
||||
|
||||
From `/browser/components/pocket`
|
||||
|
||||
If you're making a patch that's ready for review:
|
||||
run `npm install`
|
||||
then `npm run build`
|
||||
|
||||
For active development instead of `npm run build` use `npm run watch`, which should update bundles as you work.
|
||||
|
||||
## React and JSX
|
||||
|
||||
We use React and JSX for most of the panel html and js. You can find the React components in `/content/panels/js/components`.
|
||||
|
||||
We are trying to keep the React implementation and dependencies as small as possible.
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
<script src="js/vendor/jquery-2.1.1.min.js"></script>
|
||||
<script src="js/vendor/handlebars.runtime.js"></script>
|
||||
<script src="js/tmpl.js"></script>
|
||||
<script src="js/main.bundle.js"></script>
|
||||
<script src="js/home/entry.js"></script>
|
||||
<script src="js/messages.js"></script>
|
||||
<script src="js/home.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
/* 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/. */
|
||||
|
||||
import React from "react";
|
||||
|
||||
function PopularTopics(props) {
|
||||
return (
|
||||
<>
|
||||
<h3 data-l10n-id="pocket-panel-home-explore-popular-topics"></h3>
|
||||
<ul>
|
||||
{props.topics.map(item => (
|
||||
<li key={`item-${item.topic}`}>
|
||||
<a
|
||||
className="pkt_ext_topic"
|
||||
href={`https://${props.pockethost}/explore/${item.topic}?utm_source=${props.utmsource}`}
|
||||
>
|
||||
{item.title}
|
||||
<span className="pkt_ext_chevron_right"></span>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a
|
||||
className="pkt_ext_discover"
|
||||
href={`https://${props.pockethost}/explore?utm_source=${props.utmsource}`}
|
||||
data-l10n-id="pocket-panel-home-discover-more"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopularTopics;
|
||||
|
|
@ -1,16 +1,13 @@
|
|||
/* global Handlebars:false */
|
||||
/* import-globals-from messages.js */
|
||||
/* import-globals-from main.js */
|
||||
|
||||
/*
|
||||
HomeOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
It does not contain any logic for saving or communication with the extension or server.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import PopularTopics from "../components/PopularTopics";
|
||||
import pktPanelMessaging from "../messages.js";
|
||||
|
||||
var HomeOverlay = function(options) {
|
||||
var PKT_PANEL_OVERLAY = function(options) {
|
||||
this.inited = false;
|
||||
this.active = false;
|
||||
this.pockethost = "getpocket.com";
|
||||
|
|
@ -20,15 +17,15 @@ var HomeOverlay = function(options) {
|
|||
};
|
||||
|
||||
this.setupClickEvents = function() {
|
||||
pktPanelMessaging.clickHelper(document.querySelector(`.pkt_ext_mylist`), {
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_mylist`), {
|
||||
source: `home_view_list`,
|
||||
});
|
||||
pktPanelMessaging.clickHelper(document.querySelector(`.pkt_ext_discover`), {
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_discover`), {
|
||||
source: `home_discover`,
|
||||
});
|
||||
|
||||
document.querySelectorAll(`.pkt_ext_topic`).forEach((el, position) => {
|
||||
pktPanelMessaging.clickHelper(el, {
|
||||
thePKT_PANEL.clickHelper(el, {
|
||||
source: `home_topic`,
|
||||
position,
|
||||
});
|
||||
|
|
@ -36,7 +33,7 @@ var HomeOverlay = function(options) {
|
|||
};
|
||||
};
|
||||
|
||||
HomeOverlay.prototype = {
|
||||
PKT_PANEL_OVERLAY.prototype = {
|
||||
create() {
|
||||
var host = window.location.href.match(/pockethost=([\w|\.]*)&?/);
|
||||
if (host && host.length > 1) {
|
||||
|
|
@ -76,19 +73,19 @@ HomeOverlay.prototype = {
|
|||
// We only have topic pages in English,
|
||||
// so ensure we only show a topics section for English browsers.
|
||||
if (this.locale.startsWith("en")) {
|
||||
ReactDOM.render(
|
||||
<PopularTopics
|
||||
pockethost={templateData.pockethost}
|
||||
utmsource={templateData.utmsource}
|
||||
topics={[
|
||||
{ title: "Self Improvement", topic: "self-improvement" },
|
||||
{ title: "Food", topic: "food" },
|
||||
{ title: "Entertainment", topic: "entertainment" },
|
||||
{ title: "Science", topic: "science" },
|
||||
]}
|
||||
/>,
|
||||
document.querySelector(`.pkt_ext_more`)
|
||||
);
|
||||
const data = {
|
||||
pockethost: templateData.pockethost,
|
||||
utmsource: templateData.utmsource,
|
||||
topics: [
|
||||
{ title: "Self Improvement", topic: "self-improvement" },
|
||||
{ title: "Food", topic: "food" },
|
||||
{ title: "Entertainment", topic: "entertainment" },
|
||||
{ title: "Science", topic: "science" },
|
||||
],
|
||||
};
|
||||
document
|
||||
.querySelector(`.pkt_ext_more`)
|
||||
.append(this.parseHTML(Handlebars.templates.popular_topics(data)));
|
||||
} else if (enableLocalizedExploreMore) {
|
||||
// For non English, we have a slightly different component to the page.
|
||||
document
|
||||
|
|
@ -103,5 +100,3 @@ HomeOverlay.prototype = {
|
|||
pktPanelMessaging.sendMessage("PKT_show_home");
|
||||
},
|
||||
};
|
||||
|
||||
export default HomeOverlay;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/* global PKT_PANEL:false */
|
||||
|
||||
function onDOMLoaded() {
|
||||
if (!window.thePKT_PANEL) {
|
||||
var thePKT_PANEL = new PKT_PANEL();
|
||||
/* global thePKT_PANEL */
|
||||
window.thePKT_PANEL = thePKT_PANEL;
|
||||
thePKT_PANEL.initHome();
|
||||
}
|
||||
window.thePKT_PANEL.create();
|
||||
}
|
||||
|
||||
if (document.readyState != `loading`) {
|
||||
onDOMLoaded();
|
||||
} else {
|
||||
document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,32 +0,0 @@
|
|||
/*
|
||||
object-assign
|
||||
(c) Sindre Sorhus
|
||||
@license MIT
|
||||
*/
|
||||
|
||||
/** @license React v0.20.2
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v17.0.2
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/** @license React v17.0.2
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
|
@ -1,31 +1,14 @@
|
|||
/* 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/. */
|
||||
|
||||
import HomeOverlay from "./home/overlay.js";
|
||||
import SignupOverlay from "./signup/overlay.js";
|
||||
import SavedOverlay from "./saved/overlay.js";
|
||||
import pktPanelMessaging from "./messages.js";
|
||||
/* global PKT_PANEL_OVERLAY:false */
|
||||
/* import-globals-from messages.js */
|
||||
|
||||
var PKT_PANEL = function() {};
|
||||
|
||||
PKT_PANEL.prototype = {
|
||||
initHome() {
|
||||
this.overlay = new HomeOverlay();
|
||||
this.init();
|
||||
},
|
||||
|
||||
initSignup() {
|
||||
this.overlay = new SignupOverlay();
|
||||
this.init();
|
||||
},
|
||||
|
||||
initSaved() {
|
||||
this.overlay = new SavedOverlay();
|
||||
this.init();
|
||||
},
|
||||
|
||||
setupObservers() {
|
||||
init() {
|
||||
if (this.inited) {
|
||||
return;
|
||||
}
|
||||
this.overlay = new PKT_PANEL_OVERLAY();
|
||||
this.setupMutationObserver();
|
||||
// Mutation observer isn't always enough for fast loading, static pages.
|
||||
// Sometimes the mutation observer fires before the page is totally visible.
|
||||
|
|
@ -34,13 +17,7 @@ PKT_PANEL.prototype = {
|
|||
// So in this case, we have a backup intersection observer that fires when
|
||||
// the page is first visible, and thus, the page is going to guarantee a height.
|
||||
this.setupIntersectionObserver();
|
||||
},
|
||||
|
||||
init() {
|
||||
if (this.inited) {
|
||||
return;
|
||||
}
|
||||
this.setupObservers();
|
||||
this.inited = true;
|
||||
},
|
||||
|
||||
|
|
@ -61,6 +38,21 @@ PKT_PANEL.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
// Click helper to reduce bugs caused by oversight
|
||||
// from different implementations of similar code.
|
||||
clickHelper(element, { source = "", position }) {
|
||||
element?.addEventListener(`click`, event => {
|
||||
event.preventDefault();
|
||||
|
||||
pktPanelMessaging.sendMessage("PKT_openTabWithUrl", {
|
||||
url: event.currentTarget.getAttribute(`href`),
|
||||
activate: true,
|
||||
source,
|
||||
position,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setupIntersectionObserver() {
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries.find(e => e.isIntersecting)) {
|
||||
|
|
@ -105,5 +97,18 @@ PKT_PANEL.prototype = {
|
|||
},
|
||||
};
|
||||
|
||||
window.PKT_PANEL = PKT_PANEL;
|
||||
window.pktPanelMessaging = pktPanelMessaging;
|
||||
function onDOMLoaded() {
|
||||
if (!window.thePKT_PANEL) {
|
||||
var thePKT_PANEL = new PKT_PANEL();
|
||||
/* global thePKT_PANEL */
|
||||
window.thePKT_PANEL = thePKT_PANEL;
|
||||
thePKT_PANEL.init();
|
||||
}
|
||||
window.thePKT_PANEL.create();
|
||||
}
|
||||
|
||||
if (document.readyState != `loading`) {
|
||||
onDOMLoaded();
|
||||
} else {
|
||||
document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,43 @@
|
|||
/* global RPMRemoveMessageListener:false, RPMAddMessageListener:false, RPMSendAsyncMessage:false */
|
||||
|
||||
var pktPanelMessaging = {
|
||||
removeMessageListener(messageId, callback) {
|
||||
var pktPanelMessaging = (function() {
|
||||
function removeMessageListener(messageId, callback) {
|
||||
RPMRemoveMessageListener(messageId, callback);
|
||||
},
|
||||
}
|
||||
|
||||
addMessageListener(messageId, callback = () => {}) {
|
||||
function addMessageListener(messageId, callback = () => {}) {
|
||||
RPMAddMessageListener(messageId, callback);
|
||||
},
|
||||
}
|
||||
|
||||
sendMessage(messageId, payload = {}, callback) {
|
||||
function sendMessage(messageId, payload = {}, callback) {
|
||||
if (callback) {
|
||||
// If we expect something back, we use RPMSendAsyncMessage and not RPMSendQuery.
|
||||
// Even though RPMSendQuery returns something, our frame could be closed at any moment,
|
||||
// and we don't want to close a RPMSendQuery promise loop unexpectedly.
|
||||
// So instead we setup a response event.
|
||||
const responseMessageId = `${messageId}_response`;
|
||||
var responseListener = responsePayload => {
|
||||
var responseListener = function(responsePayload) {
|
||||
callback(responsePayload);
|
||||
this.removeMessageListener(responseMessageId, responseListener);
|
||||
removeMessageListener(responseMessageId, responseListener);
|
||||
};
|
||||
|
||||
this.addMessageListener(responseMessageId, responseListener);
|
||||
addMessageListener(responseMessageId, responseListener);
|
||||
}
|
||||
|
||||
// Send message
|
||||
RPMSendAsyncMessage(messageId, payload);
|
||||
},
|
||||
}
|
||||
|
||||
// Click helper to reduce bugs caused by oversight
|
||||
// from different implementations of similar code.
|
||||
clickHelper(element, { source = "", position }) {
|
||||
element?.addEventListener(`click`, event => {
|
||||
event.preventDefault();
|
||||
|
||||
this.sendMessage("PKT_openTabWithUrl", {
|
||||
url: event.currentTarget.getAttribute(`href`),
|
||||
activate: true,
|
||||
source,
|
||||
position,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
log() {
|
||||
function log() {
|
||||
RPMSendAsyncMessage("PKT_log", arguments);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default pktPanelMessaging;
|
||||
/**
|
||||
* Public functions
|
||||
*/
|
||||
return {
|
||||
log,
|
||||
addMessageListener,
|
||||
sendMessage,
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/* global Handlebars:false */
|
||||
/* import-globals-from messages.js */
|
||||
/* import-globals-from main.js */
|
||||
|
||||
/*
|
||||
SavedOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
It does not contain any logic for saving or communication with the extension or server.
|
||||
*/
|
||||
|
||||
import pktPanelMessaging from "../messages.js";
|
||||
|
||||
var SavedOverlay = function(options) {
|
||||
var PKT_PANEL_OVERLAY = function(options) {
|
||||
var myself = this;
|
||||
|
||||
this.inited = false;
|
||||
|
|
@ -442,12 +442,9 @@ var SavedOverlay = function(options) {
|
|||
});
|
||||
};
|
||||
this.initOpenListInput = function() {
|
||||
pktPanelMessaging.clickHelper(
|
||||
document.querySelector(`.pkt_ext_openpocket`),
|
||||
{
|
||||
source: `view_list`,
|
||||
}
|
||||
);
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_openpocket`), {
|
||||
source: `view_list`,
|
||||
});
|
||||
};
|
||||
|
||||
this.showTagsLocalizedError = function(l10nId) {
|
||||
|
|
@ -571,12 +568,9 @@ var SavedOverlay = function(options) {
|
|||
.querySelector(`.pkt_ext_item_recs`)
|
||||
.append(myself.parseHTML(renderedRecs));
|
||||
|
||||
pktPanelMessaging.clickHelper(
|
||||
document.querySelector(`.pkt_ext_learn_more`),
|
||||
{
|
||||
source: `recs_learn_more`,
|
||||
}
|
||||
);
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_learn_more`), {
|
||||
source: `recs_learn_more`,
|
||||
});
|
||||
|
||||
document
|
||||
.querySelectorAll(`.pkt_ext_item_recs_link`)
|
||||
|
|
@ -651,7 +645,7 @@ var SavedOverlay = function(options) {
|
|||
};
|
||||
};
|
||||
|
||||
SavedOverlay.prototype = {
|
||||
PKT_PANEL_OVERLAY.prototype = {
|
||||
create() {
|
||||
if (this.active) {
|
||||
return;
|
||||
|
|
@ -752,5 +746,3 @@ SavedOverlay.prototype = {
|
|||
pktPanelMessaging.sendMessage("PKT_show_saved");
|
||||
},
|
||||
};
|
||||
|
||||
export default SavedOverlay;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/* global PKT_PANEL:false */
|
||||
|
||||
function onDOMLoaded() {
|
||||
if (!window.thePKT_PANEL) {
|
||||
var thePKT_PANEL = new PKT_PANEL();
|
||||
/* global thePKT_PANEL */
|
||||
window.thePKT_PANEL = thePKT_PANEL;
|
||||
thePKT_PANEL.initSaved();
|
||||
}
|
||||
window.thePKT_PANEL.create();
|
||||
}
|
||||
|
||||
if (document.readyState != `loading`) {
|
||||
onDOMLoaded();
|
||||
} else {
|
||||
document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
|
||||
}
|
||||
|
|
@ -1,33 +1,27 @@
|
|||
/* global Handlebars:false */
|
||||
/* import-globals-from messages.js */
|
||||
/* import-globals-from main.js */
|
||||
|
||||
/*
|
||||
SignupOverlay is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
|
||||
It does not contain any logic for saving or communication with the extension or server.
|
||||
*/
|
||||
|
||||
import pktPanelMessaging from "../messages.js";
|
||||
|
||||
var SignupOverlay = function(options) {
|
||||
var PKT_PANEL_OVERLAY = function(options) {
|
||||
this.inited = false;
|
||||
this.active = false;
|
||||
|
||||
this.setupClickEvents = function() {
|
||||
pktPanelMessaging.clickHelper(
|
||||
document.querySelector(`.pkt_ext_learnmore`),
|
||||
{
|
||||
source: `learn_more`,
|
||||
}
|
||||
);
|
||||
pktPanelMessaging.clickHelper(
|
||||
document.querySelector(`.signup-btn-firefox`),
|
||||
{
|
||||
source: `sign_up_1`,
|
||||
}
|
||||
);
|
||||
pktPanelMessaging.clickHelper(document.querySelector(`.signup-btn-email`), {
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_learnmore`), {
|
||||
source: `learn_more`,
|
||||
});
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.signup-btn-firefox`), {
|
||||
source: `sign_up_1`,
|
||||
});
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.signup-btn-email`), {
|
||||
source: `sign_up_2`,
|
||||
});
|
||||
pktPanelMessaging.clickHelper(document.querySelector(`.pkt_ext_login`), {
|
||||
thePKT_PANEL.clickHelper(document.querySelector(`.pkt_ext_login`), {
|
||||
source: `log_in`,
|
||||
});
|
||||
};
|
||||
|
|
@ -77,5 +71,3 @@ var SignupOverlay = function(options) {
|
|||
pktPanelMessaging.sendMessage("PKT_show_signup");
|
||||
};
|
||||
};
|
||||
|
||||
export default SignupOverlay;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/* global PKT_PANEL:false */
|
||||
|
||||
function onDOMLoaded() {
|
||||
if (!window.thePKT_PANEL) {
|
||||
var thePKT_PANEL = new PKT_PANEL();
|
||||
/* global thePKT_PANEL */
|
||||
window.thePKT_PANEL = thePKT_PANEL;
|
||||
thePKT_PANEL.initSignup();
|
||||
}
|
||||
window.thePKT_PANEL.create();
|
||||
}
|
||||
|
||||
if (document.readyState != `loading`) {
|
||||
onDOMLoaded();
|
||||
} else {
|
||||
document.addEventListener(`DOMContentLoaded`, onDOMLoaded);
|
||||
}
|
||||
|
|
@ -14,7 +14,8 @@
|
|||
<script src="js/vendor/handlebars.runtime.js"></script>
|
||||
<script src="js/vendor/jquery.tokeninput.min.js"></script>
|
||||
<script src="js/tmpl.js"></script>
|
||||
<script src="js/main.bundle.js"></script>
|
||||
<script src="js/saved/entry.js"></script>
|
||||
<script src="js/messages.js"></script>
|
||||
<script src="js/saved.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
<body class="pkt_ext_containersignup" aria-live="polite">
|
||||
<script src="js/vendor/handlebars.runtime.js"></script>
|
||||
<script src="js/tmpl.js"></script>
|
||||
<script src="js/main.bundle.js"></script>
|
||||
<script src="js/signup/entry.js"></script>
|
||||
<script src="js/messages.js"></script>
|
||||
<script src="js/signup.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<h3 data-l10n-id="pocket-panel-home-explore-popular-topics"></h3>
|
||||
<ul>
|
||||
{{#each topics}}
|
||||
<li>
|
||||
<a class="pkt_ext_topic" href="https://{{@root.pockethost}}/explore/{{this.topic}}?utm_source={{@root.utmsource}}">
|
||||
{{this.title}}
|
||||
<span class="pkt_ext_chevron_right"></span>
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
<a class="pkt_ext_discover" href="https://{{pockethost}}/explore?utm_source={{utmsource}}" data-l10n-id="pocket-panel-home-discover-more"></a>
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -6,30 +6,19 @@
|
|||
"start": "npm run build && npm run watch",
|
||||
"build": "npx run-p build:*",
|
||||
"build:handlebars": "node compile_handlebars.js",
|
||||
"build:webpack": "webpack --config webpack.config.js",
|
||||
"build:sass": "npx sass content/panels/css/main.scss content/panels/css/main.compiled.css --style=compressed",
|
||||
"watch": "npx run-p watch:*",
|
||||
"watch:handlebars": "npx chokidar \"content/panels/tmpl/**/*.handlebars\" -c \"npm run build:handlebars\"",
|
||||
"watch:webpack": "npm run build:webpack -- --env development -w",
|
||||
"watch:sass": "npx chokidar \"content/panels/css/**/*.scss\" -c \"npm run build:sass\"",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Mozilla (https://mozilla.org/)",
|
||||
"license": "MPL-2.0",
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.15.8",
|
||||
"@babel/preset-react": "7.14.5",
|
||||
"babel-loader": "8.2.2",
|
||||
"chokidar-cli": "2.1.0",
|
||||
"handlebars": "3.0.0",
|
||||
"npm-run-all": "4.1.5",
|
||||
"sass": "1.32.8",
|
||||
"webpack": "5.58.2",
|
||||
"webpack-cli": "4.9.0"
|
||||
"sass": "1.32.8"
|
||||
},
|
||||
"repository": "https://hg.mozilla.org/",
|
||||
"dependencies": {
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
}
|
||||
"repository": "https://hg.mozilla.org/"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,7 @@ function test_runner(test) {
|
|||
// Before each
|
||||
const sandbox = sinon.createSandbox();
|
||||
try {
|
||||
await test({
|
||||
sandbox,
|
||||
pktPanelMessaging: testGlobal.window.pktPanelMessaging,
|
||||
});
|
||||
await test({ sandbox, main: testGlobal.window.thePKT_PANEL });
|
||||
} finally {
|
||||
// After each
|
||||
sandbox.restore();
|
||||
|
|
@ -22,24 +19,24 @@ function test_runner(test) {
|
|||
add_task(testTask);
|
||||
}
|
||||
|
||||
test_runner(async function test_clickHelper({ sandbox, pktPanelMessaging }) {
|
||||
test_runner(async function test_clickHelper({ sandbox, main }) {
|
||||
// Create a button to test the click helper with.
|
||||
const button = document.createElement("button");
|
||||
button.setAttribute("href", "http://example.com");
|
||||
|
||||
// Setup a stub for the click itself.
|
||||
sandbox.stub(pktPanelMessaging, "sendMessage");
|
||||
sandbox.stub(testGlobal.pktPanelMessaging, "sendMessage");
|
||||
|
||||
// Create the click helper and trigger the click.
|
||||
pktPanelMessaging.clickHelper(button, { source: "test-click", position: 2 });
|
||||
main.clickHelper(button, { source: "test-click", position: 2 });
|
||||
button.click();
|
||||
|
||||
Assert.ok(
|
||||
pktPanelMessaging.sendMessage.calledOnce,
|
||||
testGlobal.pktPanelMessaging.sendMessage.calledOnce,
|
||||
"Should fire sendMessage once with clickHelper click"
|
||||
);
|
||||
Assert.ok(
|
||||
pktPanelMessaging.sendMessage.calledWith("PKT_openTabWithUrl", {
|
||||
testGlobal.pktPanelMessaging.sendMessage.calledWith("PKT_openTabWithUrl", {
|
||||
url: "http://example.com",
|
||||
activate: true,
|
||||
source: "test-click",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ const testGlobal = {
|
|||
};
|
||||
|
||||
Services.scriptloader.loadSubScript(
|
||||
"chrome://pocket/content/panels/js/main.bundle.js",
|
||||
"chrome://pocket/content/panels/js/messages.js",
|
||||
testGlobal
|
||||
);
|
||||
Services.scriptloader.loadSubScript(
|
||||
"chrome://pocket/content/panels/js/main.js",
|
||||
testGlobal
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
/* 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/. */
|
||||
/* eslint-env node */
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: {
|
||||
main: "./content/panels/js/main.js",
|
||||
},
|
||||
output: {
|
||||
filename: "[name].bundle.js",
|
||||
path: `${__dirname}/content/panels/js/`,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-react"],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".js", ".jsx"],
|
||||
},
|
||||
};
|
||||
Загрузка…
Ссылка в новой задаче