New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust Monkey Menu to look and behave like native FF #2805

Merged
merged 2 commits into from Jan 19, 2018

Conversation

Projects
None yet
3 participants
@Sxderp
Contributor

Sxderp commented Jan 15, 2018

Overhaul the styling to much more closely mimic FF 57 + menu / panel design. Also includes a similar transition effect as seen in native FF menus.

main_menu

details_menu

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 15, 2018

It should also be noted that sub text can be easily applied to a menu item. To denote shortcuts (should the be implemented) or other information. This can be done by adding an after="text" attribute to the <a> tag.

For example adjusting the homepage link to:

<a href="#https://www.greasemonkey.net/" class="subview-item" after="CTRL+Sample">

Produces the following.
sample_sub_text

@esperecyan

This comment has been minimized.

Contributor

esperecyan commented Jan 15, 2018

If the menu needs original attributes, you can use data-* attributes such as data-after="CTRL+Sample".

However, I think that making it possible to also write aria-keyshortcuts attributes will be more meaningful if the value is a keyboard shortcut such as the example.

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 15, 2018

If the menu needs original attributes

The reason I used the "after" is that it's the exact same method used in FF menus. I could change it if you think it's better to do something else.

@esperecyan

This comment has been minimized.

Contributor

esperecyan commented Jan 15, 2018

I see. In that case, I suggest “aria-keyshortcuts” for now. After this, how about adding CSS which corresponds to a proper attribute as needed?

@arantius arantius added this to the 4.3 milestone Jan 15, 2018

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 16, 2018

Disregarding the point that the chrome:// URIs don't exist in FF 52 ESR (easily fixed), that version doesn't render .svg files correctly. Open FF 52 ESR and go to the photo design page. Many of the .svg files don't render. I suppose I could change the chevrons into .png or something.

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 18, 2018

I believe I figured out the rendering issue. It has to due with a special fill flag set in the .svg that informs the browser to look in CSS to determine the path fill rather than specifying it in the path itself. FF 52 does not support this flag. Updated, the icons should render properly now.

@arantius

This comment has been minimized.

Collaborator

arantius commented Jan 19, 2018

Overall I like this except it's stretching the user scripts' icons.

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 19, 2018

stretching the user scripts' icons.

Oh, didn't really notice. Although, on closer inspection I'd suggest to keep the 'wider' icons. I feel they look better as they 'fill out' the icon area.

I'll look into updating and posting comparisons.

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 19, 2018

And by 'keep', I mean replace the current default icon that's bundled with GM. The stretching will still be fixed so that scripts that provide their own icons won't be stretched.

@arantius arantius merged commit 73f9ae3 into greasemonkey:master Jan 19, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@arantius

This comment has been minimized.

Collaborator

arantius commented Jan 19, 2018

If you've got good art I'll happily review it, but for now I care about maintaining aspect ratio, and have found a good way to do so.

@Sxderp

This comment has been minimized.

Contributor

Sxderp commented Jan 19, 2018

I grabbed the latest. I noticed you removed the font size from the icons. Did you want to use the smaller icons? I set the size so that they'd be more comparable to FF icons, and the larger size cleans up / sharpens the details in most of the icons.

@arantius

This comment has been minimized.

Collaborator

arantius commented Jan 19, 2018

Inadvertent; fixed.

@Sxderp Sxderp deleted the Sxderp:monkey-menu-style branch Jan 20, 2018

arantius added a commit that referenced this pull request Feb 5, 2018

Merge pull request #2829 from Sxderp/fix-other-user-script-heading
Fix other user scripts heading style in MM

Refs #2805
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment