1102710 - [OS X] "Restart with Add-ons Disabled" menu item text cut off in the help subview of the main menu button

Status: RESOLVED WORKSFORME

(Firefox :: Toolbars and Customization, defect)

Description

[Cameron McCormack (:heycam)]

Attachment: screen shot

In the Help panel in the application menu, the "Restart with Add-ons Disabled" menu item is cut off and only shows "Restart with Add-ons Disable...".  See attached screen shot.

Comment 1

[:Gijs (he/him)]

Philipp, do you have ideas about what we could do here?

Comment 2

[:Gijs (he/him)]

Actually, it's cut off on 10.9 as well. I swear this didn't use to be the case... :-\

Comment 3

[:Gijs (he/him)]

Hm, well, it was all the way back to 31.0 against current 10.9, though, so I must be imagining it... :-\

Comment 4

[Albert Scheiner [:alberts]]

Attachment: Help sub-menu in German; FF 36 DevEdition; Mac OS 10.9

Yeah, this is not 10.10 specific. I have attached a screenshot of the help sub-menu on my Mac OS 10.9, FF 36 DevEdition/Aurora. For the highlighted menu item I can't even guess what the whole wording might be.
Maybe a title attribute on hover would help a bit!?

Comment 5

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Yeah, a tooltip text would be in order for items that are cut off.
We should however avoid showing the tooltip if the item isn't actually cut off.

Comment 6

[:Gijs (he/him)]

Picking 8 points because I don't think there's an easy way to determine whether the ellipsis is in use or not.

Comment 7

[Blake Winton (:bwinton) (:☕️)]

So, I tried menuitem.clientWidth, menuitem.scrollWidth, menuitem.width, menuitem.scrollLeft, menuitem.boxObject, document.getBoxObjectFor(menuitem), and menuitem.getBoundingClientRect(), but they all gave me a width of 0, so, uh, how upset would you be if we added tooltips for items that weren't cut off, Philipp?

Comment 8

[:Gijs (he/him)]

(In reply to Blake Winton (:bwinton) from comment #7)
> So, I tried menuitem.clientWidth, menuitem.scrollWidth, menuitem.width,
> menuitem.scrollLeft, menuitem.boxObject, document.getBoxObjectFor(menuitem),
> and menuitem.getBoundingClientRect(), but they all gave me a width of 0, so,
> uh, how upset would you be if we added tooltips for items that weren't cut
> off, Philipp?

Checked them when? I bet you'll need to update this after the subview is displayed...

Comment 9

[Blake Winton (:bwinton) (:☕️)]

Yep, I did a "setTimeout(printFunc, 2000);" to make sure it was all laid out and showing.  Still no luck.
(If you can get a real width out of them, please post a diff!  ;)

Comment 10

[:Gijs (he/him)]

How are you getting the menuitem? If I noautohide=true PanelUI.panel, then open it & the help subview and run:

document.querySelector("toolbarbutton[oncommand*='Restart']").getBoundingClientRect()

it works.

I'm not 100% sure on how you're going to use this info to decide when to do a tooltip, though? :-)

Comment 11

[farhaan]

Hey Blake , I want to try to fix it can you tell me where to start?

Comment 12

[Blake Winton (:bwinton) (:☕️)]

I can try…  (But fair warning, I'm going to get you to do more of the work this time.  ;)

So, the first thing to do is to find the PanelUI-popup element in a XUL file, and add:
  noautohide="true"
to it.  (You can use https://dxr.mozilla.org to find which file the element is in.)

Then in the Console of the Browser Toolbox, run the command Gijs gave in comment 10, and see if you can get the bounds of the Restart menu item.

Comment 13

[farhaan]

hahahah!! I would love to explore and work more but guide me okay !! :D On it captain!!

Comment 14

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to Blake Winton (:bwinton) from comment #7)
> So, I tried menuitem.clientWidth, menuitem.scrollWidth, menuitem.width,
> menuitem.scrollLeft, menuitem.boxObject, document.getBoxObjectFor(menuitem),
> and menuitem.getBoundingClientRect(), but they all gave me a width of 0, so,
> uh, how upset would you be if we added tooltips for items that weren't cut
> off, Philipp?

Any luck with getting the dimensions with the suggestions from Gijs?
Avoiding tooltips on fully visible labels would be preferable...

Comment 15

[Blake Winton (:bwinton) (:☕️)]

I haven't tried since Gijs's comment.  Hopefully Farhaan will be able to get it working with some guidance.  :)

Comment 16

[farhaan]

:) yeah been caught up but I am looking into it and hopefully I will get it done!

Comment 17

[farhaan]

Attachment: Screen Shot 2015-03-05 at 9.30.39 pm.png

This is what it shows! am i doing it right??

Comment 18

[Blake Winton (:bwinton) (:☕️)]

Well, since it's giving an error, I would have to say "No, it's not quite right".  ;)

Did you add the noautohide="true" from comment 12 and rebuild Firefox?
Also, you'll need to be using the Browser Toolbox, not the Web Console…

Comment 19

[farhaan]

(In reply to Blake Winton (:bwinton) from comment #18)
> Well, since it's giving an error, I would have to say "No, it's not quite
> right".  ;)
> 
> Did you add the noautohide="true" from comment 12 and rebuild Firefox?
> Also, you'll need to be using the Browser Toolbox, not the Web Console…

browser/components/customizableui/content/panelUI.inc.xul
added noautohide="true" in panel tag in this file with id  PanelUI-popup


How to use Browser Toolbox please tell me.

Comment 20

[Blake Winton (:bwinton) (:☕️)]

Ah!  I thought I had mentioned this before…  Check out https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox  :)

Comment 21

[farhaan]

You did! I tried my hands on it but was not able to figure out then , let me try now!

Comment 22

[farhaan]

Attachment: Screen Shot 2015-04-01 at 8.00.10 pm.png

Comment 23

[Blake Winton (:bwinton) (:☕️)]

Hmm…  So, instead of trying to print them out by typing the command, maybe it would work to console.log them near https://dxr.mozilla.org/mozilla-central/source/browser/components/customizableui/content/panelUI.js#154 ?

Comment 24

[farhaan]

Attachment: Screen Shot 2015-04-01 at 8.00.10 pm.png

Comment 25

[farhaan]

this one I got through Browser Tool Box , Now how shall i proceed?

Comment 26

[Blake Winton (:bwinton) (:☕️)]

Ah, cool!  So, now we know the width of the button.  The next thing to do is to find the width of its parent and see if the parent is ever smaller than the child.  (If the parent is smaller, then we want to add a tooltip…)

Comment 27

[farhaan]

How to find it?and how to move ahead?

Comment 28

[Blake Winton (:bwinton) (:☕️)]

To find the parent's width, Add a ".parentNode" before ".getBoundingClientRect", and then look for the width in the returned object.

And I think the final patch will be changing the code at https://dxr.mozilla.org/mozilla-central/source/browser/components/customizableui/content/panelUI.js#466 to check if the width is bigger than the parent width, and set the "tooltiptext" attribute on each menuitem which is too big.

Comment 29

[farhaan]

Attachment: Screen Shot 2015-04-02 at 2.16.55 am.png

Comment 30

[farhaan]

parent width is greater than the child width ! I will try looking into js file

Comment 31

[Blake Winton (:bwinton) (:☕️)]

Hmmm.  Try changing the text of the menu item so that it gets cut off, and see if the parent width is still greater than the child width…

Comment 32

[farhaan]

Attachment: Screen Shot 2015-04-05 at 8.21.37 am.png

This is the screenshot showing the text is overflowing

Comment 33

[farhaan]

Attachment: Screen Shot 2015-04-05 at 8.29.51 am.png

This is the screenshot showing parent's width is greater than child's width

Comment 34

[Blake Winton (:bwinton) (:☕️)]

Well, drats.  Is there any width that is larger on the child?  offsetWidth or scrollWidth perhaps?
(And are either of those larger on the child than the boundingClientRect's width, or clientWidth?)

Comment 35

[farhaan]

how do I get a list of such properties? where can I find them?

Comment 36

[Blake Winton (:bwinton) (:☕️)]

Well, start with the two I mentioned (which I got from https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements which is the first MDN result when you search for getBoundingClientRect), and see if either of them work.

After that, instead of logging the result of getBoundingClientRect(), try logging document.querySelector("toolbarbutton[oncommand*='Restart']") and expanding out its properties in the console, and see if anything looks like a width…

Comment 37

[:Gijs (he/him)]

This is no longer an issue with English in the new menus, so I'm going to mark this as 'worksforme', given that no work has happened here for several years. I will add that bug 1366219 covers improving this generally for other languages that may still have issues here.