MD Settings: Display: Fix runtime error

chrome/browser/resources/settings/device_page/layout_behavior.js

 // Copyright 2016 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.
 
 /**
  * @fileoverview Behavior for handling display layout, specifically
  *     edge snapping and collisions.
  */
 
 /** @polymerBehavior */
@@ skipping 63 matching lines @@
     }
   },
 
   /**
    * Called when a drag event occurs. Checks collisions and updates the layout.
    * @param {string} id
    * @param {!chrome.system.display.Bounds} newBounds The new calculated
    *     bounds for the display.
    * @return {!chrome.system.display.Bounds}
    */
   updateDisplayBounds(id, newBounds) {

[dpapad, 2016/11/23 01:48:51]

I am confused by the mixing of ES6 and non-ES6 syntax for defining methods.
|LayoutBehavior| is not a proper ES6 class. Can we simply be consistent with the
rest of this file, and use ES6 method syntax only in proper ES6 classes?

updateDisplayBounds: function(id, newBounds) {
  ...
},

[stevenjb, 2016/11/23 17:40:46]

Oversight on my part. I wish we could enforce this. Fixed.

     this.dragLayoutId = id;
+    if (this.displays.length < 2) {

[dpapad, 2016/11/23 01:48:51]

Where is |this.displays| defined? Did not find it in this file. Is it assuming
that elements that implement the behavior have a |displays| member var? Can we
infer that information without creating such implicit contracts between this
behavior and the classes that inherit from it?

Perhaps the following condition is equivalent?

this.displayBoundsMap_.size < 2

[stevenjb, 2016/11/23 17:40:46]

Ah, you're right, I should actually move this check up to display_layout.js
(which calls updateDisplayBounds). We don't actually need to update dragBounds
or dragLayoutId with just one display.

Fixed, thanks.

+      this.dragBounds_ = newBounds;
+      return newBounds;
+    }
 
     // Find the closest parent.
     var closestId = this.findClosest_(id, newBounds);
 
     // Find the closest edge.
     var closestBounds = this.getCalculatedDisplayBounds(closestId);
     var layoutPosition =
         this.getLayoutPositionForBounds_(newBounds, closestBounds);
 
     // Snap to the closest edge.
@@ skipping 602 matching lines @@
           highlight == chrome.system.display.LayoutPosition.LEFT);
       div.classList.toggle(
           'highlight-top',
           highlight == chrome.system.display.LayoutPosition.TOP);
       div.classList.toggle(
           'highlight-bottom',
           highlight == chrome.system.display.LayoutPosition.BOTTOM);
     }
   },
 };