[DevTools] Make timeline popover easier to use on small screens

third_party/WebKit/Source/devtools/front_end/ui/GlassPane.js

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 UI.GlassPane = class {
   constructor() {
     this._widget = new UI.Widget(true);
     this._widget.markAsRoot();
     this.element = this._widget.element;
     this.contentElement = this._widget.contentElement;
@@ skipping 183 matching lines @@
 
       if (behavior === UI.GlassPane.AnchorBehavior.PreferTop || behavior === UI.GlassPane.AnchorBehavior.PreferBottom) {
         var top = anchorBox.y - 2 * gutterSize;
         var bottom = containerHeight - anchorBox.y - anchorBox.height - 2 * gutterSize;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferTop && top < height && bottom > top)
           behavior = UI.GlassPane.AnchorBehavior.PreferBottom;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferBottom && bottom < height && top > bottom)
           behavior = UI.GlassPane.AnchorBehavior.PreferTop;
 
         var arrowY;
+        var enoughHeight = true;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferTop) {
           positionY = Math.max(gutterSize, anchorBox.y - height - gutterSize);
           var spaceTop = anchorBox.y - positionY - gutterSize;
           if (this._sizeBehavior === UI.GlassPane.SizeBehavior.MeasureContent) {
             if (height < measuredHeight)
               width += scrollbarSize;
-            if (height > spaceTop)
+            if (height > spaceTop) {
               this._arrowElement.classList.add('arrow-none');
+              enoughHeight = false;
+            }
           } else {
             height = Math.min(height, spaceTop);
           }
           this._arrowElement.setIconType('mediumicon-arrow-bottom');
           this._arrowElement.classList.add('arrow-bottom');
           arrowY = anchorBox.y - gutterSize;
         } else {
           positionY = anchorBox.y + anchorBox.height + gutterSize;
           var spaceBottom = containerHeight - positionY - gutterSize;
           if (this._sizeBehavior === UI.GlassPane.SizeBehavior.MeasureContent) {
             if (height < measuredHeight)
               width += scrollbarSize;
             if (height > spaceBottom) {
               this._arrowElement.classList.add('arrow-none');
               positionY = containerHeight - gutterSize - height;
+              enoughHeight = false;
             }
           } else {
             height = Math.min(height, spaceBottom);
           }
           this._arrowElement.setIconType('mediumicon-arrow-top');
           this._arrowElement.classList.add('arrow-top');
           arrowY = anchorBox.y + anchorBox.height + gutterSize;
         }
 
         positionX = Math.max(gutterSize, Math.min(anchorBox.x, containerWidth - width - gutterSize));
-        if (this._showArrow && positionX - arrowSize >= gutterSize)
+        if (!enoughHeight)
+          positionX += arrowSize;
+        else if (this._showArrow && positionX - arrowSize >= gutterSize)
           positionX -= arrowSize;
         width = Math.min(width, containerWidth - positionX - gutterSize);
         if (2 * arrowSize >= width) {
           this._arrowElement.classList.add('arrow-none');
         } else {
           var arrowX = anchorBox.x + Math.min(50, Math.floor(anchorBox.width / 2));
           arrowX = Number.constrain(arrowX, positionX + arrowSize, positionX + width - arrowSize);
           this._arrowElement.positionAt(arrowX, arrowY, container);
         }
       } else {
         var left = anchorBox.x - 2 * gutterSize;
         var right = containerWidth - anchorBox.x - anchorBox.width - 2 * gutterSize;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferLeft && left < width && right > left)
           behavior = UI.GlassPane.AnchorBehavior.PreferRight;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferRight && right < width && left > right)
           behavior = UI.GlassPane.AnchorBehavior.PreferLeft;
 
         var arrowX;
+        var enoughWidth = true;
         if (behavior === UI.GlassPane.AnchorBehavior.PreferLeft) {
           positionX = Math.max(gutterSize, anchorBox.x - width - gutterSize);
           var spaceLeft = anchorBox.x - positionX - gutterSize;
           if (this._sizeBehavior === UI.GlassPane.SizeBehavior.MeasureContent) {
             if (width < measuredWidth)
               height += scrollbarSize;
-            if (width > spaceLeft)
+            if (width > spaceLeft) {
               this._arrowElement.classList.add('arrow-none');
+              enoughWidth = false;
+            }
           } else {
             width = Math.min(width, spaceLeft);
           }
           this._arrowElement.setIconType('mediumicon-arrow-right');
           this._arrowElement.classList.add('arrow-right');
           arrowX = anchorBox.x - gutterSize;
         } else {
           positionX = anchorBox.x + anchorBox.width + gutterSize;
           var spaceRight = containerWidth - positionX - gutterSize;
           if (this._sizeBehavior === UI.GlassPane.SizeBehavior.MeasureContent) {
             if (width < measuredWidth)
               height += scrollbarSize;
             if (width > spaceRight) {
               this._arrowElement.classList.add('arrow-none');
               positionX = containerWidth - gutterSize - width;
+              enoughWidth = false;
             }
           } else {
             width = Math.min(width, spaceRight);
           }
           this._arrowElement.setIconType('mediumicon-arrow-left');
           this._arrowElement.classList.add('arrow-left');
           arrowX = anchorBox.x + anchorBox.width + gutterSize;
         }
 
         positionY = Math.max(gutterSize, Math.min(anchorBox.y, containerHeight - height - gutterSize));
-        if (this._showArrow && positionY - arrowSize >= gutterSize)
+        if (!enoughWidth)
+          positionY += arrowSize;
+        else if (enoughWidth && this._showArrow && positionY - arrowSize >= gutterSize)

[caseq, 2017/03/23 00:46:14]

drop enoughWidth from here, that was the whole point :-)

[dgozman, 2017/03/25 00:14:12]

Thanks, I am being sloppy in this patch...

           positionY -= arrowSize;
         height = Math.min(height, containerHeight - positionY - gutterSize);
         if (2 * arrowSize >= height) {
           this._arrowElement.classList.add('arrow-none');
         } else {
           var arrowY = anchorBox.y + Math.min(50, Math.floor(anchorBox.height / 2));
           arrowY = Number.constrain(arrowY, positionY + arrowSize, positionY + height - arrowSize);
           this._arrowElement.positionAt(arrowX, arrowY, container);
         }
       }
@@ skipping 66 matching lines @@
 UI.GlassPane.SizeBehavior = {
   SetExactSize: Symbol('SetExactSize'),
   SetExactWidthMaxHeight: Symbol('SetExactWidthMaxHeight'),
   MeasureContent: Symbol('MeasureContent')
 };
 
 /** @type {!Map<!Document, !Element>} */
 UI.GlassPane._containers = new Map();
 /** @type {!Set<!UI.GlassPane>} */
 UI.GlassPane._panes = new Set();