Element-web: Option to hide lock icon in E2E channel

[youcha33]

and make it visible with a hover on the message.

[ara4n]

we'll look at how to make the UX less noisy for E2E once it's out of beta. Right now those icons are pretty critical.

[hedning]

For people wanting this behavior now (including show on hover): just add this css locally (eg. with Stylish):

.mx_EventTile_e2eIcon {
   display: none;
}

[kethinov]

That solution is actually pretty good. When that CSS is applied, the lock is hidden except on hover.

I think the hover detail is key here. You can still see the encryption info on a per message basis when you hover over the message, but you're not overwhelmed by a flood of lock icons. I think this looks much cleaner. Yes, the icons are pretty critical, but constantly displaying all of them doesn't seem so critical. Hover is a good compromise.

I tried to get a dev env going just now to submit a PR to add an option (off by default) to disable the lock except on hover in this manner, but for the current build process seems broken:

npm start

> [email protected] start /Users/kethinov/Projects/git/GitHub/riot-web
> parallelshell "npm run reskindex:watch" "npm run start:res" "npm run start:js"


> [email protected] start:js /Users/kethinov/Projects/git/GitHub/riot-web
> webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress


> [email protected] reskindex:watch /Users/kethinov/Projects/git/GitHub/riot-web
> reskindex -h src/header -w


> [email protected] start:res /Users/kethinov/Projects/git/GitHub/riot-web
> node scripts/copy-res.js -w

  0% compile http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./webapp
 10% 0/5 build modulesReskindex: completed
Hash: 030955c466e90dccb46b
Version: webpack 1.15.0
Time: 20717ms
                                           Asset     Size  Chunks             Chunk Names
                     bundles/_dev_/bundle.js.map  12.6 MB       0  [emitted]  bundle
                         bundles/_dev_/bundle.js  10.3 MB       0  [emitted]  bundle
                     bundles/_dev_/e2e-export.js  66.9 kB       2  [emitted]  e2e-export
                              bundles/_dev_/3.js    13 kB       3  [emitted]
               bundles/_dev_/indexeddb-worker.js   334 kB       4  [emitted]  indexeddb-worker
                            bundles/_dev_/olm.js   461 kB       5  [emitted]  olm
                     bundles/_dev_/theme-dark.js  1.56 kB       6  [emitted]  theme-dark
                    bundles/_dev_/theme-light.js  1.56 kB       7  [emitted]  theme-light
         bundles/030955c466e90dccb46b/bundle.css    12 kB       0  [emitted]  bundle
     bundles/030955c466e90dccb46b/theme-dark.css   208 kB       6  [emitted]  theme-dark
    bundles/030955c466e90dccb46b/theme-light.css   207 kB       7  [emitted]  theme-light
                              bundles/_dev_/1.js   255 kB       1  [emitted]
     bundles/030955c466e90dccb46b/bundle.css.map  13.8 kB       0  [emitted]  bundle
                          bundles/_dev_/1.js.map   295 kB       1  [emitted]
                 bundles/_dev_/e2e-export.js.map  76.6 kB       2  [emitted]  e2e-export
                          bundles/_dev_/3.js.map  12.6 kB       3  [emitted]
           bundles/_dev_/indexeddb-worker.js.map   418 kB       4  [emitted]  indexeddb-worker
                        bundles/_dev_/olm.js.map   584 kB       5  [emitted]  olm
                 bundles/_dev_/theme-dark.js.map  1.69 kB       6  [emitted]  theme-dark
 bundles/030955c466e90dccb46b/theme-dark.css.map   257 kB       6  [emitted]  theme-dark
                bundles/_dev_/theme-light.js.map   1.7 kB       7  [emitted]  theme-light
bundles/030955c466e90dccb46b/theme-light.css.map   256 kB       7  [emitted]  theme-light
                                      index.html  3.43 kB          [emitted]

ERROR in ./src/components/structures/LeftPanel.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/LeftPanel.js 33:15-54

ERROR in ./src/components/structures/RoomSubList.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/RoomSubList.js 34:15-54

ERROR in ./src/components/structures/SearchBox.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/SearchBox.js 25:15-54
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  562 kB       0
Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

Child extract-text-webpack-plugin:

webpack: Failed to compile.
webpack: Compiling...
Hash: 030955c466e90dccb46b
Version: webpack 1.15.0
Time: 851ms
                                           Asset     Size  Chunks             Chunk Names
                     bundles/_dev_/bundle.js.map  12.6 MB       0             bundle
                         bundles/_dev_/bundle.js  10.3 MB       0             bundle
                     bundles/_dev_/e2e-export.js  66.9 kB       2             e2e-export
                              bundles/_dev_/3.js    13 kB       3
               bundles/_dev_/indexeddb-worker.js   334 kB       4             indexeddb-worker
                            bundles/_dev_/olm.js   461 kB       5             olm
                     bundles/_dev_/theme-dark.js  1.56 kB       6             theme-dark
                    bundles/_dev_/theme-light.js  1.56 kB       7             theme-light
         bundles/030955c466e90dccb46b/bundle.css    12 kB       0  [emitted]  bundle
     bundles/030955c466e90dccb46b/theme-dark.css   208 kB       6  [emitted]  theme-dark
    bundles/030955c466e90dccb46b/theme-light.css   207 kB       7  [emitted]  theme-light
                              bundles/_dev_/1.js   255 kB       1
                          bundles/_dev_/1.js.map   295 kB       1
                 bundles/_dev_/e2e-export.js.map  76.6 kB       2             e2e-export
                          bundles/_dev_/3.js.map  12.6 kB       3
           bundles/_dev_/indexeddb-worker.js.map   418 kB       4             indexeddb-worker
                        bundles/_dev_/olm.js.map   584 kB       5             olm
                 bundles/_dev_/theme-dark.js.map  1.69 kB       6             theme-dark
                bundles/_dev_/theme-light.js.map   1.7 kB       7             theme-light
     bundles/030955c466e90dccb46b/bundle.css.map  13.8 kB       0  [emitted]  bundle
 bundles/030955c466e90dccb46b/theme-dark.css.map   257 kB       6  [emitted]  theme-dark
bundles/030955c466e90dccb46b/theme-light.css.map   256 kB       7  [emitted]  theme-light

ERROR in ./src/components/structures/LeftPanel.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/LeftPanel.js 33:15-54

ERROR in ./src/components/structures/RoomSubList.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/RoomSubList.js 34:15-54

ERROR in ./src/components/structures/SearchBox.js
Module not found: Error: Cannot resolve module 'matrix-react-sdk/lib/KeyCode' in /Users/kethinov/Projects/git/GitHub/riot-web/src/components/structures
 @ ./src/components/structures/SearchBox.js 25:15-54
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  562 kB       0
webpack: Failed to compile.

[t3chguy]

@kethinov your branch of riot-web is too stale for the version of matrix-react-sdk, KeyCode became Keyboard.

[kethinov]

These are all fresh forks. Here are the branches I have checked out:

matrix-js-sdk> git branch
* master

matrix-react-sdk> git branch
* develop
  master

riot-web> git branch
* master

I tried to check out develop on all three, but it only took on matrix-react-sdk. It wouldn't let me on matrix-js-sdk or riot-web.

[t3chguy]

well thats the issue then, you NEED the same branch on all 3 if you want it to build

[kethinov]

Makes sense. Are the instructions in riot-web's README wrong? Should we be branching off master instead of develop?

[turt2live]

You'll also need your HEAD updated to the latest upstream in all three. The best place to troubleshoot this is probably in #riot-dev:matrix.org instead of on a random issue.

[t3chguy]

Nope they are very much right, anything PRed to not develop is not accepted

[ara4n]

Hm, i think we have some confusion here - as per https://github.com/vector-im/riot-web/issues/2882#issuecomment-280888195, it's absolutely critical that we show encryption status per-message to users so they can see if an untrusted device suddenly appears in the room.

I guess we could refine this in future by only showing padlocks on hover-over, but we need to show the ⚠️ icons for messages from untrusted devices all the time. As verification techniques improve in E2E these ⚠️ will get more and more rare, until they will be the exception rather than the rule (which was the intention all along).

TL;DR: please don't hide ⚠️, and even then, i'd keep this as an option rather than having it on by default at this point.

[t3chguy]

@ara4n it appears it already is optional and default-off: https://github.com/matrix-org/matrix-react-sdk/pull/1707/files#diff-7343e79e45dd5943e6d8ef53ab1c231aR156

[kethinov]

Added a refinement which always shows the blocked and warning icons.