Existing name highlights: Make clickable and open popover

[DaleMcGrew]

Candidate highlighted (Yellow/Gray), not signed in: Open Modal

See #57

Candidate highlighted (Green/Red), signed in: Open Modal

See #58

Candidate highlighted (Green/Red), signed in: Sierra Club Endorsement

See #59

For all candidate name highlights, open a popover when you click on the highlighted name.

Spun off to /issues/54

If the website already had the candidate name linked to another page, override that link and always open our popover. Place that link in the bottom of our popover per the design below.

Spun off to /issues/55

This design has two tabs at the top. For now we are only going to implement the "Sierra Club Endorsement" tab.

Note: The current "Create a We Vote endorsement" popover (that appears when you select a name and right click) can open this new popover design.

[SailingSteve]

Limitation Related to clicking in the endorsement page, and making a selection: See https://developer.chrome.com/extensions/contextMenus#event-onClicked

The
only thing I get back from the page is indication of which tab has been clicked, and any text that is selected.

What this means is when you click in the New York Times endorsement page you're not really clicking on what looks like a button that we drew, you're clicking into a big text field, and the only thing we get back is what you have selected.

So unless the chrome.contextMenus API changes in some way, it will always be a requirement that you select the "text you want to act on" on the New York times page, not you click on what looks like a button have an action happen.

Low probability:
Maybe, I Could track mouse click locations, and although the most current click selected the option on the right click menu the previous click was at the location of the name, and if the name is in our list of possible matches maybe I could name to populate the pop up. Yuck.

[SailingSteve]

Limitation related to right clicking and going directly to a menu:
"Context menu items can appear in any document (or frame within a document), even those with file:// or chrome:// URLs. To control which documents your items can appear in, specify the documentUrlPatterns field when you call the create() or update() method. You can create as many context menu items as you need, but if more than one from your extension is visible at once, Google Chrome automatically collapses them into a single parent menu."

[SailingSteve]

3) "This design has two tabs at the top. For now we are only going to implement the "Sierra Club Endorsement" tab."
Response: My initial attempt to get React working in these dialogs was not successful, I might try it again for the new info pop up off of the 'W' extension icon, but in the meantime the components you see on screen are jQuery UI elements. So we probably should wait to make that "tab set up" until we know what's going in the other tab. In the meantime I can ask the API server if there is a probable match for the URL, and if not use the helmet title, which in this case would be "2020 Endorsements | Sierra Club"

More on React: React's reusable components, would be easier to use than jQuery UI, but jQuery UI is small and simple, and React is very big and can get bloated. If we went fully with React we would really need to build three applications one for the overlay menu, one for the frame around the outside of the endorsement page, and one for the new top row 'W' icon menu. I think the React libraries for all three apps would only have to be downloaded once in the extension deployable package.

[SailingSteve]

4) "Note: The current "Create a We Vote endorsement" popover (that appears when you select a name and right click) can open this new popover design."
Response: I'll do some styling and color changes and try and get the existing dialogue to look more like the design in the photo above.

[SailingSteve]

This is almost completely done in the spin-off issues. Most of the UI in the "popover" modal has been moved to the webapp, and is opened in an iFrame in the modal. The WebApp side is in process.