feat: Relates to #312. Taskbar app #332

ltfschoen · 2019-01-04T04:29:34Z

Usage:

Follow steps in # Usage of taskbar mode section of update README
Note: If it hangs with a white screen after it has finished loading, then go to Electron menu "View > Reload" (CMD+R on macOS)
Note: Press ALT after clicking Fether window to view the Fether menu on Windows/Linux

TODO

Note: Currently being developed on macOS Mojave 10.14. Check that different Parity Fether icon sizes are being used (16x16, 32x32, 48x48).

Try and use VirtualBox to test with the following Virtual Box images of different distributions:
- macOS
- Download Windows 10 for VirtualBox 64 bit- 16Gb - https://developer.microsoft.com/en-us/windows/downloads/virtual-machines
  - See Unable to run on Windows 7 32-bit (but works on Windows 10 64-bit) #378
- Download Linux for VirtualBox - https://www.osboxes.org/virtualbox-images/
  - Arch Linux - KDE Version - 1.7Gb - https://www.osboxes.org/arch-linux/
    - 64k.7z - SHA256 a349626f11de2d956a920036070179907d0269bb132b5c141c266125af4c94a6
  - Debian - 9.5 Stretch 64 bit - 1Gb - https://www.osboxes.org/debian/
    - 9564.7z - SHA256 d9ab9c55ea1ea68a2d218c271f7ed8850208a73c1e51dd1a393304f86f7f5f93
  - FreeBSD - 11.2 64 bit ~0.4Gb - https://www.osboxes.org/freebsd/
    - 11.264.7z SHA 256 988608cf8466f83e8bf08c0abafb5b4049e7cd439d4075146929df06900fbbd4
  - openSUSE - 15 Leap - KDE Plasma Version - ~1.5Gb - https://www.osboxes.org/opensuse/
    - L150K64.7z - SHA 256 7ab66266a38a0264953e5d820aeff422adffee3aecf76d1dc478a77e8bd9a77d
  - Ubuntu Gnome 64 bit - 16.04.2 Xenial - 0.9Gb - https://www.osboxes.org/ubuntu-gnome/
    - 1604264.7z - SHA 256 6492fb4b94b024cb050982d703f869e02f91af51cfe710566c38b8203872ed8a
    - version is based on the GNOME 3.18 release
    - Extract with 7z x 1604264.7z
    - Download ISO 64-bit PC (AMD64) desktop image
      - http://releases.ubuntu.com/16.04/
    - Setup Settings in Virtual Box and start

echo 16384 | sudo tee /proc/sys/fs/inotify/max_user_watches
sudo apt update;
sudo apt install -y git nodejs npm curl;
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
apt-get install -y nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node;
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -;
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list;
sudo apt-get update && sudo apt-get install yarn;
sudo ln -s /usr/bin/yarn /usr/local/bin/yarn;
mkdir code && cd code;
git clone https://github.com/paritytech/fether;
cd fether;
git fetch origin luke-312-taskbar-app:luke-312-taskbar-app;
git checkout luke-312-taskbar-app;
yarn; TASKBAR=false yarn start

Fix positioning on Linux. Even though taskbar is at the bottom of the screen the Fether window shows in the top right hand corner. feat: Relates to #312. Taskbar app #332 (comment)
Frameless window that is draggable (without requiring a frame).
Fether window always on top alwaysOnTop: true
Check if we need to make any regions no-drag https://electronjs.org/docs/api/frameless-window#draggable-region
Detect if user running Gnome 3 (note: process.platform returns linux when running Gnome 3) or higher and run as non-taskbar app (since taskbar apps not allowed on Gnome by default: https://blogs.gnome.org/aday/2018/10/09/farewell-application-menus/.
Update: This has not been an issue
Build binaries for production in Windows, Linux that use app icons (i.e. .ico for windows) using correct path without error
- Ubuntu
  - Added export GH_TOKEN="..." (obtained from GitHub settings) to ~/.bashrc and then source ~/.bashrc
  - Edit electron-builder.json temporarily so it only builds .deb
  - Note: Alternative to yarn; yarn build; DEBUG=electron-builder yarn release --linux is to just run yarn package

rm -rf ./packages/fether-electron/dist/;
sudo rm /usr/local/bin/fether;
sudo apt remove -y fether;
yarn; yarn build; DEBUG=electron-builder yarn release --linux
sudo apt install -y ./packages/fether-electron/dist/fether_0.3.0_amd64.deb
fether

- macOS
  - Added export GH_TOKEN="..." (obtained from GitHub settings) to ~/.bashrc and then source ~/.bashrc
  - Note: Alternative to yarn; yarn build; DEBUG=electron-builder yarn release --mac; is to just run yarn package and then run the open "./packages/fether-electron/dist/mac/Parity Fether.app" (i.e. no need to install)

git fetch origin luke-312-taskbar-app:luke-312-taskbar-app;
git checkout luke-312-taskbar-app;
rm -rf ./packages/fether-electron/dist/
rm -rf /Applications/Parity\ Fether.app/
yarn; yarn build; DEBUG=electron-builder yarn release --mac;
open ./packages/fether-electron/dist/Parity\ Fether-0.3.0.dmg

- - Drag "Parity Fether.app" into Applications folder and wait for it to transfer it ~1Gb
  - Open Fether open /Applications/Parity\ Fether.app/
- Windows
  - Added export GH_TOKEN="..." (obtained from GitHub settings) to ~/.bashrc and then source ~/.bashrc

git fetch origin luke-312-taskbar-app:luke-312-taskbar-app;
git checkout luke-312-taskbar-app;
rm -rf /packages/fether-electron/dist
yarn; yarn build; DEBUG=electron-builder yarn release --win;
./packages/fether-electron/dist/Parity\ Fether-0.3.0.exe

Icon setup tips:
- If you have a larger PNG image (i.e. 1024x1024px) and need to produce smaller ones, then in Photoshop select appropriate DPI level (i.e. maintain ~>192 DPI) when reducing image size
- Use https://icoconvert.com/ to convert PNG to "ICO for Windows 7, Windows 8, Vista and XP", outputs a 256x256 .ico file
- In electron-builder.json specify location of .ico file relative to /build directory, otherwise it uses the smallest size PNG file (which looks poor quality)
- Debug using DEBUG=electron-builder yarn release
- References:
  - Windows .ico config - https://www.electron.build/icons#windows-nsis
  - Source code mentions up to @5x is supported. ~192 DPI when resizing - /Users/scon/code/src/clones/electron/electron/docs/api/native-image.md
  - Creating icons and tweaking 16x16 size since so small - https://docs.microsoft.com/en-gb/windows/desktop/uxguide/vis-icons
- Fix tests to use Jest and make all existing tests pass (see review comment)
- Refactor methods in FetherApp class into a 'methods' folder so the class isn't monolithic
- Create custom 16x16 icon for taskbar using monochrome (see review comment)
Security modifications to be handled in a separate PR and adopt techniques from https://github.com/parity-js/shell/tree/master/electron, review these guidelines Code Review, volunteers needed #124, and branch 'luke-312-taskbar-app-security'
Add tests for good measure where necessary
BONUS: Arrow adjacent to the window

Screenshot:

…nge command to run taskbar app

Tbaut · 2019-01-04T17:24:34Z

Regarding the icon it should be the same as the readme I can provide it to you.

…nt on taskbar app * Note: To quickly see the changes force the Onboarding component (displaying Terms & Conditions screen) to appear by changing `if (isFirstRun) {` to `if (true) {` in `fether-react/src/App/App.js. The screen should be consistent when you run `yarn taskbar` and `yarn start` * Terms & Conditions updates for consistency and compatibility with taskbar app * Add extra side padding `-padded-extra` to Terms & Conditions so consistent with rest of site and in taskbar app * Wrap with `.terms-and-conditions-wrapper` to add box shadow around both the 'Please read carefully' label and associated Terms & Conditions * Adjust height of `.terms-and-conditions` down to 16rem otherwise with more side padding it causes overflow to occur with vertical scrollbar appearing (checked that it works on both taskbar app i.e. `yarn taskbar` and normal app `yarn electron` or `yarn start`) * Hide `overflow-x` in Terms and Conditions as caused horizontal scroll on taskbar app * Add top margin to Terms and Conditions so extra gap from its 'Please read carefully' label * Only left padding in Terms and Conditions

…stent in taskbar app * Note: To quickly see the changes force the Onboarding component (displaying Terms & Conditions screen) to appear by changing `if (isFirstRun) {` to `if (true) {` in `fether-react/src/App/App.js. The screen should be consistent when you run `yarn taskbar` and `yarn start` * Add eggshell background colour to `body` element otherwise `yarn taskbar` app has grey background (even though running as normal `yarn start` or `yarn electron` app has white background from manifest)

ltfschoen · 2019-01-05T06:15:40Z

Regarding the icon it should be the same as the readme I can provide it to you.

Yes please, should it be the one with the round white background (like the desktop icon)? I can resize it at my end to 40x40 pixels (for retina) and 20x20 pixels

amaury1093 · 2019-01-05T10:08:37Z

@ltfschoen A lot of the checkpoints are already solved in packages/fether-electron/src/index.js. Your mb.js file should imo look 90% the same as index.js, expect to show mb() instead of a normal Electron window.

* Remove TypeScript types (we're not using TypeScript here!) * Add Babel.js to fether-electron package similar to fether-ui * Change to block `onProgress: progress => {` otherwise it doesn't compile * Use https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html

… into ParityEthereum class

…folder. Fix imports

https://electronjs.org/docs/api/app#event-activate-macos

ltfschoen · 2019-01-07T03:55:42Z

Regarding the icon it should be the same as the readme I can provide it to you.

Yes please, should it be the one with the round white background (like the desktop icon)? I can resize it at my end to 40x40 pixels (for retina) and 20x20 pixels

@Tbaut Actually, according to Electron docs theey suggest 16x16, 32x32, 48x48 https://electronjs.org/docs/api/app#appgetfileiconpath-options-callback. Menubar suggests 20x20

…it details * Readme updated with environment variable prefix `TASKBAR=false` to disable taskbar. Use existing "electron" and "start" scripts in package.json. Configure taskbar to be enabled by default (i.e. `withTaskbar = true`) * Integrate menubar functionality including for taskbar including: * electron dependencies: `Tray` * electron-positioner: `Positioner` * Separate logic in `FetherApp` component dependending on whether `withTaskbar` is enabled, but shared functionality in `finalise()` function * Incorporate relevant Pino logs throughout to improve developer experience * Move options into FetherAppOptions class and move configuration config for options into a config subfolder within the module. * Use `extends` library to overwrite `DEFAULT_OPTIONS` options properties with those in `TASKBAR_OPTIONS` if `withTaskbar` is enabled * Add ability to pass `customOptions` to further overwrite the values in the config directory, and add option setter and getters * Move taskbar icons into app/options/config subdirectory. Use different logic to set the path of the icons directory depending on whether it was run using the "electron" or the "start" script in package.json. Leverage the fact that when "electron" is run the environment variable `SKIP_PREFLIGHT_CHECK=true` is set * Set the Electron option `webPreferences.devTools` depending on whether we are in production or not particularly for security reasons * Fix `activate` event listener to cater for `withTaskbar` enabled or disabled usage * BUG: When running with `withTaskbar` enabled we are setting the option `show: false` because it opens the window in the center of the screen instead of positioned right under the taskbar icon at the top of the screen. When you click the icon in the taskbar it toggles the window open/close correctly positioned since it takes into consideration the `bounds` value in `FetherApp.clickedTray`. To fix the bug we need to reuse the same approach. * BUG: Additional `EventEmitter` does not appear to be working correctly or is not required. Investigate if can remove

…calling setupMenu there

ltfschoen · 2019-02-06T04:49:29Z

Nice! Works well on Linux (KDE, tested with AppImage). However, there's no way to exit Fether? Pressing alt doesn't show the menu (on Linux, regardless of my desktop environment; neither with yarn start nor in the packaged app) ; on master it does show me the menu though.

@axelchalon I've Thanks for highlighting how the menu already appears in the 'master' branch on Linux. I found that showing the menu all the time in the existing 'master' branch only works in development though, since when I build .deb and run the binary it auto-hides. If I "hold" ALT and click refresh the menu loads and remains, but when I click the menu it auto-hides.

I noticed that running the 'master' branch in development environment it shows the Fether menu and it remains shown after it has finished compiling in the menu bar, and that setAutoHideMenuBar is set to true. I have been setting setAutoHideMenuBar to a false in paritytech/fether/packages/fether-electron/src/main/app/methods/setupMenu.js thinking that it would need to be false to prevent it from automatically hiding the menu. But it seems to work the opposite way in development (i.e. it doesn't auto-hide the Fether menu if I only set fetherApp.win.setAutoHideMenuBar(true);, but if I also set setMenuBarVisibility to a value then it auto-hides it), and in production it works differently again.

In any case, clicking the Fether windows and "holding" down ALT key should show the Fether menu, as described here https://electronjs.org/docs/api/browser-window#winsetautohidemenubarhide.

Does "holding" down ALT key show the Fether menu for you??

axelchalon · 2019-02-06T14:14:13Z

Hey, testing with the latest commit, Fether launches with frame and with auto-hiding menu bar. Pressing alt toggles the menu bar. 👍 Well done!

amaury1093 · 2019-02-06T16:35:49Z

packages/fether-electron/src/main/app/options/config/index.js

+  showDockIcon: true, // macOS usage only
+  tabbingIdentifier: 'parity',
+  webPreferences: {
+    devTools: shouldUseDevTools, // Security


Why is this a security risk? It helps a lot when users post their console logs, even in production

It doesn't appear to be a security risk as it's not mentioned at the following links:

https://electronjs.org/docs/tutorial/security

I've pushed a commit allowing dev tools.

Note that I have not focussed on improving security in this PR. I was going to create a separate PR for security-specific aspects as a result of going through #124.

I created a separate branch a while ago where I started going through security-related aspects 4f6c2fd

Would you like that to remain as a separate PR?

Yes, this PR is big enough, so let's do another security-focused PR

ltfschoen · 2019-02-06T22:20:24Z

I've found some bugs. I haven't handled re-opening of the window and other methods in onTrayClick correctly after the user chooses "Window > Close" (since that deletes fetherApp.win and listeners), so it generates the following errors when you click the tray icon to re-open the window after choosing "Window > Close". I'm fixing it now.

…no fetherApp.win

…oosing Window > Close

ltfschoen · 2019-02-06T23:49:54Z

I've pushed commits that fix those errors. I've tested that on macOS I can now choose "Window > Close Window" and then afterwards click the small tray icon to re-open the Fether window without any errors. I've also tested that choosing "Window > Close" on Ubuntu Gnome and on Windows 10 doesn't cause any errors.

ltfschoen · 2019-02-07T00:51:46Z

@amaurymartiny With regard to the Fether window "frame" and the Fether menu currently we have:

macOS - no window "frame", menu always shown in macOS menubar
Linux - no window "frame", menu auto-hides and is only shown when Fether window active and hover mouse over the Linux menubar, or if the user "holds" down the ALT key. I haven't been able to disable auto-hide, even on 'master' branch it auto-hides after you first use a menu item from the menu.
Windows - using a window "frame" is required, otherwise the menu doesn't appear, not even if you hold down the ALT key. At the moment it is configured so the menu is always shown as shown in screenshot below, which differs from how it's setup with auto-hide on Linux:

The problem that this presents in the short-term is that the Feedback button is always clipped at the bottom as shown.

I could access detect if both process.platform === 'win32' and fetherApp.win.isMenuBarVisible() are true in fether-react/src/Accounts/AccountsList/Feedback/Feedback.js and notify fether-react renderer listeners using IPC to update the value of a specific prop (similar to how we do it with isParityRunning), and just modify the style of the "Feedback" link by changing the marginBottom (to 18px when more than 1 account was listed, and 10px if only one account) if we detected process.platform === 'win32' was true and fetherApp.win.isMenuBarVisible() was true https://electronjs.org/docs/api/browser-window#winismenubarvisible.
Would you like me to proceed doing this?

If we want to auto-hide the menu bar on Windows so that the user can toggle it with the ALT key, then we just need to change it to the following in setupMenu.js

fetherApp.win.setAutoHideMenuBar(process.platform === 'win32' ? true : false);
fetherApp.win.setMenuBarVisibility(false);

Or even just the following if it still functions correctly on Linux:

fetherApp.win.setAutoHideMenuBar(true);
fetherApp.win.setMenuBarVisibility(false);

That way it will appear as shown below, and the Feedback button would only be clipped when the user toggles the menu to be shown by pressing ALT:

axelchalon · 2019-02-07T14:18:14Z

Wouldn't adding the height of the menu bar to newHeight (if both process.platform === 'win32' and fetherApp.win.isMenuBarVisible()) work? in fether-electron/src/main/messages/index.js

amaury1093 · 2019-02-07T16:45:15Z

tbh I wouldn't mind so much about the feedback button being hidden. The user pressed himself the Alt button, so he knows that it's hidden because of his action, and he can just press Alt again to return to the normal state.

We can ask users about this, if it really bothers them.

amaury1093 · 2019-02-07T16:46:39Z

I'm actually happy to merge this PR as-is! What do you think @ltfschoen @axelchalon ?

ltfschoen · 2019-02-07T17:40:16Z

Wouldn't adding the height of the menu bar to newHeight (if both process.platform === 'win32' and fetherApp.win.isMenuBarVisible()) work? in fether-electron/src/main/messages/index.js

@axelchalon this works great.

@amaurymartiny I think on Windows we should keep the menu shown (without it auto-hiding) in the interim, and use the fix for the feedback button that Axel suggested (I've tested it and it works).
Because if we allow them to press ALT to hide it or it auto-hides itself with Axels fix then it shows a white gap at the bottom. We can address that as a separate issue.

… to fit the Feedback button since the menu is shown

ltfschoen · 2019-02-07T18:05:00Z

@amaurymartiny I've pushed a fix that shows the menu all the time on Windows, and so they cannot hide the menu, and adds extra height so the Feedback button is shown

amaury1093 · 2019-02-08T10:23:57Z

I'll merge this then. Thanks a lot Luke for this impressive PR!

axelchalon · 2019-02-08T14:24:56Z

Nice! 🎉

Tbaut · 2019-02-09T20:45:20Z

Wooohooo that's awesome, thank you so much for this crazy work!

ltfschoen added 3 commits January 4, 2019 13:36

WIP: Relates to #312. Initial setup using menubar library

0fba9ea

feat: Update Readme. Add taskbar icon. Tweak taskbar window size. Cha…

4cc3a6a

…nge command to run taskbar app

refactor: Remove temporary hello world file

c5aa7d7

ltfschoen mentioned this pull request Jan 4, 2019

mb.window.loadURL not loading local files max-mapper/menubar#149

Closed

ltfschoen added 3 commits January 4, 2019 15:34

Merge branch 'master' into luke-312-taskbar-app

a280b07

docs: Update Readme to include building before running

730fd87

docs: Move onto separate line

02b0d95

ltfschoen changed the title ~~WIP: Taskbar app~~ WIP: Relates to #312. Taskbar app Jan 4, 2019

ltfschoen added 2 commits January 5, 2019 17:08

ltfschoen added 14 commits January 6, 2019 15:09

feat: Change mainWindow file extension to TypeScript file

c204424

feat: Create FetherWindow class

ff1a7e5

refactor: Move FetherWindow component into module folder. Fix its type

3a1c9d7

refactor: Rename fetherWindow to app

c703da0

refactor: Rename FetherWindow to FetherApp. fetherApp var stores window

7e91f70

fix: Change back to JS from TS

60027ca

refactor: Move FetherApp options into FetherAppOptions class

a17aaf0

refactor: Move download, installation, and running of Parity Ethereum…

7a9a81b

… into ParityEthereum class

refactor: Move into default options.index the Electron start url

5610464

refactor: Move all FetherApp dependencies into subfolders within app …

9ed899c

…folder. Fix imports

fix: isRunning boolean returned to .then

d101121

fix: Add hasVisibleWindows and event to activate Electron listener

30abe60

https://electronjs.org/docs/api/app#event-activate-macos

docs: Add Fixme

70ebf94

ltfschoen added 2 commits January 7, 2019 19:12

refactor: Remove menubar demo and dependency

7b0873b

ltfschoen added 3 commits February 6, 2019 09:18

fix: Remove unnecessary leftover .apply

21b974c

refactor: Move menu logic into setupMenu method

80accae

fix: createWindow may be called from showWindow too, but we were not …

510b7e9

…calling setupMenu there

axelchalon approved these changes Feb 6, 2019

View reviewed changes

amaury1093 reviewed Feb 6, 2019

View reviewed changes

fix: Allow dev tools in production

1210a11

ltfschoen added 2 commits February 7, 2019 09:23

fix: Fix bug where Fether window closed and webrequest received when …

66f2820

…no fetherApp.win

fix: Fix error when click tray icon to re-open Fether window after ch…

f1d7792

…oosing Window > Close

amaury1093 added A9-buythatmanabeer A9-FUCKYEAH!1 A8-looksgood and removed A0-pleasereview labels Feb 7, 2019

fix: Resize Fether window on Windows with additional height upon load…

b4318da

… to fit the Feedback button since the menu is shown

amaury1093 merged commit 971052c into master Feb 8, 2019

amaury1093 deleted the luke-312-taskbar-app branch February 8, 2019 10:24

amaury1093 mentioned this pull request Feb 8, 2019

Make it a taskbar app (as originally thought) #312

Closed

ltfschoen mentioned this pull request Feb 8, 2019

Window does not resize #408

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Relates to #312. Taskbar app #332

feat: Relates to #312. Taskbar app #332

ltfschoen commented Jan 4, 2019 •

edited

Loading

Tbaut commented Jan 4, 2019

ltfschoen commented Jan 5, 2019

amaury1093 commented Jan 5, 2019

ltfschoen commented Jan 7, 2019

ltfschoen commented Feb 6, 2019

axelchalon commented Feb 6, 2019 •

edited

Loading

amaury1093 Feb 6, 2019

ltfschoen Feb 6, 2019 •

edited

Loading

amaury1093 Feb 7, 2019

ltfschoen commented Feb 6, 2019

ltfschoen commented Feb 6, 2019 •

edited

Loading

ltfschoen commented Feb 7, 2019 •

edited

Loading

axelchalon commented Feb 7, 2019

amaury1093 commented Feb 7, 2019 •

edited

Loading

amaury1093 commented Feb 7, 2019

ltfschoen commented Feb 7, 2019

ltfschoen commented Feb 7, 2019

amaury1093 commented Feb 8, 2019

axelchalon commented Feb 8, 2019

Tbaut commented Feb 9, 2019

feat: Relates to #312. Taskbar app #332

feat: Relates to #312. Taskbar app #332

Conversation

ltfschoen commented Jan 4, 2019 • edited Loading

Usage:

TODO

Tbaut commented Jan 4, 2019

ltfschoen commented Jan 5, 2019

amaury1093 commented Jan 5, 2019

ltfschoen commented Jan 7, 2019

ltfschoen commented Feb 6, 2019

axelchalon commented Feb 6, 2019 • edited Loading

amaury1093 Feb 6, 2019

Choose a reason for hiding this comment

ltfschoen Feb 6, 2019 • edited Loading

Choose a reason for hiding this comment

amaury1093 Feb 7, 2019

Choose a reason for hiding this comment

ltfschoen commented Feb 6, 2019

ltfschoen commented Feb 6, 2019 • edited Loading

ltfschoen commented Feb 7, 2019 • edited Loading

axelchalon commented Feb 7, 2019

amaury1093 commented Feb 7, 2019 • edited Loading

amaury1093 commented Feb 7, 2019

ltfschoen commented Feb 7, 2019

ltfschoen commented Feb 7, 2019

amaury1093 commented Feb 8, 2019

axelchalon commented Feb 8, 2019

Tbaut commented Feb 9, 2019

ltfschoen commented Jan 4, 2019 •

edited

Loading

axelchalon commented Feb 6, 2019 •

edited

Loading

ltfschoen Feb 6, 2019 •

edited

Loading

ltfschoen commented Feb 6, 2019 •

edited

Loading

ltfschoen commented Feb 7, 2019 •

edited

Loading

amaury1093 commented Feb 7, 2019 •

edited

Loading