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

Bug 1784223 - Move unified extensions button "after" the overflow menu. r=rpl,dao

Browse Source 
This patch also adjusts some `min-width` rules like it was done for the
downloads button. It should work with either buttons OR both, which is
going to happen since the unified extensions button will be most likely
always visible in the toolbar.

Differential Revision: https://phabricator.services.mozilla.com/D154360
This commit is contained in:
William Durand
2022-09-15 16:34:38 +00:00
parent 01ea62498c
commit 313a3beac7
4 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/base/content/browser-addons.js
View File

@@ -1321,6 +1321,10 @@ var gUnifiedExtensions = {
this._button = document.getElementById("unified-extensions-button");
// TODO: Bug 1778684 - Auto-hide button when there is no active extension.
this._button.hidden = false;
document
.getElementById("nav-bar")
.setAttribute("unifiedextensionsbuttonshown", true);
}
this._initialized = true;

49
browser/base/content/browser.css
View File

@@ -742,22 +742,31 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
-moz-user-focus: normal;
}
/* We leave 350px plus whatever space the download button will need when it
* appears. Normally this should be 16px for the icon, plus 2 * 2px padding
* plus the toolbarbutton-inner-padding. We're adding 4px to ensure things
* like rounding on hidpi don't accidentally result in the button going
* into overflow.
/* We leave 310px plus whatever space the download and unified extensions
* buttons will need when they *both* appear. Normally, for each button, this
* should be 16px for the icon, plus 2 * 2px padding plus the
* toolbarbutton-inner-padding. We're adding 4px to ensure things like rounding
* on hidpi don't accidentally result in the buttons going into overflow.
*/
#urlbar-container {
min-width: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding));
#urlbar-container {
min-width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
}
#nav-bar[downloadsbuttonshown] #urlbar-container {
min-width: 350px;
/* When the download button OR the unified extensions button is shown, we leave
* 310px plus the space needed for a single button as described above. */
#nav-bar[downloadsbuttonshown] #urlbar-container,
#nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
min-width: calc(310px + 24px + 2 * var(--toolbarbutton-inner-padding));
}
/* When both the download and unified extensions buttons are visible, we use
* the base min-width value. */
#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
min-width: 310px;
}
/* Customize mode is difficult to use at moderate window width if the Urlbar
remains 350px wide. */
remains 310px wide. */
:root[customizing] #urlbar-container {
min-width: 280px;
}
@@ -768,10 +777,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
@media (max-width: 770px) {
#urlbar-container {
min-width: calc(280px + 24px + 2 * var(--toolbarbutton-inner-padding));
min-width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
}
#nav-bar[downloadsbuttonshown] #urlbar-container {
min-width: 280px;
#nav-bar[downloadsbuttonshown] #urlbar-container,
#nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
min-width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding));
}
#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
min-width: 240px;
}
:root[customizing] #urlbar-container {
min-width: 245px;
@@ -808,10 +821,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
}
@media (max-width: 550px) {
#urlbar-container {
min-width: calc(216px + 24px + 2 * var(--toolbarbutton-inner-padding));
min-width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
}
#nav-bar[downloadsbuttonshown] #urlbar-container {
min-width: 216px;
#nav-bar[downloadsbuttonshown] #urlbar-container,
#nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
min-width: calc(176px + 24px + 2 * var(--toolbarbutton-inner-padding));
}
#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
min-width: 176px;
}
#identity-icon-box {
max-width: 70px;

18
browser/base/content/navigator-toolbox.inc.xhtml
View File

@@ -434,15 +434,6 @@
</toolbarbutton>
</hbox>
<toolbarbutton id="unified-extensions-button"
class="toolbarbutton-1"
data-l10n-id="unified-extensions-button"
hidden="true"
onkeypress="gUnifiedExtensions.togglePanel(event)"
onmousedown="gUnifiedExtensions.togglePanel(event)"
overflows="false"
removable="false" />
<toolbarbutton id="nav-bar-overflow-button"
class="toolbarbutton-1 chromeclass-toolbar-additional overflow-button"
skipintoolbarset="true"
@@ -452,6 +443,15 @@
</box>
</toolbarbutton>
<toolbarbutton id="unified-extensions-button"
class="toolbarbutton-1"
data-l10n-id="unified-extensions-button"
hidden="true"
onkeypress="gUnifiedExtensions.togglePanel(event)"
onmousedown="gUnifiedExtensions.togglePanel(event)"
overflows="false"
removable="false"/>
<toolbaritem id="PanelUI-button"
removable="false">
<toolbarbutton id="ion-button"

13
browser/components/extensions/test/browser/browser_unified_extensions.js
View File

@@ -54,6 +54,13 @@ add_setup(async function() {
add_task(async function test_button_enabled_by_pref() {
const { button } = win.gUnifiedExtensions;
is(button.hidden, false, "expected button to be visible");
is(
win.document
.getElementById("nav-bar")
.getAttribute("unifiedextensionsbuttonshown"),
"true",
"expected attribute on nav-bar"
);
});
add_task(async function test_button_disabled_by_pref() {
@@ -63,6 +70,12 @@ add_task(async function test_button_disabled_by_pref() {
"unified-extensions-button"
);
is(button.hidden, true, "expected button to be hidden");
ok(
!anotherWindow.document
.getElementById("nav-bar")
.hasAttribute("unifiedextensionsbuttonshown"),
"expected no attribute on nav-bar"
);
await BrowserTestUtils.closeWindow(anotherWindow);
});