Press This Bookmarklet Redesign

[chexee]

Been working on this over at the UI blog: ​http://make.wordpress.org/ui/2011/04/04/pressthis-take-2/

Enhances the design of the Press This bookmarklet (previously a text link). Inspired by the Readability Bookmarklet: ​https://www.readability.com/bookmarklets

Attaching a patch that implements this design via CSS3 and degrades in IE 7/8: ​http://cl.ly/1Y0U2s1b3n1N1g3b3u32

[chexee]

Press This bookmarklet redesign

[jane]

Design approved by both me and @iammattthomas.Would like to pop this into 3.2 if no objections.

[azaozz]

(In [17662]) Press This bookmarklet redesign, props chexee, fixes #17184

[andrewryno]

Initial patch doesn't work on Options > Writing, only Tools page (see: ​http://d.pr/lRo4). New patch fixes it.

Also the icon (/wp-admin/images/press-this.png) didn't get added.

[jane]

It 'works' on both screens for me (Mac/Chrome), but the design is broken. The image @andrewryno posted is how it looks on Writing Settings. Am attaching image for record of how it looks on Tools.

[jane]

Screenshot of Press This on Tools screen

[markjaquith]

Can't find the icon anywhere. Chex — can you attach press-this.png ?

[markjaquith]

(In [17665]) Press This HTML fix. Still waiting on the icon image. props andrewryno. see #17184

[markjaquith]

(In [17666]) Do not allow the Press This links to be click-activated when they are meant to be dragged. fixes #17192. see #17184

[chexee]

Adds hand icon back to bookmarklet

[chexee]

Updated sprite to include hand icon

[ocean90]

17184-gradient_opera.patch includes CSS gradient fix (see also #16461) and adds support for Opera. It also removes unnecessary lines.

[chexee]

Background position got broken in latest version of trunk. This fixes that

[chexee]

17184.2.style-update-compat.diff fixes bg positioning for including the sprite, but not including the hand icon.

[markjaquith]

In [17867]:

Add missing Press This image, CSS background tweak. props Chexee. fixes #17184

[markjaquith]

Patch juggling left out the hand. Will get that later.

[chexee]

Went into beta without the hand? 17184.1.diff should add the hand.

17184.2.style-update-compat.diff just makes the CSS compatible with the sprite with the hand.

Some confusion about whether we wanted to add the hand or not. Sorry about that :[

[johnjamesjacoby]

Possible to remove the title attribute from the 'Press This' link too?

Feels too 'linky' when you curiously mouse over it, and a tool-tip pops up.

If the title attribute of an element is the same as the contents within that element, it's superfluous markup for the sake of saying it's 'compliant' to stop validators from complaining. If we decide to keep the title attribute, we should change the text to something more instructive like "Drag me to your bookmark toolbar!"

[studionashvegas]

Replaced title text with call-to-action (Drag me to your bookmarks bar!)

[azaozz]

In [18160]:

Remove the title attribute from the Press This link as it needlessly repeats the text, props johnjamesjacoby, fixes #17184

[johnjamesjacoby]

The behavior of the "Press This" link is still a little off, particularly in Chrome. I wouldn't normally re-open a closed ticket this late, but I think in this case it warrants another look-see.

So the description says:

Drag-and-drop the following link to your bookmarks bar or right click it and add it to your favorites for a posting shortcut.

...yet when I right-click in Chrome, it either highlights the text in the span (because I right-clicked the span) or returns false and acts like I right-clicked the body (because it's returning false on-click. There's effectively no URL to add to the bookmarks bar.

Further more, if I opted to hide the bookmarks-bar in Chrome I have no where to drag the link to. If I drag it to the tab-bar, it opens a new empty tab which immediately pops open the JS window, without ever giving me the chance to bookmark it.

I'm attaching a patch (which is by no means elegant) that puts the URL string in a prompt() that appears onclick. This needs core-dev and UX feedback. Even if my solution isn't the end-all, I think this might need more attention.

[johnjamesjacoby]

show_shortcut_prompt()

[markjaquith]

Let's just let right-clicking work, only blocking left clicks.

[chexee]

disables text select on right click

[chexee]

Patch above uses CSS3's user-select to disable text selection, so you can right click and get a normal context menu.

Combine with JJJ's patch so left click gives proper instructions and right click has normal behavior.

[azaozz]

Replying to johnjamesjacoby:

The behavior of the "Press This" link is still a little off, particularly in Chrome.

The problem is that Chrome doesn't have "Bookmark This Link" on right-clicking a link at all. We will have to add some JS there to handle this only in Chrome, prompt(...) is probably the most inconvenient for the user. Not sure if we can make it at least look better.

[azaozz]

Another idea would be to show the actual bookmarklet's code in a read-only textarea under the Press This link, pre-selected. Can be shown onclick in Chrome only (onclick would cover right-click and double-click).

[johnjamesjacoby]

Replying to azaozz:

Another idea would be to show the actual bookmarklet's code in a read-only textarea under the Press This link, pre-selected. Can be shown onclick in Chrome only (onclick would cover right-click and double-click).

This is simpler solution than my prompt idea, which was more for avoiding additional UI where it might not be needed for everyone.

[azaozz]

In [18187]:

Make copying the PressThis bookmarklet code easier in WebKit browsers, fixes #17184