1683515 - Resizing the browser using Windows' Snap feature doesn't overflow the navbar / extension toolbar

Status: RESOLVED WORKSFORME

(Firefox :: Toolbars and Customization, defect, P3)

Description

[Kenneth Karaisz Jr.]

Attachment: Screenshot of the cut off extension bar (When reproducing it seems like it doesn't always happen)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

• Open firefox
• Have enough extensions in your toolbar to make Firefox put an overflow menu on the toolbar when resizing the window to half of your screen
• Move the window to either side so that it goes on one half of the monitor

Actual results:

The extension toolbar doesn't display the overflow menu and is instead cut off

Expected results:

The overflow menu appears in the extension toolbar

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[:Gijs (he/him)]

(In reply to 5ca6g58y1 from comment #0)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

• Open firefox
• Have enough extensions in your toolbar to make Firefox put an overflow menu on the toolbar when resizing the window to half of your screen
• Move the window to either side so that it goes on one half of the monitor

Can you confirm you're using Windows' "Snap" feature, as described in this article? It's a bit confusing - the first time I read your report I thought you meant you were using multiple screens, and the window was half on one screen, half on another. Can you clarify which it is?

Comment 3

[Kenneth Karaisz Jr.]

(In reply to :Gijs (he/him) from comment #2)

(In reply to 5ca6g58y1 from comment #0)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

• Open firefox
• Have enough extensions in your toolbar to make Firefox put an overflow menu on the toolbar when resizing the window to half of your screen
• Move the window to either side so that it goes on one half of the monitor

Can you confirm you're using Windows' "Snap" feature, as described in this article? It's a bit confusing - the first time I read your report I thought you meant you were using multiple screens, and the window was half on one screen, half on another. Can you clarify which it is?

I'm using the snap feature, and the window is half on one screen.

Comment 4

[:Gijs (he/him)]

Thanks for the quick response. Unfortunately I cannot reproduce, despite repeated attempts on both nightly and beta on my win10 machine. It takes a split second, but then the toolbar updates and the layout is correct. More questions to narrow down what is causing this to happen, I'm afraid:

Before "halving" the window, do you have it in maximized mode or as a non-maximized window (and does that make a difference) ? At that point, do the icons already overflow or not yet?

Do you still have flexible spaces on your toolbar? Does it relate to whether any of the extension icons have a badge on them?

Can you use the browser console (ctrl-shift-j) and run CustomizableUI.getWidgetIdsInArea("nav-bar") and paste the output here?

Then can you set browser.uiCustomization.debug to true in about:config, open the browser console again, move the browser window to the pre-half-screen state, clear the console, then cause the bug to happen and paste log output in the browser console here as an attachment?

Finally, what screen scaling do you use (in Windows' Settings app, if you search for "dpi", then under "Scale and Layout", there's a dropdown with a size and other options (with one of them having "(recommended)" as a suffix) - what value is selected there?)

Comment 5

[Kenneth Karaisz Jr.]

Before "halving" the window, do you have it in maximized mode or as a non-maximized window (and does that make a difference) ? At that point, > do the icons already overflow or not yet?

It seems it only happens if the icons aren't overflowing already before halving the window. So whether it is maximized doesn't matter, but the size when you un-maximize it.

Do you still have flexible spaces on your toolbar?

No I do not. My browser window is almost always maximized, so I never see the point.

Does it relate to whether any of the extension icons have a badge on them?

I'm not sure what this means.

Can you use the browser console (ctrl-shift-j) and run CustomizableUI.getWidgetIdsInArea("nav-bar") and paste the output here?

I couldn't figure out how to run commands using that console, but I tried it in the ctrl-shift-i console and got an error so I think I'm just missing something in the browser console:

 Uncaught ReferenceError: CustomizableUI is not defined
    <anonymous> debugger eval code:1

Finally, what screen scaling do you use (in Windows' Settings app, if you search for "dpi", then under "Scale and Layout", there's a dropdown with a size and other options (with one of them having "(recommended)" as a suffix) - what value is selected there?)

Do you mean my resolution (1920 x 1080) or the other one? (100%)

Comment 6

[:Gijs (he/him)]

(In reply to 5ca6g58y1 from comment #5)

Does it relate to whether any of the extension icons have a badge on them?

I'm not sure what this means.

I mean your screenshot shows an icon with a badge on it (the orange one with a [3] badge). You also wrote in the screenshot description that it "seems like it doesn't always happen". I was wondering if whether or not the bug happens might be related to whether or not there is a visible badge. Perhaps you can temporarily remove the icon in question and see if the bug continues to reproduce, to exclude this possibility?

Also, does it make a difference whether you have a page loaded in the browser window (vs. just the new tab page)?

Can you use the browser console (ctrl-shift-j) and run CustomizableUI.getWidgetIdsInArea("nav-bar") and paste the output here?

I couldn't figure out how to run commands using that console, but I tried it in the ctrl-shift-i console and got an error so I think I'm just missing something in the browser console:

 Uncaught ReferenceError: CustomizableUI is not defined
    <anonymous> debugger eval code:1

Yeah, please set devtools.chrome.enabled to true in about:config, or (to do the same thing from the UI) use the settings pane of the regular devtools (the . . . button next to the [x], then "Settings") to turn on "Enable browser chrome and add-on debugging toolboxes".

Then you'll be able to evaluate things in the browser console.

Finally, what screen scaling do you use (in Windows' Settings app, if you search for "dpi", then under "Scale and Layout", there's a dropdown with a size and other options (with one of them having "(recommended)" as a suffix) - what value is selected there?)

Do you mean my resolution (1920 x 1080) or the other one? (100%)

The 100% one, sorry for not being clear. Thanks! So far my guesses don't appear to be correct - I can't reproduce with those DPI and resolution settings, either - though it's useful to know that it depends on the overflow button not being visible yet... I don't suppose using the shortcuts for snap (Windows + left arrow / Windows + right arrow) make any difference compared to using the mouse to move the window, either?

Could you try the logging thing I asked about in comment #4 ? I'm hoping that will provide more info about what's happening on your machine wrt how we're computing overflow state...

Comment 7

[Mike Conley (:mconley) (:⚙️)]

I was able to reproduce this on my Windows machine. Here's the data from CustomizableUI.getWidgetIdsInArea("nav-bar"):

[
  "sidebar-button",
  "back-button",
  "forward-button",
  "stop-reload-button",
  "home-button",
  "customizableui-special-spring16",
  "urlbar-container",
  "customizableui-special-spring17",
  "downloads-button",
  "feed-button",
  "bookmarks-menu-button",
  "library-button",
  "toggle-button--compatibilityaddonsmozillaorg-acr-dialog",
  "action-button--mozilla-tree-statusjsantellcom-tree-status-button",
  "toggle-button--jid0-edalmuivkozlouyij0lpdx548bcjetpack-gecko-profiler",
  "zoompage-we_dw-dev-browser-action",
  "_e965eb3c-1419-4448-893c-d13aee5862f7_-browser-action",
  "ohnoreflow_mikeconley_ca-browser-action",
  "rested_restedclient-browser-action",
  "geckoprofiler_mozilla_com-browser-action",
  "_d7742d87-e61d-4b78-b8a1-b469842139fa_-browser-action",
  "athlpr_main_toolbarbutton",
  "jid1-mnnxcxisbpnsxq-eff_jetpack-browser-action",
  "jid1-zadieub7xozojw_jetpack-browser-action",
  "87677a2c52b84ad3a151a4a72f5bd3c4_jetpack-browser-action",
  "jid1-6mupixnfcjagkg_jetpack-browser-action",
  "_35d49e56-0142-4a7b-82a8-6ace7d28ff92_-browser-action",
  "_66d854c2-fd1b-4857-bd0a-7d220e4834da_-browser-action",
  "jid1-xo5sua6qc1dfpw_jetpack-browser-action",
  "treestyletab_piro_sakura_ne_jp-browser-action",
  "jid1-f9uj2thwoam5gq_jetpack-browser-action",
  "_87dfccf4-b6eb-4297-948a-ac6fd273cbb5_-browser-action",
  "nocoffee_accessgarage_wordpress_com-browser-action",
  "_axe-firefox-devtools-browser-action",
  "stefanvandamme_stefanvd_net-browser-action",
  "_74b0af75-8791-44e2-95a6-7f0ab94143ec_-browser-action",
  "speaktome_mozilla_com-browser-action",
  "_446900e4-71c2-419f-a6a7-df9c091e268b_-browser-action",
  "_73a6fe31-595d-460b-a920-fcc0f8843232_-browser-action",
  "_a9c2ad37-e940-4892-8dce-cd73c6cbbc0c_-browser-action",
  "notes_mozilla_com-browser-action",
  "_feb799e2-29e2-4e35-b862-cc4e1842b6f5_-browser-action",
  "spindoctor_mikeconley_ca-browser-action",
  "_e4a8a97b-f2ed-450b-b12d-ee082ba24781_-browser-action",
  "brief_mozdev_org-browser-action",
  "miningblocker_miningblockeraddon_com-browser-action",
  "_4edd1c73-3c7f-4a6c-9443-90f4e66222b5_-browser-action",
  "history-panelmenu",
  "firefoxcolor_mozilla_com-browser-action",
  "_7a7a4a92-a2a0-41d1-9fd7-1e92480d612d_-browser-action",
  "_c45c406e-ab73-11d8-be73-000a95be3b12_-browser-action",
  "_9bbf6724-d709-492e-a313-bfed0415a224_-browser-action",
  "myqonly_mikeconley_ca-browser-action",
  "mozilla-tree-status_kwan_perix_co_uk-browser-action",
  "side-view_mozilla_org-browser-action",
  "discover-embeds_mozilla_org-browser-action",
  "fxa-toolbar-menu-button",
  "profiler-button",
  "ublock0_raymondhill_net-browser-action",
  "private-relay_firefox_com-browser-action",
  "coilfirefoxextension_coil_com-browser-action",
  "pioneer-v2-example_mozilla_org-browser-action",
  "worldwide_radio-browser-action"
]

Here's the browser.uiCustomization.debug logging:

CustomizableUI: Checking overflow CustomizableUI.jsm:5198
CustomizableUI: Getting overflow info: target width: 934; available width: 670 2 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 904; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 874; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 844; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 814; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 772; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 742; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 712; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 682; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Getting overflow info: target width: 670; available width: 670 CustomizableUI.jsm:5014
CustomizableUI: Checking overflow CustomizableUI.jsm:5198
CustomizableUI: Getting overflow info: target width: 898; available width: 898 CustomizableUI.jsm:5014
CustomizableUI: Attempting to move some items back CustomizableUI.jsm:5101
CustomizableUI: Considering moving history-panelmenu back, minSize: 682 CustomizableUI.jsm:5112
CustomizableUI: Moving history-panelmenu back CustomizableUI.jsm:5139
CustomizableUI: Considering moving myqonly_mikeconley_ca-browser-action back, minSize: 712 CustomizableUI.jsm:5112
CustomizableUI: Moving myqonly_mikeconley_ca-browser-action back CustomizableUI.jsm:5139
CustomizableUI: Considering moving mozilla-tree-status_kwan_perix_co_uk-browser-action back, minSize: 742 CustomizableUI.jsm:5112
CustomizableUI: Moving mozilla-tree-status_kwan_perix_co_uk-browser-action back CustomizableUI.jsm:5139
CustomizableUI: Considering moving fxa-toolbar-menu-button back, minSize: 772 CustomizableUI.jsm:5112
CustomizableUI: Moving fxa-toolbar-menu-button back CustomizableUI.jsm:5139
CustomizableUI: Considering moving profiler-button back, minSize: 814 CustomizableUI.jsm:5112
CustomizableUI: Moving profiler-button back CustomizableUI.jsm:5139
CustomizableUI: Considering moving private-relay_firefox_com-browser-action back, minSize: 844 CustomizableUI.jsm:5112
CustomizableUI: Moving private-relay_firefox_com-browser-action back CustomizableUI.jsm:5139
CustomizableUI: Considering moving coilfirefoxextension_coil_com-browser-action back, minSize: 874 CustomizableUI.jsm:5112
CustomizableUI: Moving coilfirefoxextension_coil_com-browser-action back CustomizableUI.jsm:5139
CustomizableUI: Considering moving pioneer-v2-example_mozilla_org-browser-action back, minSize: 904 CustomizableUI.jsm:5112
CustomizableUI: Need 904 but width is 898 so bailing CustomizableUI.jsm:5132

Here's the client rect for the nav-bar after in the bug state:

DOMRect { x: 0, y: 32, width: 958, height: 32, top: 32, right: 958, bottom: 64, left: 0 }

Comment 8

[Kenneth Karaisz Jr.]

Sorry I haven't said anything for a while, I haven't been on my computer much lately and totally forgot about this.
I can't reproduce the bug anymore though.

Comment 9

[Kenneth Karaisz Jr.]

Not actually sure if i'm allowed to do this, but I can't get the bug anymore and it's been almost a year, so

Comment 10

[:Gijs (he/him)]

Going to mark this as "works for me" given the reporter says it's working now. :-)