Bug #86790

Linkbrowser layout issues in Firefox 63.0 (64-Bit)

Added by Matthias Krappitz 5 months ago. Updated 3 months ago.

Status:
Resolved
Priority:
Must have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2018-10-29
Due date:
% Done:

100%

TYPO3 Version:
9
PHP Version:
7.2
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

In Firefox 63.0 (64-Bit) the linkbrowser is a little broken in terms of layout. First of all the expand and collapse arrows are displayed one row lower than where they actually should appear (see screenshots and the one of the page tree to compare) and the horizontal scroll bar of the page tree within the link browser is not showing up.
See attached screenshots.
Tested on two different Windows (8 and 10) computers.
In Chrome 70 on the same computers everything is fine.

collpase-arrows-wrong-in-linkbrowser.PNG View - wrong diplay of collapes arrows in link browsers page tree (28.4 KB) Matthias Krappitz, 2018-10-29 22:14

pagetree-wrong-in-linkbrowser.PNG View - the wrong display of expand arrows in link browsers page tree (28.1 KB) Matthias Krappitz, 2018-10-29 22:14

linkbrowser-no-horizontal-scrollbar.PNG View - missing scrollbar in link browsers page tree (94.2 KB) Matthias Krappitz, 2018-10-29 22:14

pagetree-correct.PNG View - the correct display of expand arrows in page tree (27.4 KB) Matthias Krappitz, 2018-10-29 22:14

Schermata 2018-11-03 alle 22.24.18.png View (143 KB) Riccardo De Contardi, 2018-11-03 22:27

20181107-pages.sql.gz - SQL dump of table 'pages' (12 KB) Tobias Stahn, 2018-11-08 16:47

linkbrowser-testcase-02.png View - Incorret display of the arrows on nested pages (52.5 KB) Tobias Stahn, 2018-11-08 16:47

linkbrowser-testcase-01.png View - Comparison of the page module vs. linkbrowser representation of the pagetree (275 KB) Tobias Stahn, 2018-11-08 16:47

linkbrowser-test-case-03.png View (93.2 KB) Tobias Stahn, 2018-11-08 17:05

Schermata 2018-11-10 alle 17.15.14.png View (74.3 KB) Riccardo De Contardi, 2018-11-10 17:17

note1.png View (201 KB) Riccardo De Contardi, 2018-11-10 17:26

note2.png View (98.6 KB) Riccardo De Contardi, 2018-11-10 17:26

note3.png View (76.8 KB) Riccardo De Contardi, 2018-11-10 17:26


Related issues

Related to TYPO3 Core - Bug #87280: Trees have different markup Resolved 2018-12-23
Duplicated by TYPO3 Core - Bug #87214: List Tree Controls in Page Tree inside Link Browser not showing in correct lines with long page names or on small screen Closed 2018-12-19

Associated revisions

Revision 81b54254 (diff)
Added by Andreas Fernandez 3 months ago

[BUGFIX] Fix positioning of arrows in Element Browser

The positioning of the collapse/expand arrows is changed to fix the break
in trees with very deep nesting.

Resolves: #86790
Releases: master, 8.7
Change-Id: Ie1a916da8220468c6fbb4034c1668675f379f588
Reviewed-on: https://review.typo3.org/59136
Tested-by: TYPO3com <>
Reviewed-by: Benjamin Kott <>
Tested-by: Benjamin Kott <>
Reviewed-by: Benni Mack <>
Tested-by: Benni Mack <>

Revision 754452b1 (diff)
Added by Andreas Fernandez 3 months ago

[BUGFIX] Fix positioning of arrows in Element Browser

The positioning of the collapse/expand arrows is changed to fix the break
in trees with very deep nesting.

Resolves: #86790
Releases: master, 8.7
Change-Id: Ie1a916da8220468c6fbb4034c1668675f379f588
Reviewed-on: https://review.typo3.org/59143
Tested-by: TYPO3com <>
Reviewed-by: Benni Mack <>
Tested-by: Benni Mack <>

Revision 69df9ab7 (diff)
Added by Andreas Fernandez 3 months ago

[BUGFIX] Streamline tree markup

The trees used in TSOB and in the configuration module have a different
markup than the tree of the Link Browser (and the rest), causing the
regression introduced with #86790. The markup of the trees is now changed
to have a consistent structure.

Resolves: #87280
Related: #86790
Releases: master, 9.5, 8.7
Change-Id: I00c6b93c760a725e1ee771651f26c53573e0a6e2
Reviewed-on: https://review.typo3.org/59285
Tested-by: TYPO3com <>
Tested-by: Riccardo De Contardi <>
Reviewed-by: Josef Glatz <>
Tested-by: Josef Glatz <>
Reviewed-by: Markus Klein <>
Tested-by: Markus Klein <>

Revision f5113db6 (diff)
Added by Andreas Fernandez 3 months ago

[BUGFIX] Streamline tree markup

The trees used in TSOB and in the configuration module have a different
markup than the tree of the Link Browser (and the rest), causing the
regression introduced with #86790. The markup of the trees is now changed
to have a consistent structure.

Resolves: #87280
Related: #86790
Releases: master, 9.5, 8.7
Change-Id: I00c6b93c760a725e1ee771651f26c53573e0a6e2
Reviewed-on: https://review.typo3.org/59289
Tested-by: TYPO3com <>
Reviewed-by: Markus Klein <>
Tested-by: Markus Klein <>

Revision 30cf5b6c (diff)
Added by Andreas Fernandez 3 months ago

[BUGFIX] Streamline tree markup

The trees used in TSOB and in the configuration module have a different
markup than the tree of the Link Browser (and the rest), causing the
regression introduced with #86790. The markup of the trees is now changed
to have a consistent structure.

Resolves: #87280
Related: #86790
Releases: master, 9.5, 8.7
Change-Id: I00c6b93c760a725e1ee771651f26c53573e0a6e2
Reviewed-on: https://review.typo3.org/59288
Tested-by: TYPO3com <>
Reviewed-by: Josef Glatz <>
Reviewed-by: Markus Klein <>
Tested-by: Markus Klein <>
Tested-by: Josef Glatz <>

History

#1 Updated by Tobias Stahn 5 months ago

Applies to latest TYPO3 8.7.20 with Firefox 64/macOS as well (Safari 12.0 and Chrome 70 are fine).

#2 Updated by Riccardo De Contardi 5 months ago

I am currently not able to reproduce this issue on 8.7.20, using FIrefox 63.0.1 (64 bit) on MAC (see attached screenshot) - also the horizontal scroll is present.

Did I miss something or a different test should be performed? Thank you.

#3 Updated by Christian Ducrot 5 months ago

Can confirm the issue too. It probably only occurs with a large number of pages. Saw it on a project with more than 1,000 pages.

#4 Updated by Tobias Stahn 5 months ago

This might indeed be an issue that occures with a large number of pages and multiple page levels only.

I tried a fresh TYPO3 8.7.20 install with the introduction package extension added, however I could not reproduce the issue - although the extension comes with a fair amount of pages already. Only after I imported the pages table from a current project (~1200 pages) I ran into it again (almost instantly).

If it helps I could provide a database file (table pages only) with some minimal test case to reproduce this.

#5 Updated by Riccardo De Contardi 5 months ago

@Tobias Stahn yep, everything that could help reproducing the bug is welcome :) thank you.

#6 Updated by Tobias Stahn 5 months ago

There you go, have a look at 20181108-pages.sql.gz

You might want to try the following steps to reproduce the problem:

- import the SQL dump (contains ~870 pages nothing else)
- choose whichever page you like to add a content element to
- add a content element to said page which allows you use the linkbrowser (e.g. text)
- add some text into the CKEditor and try to create a link to a nested page
- expand 'Some random page - 1'
- expand 'Some random page - 373'
- expand 'Some random page - 227'

You should notice the misaligned expand arrows now. In linkbrowser-testcase-01.png I pointed out the location where the icons should be (see the pagetree on the right for reference) but they either aren't visible at all or moved to the page below.

If you try to expand 'Some random page - 240' now (given you are still in the linkbrowser) it gets even worse, see linkbrowser-testcase-02.png. Instead of expanding the selected page 'Some random page - 239' gets expanded and the arrow is displayed where it clearly shouldn't be.

I took a little time to dig a bit deeper into this issue and assume it's somehow CSS related. After I messed around with the paddings and/or widths in FF Dev Tools for example, everything looked fine – see linkbrowser-test-case-03.png (however this is not a valid solution of course).

Tested on:

- macOS
- Firefox 64
- TYPO3 8.7.20
- PHP 7.1

Hope that works for you @Riccardo De Contardi.

#7 Updated by Matthias Krappitz 4 months ago

The pagetree I did my first screenshots contains around 20.000 pages up to 8 levels deep. So I also think it is about a large and deeply nested number of pages here.

#8 Updated by Riccardo De Contardi 4 months ago

  • Status changed from Needs Feedback to New

#9 Updated by Riccardo De Contardi 4 months ago

I was eventually able to reproduce your issue on 9.5.2-dev (latest master); I think that it depends on the level depth; the behavior of the pagetree starts to become inconsistent from the 9th level - see attached screenshot " Schermata 2018-11-10 alle 17.15.14.png "

some additional notes.

1) On the previous screenshot, I wrote "that can't be selected" because the arrow overlaps with the next row:

2) the issue also depends on the window size, for example if you make the window narrower:

3) when the window is so small that the left side drops down, everything becomes normal

4) The horizontal scroll bar was always present AFAICS.

#10 Updated by Riccardo De Contardi 4 months ago

#11 Updated by Riccardo De Contardi 4 months ago

The whole problem originates because the arrows are in float:left and at some point (or when resizing) the space is not enough and everything breaks.

I would suggest to replace the float with something like:

.list-tree-group{
 display:flex;
}

.list-tree-control{
 order:1;
 margin-left:0;
 flex: 0 0 auto;
}

.list-tree-show{
 order:2;
 flex: 0 0 auto;
}

.list-tree-group > span{
 order:3;
}

#12 Updated by Riccardo De Contardi 4 months ago

  • Category set to Backend User Interface

#13 Updated by Gerrit Code Review 3 months ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59136

#14 Updated by Gerrit Code Review 3 months ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143

#15 Updated by Andreas Fernandez 3 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#16 Updated by Gerrit Code Review 3 months ago

  • Status changed from Resolved to Under Review

Patch set 2 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143

#17 Updated by Gerrit Code Review 3 months ago

Patch set 3 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143

#18 Updated by Gerrit Code Review 3 months ago

Patch set 4 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143

#19 Updated by Andreas Fernandez 3 months ago

  • Status changed from Under Review to Resolved

#20 Updated by Thomas Winkler 3 months ago

  • Duplicated by Bug #87214: List Tree Controls in Page Tree inside Link Browser not showing in correct lines with long page names or on small screen added

#21 Updated by Andreas Fernandez 3 months ago

  • Related to Bug #87280: Trees have different markup added

Also available in: Atom PDF