Implement right-click context menu #1780

bryanwb · 2018-05-14T07:35:48Z

Description

The user should get a relevant context menu when they right-click in the Electron UI.

I did not use the electron-context-menu package as it did not add accelerators (icons for key shortcuts) and it could not easily be modified to add translations at a later time.

This PR is incomplete as Electron's main process needs a way to lookup user's language selection. That value is only accessible, afaict, in localStorage.REDUX_STATE which Electron's main process does not have access to. Any ideas on how to resolve this?

Changes

add context menu for right-clicking

bryanwb · 2018-05-14T07:41:00Z

I cannot read the details of why the commit cannot be built :(

coveralls · 2018-05-14T07:42:29Z

Coverage remained the same at 55.371% when pulling ed18168 on bryanwb:feature/electron-context-menu into 9c9f3c3 on MyCryptoHQ:develop.

bryanwb · 2018-05-14T07:45:05Z

If the translations issue is too thorny, i can resubmit this PR w/ out the changes I made to support translations.

dternyak · 2018-05-14T16:51:43Z

@bryanwb You're actually good to go here! our Jenkis CI instance isn't working correctly right now, but the other CI is passing.

Thanks for your contribution! :)

bryanwb · 2018-05-15T02:13:24Z

Update: I have removed the code related to translating the menu items in the context menu. This PR is now ready for merging. I will take a stab at i18n of the items managed by the main electron process in a separate PR

dternyak · 2018-05-21T18:57:38Z

Thanks @bryanwb! I'll be reviewing and hopefully merging in the near future 👍

dternyak · 2018-05-21T18:58:25Z

electron-app/main/menu.ts

@@ -85,4 +85,103 @@ if (process.platform === 'darwin') {
  MENU.push(HELP_MENU);
 }

-export default MENU;
+function capitalize(word: string): string {


https://lodash.com/docs/4.17.4#capitalize would be a good alternative.

bryanwb · 2018-05-22T05:56:06Z

@dternyak updated. tks

wbobeirne

Nice work, thanks for diving into this. Let me know if you have any questions about the feedback.

wbobeirne · 2018-05-29T19:27:22Z

electron-app/main/menu.ts

+          download(window, props.srcURL);
+        }
+      }];
+    } */


Good call, you can just cut this code out.

wbobeirne · 2018-05-29T19:35:15Z

electron-app/main/menu.ts

+
+  if (roleEnabled('cut') && props.isEditable) {
+    ctxMenuTmpl.push({
+      label: 'Cut',


If you remove this, it'll use the OS's language settings to make a label based on role

wbobeirne · 2018-05-29T19:35:18Z

electron-app/main/menu.ts

+
+  if (roleEnabled('copy') && hasText) {
+    ctxMenuTmpl.push({
+      label: 'Copy',


If you remove this, it'll use the OS's language settings to make a label based on role

wbobeirne · 2018-05-29T19:35:23Z

electron-app/main/menu.ts

+  // let's only check if the currently focused element is editable
+  if (props.isEditable) {
+    ctxMenuTmpl.push({
+      label: 'Paste',


If you remove this, it'll use the OS's language settings to make a label based on role

wbobeirne · 2018-05-29T19:36:13Z

electron-app/main/menu.ts

+      },
+      {
+        id: 'openLink',
+        label: 'Open Link',


I think I'd prefer Open Link in Browser to make it clear it won't be opened in app, but this is pretty minor.

wbobeirne · 2018-05-29T19:37:14Z

electron-app/main/menu.ts

+        id: 'openLink',
+        label: 'Open Link',
+        click() {
+          shell.openExternal(props.linkURL);


Make sure this is an https:// URL before running openExternal, this could execute code.

You can see an example of this here: https://github.com/MyCryptoHQ/MyCrypto/blob/develop/electron-app/main/window.ts#L38 perhaps it could be broken out into a util function.

wbobeirne · 2018-05-29T19:38:26Z

electron-app/main/menu.ts

@@ -85,4 +86,99 @@ if (process.platform === 'darwin') {
  MENU.push(HELP_MENU);
 }

-export default MENU;
+export function popupContextMenu(


I think it would be nice to break this out into its own file, and leave Menu.ts as-is.

wbobeirne · 2018-05-29T19:43:15Z

electron-app/main/menu.ts

+) {
+  const editFlags: any = props.editFlags;
+  const hasText = props.selectionText.trim().length > 0;
+  const roleEnabled = (role: string) => editFlags[`can${capitalize(role)}`] && hasText;


Prefer removing the any cast, and doing explicit checks against editFlags to maintain typing. It's not that much more code to write, and makes 100% sure it's actually a flag Electron provides.

(role: string) => editFlags[`can${capitalize(role)}`] && hasText;

can become

(flag: keyof Electron.EditFlags) => editFlags[flag] && hasText;

@wbobeirne i have updated per your comments. Thanks a lot for the code review.

dternyak · 2018-06-11T23:58:54Z

@bryanwb Thanks a lot for the changes! Making a note here to circle back to include this in our next release!

* Add a new route for AddressBook * Further templating of the AddressBook view * Add initial functionality to handle a table of existing address labels * Make the linter happy * Adjust paths * Factor out TableRow and add common functionality * Add initial Redux boilerplate for addressBook | fix minor linting issues * Swap out terminology and types * Connect up to Redux * Connect data for AddressBookTable to Redux * Use temporary fields for addition * Remove alignment and index column * Stopping point * Adjust the sizing of rows to be consistent * Initial implementation of a dropdown for the address field * Minor styling to dropdown * Stopping point * Apply a focus concept onto the factory * Add keyboard controls for the address field dropdown * Adjust label of address field when it matches an addressBook entry * Properly handle attempting to blur a non-existent component * Minor styling changes on dropdown box * Standardize address casing, add accessibility to dropdown * Create an addressLabel component * Pass refs correctly and fix some typings * Exact version * Add module name mapping for shared/keycodes * addressBook reducer tests * Add functionality to DeterministicModal * Minor changes / Add test for addressBook selectors * Move out AddressBookTable to a component * Typing, translation and restructuring * More typing and translation fixes * More linting fixes * More type changes * Variable name for dropdown background * Fix TS type errors, lint errors, remove unused props * Used a different selector and removed method: AddressBookTable * Linter was mad * Linter mad again :( * Add a translation and adjust styling of AddressBookTable * Move the onBlur to a class method * Prevent the default behavior of up/down/enter for dropdown * Let's do it this way instead * Adjust the styling on DeterministicWalletModal labels * Change `AddressBookTable` into a pseudo-table using section and div * Use readable keys vs. keycodes * Put the dropdown in InputFactory and position it correctly * Sanitation of label adding and changing * Prevent duplicate labels in AddressBook and Row * Add a box shadow and use `invalid` class insted of custom * Use emphasis vs strong for address in dropdown * Display the label undernearth the input vs. changing it * Isolate AccountAddress into its own component * Introduce interactivity to AccountAddress * Fully incorporate with Redux * Validation for AccountAddress * Add validation notifications for address field on AddressBookTable * Minor formatting * Adjust wrappage for optimal flexboxxing * Make AddressBookTable responsive * Show an invalid input in "real time" instead of only on submit * Real time input validation for AddressBookTableRow * Responsive-ize the To address dropdown * Hide identicons instead at small enough screen sizes * Fix repsonsiveness of dropdown further * Fix responsiveness of table rows and inputs * Truncate account info and switch identicons to the right for consistency * Use classnames instead of targetting element directly for DWM * Display a notice if the entered query doesnt match a label and isnt an addr * Don't show an error on the To address if its a label entry * Display an error under AddressBookTableRow in real time * Display errors in real time for AddressBookTable temp inputs * Add realtime validation to AccountAddress * Ensure toChecksumAddress is used when entering labels to address manager * Show errors even after blurring. * Create a ducks/ implementation for addressBook * Duck-ize notifications * Duck-ize customTokens * Duck-ize deterministicWallets * Only show errors on address/label entry if they have been blurred * On certain inputs, show an invalid input immediately * spec files in same directory * Rename top-level redux directory * Duck-ize gas * Add displayed errors for labels with 0x and labels containing ens * Move ENS checking validation out * Add a saga for addLabelForAddress * Completely revamp the redux side of Address Manager and test it all * Adjust components to use new redux addressBook * Incorporate new redux into AddressBookTableRow and clean up for linter * Make linter and tests happy * Another reduxy overhaul * Still fixing it * More redux updates * Finalize redux stuff. * Incorporate new reduxy way into AddressBookTable & Row * Incorporate redux changes into Account Address * Small tests fix * Add and fix some selector tests * Addressing Will's comments * Shortened visibility class for line length reasons. * Incorporate ducks pattern on updates addressBook * Fix typeerror * Migrate messages to ducks * For Henry * Duckify onboardStatus * Duckify paritySigner * Duckify rates * Duckify transactions * Duckerize wallet * Reduckerate config * Adjust exports and tests of every duck so far * Duckify ENS * Duckerificate schedule * Duckificate swap * Actually use the new sagas; fix a circular dependency problem. * Duckify transaction (phew) * Add basics to redux/ directory * Remove non-ducked redux stuff * First sweep of redux/ directory * Combine redundant imports * Fix more linting stuff. * A few more type fixes * Welp... now I know not to use index. * Sweep components/ * Sweep through containers/ * Im really starting to get frustrated * The dawn of a new age. * Linter fixes. * De-flatten config/ reducers * Do my thang on config selectors * Adjust all references to config * Split up ens reducers * Wrap up de-nesting ENS * Big boy refactor * Split transaction into its reducers * Fix reducers in transaction/ * Stopping point * Adjust references to transaction from components * Fix references to selectors * Nest broadcast actions * Nest field actions * Nest meta actions * Nest network actions * Nest sign actions * Nest broadcast types * Nested fields types * Nest meta types * Nested network types * Nested sign types * Implement transaction saga changes * Huh? No prepush problems? * Update snappshot * Reintroduce deleted tests * A few missing tests found * Found three missing transaction tests * Found more tests * Found the rest of the tests, woohoo. * Renamed TypeKeys in TRANSACTION * Specify TRANSACTION_BROADCAST * Pretty up these imports * Specify TRANSACTION_FIELDS * Specify TRANSACTION_META * Specify TRANSACTION_NETWORK * Specify TRANSACTION_SIGN * Adjust imports and add translations * Update config snapshot * Post-merge * Temporary fix for DW/Config sagas so Daniel can continue smoke testing * Remove first circulat dependency * Fix more circular dependencies * Properly structure config indices * Further restructure config * Prepare for idea * Target directly from within features/ * Remove that circular dependency -- woohoo * Remove the circular dependency from Web3Wallet, temporarily comment some tests pending assistance * Un-comment the component-in-redux phenomenon * Move onLoad to the store file * Adjust addressBook imports/exports * Adjusted imports/exports for customTokens * Adjust imports/exports of deterministicWallets * Adjust imports/exports of ens * Restructure imports/exports of gas * Restructure imports/exports for message * Adjust imports/exports of notifications * Restructure onboardStatus imports/exports * Restructure paritySigner imports/exports * Restructure rates imports/exports * Restructure schedule imports/exports * Fix broadcastweb3handler test * Restructure swap imports/exports/ * Restructure transactionS imports/exports * Restructured wallet imports and exports * Hoist all necessary selectors aside from config/**/* and transaction/**/* * Hoist all top-level selectors from transaction * [Fix] Estimate Gas on Value Field Change (#1942) @ skubakdj * Implement right-click context menu (#1780) @ bryanwb * No Private Keys Online (#1466) @ wbobeirne * Fix Stuck Node on Metamask Logout (#1951) @ wbobeirne * [Fix] Make ENS Value Consistent (#1956) @ skubakdj * Auto token add (#1808) @ HenryNguyen5 * Electron Ledger + Trezor Support (#1836) @ wbobeirne * Fix Context Menu Popup Parameters (#1957) * Add RSK network w/ network agnostic refactors (#1939) @ wbobeirne * Change displayed notification back in helpers.tsx * Remove newline on shell files * Re-add newlines * Remove newling on .travis.yml * Prettier two files * Re-add index.scss import in OnboardModal * Restructure transaction subdirectories * Everything in transaction/ except for sagas * Restructure transaction imports/exports * Nest broadcast sagas * Nest fields * Nest meta * Nest network * Nest sign * Use generic names for reduxy stuff in the same directory to save space * Do everything every in the whole wide world

bryanwb changed the title ~~WIP: Implement right-click context menu~~ Implement right-click context menu May 15, 2018

dternyak reviewed May 21, 2018

View reviewed changes

wbobeirne suggested changes May 29, 2018

View reviewed changes

Implement a context menu for the electron app

4bc43b3

Merge branch 'develop' into feature/electron-context-menu

ed18168

wbobeirne approved these changes Jun 14, 2018

View reviewed changes

dternyak merged commit 8a19e89 into MyCryptoHQ:develop Jun 14, 2018

HenryNguyen5 mentioned this pull request Jun 15, 2018

Fix Context Menu Popup Parameters #1957

Merged

ConnorBryan added a commit that referenced this pull request Jun 16, 2018

Implement right-click context menu (#1780) @ bryanwb

f24414b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement right-click context menu #1780

Implement right-click context menu #1780

bryanwb commented May 14, 2018 •

edited

Loading

bryanwb commented May 14, 2018 •

edited

Loading

coveralls commented May 14, 2018 •

edited

Loading

bryanwb commented May 14, 2018

dternyak commented May 14, 2018

bryanwb commented May 15, 2018

dternyak commented May 21, 2018

dternyak May 21, 2018

bryanwb commented May 22, 2018

wbobeirne left a comment

wbobeirne May 29, 2018

bryanwb Jun 4, 2018

wbobeirne May 29, 2018

bryanwb Jun 4, 2018

wbobeirne May 29, 2018

wbobeirne May 29, 2018

wbobeirne May 29, 2018

wbobeirne May 29, 2018 •

edited

Loading

wbobeirne May 29, 2018

wbobeirne May 29, 2018 •

edited

Loading

wbobeirne May 29, 2018

bryanwb Jun 4, 2018

dternyak commented Jun 11, 2018

Implement right-click context menu #1780

Implement right-click context menu #1780

Conversation

bryanwb commented May 14, 2018 • edited Loading

Description

Changes

bryanwb commented May 14, 2018 • edited Loading

coveralls commented May 14, 2018 • edited Loading

bryanwb commented May 14, 2018

dternyak commented May 14, 2018

bryanwb commented May 15, 2018

dternyak commented May 21, 2018

Choose a reason for hiding this comment

bryanwb commented May 22, 2018

wbobeirne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbobeirne May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbobeirne May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dternyak commented Jun 11, 2018

bryanwb commented May 14, 2018 •

edited

Loading

bryanwb commented May 14, 2018 •

edited

Loading

coveralls commented May 14, 2018 •

edited

Loading

wbobeirne May 29, 2018 •

edited

Loading

wbobeirne May 29, 2018 •

edited

Loading