15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 51320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tuccicr.exportPath('options'); 61320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 71320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci/** 81320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @typedef {{ 91320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * availableColorProfiles: Array.<{profileId: number, name: string}>, 101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * colorProfile: number, 111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * height: number, 121320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * id: string, 131320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * isInternal: boolean, 141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * isPrimary: boolean, 151320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * resolutions: Array.<{width: number, height: number, originalWidth: number, 161320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * originalHeight: number, deviceScaleFactor: number, scale: number, 171320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * refreshRate: number, isBest: boolean, selected: boolean}>, 181320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * name: string, 191320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * orientation: number, 201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * width: number, 211320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * x: number, 221320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * y: number 231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * }} 241320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 251320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tuccioptions.DisplayInfo; 261320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 271320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci/** 281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * Enumeration of secondary display layout. The value has to be same as the 291320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * values in ash/display/display_controller.cc. 301320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @enum {number} 311320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 321320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tuccioptions.SecondaryDisplayLayout = { 331320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci TOP: 0, 341320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci RIGHT: 1, 351320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci BOTTOM: 2, 361320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci LEFT: 3 371320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci}; 381320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)cr.define('options', function() { 405f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) var Page = cr.ui.pageManager.Page; 415f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) var PageManager = cr.ui.pageManager.PageManager; 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // The scale ratio of the display rectangle to its original size. 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var VISUAL_SCALE = 1 / 10; 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // The number of pixels to share the edges between displays. 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var MIN_OFFSET_OVERLAP = 5; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Calculates the bounds of |element| relative to the page. 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} element The element to be known. 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {Object} The object for the bounds, with x, y, width, and height. 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function getBoundsInPage(element) { 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var bounds = { 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: element.offsetLeft, 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: element.offsetTop, 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: element.offsetWidth, 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: element.offsetHeight 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var parent = element.offsetParent; 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) while (parent && parent != document.body) { 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bounds.x += parent.offsetLeft; 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bounds.y += parent.offsetTop; 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) parent = parent.offsetParent; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return bounds; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Gets the position of |point| to |rect|, left, right, top, or bottom. 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Object} rect The base rectangle with x, y, width, and height. 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Object} point The point to check the position. 741320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @return {options.SecondaryDisplayLayout} The position of the calculated 751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * point. 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function getPositionToRectangle(rect, point) { 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Separates the area into four (LEFT/RIGHT/TOP/BOTTOM) by the diagonals of 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // the rect, and decides which area the display should reside. 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var diagonalSlope = rect.height / rect.width; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var topDownIntercept = rect.y - rect.x * diagonalSlope; 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var bottomUpIntercept = rect.y + rect.height + rect.x * diagonalSlope; 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (point.y > topDownIntercept + point.x * diagonalSlope) { 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (point.y > bottomUpIntercept - point.x * diagonalSlope) 861320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return options.SecondaryDisplayLayout.BOTTOM; 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 881320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return options.SecondaryDisplayLayout.LEFT; 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (point.y > bottomUpIntercept - point.x * diagonalSlope) 911320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return options.SecondaryDisplayLayout.RIGHT; 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 931320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return options.SecondaryDisplayLayout.TOP; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Encapsulated handling of the 'Display' page. 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 1001320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @extends {cr.ui.pageManager.Page} 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function DisplayOptions() { 1035f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) Page.call(this, 'display', 1045f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) loadTimeData.getString('displayOptionsPageTabTitle'), 1055f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 'display-options-page'); 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cr.addSingletonGetter(DisplayOptions); 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DisplayOptions.prototype = { 1115f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) __proto__: Page.prototype, 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Whether the current output status is mirroring displays or not. 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mirroring_: false, 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The current secondary display layout. 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci layout_: options.SecondaryDisplayLayout.RIGHT, 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The array of current output displays. It also contains the display 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * rectangles currently rendered on screen. 1281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type {Array.<options.DisplayInfo>} 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displays_: [], 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The index for the currently focused display in the options UI. null if 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * no one has focus. 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) focusedIndex_: null, 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The primary display. 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) primaryDisplay_: null, 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The secondary display. 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) secondaryDisplay_: null, 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The container div element which contains all of the display rectangles. 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displaysView_: null, 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The scale factor of the actual display size to the drawn display 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * rectangle size. 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visualScale_: VISUAL_SCALE, 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * The location where the last touch event happened. This is used to 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * prevent unnecessary dragging events happen. Set to null unless it's 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * during touch events. 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) lastTouchLocation_: null, 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1735f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) /** @override */ 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) initializePage: function() { 1755f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) Page.prototype.initializePage.call(this); 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1775f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('display-options-toggle-mirroring').onclick = (function() { 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.mirroring_ = !this.mirroring_; 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) chrome.send('setMirroring', [this.mirroring_]); 1805f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var container = $('display-options-displays-view-host'); 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) container.onmousemove = this.onMouseMove_.bind(this); 1842a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) window.addEventListener('mouseup', this.endDragging_.bind(this), true); 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) container.ontouchmove = this.onTouchMove_.bind(this); 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) container.ontouchend = this.endDragging_.bind(this); 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1885f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('display-options-set-primary').onclick = (function() { 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) chrome.send('setPrimary', [this.displays_[this.focusedIndex_].id]); 1905f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 1915f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('display-options-resolution-selection').onchange = (function(ev) { 192a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) var display = this.displays_[this.focusedIndex_]; 193a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) var resolution = display.resolutions[ev.target.value]; 1945f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) chrome.send('setDisplayMode', [display.id, resolution]); 1955f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 1965f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('display-options-orientation-selection').onchange = (function(ev) { 19790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) chrome.send('setOrientation', [this.displays_[this.focusedIndex_].id, 19890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) ev.target.value]); 1995f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 2005f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('display-options-color-profile-selection').onchange = (function(ev) { 201effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch chrome.send('setColorProfile', [this.displays_[this.focusedIndex_].id, 202effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch ev.target.value]); 2035f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 2045f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) $('selected-display-start-calibrating-overscan').onclick = (function() { 2052a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // Passes the target display ID. Do not specify it through URL hash, 2062a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // we do not care back/forward. 2072a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var displayOverscan = options.DisplayOverscan.getInstance(); 2082a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) displayOverscan.setDisplayId(this.displays_[this.focusedIndex_].id); 2095f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) PageManager.showPageByName('displayOverscan'); 210c5cede9ae108bb15f6b7a8aea21c7e1fefa2834cBen Murdoch chrome.send('coreOptionsUserMetricsAction', 211c5cede9ae108bb15f6b7a8aea21c7e1fefa2834cBen Murdoch ['Options_DisplaySetOverscan']); 2125f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) }).bind(this); 2135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @override */ 21690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) didShowPage: function() { 21790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var optionTitles = document.getElementsByClassName( 21890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 'selected-display-option-title'); 21990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var maxSize = 0; 22090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) for (var i = 0; i < optionTitles.length; i++) 22190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) maxSize = Math.max(maxSize, optionTitles[i].clientWidth); 22290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) for (var i = 0; i < optionTitles.length; i++) 22390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) optionTitles[i].style.width = maxSize + 'px'; 2245f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) chrome.send('getDisplayInfo'); 2255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mouse move handler for dragging display rectangle. 2295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The mouse move event. 2305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 2315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onMouseMove_: function(e) { 2335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.processDragging_(e, {x: e.pageX, y: e.pageY}); 2345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch move handler for dragging display rectangle. 2385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The touch move event. 2395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 2405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onTouchMove_: function(e) { 2425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (e.touches.length != 1) 2435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 2445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var touchLocation = {x: e.touches[0].pageX, y: e.touches[0].pageY}; 2465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Touch move events happen even if the touch location doesn't change, but 2475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // it doesn't need to process the dragging. Since sometimes the touch 2485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // position changes slightly even though the user doesn't think to move 2495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // the finger, very small move is just ignored. 2505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var IGNORABLE_TOUCH_MOVE_PX = 1; 2512a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var xDiff = Math.abs(touchLocation.x - this.lastTouchLocation_.x); 2522a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var yDiff = Math.abs(touchLocation.y - this.lastTouchLocation_.y); 2532a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (xDiff <= IGNORABLE_TOUCH_MOVE_PX && 2542a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) yDiff <= IGNORABLE_TOUCH_MOVE_PX) { 2555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 2565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 2575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lastTouchLocation_ = touchLocation; 2595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return this.processDragging_(e, touchLocation); 2605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Mouse down handler for dragging display rectangle. 2645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The mouse down event. 2655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 2665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onMouseDown_: function(e) { 2685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.mirroring_) 2695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 2705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (e.button != 0) 2725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 2735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 2751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var target = assertInstanceof(e.target, HTMLElement); 2761320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return this.startDragging_(target, {x: e.pageX, y: e.pageY}); 2775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Touch start handler for dragging display rectangle. 2815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The touch start event. 2825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 2835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onTouchStart_: function(e) { 2855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.mirroring_) 2865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 2875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (e.touches.length != 1) 2895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return false; 2905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 2925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var touch = e.touches[0]; 2935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lastTouchLocation_ = {x: touch.pageX, y: touch.pageY}; 2941320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var target = assertInstanceof(e.target, HTMLElement); 2951320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return this.startDragging_(target, this.lastTouchLocation_); 2965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 2975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 2995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Collects the current data and sends it to Chrome. 3005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 3015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) applyResult_: function() { 3035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Offset is calculated from top or left edge. 3045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var primary = this.primaryDisplay_; 3055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var secondary = this.secondaryDisplay_; 3065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var offset; 3071320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.layout_ == options.SecondaryDisplayLayout.LEFT || 3081320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.layout_ == options.SecondaryDisplayLayout.RIGHT) { 3095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) offset = secondary.div.offsetTop - primary.div.offsetTop; 3105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 3115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) offset = secondary.div.offsetLeft - primary.div.offsetLeft; 3125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 3135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) chrome.send('setDisplayLayout', 3145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [this.layout_, offset / this.visualScale_]); 3155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 3165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 3185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Snaps the region [point, width] to [basePoint, baseWidth] if 3195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * the [point, width] is close enough to the base's edge. 3205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} point The starting point of the region. 3215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} width The width of the region. 3225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} basePoint The starting point of the base region. 3235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} baseWidth The width of the base region. 3245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @return {number} The moved point. Returns point itself if it doesn't 3255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * need to snap to the edge. 3265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 3275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) snapToEdge_: function(point, width, basePoint, baseWidth) { 3295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // If the edge of the regions is smaller than this, it will snap to the 3305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // base's edge. 3315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var SNAP_DISTANCE_PX = 16; 3325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var startDiff = Math.abs(point - basePoint); 3345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var endDiff = Math.abs(point + width - (basePoint + baseWidth)); 3355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Prefer the closer one if both edges are close enough. 3365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (startDiff < SNAP_DISTANCE_PX && startDiff < endDiff) 3375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return basePoint; 3385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else if (endDiff < SNAP_DISTANCE_PX) 3395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return basePoint + baseWidth - width; 3405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return point; 3425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 3435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 3455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Processes the actual dragging of display rectangle. 3465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The event which triggers this drag. 3475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Object} eventLocation The location where the event happens. 3485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 3495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 3505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) processDragging_: function(e, eventLocation) { 3515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.dragging_) 3525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 3535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var index = -1; 3555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < this.displays_.length; i++) { 3565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.displays_[i] == this.dragging_.display) { 3575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) index = i; 3585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 3595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 3605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 3615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (index < 0) 3625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return true; 3635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) e.preventDefault(); 3655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Note that current code of moving display-rectangles doesn't work 3675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // if there are >=3 displays. This is our assumption for M21. 3685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // TODO(mukai): Fix the code to allow >=3 displays. 3695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var newPosition = { 3705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: this.dragging_.originalLocation.x + 3715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) (eventLocation.x - this.dragging_.eventLocation.x), 3725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: this.dragging_.originalLocation.y + 3735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) (eventLocation.y - this.dragging_.eventLocation.y) 3745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 3755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var baseDiv = this.dragging_.display.isPrimary ? 3775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.secondaryDisplay_.div : this.primaryDisplay_.div; 3785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var draggingDiv = this.dragging_.display.div; 3795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) newPosition.x = this.snapToEdge_(newPosition.x, draggingDiv.offsetWidth, 3815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetLeft, baseDiv.offsetWidth); 3825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) newPosition.y = this.snapToEdge_(newPosition.y, draggingDiv.offsetHeight, 3835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetTop, baseDiv.offsetHeight); 3845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var newCenter = { 3865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: newPosition.x + draggingDiv.offsetWidth / 2, 3875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: newPosition.y + draggingDiv.offsetHeight / 2 3885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 3895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var baseBounds = { 3915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) x: baseDiv.offsetLeft, 3925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) y: baseDiv.offsetTop, 3935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: baseDiv.offsetWidth, 3945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: baseDiv.offsetHeight 3955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 3965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (getPositionToRectangle(baseBounds, newCenter)) { 3971320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.RIGHT: 3982a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 3991320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.LEFT : 4001320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.RIGHT; 4012a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4021320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.LEFT: 4032a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4041320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.RIGHT : 4051320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.LEFT; 4062a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4071320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.TOP: 4082a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4091320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.BOTTOM : 4101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.TOP; 4112a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4121320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.BOTTOM: 4132a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.TOP : 4151320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.BOTTOM; 4162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4191320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.layout_ == options.SecondaryDisplayLayout.LEFT || 4201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.layout_ == options.SecondaryDisplayLayout.RIGHT) { 4215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight) 4225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.TOP : 4241320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.BOTTOM; 4255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else if (newPosition.y + draggingDiv.offsetHeight < 4265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetTop) 4275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.BOTTOM : 4291320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.TOP; 4305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 4317d4cd473f85ac64c3747c96c277f9e506a0d2246Torne (Richard Coles) if (newPosition.x > baseDiv.offsetLeft + baseDiv.offsetWidth) 4325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4331320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.LEFT : 4341320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.RIGHT; 4357d4cd473f85ac64c3747c96c277f9e506a0d2246Torne (Richard Coles) else if (newPosition.x + draggingDiv.offsetWidth < 4361320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci baseDiv.offsetLeft) 4375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layout_ = this.dragging_.display.isPrimary ? 4381320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.RIGHT : 4391320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci options.SecondaryDisplayLayout.LEFT; 4405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4422a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var layoutToBase; 4435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!this.dragging_.display.isPrimary) { 4442a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) layoutToBase = this.layout_; 4455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 4465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) switch (this.layout_) { 4471320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.RIGHT: 4481320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci layoutToBase = options.SecondaryDisplayLayout.LEFT; 4492a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4501320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.LEFT: 4511320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci layoutToBase = options.SecondaryDisplayLayout.RIGHT; 4522a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4531320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.TOP: 4541320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci layoutToBase = options.SecondaryDisplayLayout.BOTTOM; 4552a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4561320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.BOTTOM: 4571320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci layoutToBase = options.SecondaryDisplayLayout.TOP; 4582a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 4592a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) } 4602a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) } 4612a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 4622a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) switch (layoutToBase) { 4631320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.RIGHT: 4642a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.left = 4652a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) baseDiv.offsetLeft + baseDiv.offsetWidth + 'px'; 4662a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.top = newPosition.y + 'px'; 4675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 4681320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.LEFT: 4692a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.left = 4702a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) baseDiv.offsetLeft - draggingDiv.offsetWidth + 'px'; 4712a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.top = newPosition.y + 'px'; 4725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 4731320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.TOP: 4742a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.top = 4752a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) baseDiv.offsetTop - draggingDiv.offsetHeight + 'px'; 4762a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.left = newPosition.x + 'px'; 4775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 4781320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci case options.SecondaryDisplayLayout.BOTTOM: 4792a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.top = 4802a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) baseDiv.offsetTop + baseDiv.offsetHeight + 'px'; 4812a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) draggingDiv.style.left = newPosition.x + 'px'; 4825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 4835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 4845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return false; 4865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 4875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 4885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 4895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * start dragging of a display rectangle. 4905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {HTMLElement} target The event target. 4915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Object} eventLocation The object to hold the location where 4925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * this event happens. 4935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 4945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 4955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) startDragging_: function(target, eventLocation) { 4965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.focusedIndex_ = null; 4975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < this.displays_.length; i++) { 4985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var display = this.displays_[i]; 4995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (display.div == target || 5005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) (target.offsetParent && target.offsetParent == display.div)) { 5015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.focusedIndex_ = i; 5025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) break; 5035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < this.displays_.length; i++) { 5075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var display = this.displays_[i]; 5085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display.div.className = 'displays-display'; 5095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (i != this.focusedIndex_) 5105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) continue; 5115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display.div.classList.add('displays-focused'); 51390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) if (this.displays_.length > 1) { 51490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.dragging_ = { 51590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) display: display, 51690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) originalLocation: { 51790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) x: display.div.offsetLeft, y: display.div.offsetTop 51890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) }, 51990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) eventLocation: eventLocation 52090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) }; 52190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } 5225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateSelectedDisplayDescription_(); 5255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return false; 5265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 5275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 5295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * finish the current dragging of displays. 5305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {Event} e The event which triggers this. 5315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 5325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 5335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) endDragging_: function(e) { 5345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.lastTouchLocation_ = null; 5355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.dragging_) { 5365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Make sure the dragging location is connected. 5375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var baseDiv = this.dragging_.display.isPrimary ? 5385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.secondaryDisplay_.div : this.primaryDisplay_.div; 5395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var draggingDiv = this.dragging_.display.div; 5401320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.layout_ == options.SecondaryDisplayLayout.LEFT || 5411320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.layout_ == options.SecondaryDisplayLayout.RIGHT) { 5425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var top = Math.max(draggingDiv.offsetTop, 5435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetTop - draggingDiv.offsetHeight + 5445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) MIN_OFFSET_OVERLAP); 5455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top = Math.min(top, 5465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetTop + baseDiv.offsetHeight - 5475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) MIN_OFFSET_OVERLAP); 5485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) draggingDiv.style.top = top + 'px'; 5495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 5505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var left = Math.max(draggingDiv.offsetLeft, 5515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetLeft - draggingDiv.offsetWidth + 5525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) MIN_OFFSET_OVERLAP); 5535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left = Math.min(left, 5545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) baseDiv.offsetLeft + baseDiv.offsetWidth - 5555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) MIN_OFFSET_OVERLAP); 5565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) draggingDiv.style.left = left + 'px'; 5575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5582a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var originalPosition = this.dragging_.display.originalPosition; 5592a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (originalPosition.x != draggingDiv.offsetLeft || 5602a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) originalPosition.y != draggingDiv.offsetTop) 5615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.applyResult_(); 5622a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.dragging_ = null; 5635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 5645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateSelectedDisplayDescription_(); 5655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return false; 5665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 5675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 5685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 56990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * Updates the description of selected display section for mirroring mode. 5705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 5715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 57290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) updateSelectedDisplaySectionMirroring_: function() { 57390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-configuration-arrow').hidden = true; 57490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-set-primary').disabled = true; 57590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-toggle-mirroring').disabled = false; 57690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-start-calibrating-overscan').disabled = true; 57790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-orientation-selection').disabled = true; 57890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var display = this.displays_[0]; 57990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-name').textContent = 58090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) loadTimeData.getString('mirroringDisplay'); 58190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var resolution = $('display-options-resolution-selection'); 5827dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdoch var option = document.createElement('option'); 5837dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdoch option.value = 'default'; 5847dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdoch option.textContent = display.width + 'x' + display.height; 5857dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdoch resolution.appendChild(option); 58690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.disabled = true; 58790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) }, 5885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 58990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) /** 59090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * Updates the description of selected display section when no display is 59190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * selected. 59290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * @private 59390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) */ 59490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) updateSelectedDisplaySectionNoSelected_: function() { 59590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-configuration-arrow').hidden = true; 59690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-set-primary').disabled = true; 59790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-toggle-mirroring').disabled = true; 59890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-start-calibrating-overscan').disabled = true; 59990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-orientation-selection').disabled = true; 60090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-name').textContent = ''; 60190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var resolution = $('display-options-resolution-selection'); 60290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.appendChild(document.createElement('option')); 60390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.disabled = true; 60490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) }, 6055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 60690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) /** 60790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * Updates the description of selected display section for the selected 60890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * display. 60990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * @param {Object} display The selected display object. 61090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * @private 61190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) */ 61290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) updateSelectedDisplaySectionForDisplay_: function(display) { 6135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var arrow = $('display-configuration-arrow'); 6145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) arrow.hidden = false; 6152a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // Adding 1 px to the position to fit the border line and the border in 6162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // arrow precisely. 6172a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) arrow.style.top = $('display-configurations').offsetTop - 61890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) arrow.offsetHeight / 2 + 'px'; 61990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) arrow.style.left = display.div.offsetLeft + 62090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) display.div.offsetWidth / 2 - arrow.offsetWidth / 2 + 'px'; 62190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 62290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-set-primary').disabled = display.isPrimary; 62390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('display-options-toggle-mirroring').disabled = 62490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) (this.displays_.length <= 1); 62590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-start-calibrating-overscan').disabled = 62690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) display.isInternal; 62790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 62890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var orientation = $('display-options-orientation-selection'); 62990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) orientation.disabled = false; 63090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var orientationOptions = orientation.getElementsByTagName('option'); 63190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) orientationOptions[display.orientation].selected = true; 63290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 63390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) $('selected-display-name').textContent = display.name; 63490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 63590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var resolution = $('display-options-resolution-selection'); 636a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) if (display.resolutions.length <= 1) { 63790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var option = document.createElement('option'); 63890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) option.value = 'default'; 63990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) option.textContent = display.width + 'x' + display.height; 64090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) option.selected = true; 64190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.appendChild(option); 64290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.disabled = true; 64390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } else { 6445f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) var previousOption; 645a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) for (var i = 0; i < display.resolutions.length; i++) { 64690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var option = document.createElement('option'); 647a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) option.value = i; 648f8ee788a64d60abd8f2d742a5fdedde054ecd910Torne (Richard Coles) option.textContent = display.resolutions[i].width + 'x' + 649f8ee788a64d60abd8f2d742a5fdedde054ecd910Torne (Richard Coles) display.resolutions[i].height; 650a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) if (display.resolutions[i].isBest) { 65190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) option.textContent += ' ' + 65290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) loadTimeData.getString('annotateBest'); 6531320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } else if (display.resolutions[i].isNative) { 6541320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci option.textContent += ' ' + 6551320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci loadTimeData.getString('annotateNative'); 65690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } 6575f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) if (display.resolutions[i].deviceScaleFactor && previousOption && 6585f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) previousOption.textContent == option.textContent) { 6595f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) option.textContent += 6605f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) ' (' + display.resolutions[i].deviceScaleFactor + 'x)'; 6615f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) } 662a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) option.selected = display.resolutions[i].selected; 66390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.appendChild(option); 6645f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) previousOption = option; 66590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } 666a36e5920737c6adbddd3e43b760e5de8431db6e0Torne (Richard Coles) resolution.disabled = (display.resolutions.length <= 1); 66790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } 668effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch 669effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch if (display.availableColorProfiles.length <= 1) { 670effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch $('selected-display-color-profile-row').hidden = true; 671effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch } else { 672effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch $('selected-display-color-profile-row').hidden = false; 673effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch var profiles = $('display-options-color-profile-selection'); 674effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch profiles.innerHTML = ''; 675effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch for (var i = 0; i < display.availableColorProfiles.length; i++) { 676effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch var option = document.createElement('option'); 677effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch var colorProfile = display.availableColorProfiles[i]; 678effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch option.value = colorProfile.profileId; 679effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch option.textContent = colorProfile.name; 680effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch option.selected = ( 681effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch display.colorProfile == colorProfile.profileId); 682effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch profiles.appendChild(option); 683effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch } 684effb81e5f8246d0db0270817048dc992db66e9fbBen Murdoch } 68590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) }, 68690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 68790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) /** 68890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * Updates the description of the selected display section. 68990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) * @private 69090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) */ 69190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) updateSelectedDisplayDescription_: function() { 69290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var resolution = $('display-options-resolution-selection'); 69390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) resolution.textContent = ''; 69490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var orientation = $('display-options-orientation-selection'); 69590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) var orientationOptions = orientation.getElementsByTagName('option'); 69690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) for (var i = 0; i < orientationOptions.length; i++) 69790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) orientationOptions.selected = false; 69890dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) 69990dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) if (this.mirroring_) { 70090dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.updateSelectedDisplaySectionMirroring_(); 70190dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } else if (this.focusedIndex_ == null || 70290dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.displays_[this.focusedIndex_] == null) { 70390dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.updateSelectedDisplaySectionNoSelected_(); 70490dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } else { 70590dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.updateSelectedDisplaySectionForDisplay_( 70690dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) this.displays_[this.focusedIndex_]); 70790dce4d38c5ff5333bea97d859d4e484e27edf0cTorne (Richard Coles) } 7085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 7095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 7115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Clears the drawing area for display rectangles. 7125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 7135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) resetDisplaysView_: function() { 7155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var displaysViewHost = $('display-options-displays-view-host'); 7165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displaysViewHost.removeChild(displaysViewHost.firstChild); 7175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_ = document.createElement('div'); 7185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_.id = 'display-options-displays-view'; 7195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displaysViewHost.appendChild(this.displaysView_); 7205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 7215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 7235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Lays out the display rectangles for mirroring. 7245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 7255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) layoutMirroringDisplays_: function() { 7272a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // Offset pixels for secondary display rectangles. The offset includes the 7282a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) // border width. 7292a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) /** @const */ var MIRRORING_OFFSET_PIXELS = 3; 7305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Always show two displays because there must be two displays when 7315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // the display_options is enabled. Don't rely on displays_.length because 7325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // there is only one display from chrome's perspective in mirror mode. 7335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var MIN_NUM_DISPLAYS = 2; 7345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** @const */ var MIRRORING_VERTICAL_MARGIN = 20; 7355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // The width/height should be same as the first display: 737d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) var width = Math.ceil(this.displays_[0].width * this.visualScale_); 738d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) var height = Math.ceil(this.displays_[0].height * this.visualScale_); 7395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var numDisplays = Math.max(MIN_NUM_DISPLAYS, this.displays_.length); 7415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var totalWidth = width + numDisplays * MIRRORING_OFFSET_PIXELS; 7435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var totalHeight = height + numDisplays * MIRRORING_OFFSET_PIXELS; 7445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_.style.height = totalHeight + 'px'; 7465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_.classList.add( 7475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'display-options-displays-view-mirroring'); 7485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // The displays should be centered. 7505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var offsetX = 7515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) $('display-options-displays-view').offsetWidth / 2 - totalWidth / 2; 7525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < numDisplays; i++) { 7545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var div = document.createElement('div'); 7555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.className = 'displays-display'; 7565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.style.top = i * MIRRORING_OFFSET_PIXELS + 'px'; 7575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.style.left = i * MIRRORING_OFFSET_PIXELS + offsetX + 'px'; 7585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.style.width = width + 'px'; 7595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.style.height = height + 'px'; 7605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.style.zIndex = i; 7615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // set 'display-mirrored' class for the background display rectangles. 7625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (i != numDisplays - 1) 7635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.classList.add('display-mirrored'); 7645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_.appendChild(div); 7655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 7675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 7695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Layouts the display rectangles according to the current layout_. 7705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 7715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 7725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) layoutDisplays_: function() { 7735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var maxWidth = 0; 7745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var maxHeight = 0; 7755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var boundingBox = {left: 0, right: 0, top: 0, bottom: 0}; 7765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < this.displays_.length; i++) { 7775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var display = this.displays_[i]; 7785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.left = Math.min(boundingBox.left, display.x); 7795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.right = Math.max( 7805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.right, display.x + display.width); 7815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.top = Math.min(boundingBox.top, display.y); 7825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.bottom = Math.max( 7835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) boundingBox.bottom, display.y + display.height); 7845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) maxWidth = Math.max(maxWidth, display.width); 7855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) maxHeight = Math.max(maxHeight, display.height); 7865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 7875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Make the margin around the bounding box. 7895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var areaWidth = boundingBox.right - boundingBox.left + maxWidth; 7905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var areaHeight = boundingBox.bottom - boundingBox.top + maxHeight; 7915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Calculates the scale by the width since horizontal size is more strict. 7935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // TODO(mukai): Adds the check of vertical size in case. 7945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.visualScale_ = Math.min( 7955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) VISUAL_SCALE, this.displaysView_.offsetWidth / areaWidth); 7965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 7975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Prepare enough area for thisplays_view by adding the maximum height. 798d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) this.displaysView_.style.height = 799d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) Math.ceil(areaHeight * this.visualScale_) + 'px'; 8005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var boundingCenter = { 802d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) x: Math.floor((boundingBox.right + boundingBox.left) * 803d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) this.visualScale_ / 2), 804d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) y: Math.floor((boundingBox.bottom + boundingBox.top) * 805d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) this.visualScale_ / 2) 806d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) }; 8075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Centering the bounding box of the display rectangles. 8095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var offset = { 810d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) x: Math.floor(this.displaysView_.offsetWidth / 2 - 811d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) (boundingBox.right + boundingBox.left) * this.visualScale_ / 2), 812d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) y: Math.floor(this.displaysView_.offsetHeight / 2 - 813d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) (boundingBox.bottom + boundingBox.top) * this.visualScale_ / 2) 814d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) }; 8155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) for (var i = 0; i < this.displays_.length; i++) { 8175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var display = this.displays_[i]; 8185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var div = document.createElement('div'); 8195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display.div = div; 8205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.className = 'displays-display'; 8225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (i == this.focusedIndex_) 8235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.classList.add('displays-focused'); 8245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (display.isPrimary) { 8265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.primaryDisplay_ = display; 8275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } else { 8285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.secondaryDisplay_ = display; 8295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 8305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var displayNameContainer = document.createElement('div'); 8315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displayNameContainer.textContent = display.name; 8325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.appendChild(displayNameContainer); 8332a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) display.nameContainer = displayNameContainer; 834d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) display.div.style.width = 835d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) Math.floor(display.width * this.visualScale_) + 'px'; 836d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) var newHeight = Math.floor(display.height * this.visualScale_); 837d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) display.div.style.height = newHeight + 'px'; 838d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) div.style.left = 839d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) Math.floor(display.x * this.visualScale_) + offset.x + 'px'; 840d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) div.style.top = 841d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) Math.floor(display.y * this.visualScale_) + offset.y + 'px'; 842d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) display.nameContainer.style.marginTop = 843d0247b1b59f9c528cb6df88b4f2b9afaf80d181eTorne (Richard Coles) (newHeight - display.nameContainer.offsetHeight) / 2 + 'px'; 8445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.onmousedown = this.onMouseDown_.bind(this); 8465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) div.ontouchstart = this.onTouchStart_.bind(this); 8475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displaysView_.appendChild(div); 8495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Set the margin top to place the display name at the middle of the 8515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // rectangle. Note that this has to be done after it's added into the 8525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // |displaysView_|. Otherwise its offsetHeight is yet 0. 8535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) displayNameContainer.style.marginTop = 8545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) (div.offsetHeight - displayNameContainer.offsetHeight) / 2 + 'px'; 8552a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) display.originalPosition = {x: div.offsetLeft, y: div.offsetTop}; 8565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 8575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 8585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 8605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Called when the display arrangement has changed. 8615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} mirroring Whether current mode is mirroring or not. 8621320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {Array.<options.DisplayInfo>} displays The list of the display 8631320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * information. 8641320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {options.SecondaryDisplayLayout} layout The layout strategy. 8655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {number} offset The offset of the secondary display. 8665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 8675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 8685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onDisplayChanged_: function(mirroring, displays, layout, offset) { 8692a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (!this.visible) 8702a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) return; 8712a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 8722a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) var hasExternal = false; 8732a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) for (var i = 0; i < displays.length; i++) { 8742a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (!displays[i].isInternal) { 8752a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) hasExternal = true; 8762a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) break; 8772a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) } 8782a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) } 8792a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 8805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layout_ = layout; 8815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) $('display-options-toggle-mirroring').textContent = 8835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) loadTimeData.getString( 884558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch mirroring ? 'stopMirroring' : 'startMirroring'); 8855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Focus to the first display next to the primary one when |displays| list 8875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // is updated. 888558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch if (mirroring) { 8895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.focusedIndex_ = null; 890558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch } else if (this.mirroring_ != mirroring || 891558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch this.displays_.length != displays.length) { 892868fa2fe829687343ffae624259930155e16dbd8Torne (Richard Coles) this.focusedIndex_ = 0; 893558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch } 8945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 895558790d6acca3451cf3a6b497803a5f07d0bec58Ben Murdoch this.mirroring_ = mirroring; 8965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.displays_ = displays; 8975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 8985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.resetDisplaysView_(); 8995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.mirroring_) 9005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layoutMirroringDisplays_(); 9015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 9025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.layoutDisplays_(); 9035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.updateSelectedDisplayDescription_(); 9055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 9065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DisplayOptions.setDisplayInfo = function( 9095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mirroring, displays, layout, offset) { 9105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DisplayOptions.getInstance().onDisplayChanged_( 9115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) mirroring, displays, layout, offset); 9125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 9145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Export 9155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return { 9165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) DisplayOptions: DisplayOptions 9175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 9185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}); 919