corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1832507 - Pocket newtab fixng new markets onboarding dialog telemetry from firing in offscreen preloaded tabs r=gvn

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D177935
This commit is contained in:
scottdowne
2023-05-15 13:46:01 +00:00
parent 1a67d20cfd
commit 272067742c
3 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
View File

@@ -17,6 +17,8 @@ import { connect, useSelector } from "react-redux";
const PREF_ONBOARDING_EXPERIENCE_DISMISSED =
"discoverystream.onboardingExperience.dismissed";
const INTERSECTION_RATIO = 0.5;
const VISIBLE = "visible";
const VISIBILITY_CHANGE_EVENT = "visibilitychange";
const WIDGET_IDS = {
TOPICS: 1,
};
@@ -79,9 +81,27 @@ export function OnboardingExperience({
intersectionObserver.unobserve(heightElement.current);
}
}, options);
const onVisibilityChange = () => {
intersectionObserver.observe(heightElement.current);
windowObj.document.removeEventListener(
VISIBILITY_CHANGE_EVENT,
onVisibilityChange
);
};
if (heightElement.current) {
resizeObserver.observe(heightElement.current);
intersectionObserver.observe(heightElement.current);
// Check visibility or setup a visibility event to make
// sure we don't fire this for off screen pre loaded tabs.
if (windowObj.document.visibilityState === VISIBLE) {
intersectionObserver.observe(heightElement.current);
} else {
windowObj.document.addEventListener(
VISIBILITY_CHANGE_EVENT,
onVisibilityChange
);
}
setMaxHeight(heightElement.current.offsetHeight);
}
@@ -89,6 +109,10 @@ export function OnboardingExperience({
return () => {
resizeObserver?.disconnect();
intersectionObserver?.disconnect();
windowObj.document.removeEventListener(
VISIBILITY_CHANGE_EVENT,
onVisibilityChange
);
};
}, [dispatch, windowObj]);

19
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@@ -8410,6 +8410,8 @@ const TopicsWidget = (0,external_ReactRedux_namespaceObject.connect)(state => ({
const PREF_ONBOARDING_EXPERIENCE_DISMISSED = "discoverystream.onboardingExperience.dismissed";
const CardGrid_INTERSECTION_RATIO = 0.5;
const CardGrid_VISIBLE = "visible";
const CardGrid_VISIBILITY_CHANGE_EVENT = "visibilitychange";
const WIDGET_IDS = {
TOPICS: 1
};
@@ -8462,9 +8464,21 @@ function OnboardingExperience({
}
}, options);
if (heightElement.current) {
resizeObserver.observe(heightElement.current);
const onVisibilityChange = () => {
intersectionObserver.observe(heightElement.current);
windowObj.document.removeEventListener(CardGrid_VISIBILITY_CHANGE_EVENT, onVisibilityChange);
};
if (heightElement.current) {
resizeObserver.observe(heightElement.current); // Check visibility or setup a visibility event to make
// sure we don't fire this for off screen pre loaded tabs.
if (windowObj.document.visibilityState === CardGrid_VISIBLE) {
intersectionObserver.observe(heightElement.current);
} else {
windowObj.document.addEventListener(CardGrid_VISIBILITY_CHANGE_EVENT, onVisibilityChange);
}
setMaxHeight(heightElement.current.offsetHeight);
} // Return unmount callback to clean up observers.
@@ -8472,6 +8486,7 @@ function OnboardingExperience({
return () => {
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
windowObj.document.removeEventListener(CardGrid_VISIBILITY_CHANGE_EVENT, onVisibilityChange);
};
}, [dispatch, windowObj]);
const style = {};

5
browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx
View File

@@ -317,6 +317,11 @@ describe("<OnboardingExperience>", () => {
fakeWindow = {
ResizeObserver: fakeResizeObserver,
IntersectionObserver: buildIntersectionObserver(intersectEntries),
document: {
visibilityState: "visible",
addEventListener: () => {},
removeEventListener: () => {},
},
};
wrapper = mount(
<WrapWithProvider state={{}}>