Fix opacity and padding inconsistency in breadcrumbs

[pixelipo]

Part 1 of my work on cleaning up icon inconsistencies ( #5157 ).

This tackles home.svg as well as some minor related fixes in .breadcrumb.

Please test this across different apps. I tested Files, Deck (some code can be removed there after this is merged) and Mail (this would deprecate .icon-inbox icon/style). I don't know if it is used elsewhere (couldn't find usage in Contacts, Calendar, News, Tasks and Gallery).

Signed-off-by: Marin Treselj marin@pixelipo.com

[pixelipo]

@jancborchardt could you please review or select some reviewers? Thanks.

P.S. I see some CI fails, but I don't think they are related to my changes.

[jancborchardt]

Nice @pixelipo! Just a quick question: What did you use for compressing the icon? It looks like maybe SVGO, which unfortunately is lossy and leads to corrupted files: #4076

Better would be to use Scour, we have a script line you can simply copy for that at https://github.com/nextcloud/server/blob/master/core/img/image-optimization.sh#L10

(I meant to mention that in the original issue, sorry I forgot. :)

[pixelipo]

@jancborchardt I used no tool for compression - just cleanup by hand of unneeded Inkscape cruft. The only thing that might be causing problems is spaces I removed after M and L in <path>.

If you're worrying about missing decimals, that because there are none - I redraw the icon in Inkscape and made sure all the corners are at full pixels 😉

[jancborchardt]

Yeah, I also drew the icons at full pixels always of course. :) Can you make sure you compress via Scour? Then it's not a manual process but repeatable for all icons.

[codecov]

Codecov Report

Merging #5229 into master will decrease coverage by 0.08%.
The diff coverage is n/a.

@@ Coverage Diff @@## master #5229 +/- ##
============================================
- Coverage 53.98% 53.89% -0.09% + Complexity 22466 22350 -116 
============================================
Files 1390 1318 -72 Lines 85980 78032 -7948 Branches 1329 0 -1329 ============================================
- Hits 46418 42059 -4359 + Misses 39562 35973 -3589

Impacted Files	Coverage Δ	Complexity Δ
apps/comments/lib/EventHandler.php	79.16% <0%> (-8.34%)	7% <0%> (ø)
...s/federatedfilesharing/lib/AppInfo/Application.php	93.93% <0%> (-6.07%)	6% <0%> (+1%)
.../twofactor_backupcodes/lib/AppInfo/Application.php	16.66% <0%> (-5.56%)	5% <0%> (+1%)
lib/private/NavigationManager.php	53.03% <0%> (-3.43%)	39% <0%> (+1%)
lib/private/Settings/Manager.php	44.78% <0%> (-1.86%)	44% <0%> (-29%)
apps/encryption/lib/AppInfo/Application.php	68.88% <0%> (-1.57%)	10% <0%> (+1%)
lib/private/legacy/app.php	53.41% <0%> (-1.56%)	219% <0%> (ø)
lib/private/legacy/user.php	39.39% <0%> (-0.51%)	81% <0%> (ø)
core/Controller/LoginController.php	76.92% <0%> (-0.35%)	38% <0%> (ø)
lib/private/Server.php	93.31% <0%> (-0.19%)	120% <0%> (ø)
... and 106 more

[pixelipo]

@jancborchardt ok, I see the point in repeateable processes. I have ran home.svg through a scour command and pushed the changes here.

I would however, suggest changes to image-optimization.sh:
scour -i $svg.opttmp -o $svg --create-groups --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-metadata --strip-xml-prolog --no-line-breaks;

[jancborchardt]

@pixelipo nice, please add a commit with the suggested changes to image-optimization.sh :)

[jancborchardt]

@pixelipo I invited you to the Nextcloud Github organization some time ago, you can accept at https://github.com/nextcloud :)
Then you can just create branches in this main repository and you don’t need your fork. :) This makes collaboration much easier.

[jancborchardt]

Encountering two issues:

• When scrolling a folder with a lot of files in the narrow (mobile) view, the breadcrumb bar jumps in and out of view. Doesn’t happen in master
• There’s too much whitespace between the folder name and the related sharing icon:
  

[pixelipo]

@jancborchardt this should fix both issues.

N.B. I've set line-height: 10px to match centered position of ellipsis when compared to breadcrumbs.svg - but I'm not sure it should be centered, because ellipsis is usually at the same vertical position as dot - so, lower than middle of the text. Ideally, div.crumb.ellipsized should have line-height: 16px, but perhaps it doesn't look as good 😉

[juliusknorr]

@pixelipo Is this ready for review? Please change the according label from 2. developing to 3. to review then. 😉

[pixelipo]

yes, @juliushaertl - ready for review. Please check whether issues mentioned by @jancborchardt were fixed

[juliusknorr]

@pixelipo I think the text should be alligned in the middle of the arrow separators, not at the baseline. It looks a bit out of place at the moment. Also the whitespace between the sharing icon lstill ooks to big.

[pixelipo]

I have fixed both issues now, @juliushaertl@jancborchardt - this is ready for review (and merge, I hope).

Text issue was fixed with line height and the icons issue was fixed by - what I think is the best solution for this use case - making icon relatively positioned and moving them over crumb title's padding.

[MorrisJobke]

3 JSUnit tests fail:

PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Hides breadcrumbs to fit max allowed width FAILED
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:210:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Updates the breadcrumbs when reducing max allowed width FAILED
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:239:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Trashbin.FileList tests Breadcrumbs links the breadcrumb to the trashbin view FAILED
Expected 3 to equal 2.
apps/files_trashbin/tests/js/filelistSpec.js:135:34
Expected '...' to equal 'subdir'.
apps/files_trashbin/tests/js/filelistSpec.js:139:50
Expected 'http://localhost/index.php/apps/files/?dir=/subdir' to equal 'http://localhost/index.php/apps/files?view=trashbin&dir=/subdir'.
apps/files_trashbin/tests/js/filelistSpec.js:141:13

[jancborchardt]

Yup, to confirm @juliushaertl's comment - the text was positioned too low on that screenshot. :)

[jancborchardt]

@pixelipo can you check out the JS unit test failures?

[pixelipo]

I didn't have a working dev setup until today :) I'll take a look tomorrow, OK?

[jancborchardt]

Sure, at your leisure. :) Sorry this review process takes so long, please don't be discouraged as you do great work!

[pixelipo]

I found&fixed a small issue with padding, however, I'm unable to figure out what is the issue with JS unit tests.

I did run them and got same errors as @MorrisJobke - but I get same errors when running unit tests on master, so they are not related to this PR.

Everything looks fine @320px:

but there is a problem @480px:

This happens when current folder has a very long filename. It seems that it's not ellipsized "soon enough", but IMO it should be fixed separately from this PR

P.S. I noticed a bigger issue with breadcrumbs on mobile:

popover requires at least 176px, and this is not how much breadcrumbs leave.

Please review.

[jancborchardt]

Can you open two separate issues about the two breadcrumb problem and new file popover? :)

[jancborchardt]

This pull request now seems good 👍

[MorrisJobke]

The JSUnit tests still fail. @juliushaertl@danxuliu do you mind to help @pixelipo out to fix this?

[pixelipo]

@MorrisJobke as mentioned in #5229 (comment) , JSUnit tests fail on master as well, so they should be fixed in a separate PR.

[MorrisJobke]

@MorrisJobke as mentioned in #5229 (comment) , JSUnit tests fail on master as well, so they should be fixed in a separate PR.

This could not be the case - they run fine on master: https://drone.nextcloud.com/nextcloud/server/9014/34 And the failing unit tests are even related to the width when the breadcrumbs get's visible or hidden. Please rebase on latest master and check again. On macOS the unit tests for the breadcrumbs somehow fail always :/

[pixelipo]

I can't fix JSUnit tests here since I'm unable to reproduce working tests on master. Here's my output when running ./autotest-js.sh on a clean master branch:

.........
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load a topaction only FAILED
Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="mailto:bar%40baz.wtf"> <img src="foo.svg"> <span>bar@baz.wtf</span> </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="mailto:bar%40baz.wtf"> <img src="foo.svg"> <span>bar@baz.wtf</span> </a></li></ul></div>'.
core/js/tests/specs/jquery.contactsmenuSpec.js:123:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load topaction and more actions FAILED
Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="mailto:bar%40baz.wtf"> <img src="foo.svg"> <span>bar@baz.wtf</span> </a></li><li> <a href="http://localhost/index.php/apps/contacts"> <img src="details.svg"> <span>Details</span> </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="mailto:bar%40baz.wtf"> <img src="foo.svg"> <span>bar@baz.wtf</span> </a></li><li> <a href="http://localhost/index.php/apps/contacts"> <img src="details.svg"> <span>Details</span> </a></li></ul></div>'.
core/js/tests/specs/jquery.contactsmenuSpec.js:150:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render load no actions FAILED
Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>No action available</span> </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>No action available</span> </a></li></ul></div>'.
core/js/tests/specs/jquery.contactsmenuSpec.js:170:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render should throw an error FAILED
Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>Error fetching contact actions</span> </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>Error fetching contact actions</span> </a></li></ul></div>'.
core/js/tests/specs/jquery.contactsmenuSpec.js:185:36
PhantomJS 2.1.1 (Linux 0.0.0) jquery.contactsMenu tests send requests to the server and render should handle 404 FAILED
Expected '<div class="menu popovermenu bubble contactsmenu-popover loaded"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>No action available</span> </a></li></ul></div>' to equal '<div class="menu popovermenu bubble contactsmenu-popover loaded" style="display: block;"> <ul> <li class="hidden"> <a> <span class="icon-loading-small"></span> </a> </li> <li> <a href="#"> <span>No action available</span> </a></li></ul></div>'.
core/js/tests/specs/jquery.contactsmenuSpec.js:200:36
10 07 2017 12:32:52.087:WARN [web-server]: 404: /details.svg
................................................................................
................................................................................
................................................................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Hides breadcrumbs to fit max allowed width FAILED
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:210:52
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:211:52
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.BreadCrumb tests Resizing Updates the breadcrumbs when reducing max allowed width FAILED
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:239:52
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:240:52
Expected true to equal false.
apps/files/tests/js/breadcrumbSpec.js:241:52
...................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Files.FavoritesPlugin tests file actions redirects to files app when opening a directory FAILED
Expected '/' to equal '/somewhere/inside/subdir/testdir'.
apps/files/tests/js/favoritespluginspec.js:118:64
Expected false to equal true.
apps/files/tests/js/favoritespluginspec.js:120:48
Expected false to equal true.
apps/files/tests/js/favoritespluginspec.js:121:57
................................................................................
................................................................................
.............
WARN: 'Missing argument $row in OC.Notification.hide() call, caller needs to be adjusted to only dismiss its own notification'
................................................................................
.........................................
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Trashbin.FileList tests Breadcrumbs links the breadcrumb to the trashbin view FAILED
Expected 3 to equal 2.
apps/files_trashbin/tests/js/filelistSpec.js:135:34
Expected '...' to equal 'subdir'.
apps/files_trashbin/tests/js/filelistSpec.js:139:50
Expected 'http://localhost/index.php/apps/files/?dir=/subdir' to equal 'http://localhost/index.php/apps/files?view=trashbin&dir=/subdir'.
apps/files_trashbin/tests/js/filelistSpec.js:141:13
...............
PhantomJS 2.1.1 (Linux 0.0.0) OCA.Sharing.App tests file actions redirects to files app when opening a directory FAILED
Expected '/' to equal '/somewhere/inside/subdir/testdir'.
apps/files_sharing/tests/js/appSpec.js:137:64
Expected false to equal true.
apps/files_sharing/tests/js/appSpec.js:139:48
Expected false to equal true.
apps/files_sharing/tests/js/appSpec.js:140:57

[jancborchardt]

Cann you help @nextcloud/javascript?

[skjnldsv]

I worked on this issue before, can't remember when and if I pushed it somewhere here.
Anyway, the jsunit failure is indeed related to the breadcrumbs modification, but iirc, the failure was incoherent. Sometimes it failed, sometimes not. My guess at the time was that the phantomjs engine was not outputting the page like other browsers. I tried with Firefox at the time and did not have any errors. :/

[MorrisJobke]

@danxuliu Could you have a look at this? Getting it in would be super nice :)

[danxuliu]

The JavaScript tests fail due to the breadcrumb items shown no longer matching those expected. However, the commit Fix opacity and padding inconsistency in breadcrumbs itself is fine; the problem comes from the JavaScript tests themselves.

The _resize method of Breadcrumb hides certain breadcrumb items when there is not enough space available to show all of them. In that case it always shows the first item (the Home icon), an ellipsis and then as many items from the end as possible.

As different browsers may show the items with slightly different sizes the tests for resizing use hard-coded widths for the breadcrumb items, but not for the ellipsis. For some strange reason, when using the new CSS the width returned for the ellipsis by PhantomJS is way larger than expected (242px instead of 51px); due to this there is less room for the breadcrumb items and the first one that was expected to be shown is not, thus causing the Hides breadcrumbs to fit max allowed width and Updates the breadcrumbs when reducing max allowed width tests to fail.

If instead of PhantomJS the tests are run using Firefox (52.3) then the ellipsis is now shorter than before (37px instead of 50px), which also causes the Updates the breadcrumbs when reducing max allowed width test to fail because now there is enough room to show another item that was expected to be hidden.

The solution? In the same way that the width of the breadcrumb items is hard-coded the width of the ellipsis has to be hardcoded too. To do that the easiest way is stub the width method from jQuery in the resizing tests so it returns the desired width for the ellipsis when the item it is being applied to has the ellipsized class.

That would solve two of the three failures. The other one, links the breadcrumb to the trashbin view, is related to that explained above, but it is not quite the same.

When resizing them, the available width for the breadcrumbs is got from the value set using setMaxWidth or, if no value was provided, from the width of the breadcrumb element. In the links the breadcrumb to the trashbin view test setMaxWidth is not called, so the width from the element is used; that test expects that the breadcrumbs have enough room to be fully shown, and that was the case before changing the CSS, as the width returned for the breadcrumb element was 400px and the total size needed for the breadcrumb items was 88px. However, after the changes, the width returned for the breadcrumb element is 68px, but the total size needed for the breadcrumb items is now 136px, so some of them are hidden. That happens when using PhantomJS, though; when using Firefox it seems that it stretches the breadcrumb element to fit all the breadcrumb items, as the returned width and the total size needed is 133px in both cases.

Again, the easiest way to solve this would be to hard-code the width of the breadcrumbs by calling fileList.breadcrumb.setMaxWidth in the links the breadcrumb to the trashbin view test with some value large enough for the breadcrumb items to fit in, like 400.

@pixelipo If you want I can add a new commit to your pull request with these fixes. Besides that, could you rebase your commits onto current master and check that they are all still valid (which I am sure they are, but just in case ;-) )? Thanks! :-)

[skjnldsv]

Maybe we should rebuild the breadcrumb system & the tests?

[skjnldsv]

I'm rebuilding the breadcrumbs in #7051. Will this pr will become obsolete? The tests will be fixed.

[pixelipo]

@skjnldsv probably. I've added myself as a reviewer to the other one to keep an eye on it ;) I'll check if it solves all the issues this PR was trying to solve.