[wp-trac] [WordPress Trac] #38651: Customizer edit icons may be partially off-screen in Device Preview mode

[WordPress Trac]

#38651: Customizer edit icons may be partially off-screen in Device Preview mode
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  sirbrillig
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  4.7
Component:  Customize                            |     Version:  trunk
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch reporter-  |     Focuses:
  feedback 2nd-opinion                           |
-------------------------------------------------+-------------------------

Comment (by sirbrillig):

 I tried many different ways to reactivate the left margin guard and make
 it useful on all the Twenty* themes. The results were not great.

 Some issues I ran into:

 1. The guard sensitivity is not the same for every theme because we don't
 really know quite how much space we have.
 2. The committed version of the guard uses `left: 0` on the `button`, but
 that just causes the icon to overlap the element. Usually this was IMO a
 worse UX than having the icon partially off-screen (Twenty Fourteen is an
 exception and should have an override).
 3. It's possible to change the guard to use `left: 37px` on the `span`
 instead, which solves number 2, but can cause more problems because then
 its positioning depends on no ancestor having a `position`. Themes like
 Twenty Fifteen have trouble with this solution.
 4. The guard needs to be recalculated on every resize event (and possibly
 other DOM reflow events). This brings up the large complexity of global
 event handling again, which is tricky to manage inside the instance-based
 Partial architecture. We would need to track each event handler to prevent
 it from being added more than once and to remove it properly when the
 partial is removed.
 5. Even with the resize recalculation, some themes like Twenty Thirteen
 use a transition to reposition elements, so we need to also listen for
 that event, with all the requisite event handler management mentioned in
 number 4.

 After some testing, it seems to me that the best solution at this time is
 to just remove the guard entirely since the results seem to be pretty
 decent in all the themes I tried. Certainly this doesn't quite solve the
 original issue as stated in this ticket (icons partially off-screen) but I
 think it's better than any alternative I can find. FWIW I'd love to be
 wrong about that.

 The attached patch removes the guard and tweaks some things as suggested
 by the other patches on this ticket.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38651#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform