Hide specific drop-marker but keep drop down functionality u

[JackPollack]

Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this.

The button is a drop down list and what I am trying to do is remove the drop-down marker from this icon ONLY and not all markers, but keep the functionality of the marker. I found the button and marker in DOM inspector but was not initially able to turn off just the drop marker. I eventually changed the icon from toolbarbutton type "menu" to "menu-button" which separated the button and the marker. The problem was if I now hid the marker the button has no events associated with it (they are in the hidden marker).

I came up with this mess below and was wondering if there is a better way to do it.

/*Hide the real icon*/
addin-button toolbarbutton { visibility:collapse !important;}

/*Change the drop marker icon to match the hidden icon */
addin-button .toolbarbutton-menubutton-dropmarker .dropmarker-icon {list-style-image: url(data:image/png;base64,iBLA-BLA-BLA) !important; width: 100% !important; -moz-image-region: rect(0, 0, 0, 0) !important;}

[DanRaisch]

Moving to Firefox Support.

[dickvl]

See also:
https://support.mozilla.org/en-US/questions/1157519

BTW, weird user agent:
Mozilla/5.0 (Windows NT 5.1; rv:27.0) Gecko/20100101 Firefox/40.0

[Frank Lion]

Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this.

Yeah, just don't show the dropmarker image. Certainly never use collapse, otherwise you really will lose all functionality.

For example, In SeaMonkey, the Forward/Back in the Addons Manager are hidden and do nothing. The following restores functionality, but shows nothing -

Code: Select all

#back-btn,#forward-btn {
	display: -moz-box !important;
        list-style-image: none !important;
}

For a specific dropmarker, then I'd use the specific button ID prefix and -moz-appearance: none !important! on its dropmarker to stop the OS dropmarker showing and then define the list-style-image with none or anything that its not going to be able to find.

I.E. do this -

Code: Select all

#print-button > .toolbarbutton-menubutton-dropmarker {
	-moz-appearance: none !important;
	list-style-image: none !important;
}

[JackPollack]

Thanks for your reply.

If the button is type "menu-button" then

Code: Select all

#addin-button> .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
   list-style-image: none !important;
}

is just hiding the marker (and leaving a blank space where the marker should be)
The button's "main" icon has no functionality.

If the button is type "menu" then the button icon and the drop marker are together but references to the drop marker dont do anything.

What I want is the "main" button icon to have the functionality of the drop marker, but dont want the drop marker visible (ie button type menu with drop down list but no drop marker shown)

[Frank Lion]

What I want is the "main" button icon to have the functionality of the drop marker, but dont want the drop marker visible (ie button type menu with drop down list but no drop marker shown)

Yeah, simple enough. Give the dropmarker a size big enough to cover the toolbarbutton and then margin it over left to cover the button. When the user hits the button, the dropmarker options will just appear.

Thus -

Code: Select all

#print-button > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
   list-style-image: none !important;
   min-width: 30px !important;
   -moz-margin-start: -30px !important;
} 

Generically, this is slightly less easy to fix if the browser has Icons & Text mode, as they lay out as - Button>Text>Dropmarker and you have no way of knowing the width of text that will be used generically. Simple for a single button though using toolbar[mode="full"] etc. though.

[JackPollack]

This is almost perfect.

I spent all day playing around trying to get the "main" icon perfectly centered in the button. There are a few more (invisible border) pixels on the right side. I think it may be the place the drop marker was removed from.

I tried different combination of padding (right, left) but not sure if I should be adjusting the "main" icon or the invisible drop marker. Also tried playing with margin-start and max, min width.

Bet it will take you 5 min!
Thanks again

[Frank Lion]

...I tried different combination of padding (right, left) but not sure if I should be adjusting the "main" icon or the invisible drop marker. Also tried playing with margin-start and max, min width.

Bet it will take you 5 min!
Thanks again

In theming generally, forget padding exists. It causes more problems than it solves and is the command of last resort.

Leave the main icon completely alone or you'll risk throwing out relative positions to other buttons. Just like images, by default, this stuff draws from the top left, so first start with your -moz-margin-start on the dropmarker to line up the left side of the active area of the button - less 1px. Then increase the min-width of the dropmarker until it's 1px less than the right side of active area. To do a proper job, do similar on min-height of dropmarker. Be sure to leave that 1px less all round or you'll start distorting the size of the button itself.

Not needed here, but -moz-margin-end plays its part if you end up with a massive active area on the stuff you're moving around and it will give you back the original active (like when Mozilla first put the bookmark star inside the urlbar and I moved it outside and to the right of it, as it had been)

I'm explaining this one in detail as the whole technique is not well-known, even with other theme writers. For other .css stuff, you may pick up the odd idea or two from here - http://forums.mozillazine.org/viewtopic ... #p13219133

Hope that helps.

[dickvl]

I see on MDN that there are some new properties (41+):
-moz-margin-end [Superseded by the standard version margin-inline-end]
-moz-margin-start [Superseded by the standard version margin-inline-start]
https://developer.mozilla.org/en-US/doc ... Extensions
https://developer.mozilla.org/en-US/doc ... line-start
https://developer.mozilla.org/en-US/doc ... inline-end

[Frank Lion]

I see on MDN that there are some new properties (41+):

Thanks.

Yep, whatever they want to call them, they are still all just margin-left and margin-right, etc.