commit 3050e6c0372952b8982733f8256c143f495879d6 parent 9f26b70518667560b0634a83d3a7312b54217ae3 Author: Irene Ni <ini@mozilla.com> Date: Sat, 18 Oct 2025 05:18:24 +0000 Bug 1992153 - Hide New Tab shortcut rows dropdown when shortcuts is disabled. r=home-newtab-reviewers,maxx Differential Revision: https://phabricator.services.mozilla.com/D269087 Diffstat:
3 files changed, 21 insertions(+), 8 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx b/browser/extensions/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx @@ -78,8 +78,10 @@ export class ContentSection extends React.PureComponent { } if (drawerRef) { + // Use measured height if valid, otherwise use a large fallback + // since overflow:hidden on the parent safely hides the drawer let drawerHeight = - parseFloat(window.getComputedStyle(drawerRef)?.height) || 0; + parseFloat(window.getComputedStyle(drawerRef)?.height) || 100; if (isOpen) { drawerRef.style.marginTop = "var(--space-small)"; @@ -325,7 +327,10 @@ export class ContentSection extends React.PureComponent { </div> )} {mayHaveTopicSections && ( - <SectionsMgmtPanel exitEventFired={exitEventFired} /> + <SectionsMgmtPanel + exitEventFired={exitEventFired} + pocketEnabled={pocketEnabled} + /> )} </div> </div> diff --git a/browser/extensions/newtab/content-src/components/CustomizeMenu/SectionsMgmtPanel/SectionsMgmtPanel.jsx b/browser/extensions/newtab/content-src/components/CustomizeMenu/SectionsMgmtPanel/SectionsMgmtPanel.jsx @@ -8,7 +8,7 @@ import { actionCreators as ac, actionTypes as at } from "common/Actions.mjs"; // eslint-disable-next-line no-shadow import { CSSTransition } from "react-transition-group"; -function SectionsMgmtPanel({ exitEventFired }) { +function SectionsMgmtPanel({ exitEventFired, pocketEnabled }) { const [showPanel, setShowPanel] = useState(false); // State management with useState const { sectionPersonalization } = useSelector( state => state.DiscoveryStream @@ -268,6 +268,7 @@ function SectionsMgmtPanel({ exitEventFired }) { <moz-box-button onClick={togglePanel} data-l10n-id="newtab-section-manage-topics-button-v2" + {...(!pocketEnabled ? { disabled: true } : {})} ></moz-box-button> <CSSTransition in={showPanel} diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -14092,6 +14092,7 @@ const DiscoveryStreamBase = (0,external_ReactRedux_namespaceObject.connect)(stat App: state.App }))(_DiscoveryStreamBase); ;// CONCATENATED MODULE: ./content-src/components/CustomizeMenu/SectionsMgmtPanel/SectionsMgmtPanel.jsx +function SectionsMgmtPanel_extends() { return SectionsMgmtPanel_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, SectionsMgmtPanel_extends.apply(null, arguments); } /* 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/. */ @@ -14102,7 +14103,8 @@ const DiscoveryStreamBase = (0,external_ReactRedux_namespaceObject.connect)(stat // eslint-disable-next-line no-shadow function SectionsMgmtPanel({ - exitEventFired + exitEventFired, + pocketEnabled }) { const [showPanel, setShowPanel] = (0,external_React_namespaceObject.useState)(false); // State management with useState const { @@ -14287,10 +14289,12 @@ function SectionsMgmtPanel({ "data-l10n-id": "newtab-section-unblock-button" })))); }); - return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("moz-box-button", { + return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("moz-box-button", SectionsMgmtPanel_extends({ onClick: togglePanel, "data-l10n-id": "newtab-section-manage-topics-button-v2" - }), /*#__PURE__*/external_React_default().createElement(external_ReactTransitionGroup_namespaceObject.CSSTransition, { + }, !pocketEnabled ? { + disabled: true + } : {})), /*#__PURE__*/external_React_default().createElement(external_ReactTransitionGroup_namespaceObject.CSSTransition, { in: showPanel, timeout: 300, classNames: "sections-mgmt-panel", @@ -14981,7 +14985,9 @@ class ContentSection extends (external_React_default()).PureComponent { return; } if (drawerRef) { - let drawerHeight = parseFloat(window.getComputedStyle(drawerRef)?.height) || 0; + // Use measured height if valid, otherwise use a large fallback + // since overflow:hidden on the parent safely hides the drawer + let drawerHeight = parseFloat(window.getComputedStyle(drawerRef)?.height) || 100; if (isOpen) { drawerRef.style.marginTop = "var(--space-small)"; } else { @@ -15183,7 +15189,8 @@ class ContentSection extends (external_React_default()).PureComponent { htmlFor: "inferred-personalization", "data-l10n-id": "newtab-custom-stories-personalized-checkbox-label" })), mayHaveTopicSections && /*#__PURE__*/external_React_default().createElement(SectionsMgmtPanel, { - exitEventFired: exitEventFired + exitEventFired: exitEventFired, + pocketEnabled: pocketEnabled }))))))), /*#__PURE__*/external_React_default().createElement("span", { className: "divider", role: "separator"