Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-27 23:02:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1858462 - Make shopping sidebar resizable. r=desktop-theme-reviewers,dao

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D193095
This commit is contained in:
Niklas Baumgardner 2023-11-16 21:43:54 +00:00
parent ebc47eaafd
commit 1e673cf70f
3 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
browser/components/shopping/ShoppingSidebarParent.sys.mjs
View File

@ -192,8 +192,10 @@ class ShoppingSidebarManagerClass {
if (isProduct && this.isActive) { if (isProduct && this.isActive) {
if (!sidebar) { if (!sidebar) {
sidebar = document.createXULElement("shopping-sidebar"); sidebar = document.createXULElement("shopping-sidebar");
sidebar.setAttribute("style", "width: 320px");
sidebar.hidden = false; sidebar.hidden = false;
let splitter = document.createXULElement("splitter");
splitter.classList.add("sidebar-splitter");
browserPanel.appendChild(splitter);
browserPanel.appendChild(sidebar); browserPanel.appendChild(sidebar);
} else { } else {
actor?.updateProductURL(aLocationURI, aFlags); actor?.updateProductURL(aLocationURI, aFlags);

18
browser/components/shopping/content/shopping-sidebar.js
View File

@ -7,6 +7,8 @@
// This is loaded into chrome windows with the subscript loader. Wrap in // This is loaded into chrome windows with the subscript loader. Wrap in
// a block to prevent accidentally leaking globals onto `window`. // a block to prevent accidentally leaking globals onto `window`.
{ {
const SHOPPING_SIDEBAR_WIDTH_PREF =
"browser.shopping.experience2023.sidebarWidth";
class ShoppingSidebar extends MozXULElement { class ShoppingSidebar extends MozXULElement {
#browser; #browser;
#initialized; #initialized;
@ -41,11 +43,27 @@
if (this.#initialized) { if (this.#initialized) {
return; return;
} }
this.resizeObserverFn = this.resizeObserverFn.bind(this);
this.appendChild(this.constructor.fragment); this.appendChild(this.constructor.fragment);
this.#browser = this.querySelector(".shopping-sidebar"); this.#browser = this.querySelector(".shopping-sidebar");
let previousWidth = Services.prefs.getIntPref(
SHOPPING_SIDEBAR_WIDTH_PREF,
0
);
if (previousWidth > 0) {
this.style.width = `${previousWidth}px`;
}
this.resizeObserver = new ResizeObserver(this.resizeObserverFn);
this.resizeObserver.observe(this);
this.#initialized = true; this.#initialized = true;
} }
resizeObserverFn() {
Services.prefs.setIntPref(SHOPPING_SIDEBAR_WIDTH_PREF, this.scrollWidth);
}
} }
customElements.define("shopping-sidebar", ShoppingSidebar); customElements.define("shopping-sidebar", ShoppingSidebar);

3
browser/themes/shared/browser-shared.css
View File

@ -1081,4 +1081,7 @@ panel toolbarseparator {
/* Shopping sidebar */ /* Shopping sidebar */
shopping-sidebar { shopping-sidebar {
border-inline-start: 1px solid var(--chrome-content-separator-color); border-inline-start: 1px solid var(--chrome-content-separator-color);
min-width: 16.92em;
max-width: 32.31em;
width: 26.67em;
} }