diff options
Diffstat (limited to 'chromium/third_party/catapult/tracing/tracing/ui/base')
92 files changed, 0 insertions, 15520 deletions
diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/animation.html b/chromium/third_party/catapult/tracing/tracing/ui/base/animation.html deleted file mode 100644 index e0dce339240..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/animation.html +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - /** - * Represents a procedural animation that can be run by an - * tr.ui.b.AnimationController. - * - * @constructor - */ - function Animation() { - } - - Animation.prototype = { - - /** - * Called when an animation has been queued after a running animation. - * - * @return {boolean} True if the animation can take on the responsibilities - * of the running animation. If true, takeOverFor will be called on the - * animation. - * - * This can be used to build animations that accelerate as pairs of them are - * queued. - */ - canTakeOverFor: function(existingAnimation) { - throw new Error('Not implemented'); - }, - - /** - * Called to take over responsiblities of an existingAnimation. - * - * At this point, the existingAnimation has been ticked one last time, then - * stopped. This animation will be started after this returns and has the - * job of finishing(or transitioning away from) the effect the existing - * animation was trying to accomplish. - */ - takeOverFor: function(existingAnimation, newStartTimestamp, target) { - throw new Error('Not implemented'); - }, - - start: function(timestamp, target) { - throw new Error('Not implemented'); - }, - - /** - * Called when an animation is stopped before it finishes. The animation can - * do what it wants here, usually nothing. - * - * @param {Number} timestamp When the animation was stopped. - * @param {Object} target The object being animated. May be undefined, take - * care. - * @param {boolean} willBeTakenOverByAnotherAnimation Whether this animation - * is going to be handed to another animation's takeOverFor function. - */ - didStopEarly: function(timestamp, target, - willBeTakenOverByAnotherAnimation) { - }, - - /** - * @return {boolean} true if the animation is finished. - */ - tick: function(timestamp, target) { - throw new Error('Not implemented'); - } - }; - - return { - Animation: Animation - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller.html b/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller.html deleted file mode 100644 index 4b94bd456e9..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller.html +++ /dev/null @@ -1,140 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/event_target.html"> -<link rel="import" href="/tracing/base/raf.html"> -<link rel="import" href="/tracing/ui/base/animation.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - /** - * Manages execution, queueing and blending of tr.ui.b.Animations against - * a single target. - * - * Targets must have a cloneAnimationState() method that returns all the - * animatable states of that target. - * - * @constructor - * @extends {tr.b.EventTarget} - */ - function AnimationController() { - tr.b.EventTarget.call(this); - - this.target_ = undefined; - - this.activeAnimation_ = undefined; - - this.tickScheduled_ = false; - } - - AnimationController.prototype = { - __proto__: tr.b.EventTarget.prototype, - - get target() { - return this.target_; - }, - - set target(target) { - if (this.activeAnimation_) - throw new Error('Cannot change target while animation is running.'); - if (target.cloneAnimationState === undefined || - typeof target.cloneAnimationState !== 'function') - throw new Error('target must have a cloneAnimationState function'); - - this.target_ = target; - }, - - get activeAnimation() { - return this.activeAnimation_; - }, - - get hasActiveAnimation() { - return !!this.activeAnimation_; - }, - - queueAnimation: function(animation, opt_now) { - if (this.target_ === undefined) - throw new Error('Cannot queue animations without a target'); - - var now; - if (opt_now !== undefined) - now = opt_now; - else - now = window.performance.now(); - - if (this.activeAnimation_) { - // Must tick the animation before stopping it case its about to stop, - // and to update the target with its final sets of edits up to this - // point. - var done = this.activeAnimation_.tick(now, this.target_); - if (done) - this.activeAnimation_ = undefined; - } - - if (this.activeAnimation_) { - if (animation.canTakeOverFor(this.activeAnimation_)) { - this.activeAnimation_.didStopEarly(now, this.target_, true); - animation.takeOverFor(this.activeAnimation_, now, this.target_); - } else { - this.activeAnimation_.didStopEarly(now, this.target_, false); - } - } - this.activeAnimation_ = animation; - this.activeAnimation_.start(now, this.target_); - - if (this.tickScheduled_) - return; - this.tickScheduled_ = true; - tr.b.requestAnimationFrame(this.tickActiveAnimation_, this); - }, - - cancelActiveAnimation: function(opt_now) { - if (!this.activeAnimation_) - return; - var now; - if (opt_now !== undefined) - now = opt_now; - else - now = window.performance.now(); - this.activeAnimation_.didStopEarly(now, this.target_, false); - this.activeAnimation_ = undefined; - }, - - tickActiveAnimation_: function(frameBeginTime) { - this.tickScheduled_ = false; - if (!this.activeAnimation_) - return; - - if (this.target_ === undefined) { - this.activeAnimation_.didStopEarly(frameBeginTime, this.target_, false); - return; - } - - var oldTargetState = this.target_.cloneAnimationState(); - - var done = this.activeAnimation_.tick(frameBeginTime, this.target_); - if (done) - this.activeAnimation_ = undefined; - - if (this.activeAnimation_) { - this.tickScheduled_ = true; - tr.b.requestAnimationFrame(this.tickActiveAnimation_, this); - } - - if (oldTargetState) { - var e = new tr.b.Event('didtick'); - e.oldTargetState = oldTargetState; - this.dispatchEvent(e, false, false); - } - } - }; - - return { - AnimationController: AnimationController - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller_test.html deleted file mode 100644 index a830a5902dd..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/animation_controller_test.html +++ /dev/null @@ -1,166 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/utils.html"> -<link rel="import" href="/tracing/ui/base/animation_controller.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function SimpleAnimation(options) { - this.stopTime = options.stopTime; - - this.startCalled = false; - this.didStopEarlyCalled = false; - this.wasTakenOver = false; - this.tickCount = 0; - } - - SimpleAnimation.prototype = { - __proto__: tr.ui.b.Animation.prototype, - - canTakeOverFor: function(existingAnimation) { - return false; - }, - - takeOverFor: function(existingAnimation, newStartTimestamp, target) { - throw new Error('Not implemented'); - }, - - start: function(timestamp, target) { - this.startCalled = true; - }, - - didStopEarly: function(timestamp, target, willBeTakenOver) { - this.didStopEarlyCalled = true; - this.wasTakenOver = willBeTakenOver; - }, - - /** - * @return {boolean} true if the animation is finished. - */ - tick: function(timestamp, target) { - this.tickCount++; - return timestamp >= this.stopTime; - } - }; - - test('cancel', function() { - var target = { - x: 0, - cloneAnimationState: function() { return {x: this.x}; } - }; - - var controller = new tr.ui.b.AnimationController(); - controller.target = target; - - var animation = new SimpleAnimation({stopTime: 100}); - controller.queueAnimation(animation); - - tr.b.forcePendingRAFTasksToRun(0); - assert.equal(animation.tickCount, 1); - controller.cancelActiveAnimation(); - assert.isFalse(controller.hasActiveAnimation); - assert.isTrue(animation.didStopEarlyCalled); - }); - - test('simple', function() { - var target = { - x: 0, - cloneAnimationState: function() { return {x: this.x}; } - }; - - var controller = new tr.ui.b.AnimationController(); - controller.target = target; - - var animation = new SimpleAnimation({stopTime: 100}); - controller.queueAnimation(animation); - - tr.b.forcePendingRAFTasksToRun(0); - assert.equal(animation.tickCount, 1); - assert.isTrue(controller.hasActiveAnimation); - - tr.b.forcePendingRAFTasksToRun(100); - assert.equal(animation.tickCount, 2); - assert.isFalse(controller.hasActiveAnimation); - }); - - test('queueTwo', function() { - // Clear all pending rafs so if something is lingering it will blow up here. - tr.b.forcePendingRAFTasksToRun(0); - - var target = { - x: 0, - cloneAnimationState: function() { return {x: this.x}; } - }; - - var controller = new tr.ui.b.AnimationController(); - controller.target = target; - - var a1 = new SimpleAnimation({stopTime: 100}); - var a2 = new SimpleAnimation({stopTime: 100}); - controller.queueAnimation(a1, 0); - assert.isTrue(a1.startCalled); - controller.queueAnimation(a2, 50); - assert.isTrue(a1.didStopEarlyCalled); - assert.isTrue(a2.startCalled); - - tr.b.forcePendingRAFTasksToRun(150); - assert.isFalse(controller.hasActiveAnimation); - assert.isAbove(a2.tickCount, 0); - }); - - /** - * @constructor - */ - function AnimationThatCanTakeOverForSimpleAnimation() { - this.takeOverForAnimation = undefined; - } - - AnimationThatCanTakeOverForSimpleAnimation.prototype = { - __proto__: tr.ui.b.Animation.prototype, - - - canTakeOverFor: function(existingAnimation) { - return existingAnimation instanceof SimpleAnimation; - }, - - takeOverFor: function(existingAnimation, newStartTimestamp, target) { - this.takeOverForAnimation = existingAnimation; - }, - - start: function(timestamp, target) { - this.startCalled = true; - } - }; - - test('takeOver', function() { - var target = { - x: 0, - cloneAnimationState: function() { return {x: this.x}; } - }; - - var controller = new tr.ui.b.AnimationController(); - controller.target = target; - - var a1 = new SimpleAnimation({stopTime: 100}); - var a2 = new AnimationThatCanTakeOverForSimpleAnimation(); - controller.queueAnimation(a1, 0); - assert.isTrue(a1.startCalled); - assert.equal(a1.tickCount, 0); - controller.queueAnimation(a2, 10); - assert.isTrue(a1.didStopEarlyCalled); - assert.isTrue(a1.wasTakenOver); - assert.equal(a1.tickCount, 1); - - assert.equal(a1, a2.takeOverForAnimation); - assert.isTrue(a2.startCalled); - - controller.cancelActiveAnimation(); - assert.isFalse(controller.hasActiveAnimation); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart.html b/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart.html deleted file mode 100644 index b2893762db3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart.html +++ /dev/null @@ -1,178 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ColorScheme = tr.b.ColorScheme; - var ChartBase2DBrushX = tr.ui.b.ChartBase2DBrushX; - var getColorOfKey = tr.ui.b.getColorOfKey; - - // @constructor - var BarChart = tr.ui.b.define('bar-chart', ChartBase2DBrushX); - - BarChart.prototype = { - __proto__: ChartBase2DBrushX.prototype, - - decorate: function() { - ChartBase2DBrushX.prototype.decorate.call(this); - this.classList.add('bar-chart'); - this.xCushion_ = 0; - this.isStacked_ = false; - }, - - set isStacked(stacked) { - this.isStacked_ = true; - this.updateContents_(); - }, - - get isStacked() { - return this.isStacked_; - }, - - isDatumFieldSeries_: function(fieldName) { - return fieldName != 'x'; - }, - - getXForDatum_: function(datum, index) { - return datum.x; - }, - - updateScales_: function() { - if (this.data_.length === 0) - return; - - var xDifferences = 0; - var currentX = undefined; - var previousX = undefined; - var yRange = new tr.b.Range(); - this.data_.forEach(function(datum, index) { - previousX = currentX; - currentX = this.getXForDatum_(datum, index); - if (previousX !== undefined) { - xDifferences += currentX - previousX; - } - - this.seriesKeys_.forEach(function(key) { - // Allow for sparse data - if (datum[key] !== undefined) - yRange.addValue(datum[key]); - }); - }, this); - - // X. - // Leave a cushion on the right so that the last rect doesn't - // exceed the chart boundaries. The last rect's width is set to the - // average width of the rects, which is chart.width / data.length. - var width = this.chartAreaSize.width; - this.xScale_.range([0, width]); - var domain = d3.extent(this.data_, this.getXForDatum_.bind(this)); - this.xCushion_ = xDifferences / (this.data_.length - 1); - this.xScale_.domain([domain[0], domain[1] + this.xCushion_]); - - // Y. - this.yScale_.range([this.chartAreaSize.height, 0]); - this.yScale_.domain(this.getYScaleDomain_(yRange.min, yRange.max)); - }, - - getYScaleDomain_: function(minValue, maxValue) { - if (!this.isStacked) { - return ChartBase2DBrushX.prototype.getYScaleDomain_.call( - this, minValue, maxValue); - } - - var range = new tr.b.Range(); - range.addValue(0); - this.data_.forEach(function(datum, index) { - var sum = 0; - this.seriesKeys_.forEach(function(key) { - if (datum[key] === undefined) - return; - sum += datum[key]; - }, this); - range.addValue(sum); - }, this); - return [range.min, range.max]; - }, - - getStackedRectsForDatum_: function(datum, index) { - var stacks = []; - var bottom = this.yScale_.range()[0]; - var sum = 0; - this.seriesKeys_.forEach(function(key) { - if (datum[key] === undefined) - return; - sum += datum[key]; - var heightPx = bottom - this.yScale_(sum); - bottom -= heightPx; - stacks.push({ - color: getColorOfKey(key), - heightPx: heightPx, - topPx: bottom - }); - }, this); - return stacks; - }, - - getRectsForDatum_: function(datum, index) { - if (this.isStacked) - return this.getStackedRectsForDatum_(datum, index); - - var stacks = []; - this.seriesKeys_.forEach(function(key) { - if (datum[key] === undefined) - return; - var topPx = this.yScale_(Math.max(datum[key], this.getYScaleMin_())); - stacks.push({ - topPx: topPx, - heightPx: this.yScale_.range()[0] - topPx, - color: getColorOfKey(key) - }); - }, this); - stacks.sort(function(a, b) { - return b.topPx - a.topPx; - }); - return stacks; - }, - - updateDataContents_: function(dataSel) { - dataSel.selectAll('*').remove(); - var rectsSel = dataSel.selectAll('path').data(this.seriesKeys_); - this.data_.forEach(function(datum, index) { - var currentX = this.getXForDatum_(datum, index); - var width = undefined; - if (index < (this.data_.length - 1)) { - var nextX = this.getXForDatum_(this.data_[index + 1], index + 1); - width = nextX - currentX; - } else { - width = this.xCushion_; - } - this.getRectsForDatum_(datum, index).forEach(function(rect) { - var leftPx = this.xScale_(currentX); - var rightPx = this.xScale_(currentX + width); - var widthPx = rightPx - leftPx; - rectsSel.enter() - .append('rect') - .attr('fill', rect.color) - .attr('x', leftPx) - .attr('y', rect.topPx) - .attr('width', widthPx) - .attr('height', rect.heightPx); - }, this); - }, this); - rectsSel.exit().remove(); - } - }; - - return { - BarChart: BarChart - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart_test.html deleted file mode 100644 index 7d931d5ff1b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/bar_chart_test.html +++ /dev/null @@ -1,230 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/bar_chart.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiation_singleSeries', function() { - var chart = new tr.ui.b.BarChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, value: 100}, - {x: 20, value: 110}, - {x: 30, value: 100}, - {x: 40, value: 50} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('instantiation_stacked', function() { - var chart = new tr.ui.b.BarChart(); - chart.isStacked = true; - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'title'; - var data = [ - {x: 10, foo: 10, bar: 5, qux: 7}, - {x: 20, foo: 11, bar: 6, qux: 3}, - {x: 30, foo: 10, bar: 4, qux: 8}, - {x: 40, foo: 5, bar: 1, qux: 2} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('instantiation_singleSeries_yLogScale', function() { - var chart = new tr.ui.b.BarChart(); - chart.isYLogScale = true; - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, value: 100}, - {x: 20, value: 10}, - {x: 30, value: 1}, - {x: 40, value: 0.1}, - {x: 50, value: 0.01}, - {x: 60, value: 0.001} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('undefined', function() { - var chart = new tr.ui.b.BarChart(); - assert.throws(function() { - chart.data = undefined; - }); - }); - - test('instantiation_twoSeries', function() { - var chart = new tr.ui.b.BarChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 100, beta: 50}, - {x: 20, alpha: 110, beta: 75}, - {x: 30, alpha: 100, beta: 125}, - {x: 40, alpha: 50, beta: 125} - ]; - chart.data = data; - - var r = new tr.b.Range(); - r.addValue(20); - r.addValue(40); - chart.brushedRange = r; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSeries_yLogScale', function() { - var chart = new tr.ui.b.BarChart(); - chart.isYLogScale = true; - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 100, beta: 50}, - {x: 20, alpha: 110, beta: 75}, - {x: 30, alpha: 100, beta: 125}, - {x: 40, alpha: 50, beta: 125} - ]; - chart.data = data; - - var r = new tr.b.Range(); - r.addValue(20); - r.addValue(40); - chart.brushedRange = r; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueSparse', function() { - var chart = new tr.ui.b.BarChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 20, beta: undefined}, - {x: 20, alpha: undefined, beta: 10}, - {x: 30, alpha: 10, beta: undefined}, - {x: 45, alpha: undefined, beta: 20}, - {x: 50, alpha: 25, beta: 30} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueNotSparse', function() { - var chart = new tr.ui.b.BarChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 20, beta: 40}, - {x: 20, alpha: undefined, beta: 10}, - {x: 30, alpha: 10, beta: undefined}, - {x: 45, alpha: undefined, beta: 20}, - {x: 50, alpha: 30, beta: undefined} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('brushRangeFromIndices', function() { - var chart = new tr.ui.b.BarChart(); - var data = [ - {x: 10, value: 50}, - {x: 30, value: 60}, - {x: 70, value: 70}, - {x: 80, value: 80}, - {x: 120, value: 90} - ]; - chart.data = data; - var r = new tr.b.Range(); - - // Range min should be 10. - r = chart.computeBrushRangeFromIndices(-2, 1); - assert.equal(r.min, 10); - - // Range max should be 120. - r = chart.computeBrushRangeFromIndices(3, 10); - assert.equal(r.max, 120); - - // Range should be [10, 120] - r = chart.computeBrushRangeFromIndices(-2, 10); - assert.equal(r.min, 10); - assert.equal(r.max, 120); - - // Range should be [20, 100] - r = chart.computeBrushRangeFromIndices(1, 3); - assert.equal(r.min, 20); - assert.equal(r.max, 100); - }); - - test('instantiation_interactiveBrushing', function() { - var chart = new tr.ui.b.BarChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, value: 50}, - {x: 20, value: 60}, - {x: 30, value: 80}, - {x: 40, value: 20}, - {x: 50, value: 30}, - {x: 60, value: 20}, - {x: 70, value: 15}, - {x: 80, value: 20} - ]; - chart.data = data; - - var mouseDownX = undefined; - var curMouseX = undefined; - - function updateBrushedRange() { - if (mouseDownX === undefined || (mouseDownX === curMouseX)) { - chart.brushedRange = new tr.b.Range(); - return; - } - var r = new tr.b.Range(); - r.min = Math.min(mouseDownX, curMouseX); - r.max = Math.max(mouseDownX, curMouseX); - chart.brushedRange = r; - } - - chart.addEventListener('item-mousedown', function(e) { - mouseDownX = e.x; - curMouseX = e.x; - updateBrushedRange(); - }); - chart.addEventListener('item-mousemove', function(e) { - if (e.button == undefined) - return; - curMouseX = e.x; - updateBrushedRange(); - }); - chart.addEventListener('item-mouseup', function(e) { - curMouseX = e.x; - updateBrushedRange(); - }); - this.addHTMLOutput(chart); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/camera.html b/chromium/third_party/catapult/tracing/tracing/ui/base/camera.html deleted file mode 100644 index 2cef0b9f394..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/camera.html +++ /dev/null @@ -1,349 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - - var constants = { - DEFAULT_SCALE: 0.5, - DEFAULT_EYE_DISTANCE: 10000, - MINIMUM_DISTANCE: 1000, - MAXIMUM_DISTANCE: 100000, - FOV: 15, - RESCALE_TIMEOUT_MS: 200, - MAXIMUM_TILT: 80, - SETTINGS_NAMESPACE: 'tr.ui_camera' - }; - - - var Camera = tr.ui.b.define('camera'); - - Camera.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function(eventSource) { - this.eventSource_ = eventSource; - - this.eventSource_.addEventListener('beginpan', - this.onPanBegin_.bind(this)); - this.eventSource_.addEventListener('updatepan', - this.onPanUpdate_.bind(this)); - this.eventSource_.addEventListener('endpan', - this.onPanEnd_.bind(this)); - - this.eventSource_.addEventListener('beginzoom', - this.onZoomBegin_.bind(this)); - this.eventSource_.addEventListener('updatezoom', - this.onZoomUpdate_.bind(this)); - this.eventSource_.addEventListener('endzoom', - this.onZoomEnd_.bind(this)); - - this.eventSource_.addEventListener('beginrotate', - this.onRotateBegin_.bind(this)); - this.eventSource_.addEventListener('updaterotate', - this.onRotateUpdate_.bind(this)); - this.eventSource_.addEventListener('endrotate', - this.onRotateEnd_.bind(this)); - - this.eye_ = [0, 0, constants.DEFAULT_EYE_DISTANCE]; - this.gazeTarget_ = [0, 0, 0]; - this.rotation_ = [0, 0]; - - this.pixelRatio_ = window.devicePixelRatio || 1; - }, - - - get modelViewMatrix() { - var mvMatrix = mat4.create(); - - mat4.lookAt(mvMatrix, this.eye_, this.gazeTarget_, [0, 1, 0]); - return mvMatrix; - }, - - get projectionMatrix() { - var rect = - tr.ui.b.windowRectForElement(this.canvas_). - scaleSize(this.pixelRatio_); - - var aspectRatio = rect.width / rect.height; - var matrix = mat4.create(); - mat4.perspective( - matrix, tr.b.deg2rad(constants.FOV), aspectRatio, 1, 100000); - - return matrix; - }, - - set canvas(c) { - this.canvas_ = c; - }, - - set deviceRect(rect) { - this.deviceRect_ = rect; - }, - - get stackingDistanceDampening() { - var gazeVector = [ - this.gazeTarget_[0] - this.eye_[0], - this.gazeTarget_[1] - this.eye_[1], - this.gazeTarget_[2] - this.eye_[2]]; - vec3.normalize(gazeVector, gazeVector); - return 1 + gazeVector[2]; - }, - - loadCameraFromSettings: function(settings) { - this.eye_ = settings.get( - 'eye', this.eye_, constants.SETTINGS_NAMESPACE); - this.gazeTarget_ = settings.get( - 'gaze_target', this.gazeTarget_, constants.SETTINGS_NAMESPACE); - this.rotation_ = settings.get( - 'rotation', this.rotation_, constants.SETTINGS_NAMESPACE); - - this.dispatchRenderEvent_(); - }, - - saveCameraToSettings: function(settings) { - settings.set( - 'eye', this.eye_, constants.SETTINGS_NAMESPACE); - settings.set( - 'gaze_target', this.gazeTarget_, constants.SETTINGS_NAMESPACE); - settings.set( - 'rotation', this.rotation_, constants.SETTINGS_NAMESPACE); - }, - - resetCamera: function() { - this.eye_ = [0, 0, constants.DEFAULT_EYE_DISTANCE]; - this.gazeTarget_ = [0, 0, 0]; - this.rotation_ = [0, 0]; - - var settings = tr.b.SessionSettings(); - var keys = settings.keys(constants.SETTINGS_NAMESPACE); - if (keys.length !== 0) { - this.loadCameraFromSettings(settings); - return; - } - - if (this.deviceRect_) { - var rect = tr.ui.b.windowRectForElement(this.canvas_). - scaleSize(this.pixelRatio_); - - this.eye_[0] = this.deviceRect_.width / 2; - this.eye_[1] = this.deviceRect_.height / 2; - - this.gazeTarget_[0] = this.deviceRect_.width / 2; - this.gazeTarget_[1] = this.deviceRect_.height / 2; - } - - this.saveCameraToSettings(settings); - this.dispatchRenderEvent_(); - }, - - updatePanByDelta: function(delta) { - var rect = - tr.ui.b.windowRectForElement(this.canvas_). - scaleSize(this.pixelRatio_); - - // Get the eye vector, since we'll be adjusting gazeTarget. - var eyeVector = [ - this.eye_[0] - this.gazeTarget_[0], - this.eye_[1] - this.gazeTarget_[1], - this.eye_[2] - this.gazeTarget_[2]]; - var length = vec3.length(eyeVector); - vec3.normalize(eyeVector, eyeVector); - - var halfFov = constants.FOV / 2; - var multiplier = - 2.0 * length * Math.tan(tr.b.deg2rad(halfFov)) / rect.height; - - // Get the up and right vectors. - var up = [0, 1, 0]; - var rotMatrix = mat4.create(); - mat4.rotate( - rotMatrix, rotMatrix, tr.b.deg2rad(this.rotation_[1]), [0, 1, 0]); - mat4.rotate( - rotMatrix, rotMatrix, tr.b.deg2rad(this.rotation_[0]), [1, 0, 0]); - vec3.transformMat4(up, up, rotMatrix); - - var right = [0, 0, 0]; - vec3.cross(right, eyeVector, up); - vec3.normalize(right, right); - - // Update the gaze target. - for (var i = 0; i < 3; ++i) { - this.gazeTarget_[i] += - delta[0] * multiplier * right[i] - delta[1] * multiplier * up[i]; - - this.eye_[i] = this.gazeTarget_[i] + length * eyeVector[i]; - } - - // If we have some z offset, we need to reposition gazeTarget - // to be on the plane z = 0 with normal [0, 0, 1]. - if (Math.abs(this.gazeTarget_[2]) > 1e-6) { - var gazeVector = [-eyeVector[0], -eyeVector[1], -eyeVector[2]]; - var newLength = tr.b.clamp( - -this.eye_[2] / gazeVector[2], - constants.MINIMUM_DISTANCE, - constants.MAXIMUM_DISTANCE); - - for (var i = 0; i < 3; ++i) - this.gazeTarget_[i] = this.eye_[i] + newLength * gazeVector[i]; - } - - this.saveCameraToSettings(tr.b.SessionSettings()); - this.dispatchRenderEvent_(); - }, - - updateZoomByDelta: function(delta) { - var deltaY = delta[1]; - deltaY = tr.b.clamp(deltaY, -50, 50); - var scale = 1.0 - deltaY / 100.0; - - var eyeVector = [0, 0, 0]; - vec3.subtract(eyeVector, this.eye_, this.gazeTarget_); - - var length = vec3.length(eyeVector); - - // Clamp the length to allowed values by changing the scale. - if (length * scale < constants.MINIMUM_DISTANCE) - scale = constants.MINIMUM_DISTANCE / length; - else if (length * scale > constants.MAXIMUM_DISTANCE) - scale = constants.MAXIMUM_DISTANCE / length; - - vec3.scale(eyeVector, eyeVector, scale); - vec3.add(this.eye_, this.gazeTarget_, eyeVector); - - this.saveCameraToSettings(tr.b.SessionSettings()); - this.dispatchRenderEvent_(); - }, - - updateRotateByDelta: function(delta) { - delta[0] *= 0.5; - delta[1] *= 0.5; - - if (Math.abs(this.rotation_[0] + delta[1]) > constants.MAXIMUM_TILT) - return; - if (Math.abs(this.rotation_[1] - delta[0]) > constants.MAXIMUM_TILT) - return; - - var eyeVector = [0, 0, 0, 0]; - vec3.subtract(eyeVector, this.eye_, this.gazeTarget_); - - // Undo the current rotation. - var rotMatrix = mat4.create(); - mat4.rotate( - rotMatrix, rotMatrix, -tr.b.deg2rad(this.rotation_[0]), [1, 0, 0]); - mat4.rotate( - rotMatrix, rotMatrix, -tr.b.deg2rad(this.rotation_[1]), [0, 1, 0]); - vec4.transformMat4(eyeVector, eyeVector, rotMatrix); - - // Update rotation values. - this.rotation_[0] += delta[1]; - this.rotation_[1] -= delta[0]; - - // Redo the new rotation. - mat4.identity(rotMatrix); - mat4.rotate( - rotMatrix, rotMatrix, tr.b.deg2rad(this.rotation_[1]), [0, 1, 0]); - mat4.rotate( - rotMatrix, rotMatrix, tr.b.deg2rad(this.rotation_[0]), [1, 0, 0]); - vec4.transformMat4(eyeVector, eyeVector, rotMatrix); - - vec3.add(this.eye_, this.gazeTarget_, eyeVector); - - this.saveCameraToSettings(tr.b.SessionSettings()); - this.dispatchRenderEvent_(); - }, - - - // Event callbacks. - onPanBegin_: function(e) { - this.panning_ = true; - this.lastMousePosition_ = this.getMousePosition_(e); - }, - - onPanUpdate_: function(e) { - if (!this.panning_) - return; - - var delta = this.getMouseDelta_(e, this.lastMousePosition_); - this.lastMousePosition_ = this.getMousePosition_(e); - this.updatePanByDelta(delta); - }, - - onPanEnd_: function(e) { - this.panning_ = false; - }, - - onZoomBegin_: function(e) { - this.zooming_ = true; - - var p = this.getMousePosition_(e); - - this.lastMousePosition_ = p; - this.zoomPoint_ = p; - }, - - onZoomUpdate_: function(e) { - if (!this.zooming_) - return; - - var delta = this.getMouseDelta_(e, this.lastMousePosition_); - this.lastMousePosition_ = this.getMousePosition_(e); - this.updateZoomByDelta(delta); - }, - - onZoomEnd_: function(e) { - this.zooming_ = false; - this.zoomPoint_ = undefined; - }, - - onRotateBegin_: function(e) { - this.rotating_ = true; - this.lastMousePosition_ = this.getMousePosition_(e); - }, - - onRotateUpdate_: function(e) { - if (!this.rotating_) - return; - - var delta = this.getMouseDelta_(e, this.lastMousePosition_); - this.lastMousePosition_ = this.getMousePosition_(e); - this.updateRotateByDelta(delta); - }, - - onRotateEnd_: function(e) { - this.rotating_ = false; - }, - - - // Misc helper functions. - getMousePosition_: function(e) { - var rect = tr.ui.b.windowRectForElement(this.canvas_); - return [(e.clientX - rect.x) * this.pixelRatio_, - (e.clientY - rect.y) * this.pixelRatio_]; - }, - - getMouseDelta_: function(e, p) { - var newP = this.getMousePosition_(e); - return [newP[0] - p[0], newP[1] - p[1]]; - }, - - dispatchRenderEvent_: function() { - tr.b.dispatchSimpleEvent(this, 'renderrequired', false, false); - } - }; - - return { - Camera: Camera - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/camera_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/camera_test.html deleted file mode 100644 index 8a11663eeda..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/camera_test.html +++ /dev/null @@ -1,60 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/rect.html"> -<link rel="import" href="/tracing/base/quad.html"> -<link rel="import" href="/tracing/base/bbox2.html"> -<link rel="import" href="/tracing/ui/base/quad_stack_view.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - - function createQuads() { - var quads = [ - tr.b.Quad.fromXYWH(-500, -500, 30, 30), // 4 corners - tr.b.Quad.fromXYWH(-500, 470, 30, 30), - tr.b.Quad.fromXYWH(470, -500, 30, 30), - tr.b.Quad.fromXYWH(470, 470, 30, 30), - tr.b.Quad.fromXYWH(-250, -250, 250, 250), // crosshairs - tr.b.Quad.fromXYWH(0, -250, 250, 250), // crosshairs - tr.b.Quad.fromXYWH(-250, 0, 250, 250), // crosshairs - tr.b.Quad.fromXYWH(0, 0, 250, 250) // crosshairs - ]; - quads[0].stackingGroupId = 0; - quads[1].stackingGroupId = 0; - quads[2].stackingGroupId = 0; - quads[3].stackingGroupId = 0; - quads[4].stackingGroupId = 1; - quads[5].stackingGroupId = 1; - quads[6].stackingGroupId = 1; - quads[7].stackingGroupId = 1; - return quads; - } - - function createQuadStackView(testFramework) { - var quads = createQuads(); - var view = new tr.ui.b.QuadStackView(); - // simulate the constraints of the layer-tree-view - view.style.height = '400px'; - view.style.width = '800px'; - view.deviceRect = tr.b.Rect.fromXYWH(-250, -250, 500, 500); - view.quads = quads; - - testFramework.addHTMLOutput(view); - return view; - } - - test('initialState', function() { - var view = createQuadStackView(this); - - var viewRect = - view.getBoundingClientRect(); - assert.equal(viewRect.height, 400); - assert.equal(viewRect.width, 800); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base.html b/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base.html deleted file mode 100644 index 5155376058a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base.html +++ /dev/null @@ -1,277 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/color_scheme.html"> -<link rel="import" href="/tracing/ui/base/d3.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<style> - * /deep/ .chart-base #title { - font-size: 16pt; - } - - * /deep/ .chart-base { - font-size: 12pt; - -webkit-user-select: none; - cursor: default; - } - - * /deep/ .chart-base .axis path, - * /deep/ .chart-base .axis line { - fill: none; - shape-rendering: crispEdges; - stroke: #000; - } -</style> - -<template id="chart-base-template"> - <svg> <!-- svg tag is dropped by ChartBase.decorate. --> - <g xmlns="http://www.w3.org/2000/svg" id="chart-area"> - <g class="x axis"></g> - <g class="y axis"></g> - <text id="title"></text> - </g> - </svg> -</template> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var THIS_DOC = document.currentScript.ownerDocument; - - var svgNS = 'http://www.w3.org/2000/svg'; - var ColorScheme = tr.b.ColorScheme; - - function getColorOfKey(key, selected) { - var id = ColorScheme.getColorIdForGeneralPurposeString(key); - if (selected) - id += ColorScheme.properties.brightenedOffsets[0]; - return ColorScheme.colorsAsStrings[id]; - } - - /** - * A virtual base class for basic charts that provides X and Y axes, if - * needed, a title, and legend. - * - * @constructor - */ - var ChartBase = tr.ui.b.define('svg', undefined, svgNS); - - ChartBase.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.classList.add('chart-base'); - this.chartTitle_ = undefined; - this.seriesKeys_ = undefined; - this.width_ = 400; - this.height_ = 300; - - // This should use tr.ui.b.instantiateTemplate. However, creating - // svg-namespaced elements inside a template isn't possible. Thus, this - // hack. - var template = THIS_DOC.querySelector('#chart-base-template'); - var svgEl = template.content.querySelector('svg'); - for (var i = 0; i < svgEl.children.length; i++) - this.appendChild(svgEl.children[i].cloneNode(true)); - - // svg likes to take over width & height properties for some reason. This - // works around it. - Object.defineProperty( - this, 'width', { - get: function() { - return this.width_; - }, - set: function(width) { - this.width_ = width; - this.updateContents_(); - } - }); - Object.defineProperty( - this, 'height', { - get: function() { - return this.height_; - }, - set: function(height) { - this.height_ = height; - this.updateContents_(); - } - }); - }, - - get chartTitle() { - return this.chartTitle_; - }, - - set chartTitle(chartTitle) { - this.chartTitle_ = chartTitle; - this.updateContents_(); - }, - - get chartAreaElement() { - return this.querySelector('#chart-area'); - }, - - setSize: function(size) { - this.width_ = size.width; - this.height_ = size.height; - this.updateContents_(); - }, - - getMargin_: function() { - var margin = {top: 20, right: 20, bottom: 30, left: 50}; - if (this.chartTitle_) - margin.top += 20; - return margin; - }, - - get margin() { - return this.getMargin_(); - }, - - get chartAreaSize() { - var margin = this.margin; - return { - width: this.width_ - margin.left - margin.right, - height: this.height_ - margin.top - margin.bottom - }; - }, - - getLegendKeys_: function() { - throw new Error('Not implemented'); - }, - - updateScales_: function() { - throw new Error('Not implemented'); - }, - - updateContents_: function() { - var margin = this.margin; - - var thisSel = d3.select(this); - thisSel.attr('width', this.width_); - thisSel.attr('height', this.height_); - - var chartAreaSel = d3.select(this.chartAreaElement); - chartAreaSel.attr('transform', - 'translate(' + margin.left + ',' + margin.top + ')'); - - this.updateScales_(); - this.updateTitle_(chartAreaSel); - this.updateLegend_(); - }, - - updateTitle_: function(chartAreaSel) { - var titleSel = chartAreaSel.select('#title'); - if (!this.chartTitle_) { - titleSel.style('display', 'none'); - return; - } - var width = this.chartAreaSize.width; - titleSel.attr('transform', 'translate(' + width * 0.5 + ',-5)') - .style('display', undefined) - .style('text-anchor', 'middle') - .attr('class', 'title') - .attr('width', width) - .text(this.chartTitle_); - }, - - // TODO(charliea): We should change updateLegend_ so that it ellipsizes the - // series names after a certain point. Otherwise, the series names start - // dipping below the x-axis and continue on outside of the viewport. - updateLegend_: function() { - var keys = this.getLegendKeys_(); - if (keys === undefined) - return; - - var chartAreaSel = d3.select(this.chartAreaElement); - var chartAreaSize = this.chartAreaSize; - - var legendEntriesSel = chartAreaSel.selectAll('.legend') - .data(keys.slice().reverse()); - - legendEntriesSel.enter() - .append('g') - .attr('class', 'legend') - .attr('transform', function(d, i) { - return 'translate(0,' + i * 20 + ')'; - }) - .append('text').text(function(key) { - return key; - }); - legendEntriesSel.exit().remove(); - - legendEntriesSel.attr('x', chartAreaSize.width - 18) - .attr('width', 18) - .attr('height', 18) - .style('fill', function(key) { - var selected = this.currentHighlightedLegendKey === key; - return getColorOfKey(key, selected); - }.bind(this)); - - legendEntriesSel.selectAll('text') - .attr('x', chartAreaSize.width - 24) - .attr('y', 9) - .attr('dy', '.35em') - .style('text-anchor', 'end') - .text(function(d) { return d; }); - }, - - get highlightedLegendKey() { - return this.highlightedLegendKey_; - }, - - set highlightedLegendKey(highlightedLegendKey) { - this.highlightedLegendKey_ = highlightedLegendKey; - this.updateHighlight_(); - }, - - get currentHighlightedLegendKey() { - if (this.tempHighlightedLegendKey_) - return this.tempHighlightedLegendKey_; - return this.highlightedLegendKey_; - }, - - pushTempHighlightedLegendKey: function(key) { - if (this.tempHighlightedLegendKey_) - throw new Error('push cannot nest'); - this.tempHighlightedLegendKey_ = key; - this.updateHighlight_(); - }, - - popTempHighlightedLegendKey: function(key) { - if (this.tempHighlightedLegendKey_ != key) - throw new Error('pop cannot happen'); - this.tempHighlightedLegendKey_ = undefined; - this.updateHighlight_(); - }, - - updateHighlight_: function() { - // Update label colors. - var chartAreaSel = d3.select(this.chartAreaElement); - var legendEntriesSel = chartAreaSel.selectAll('.legend'); - - var that = this; - legendEntriesSel.each(function(key) { - var highlighted = key == that.currentHighlightedLegendKey; - var color = getColorOfKey(key, highlighted); - this.style.fill = color; - if (highlighted) - this.style.fontWeight = 'bold'; - else - this.style.fontWeight = ''; - }); - } - }; - - return { - getColorOfKey: getColorOfKey, - ChartBase: ChartBase - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d.html b/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d.html deleted file mode 100644 index 84cd5019157..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d.html +++ /dev/null @@ -1,384 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/iteration_helpers.html"> -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/ui/base/chart_base.html"> -<link rel="import" href="/tracing/ui/base/mouse_tracker.html"> - -<style> - * /deep/ .chart-base-2d.updating-brushing-state #brushes > * { - fill: rgb(103, 199, 165) - } - - * /deep/ .chart-base-2d #brushes { - fill: rgb(213, 236, 229) - } -</style> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ChartBase = tr.ui.b.ChartBase; - var ChartBase2D = tr.ui.b.define('chart-base-2d', ChartBase); - - ChartBase2D.prototype = { - __proto__: ChartBase.prototype, - - decorate: function() { - ChartBase.prototype.decorate.call(this); - this.classList.add('chart-base-2d'); - this.xScale_ = d3.scale.linear(); - this.yScale_ = d3.scale.linear(); - this.isYLogScale_ = false; - this.yLogScaleMin_ = undefined; - this.dataRange_ = new tr.b.Range(); - - this.data_ = []; - this.seriesKeys_ = []; - this.leftMargin_ = 50; - - d3.select(this.chartAreaElement) - .append('g') - .attr('id', 'brushes'); - d3.select(this.chartAreaElement) - .append('g') - .attr('id', 'series'); - - this.addEventListener('mousedown', this.onMouseDown_.bind(this)); - }, - - get data() { - return this.data_; - }, - - /** - * Sets the data array for the object - * - * @param {Array} data The data. Each element must be an object, with at - * least an x property. All other properties become series names in the - * chart. The data can be sparse (i.e. every x value does not have to - * contain data for every series). - */ - set data(data) { - if (data === undefined) - throw new Error('data must be an Array'); - - this.data_ = data; - this.updateSeriesKeys_(); - this.updateDataRange_(); - this.updateContents_(); - }, - - set isYLogScale(logScale) { - if (logScale) - this.yScale_ = d3.scale.log(10); - else - this.yScale_ = d3.scale.linear(); - this.isYLogScale_ = logScale; - }, - - getYScaleMin_: function() { - return this.isYLogScale_ ? this.yLogScaleMin_ : 0; - }, - - getYScaleDomain_: function(minValue, maxValue) { - if (this.isYLogScale_) - return [this.getYScaleMin_(), maxValue]; - return [Math.min(minValue, this.getYScaleMin_()), maxValue]; - }, - - getSampleWidth_: function(data, index, leftSide) { - var leftIndex, rightIndex; - if (leftSide) { - leftIndex = Math.max(index - 1, 0); - rightIndex = index; - } else { - leftIndex = index; - rightIndex = Math.min(index + 1, data.length - 1); - } - var leftWidth = this.getXForDatum_(data[index], index) - - this.getXForDatum_(data[leftIndex], leftIndex); - var rightWidth = this.getXForDatum_(data[rightIndex], rightIndex) - - this.getXForDatum_(data[index], index); - return leftWidth * 0.5 + rightWidth * 0.5; - }, - - getLegendKeys_: function() { - if (this.seriesKeys_ && - this.seriesKeys_.length > 1) - return this.seriesKeys_.slice(); - return []; - }, - - updateSeriesKeys_: function() { - // Accumulate the keys on each data point. - var keySet = {}; - this.data_.forEach(function(datum) { - Object.keys(datum).forEach(function(key) { - if (this.isDatumFieldSeries_(key)) - keySet[key] = true; - }, this); - }, this); - this.seriesKeys_ = Object.keys(keySet); - }, - - isDatumFieldSeries_: function(fieldName) { - throw new Error('Not implemented'); - }, - - getXForDatum_: function(datum, index) { - throw new Error('Not implemented'); - }, - - updateScales_: function() { - if (this.data_.length === 0) - return; - - var width = this.chartAreaSize.width; - var height = this.chartAreaSize.height; - - // X. - this.xScale_.range([0, width]); - this.xScale_.domain(d3.extent(this.data_, this.getXForDatum_.bind(this))); - - // Y. - var yRange = new tr.b.Range(); - var keySet = new Set(this.seriesKeys_); - for (var i = 0; i < this.data_.length; i++) - for (var key in this.data_[i]) - if (keySet.has(key)) - yRange.addValue(this.data_[i][key]); - - this.yScale_.range([height, 0]); - this.yScale_.domain([yRange.min, yRange.max]); - }, - - updateBrushContents_: function(brushSel) { - brushSel.selectAll('*').remove(); - }, - - updateXAxis_: function(xAxis) { - xAxis.selectAll('*').remove(); - xAxis[0][0].style.opacity = 0; - xAxis.attr('transform', 'translate(0,' + this.chartAreaSize.height + ')') - .call(d3.svg.axis() - .scale(this.xScale_) - .orient('bottom')); - window.requestAnimationFrame(function() { - var previousRight = undefined; - xAxis.selectAll('.tick')[0].forEach(function(tick) { - var currentLeft = tick.transform.baseVal[0].matrix.e; - if ((previousRight === undefined) || - (currentLeft > (previousRight + 3))) { - var currentWidth = tick.getBBox().width; - previousRight = currentLeft + currentWidth; - } else { - tick.style.opacity = 0; - } - }); - xAxis[0][0].style.opacity = 1; - }); - }, - - getMargin_: function() { - var margin = ChartBase.prototype.getMargin_.call(this); - margin.left = this.leftMargin_; - return margin; - }, - - updateDataRange_: function() { - var dataBySeriesKey = this.getDataBySeriesKey_(); - this.dataRange_.reset(); - tr.b.iterItems(dataBySeriesKey, function(series, values) { - for (var i = 0; i < values.length; i++) { - this.dataRange_.addValue(values[i][series]); - } - }, this); - - // Choose the closest power of 10, rounded down, as the smallest tick - // to display. - this.yLogScaleMin_ = undefined; - if (this.dataRange_.min !== undefined) { - var minValue = this.dataRange_.min; - if (minValue == 0) - minValue = 1; - - var onePowerLess = Math.floor( - Math.log(minValue) / Math.log(10)) - 1; - this.yLogScaleMin_ = Math.pow(10, onePowerLess); - } - }, - - updateYAxis_: function(yAxis) { - yAxis.selectAll('*').remove(); - yAxis[0][0].style.opacity = 0; - - var axisModifier = d3.svg.axis() - .scale(this.yScale_) - .orient('left'); - - if (this.isYLogScale_) { - if (this.yLogScaleMin_ === undefined) - return; - var minValue = this.dataRange_.min; - if (minValue == 0) - minValue = 1; - - var largestPower = Math.ceil( - Math.log(this.dataRange_.max) / Math.log(10)) + 1; - var smallestPower = Math.floor( - Math.log(minValue) / Math.log(10)); - var tickValues = []; - for (var i = smallestPower; i < largestPower; i++) { - tickValues.push(Math.pow(10, i)); - } - - axisModifier = axisModifier - .tickValues(tickValues) - .tickFormat(function(d) { - return d; - }); - } - - yAxis.call(axisModifier); - - window.requestAnimationFrame(function() { - var previousTop = undefined; - var leftMargin = 0; - yAxis.selectAll('.tick')[0].forEach(function(tick) { - var bbox = tick.getBBox(); - leftMargin = Math.max(leftMargin, bbox.width); - var currentTop = tick.transform.baseVal[0].matrix.f; - var currentBottom = currentTop + bbox.height; - if ((previousTop === undefined) || - (previousTop > (currentBottom + 3))) { - previousTop = currentTop; - } else { - tick.style.opacity = 0; - } - }); - if (leftMargin > this.leftMargin_) { - this.leftMargin_ = leftMargin; - this.updateContents_(); - } else { - yAxis[0][0].style.opacity = 1; - } - }.bind(this)); - }, - - updateContents_: function() { - ChartBase.prototype.updateContents_.call(this); - var chartAreaSel = d3.select(this.chartAreaElement); - this.updateXAxis_(chartAreaSel.select('.x.axis')); - this.updateYAxis_(chartAreaSel.select('.y.axis')); - this.updateBrushContents_(chartAreaSel.select('#brushes')); - this.updateDataContents_(chartAreaSel.select('#series')); - }, - - updateDataContents_: function(seriesSel) { - throw new Error('Not implemented'); - }, - - /** - * Returns a map of series key to the data for that series. - * - * Example: - * // returns {y: [{x: 1, y: 1}, {x: 3, y: 3}], z: [{x: 2, z: 2}]} - * this.data_ = [{x: 1, y: 1}, {x: 2, z: 2}, {x: 3, y: 3}]; - * this.getDataBySeriesKey_(); - * @return {Object} A map of series data by series key. - */ - getDataBySeriesKey_: function() { - var dataBySeriesKey = {}; - this.seriesKeys_.forEach(function(seriesKey) { - dataBySeriesKey[seriesKey] = []; - }); - - this.data_.forEach(function(multiSeriesDatum, index) { - var x = this.getXForDatum_(multiSeriesDatum, index); - - d3.keys(multiSeriesDatum).forEach(function(seriesKey) { - // Skip 'x' - it's not a series - if (seriesKey === 'x') - return; - - if (multiSeriesDatum[seriesKey] === undefined) - return; - - if (!this.isDatumFieldSeries_(seriesKey)) - return; - - var singleSeriesDatum = {x: x}; - singleSeriesDatum[seriesKey] = multiSeriesDatum[seriesKey]; - dataBySeriesKey[seriesKey].push(singleSeriesDatum); - }, this); - }, this); - - return dataBySeriesKey; - }, - - getDataPointAtClientPoint_: function(clientX, clientY) { - var rect = this.getBoundingClientRect(); - var margin = this.margin; - var x = clientX - rect.left - margin.left; - var y = clientY - rect.top - margin.top; - x = this.xScale_.invert(x); - y = this.yScale_.invert(y); - x = tr.b.clamp(x, this.xScale_.domain()[0], this.xScale_.domain()[1]); - y = tr.b.clamp(y, this.yScale_.domain()[0], this.yScale_.domain()[1]); - return {x: x, y: y}; - }, - - prepareDataEvent_: function(mouseEvent, dataEvent) { - var dataPoint = this.getDataPointAtClientPoint_( - mouseEvent.clientX, mouseEvent.clientY); - dataEvent.x = dataPoint.x; - dataEvent.y = dataPoint.y; - }, - - onMouseDown_: function(mouseEvent) { - tr.ui.b.trackMouseMovesUntilMouseUp( - this.onMouseMove_.bind(this, mouseEvent.button), - this.onMouseUp_.bind(this, mouseEvent.button)); - mouseEvent.preventDefault(); - mouseEvent.stopPropagation(); - var dataEvent = new tr.b.Event('item-mousedown'); - dataEvent.button = mouseEvent.button; - this.classList.add('updating-brushing-state'); - this.prepareDataEvent_(mouseEvent, dataEvent); - this.dispatchEvent(dataEvent); - }, - - onMouseMove_: function(button, mouseEvent) { - if (mouseEvent.buttons !== undefined) { - mouseEvent.preventDefault(); - mouseEvent.stopPropagation(); - } - var dataEvent = new tr.b.Event('item-mousemove'); - dataEvent.button = button; - this.prepareDataEvent_(mouseEvent, dataEvent); - this.dispatchEvent(dataEvent); - }, - - onMouseUp_: function(button, mouseEvent) { - mouseEvent.preventDefault(); - mouseEvent.stopPropagation(); - var dataEvent = new tr.b.Event('item-mouseup'); - dataEvent.button = button; - this.prepareDataEvent_(mouseEvent, dataEvent); - this.dispatchEvent(dataEvent); - this.classList.remove('updating-brushing-state'); - } - }; - - return { - ChartBase2D: ChartBase2D - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d_brushable_x.html b/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d_brushable_x.html deleted file mode 100644 index 4cde4b58bdd..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/chart_base_2d_brushable_x.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/chart_base_2d.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ChartBase2D = tr.ui.b.ChartBase2D; - var ChartBase2DBrushX = tr.ui.b.define('chart-base-2d-brush-1d', ChartBase2D); - - ChartBase2DBrushX.prototype = { - __proto__: ChartBase2D.prototype, - - decorate: function() { - ChartBase2D.prototype.decorate.call(this); - this.brushedRange_ = new tr.b.Range(); - }, - - // Note: range can only be set, not retrieved. It needs to be immutable - // or else odd data binding effects will result. - set brushedRange(range) { - this.brushedRange_.reset(); - this.brushedRange_.addRange(range); - this.updateContents_(); - }, - - computeBrushRangeFromIndices: function(indexA, indexB) { - indexA = tr.b.clamp(indexA, 0, this.data_.length - 1); - indexB = tr.b.clamp(indexB, 0, this.data_.length - 1); - var leftIndex = Math.min(indexA, indexB); - var rightIndex = Math.max(indexA, indexB); - - var r = new tr.b.Range(); - r.addValue(this.getXForDatum_(this.data_[leftIndex], leftIndex) - - this.getSampleWidth_(this.data_, leftIndex, true)); - r.addValue(this.getXForDatum_(this.data_[rightIndex], rightIndex) + - this.getSampleWidth_(this.data_, rightIndex, false)); - return r; - }, - - getDataIndex_: function(dataX) { - if (!this.data_) - return undefined; - var bisect = d3.bisector(this.getXForDatum_.bind(this)).right; - return bisect(this.data_, dataX) - 1; - }, - - prepareDataEvent_: function(mouseEvent, dataEvent) { - ChartBase2D.prototype.prepareDataEvent_.call( - this, mouseEvent, dataEvent); - dataEvent.index = this.getDataIndex_(dataEvent.x); - if (dataEvent.index !== undefined) - dataEvent.data = this.data_[dataEvent.index]; - }, - - updateBrushContents_: function(brushSel) { - brushSel.selectAll('*').remove(); - var brushes = this.brushedRange_.isEmpty ? [] : [this.brushedRange_]; - var brushRectsSel = brushSel.selectAll('rect').data(brushes); - brushRectsSel.enter().append('rect'); - brushRectsSel.exit().remove(); - brushRectsSel - .attr('x', function(d) { - return this.xScale_(d.min); - }.bind(this)) - .attr('y', 0) - .attr('width', function(d) { - return this.xScale_(d.max) - this.xScale_(d.min); - }.bind(this)) - .attr('height', this.chartAreaSize.height); - } - }; - - return { - ChartBase2DBrushX: ChartBase2DBrushX - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox.html b/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox.html deleted file mode 100644 index 9de49183853..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox.html +++ /dev/null @@ -1,107 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<polymer-element name='tr-ui-b-checkbox'> - <template> - <style> - .inline { - display: inline-block; - } - </style> - - <input type="checkbox" id="checkbox" class="inline"/> - <div id="label" class="inline"></div> - </template> - - <script> - 'use strict'; - - Polymer({ - created: function() { - this.needsInit_ = true; - this.defaultCheckedValue_ = undefined; - this.settingsKey_ = undefined; - this.label_ = undefined; - this.checked_ = false; - this.is_ready_ = false; - }, - - ready: function() { - this.is_ready_ = true; - this.$.checkbox.addEventListener('click', function() { - this.checked = this.$.checkbox.checked; - }.bind(this)); - this.maybeUpdateElements_(); - }, - - maybeUpdateElements_: function() { - if (!this.is_ready_) - return; - this.$.label.innerText = this.label_; - this.$.checkbox.checked = this.checked_; - }, - - get defaultCheckedValue() { - return this.defaultCheckedValue_; - }, - - set defaultCheckedValue(defaultCheckedValue) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.defaultCheckedValue_ = defaultCheckedValue; - this.maybeInit_(); - }, - - get settingsKey() { - return this.settingsKey_; - }, - - set settingsKey(settingsKey) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.settingsKey_ = settingsKey; - this.maybeInit_(); - }, - - maybeInit_: function() { - if (!this.needsInit_) - return; - if (this.settingsKey_ === undefined) - return; - if (this.defaultCheckedValue_ === undefined) - return; - this.needsInit_ = false; - this.checked = tr.b.Settings.get( - this.settingsKey_, this.defaultCheckedValue_); - }, - - get label() { - return this.label_; - }, - - set label(label) { - this.label_ = label; - this.maybeUpdateElements_(); - }, - - get checked() { - return this.checked_; - }, - - set checked(checked) { - this.checked_ = checked; - this.maybeUpdateElements_(); - tr.b.Settings.set(this.settingsKey_, this.checked_); - }, - - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker.html b/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker.html deleted file mode 100644 index 261b15922bd..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker.html +++ /dev/null @@ -1,111 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/checkbox.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<polymer-element name='tr-ui-b-checkbox-picker'> - <template> - <style> - #container { - display: flex; - flex-direction: column; - } - </style> - - <div id="container"> - </div> - - </template> - - <script> - 'use strict'; - - Polymer({ - created: function() { - this.needsInit_ = true; - this.settingsKey_ = undefined; - this.is_ready_ = false; - this.checkboxes_ = undefined; - }, - - ready: function() { - this.is_ready_ = true; - this.maybeInit_(); - this.maybeRenderCheckboxes_(); - }, - - get settingsKey() { - return this.settingsKey_; - }, - - set settingsKey(settingsKey) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.settingsKey_ = settingsKey; - this.maybeInit_(); - }, - - maybeInit_: function() { - if (!this.needsInit_) - return; - if (this.settingsKey_ === undefined) - return; - if (this.checkboxes_ === undefined) - return; - - this.needsInit_ = false; - - for (var key in this.checkboxes_) { - this.checkboxes_[key].defaultCheckedValue = false; - this.checkboxes_[key].settingsKey = this.settingsKey_ + key; - } - }, - - set items(items) { - this.checkboxes_ = {}; - items.forEach(function(e) { - if (e.key in this.checkboxes_) - throw new Error(e.key + ' already exists'); - var checkboxEl = document.createElement('tr-ui-b-checkbox'); - checkboxEl.label = e.label; - this.checkboxes_[e.key] = checkboxEl; - }.bind(this)); - this.maybeInit_(); - this.maybeRenderCheckboxes_(); - }, - - maybeRenderCheckboxes_: function() { - if (!this.is_ready_) - return; - if (this.checkboxes_ === undefined) - return; - for (var key in this.checkboxes_) - this.$.container.appendChild(this.checkboxes_[key]); - }, - - selectCheckbox: function(key) { - if (!(key in this.checkboxes_)) - throw new Error(key + ' does not exists'); - this.checkboxes_[key].checked = true; - }, - - unselectCheckbox: function(key) { - if (!(key in this.checkboxes_)) - throw new Error(key + ' does not exists'); - this.checkboxes_[key].checked = false; - }, - - get checkedKeys() { - return Object.keys(this.checkboxes_).filter(function(k) { - return this.checkboxes_[k].checked; - }.bind(this)); - }, - - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker_test.html deleted file mode 100644 index 40d83361fb6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_picker_test.html +++ /dev/null @@ -1,139 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/checkbox_picker.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basicAllCheckboxUnchecked', function() { - var cp = document.createElement('tr-ui-b-checkbox-picker'); - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Boeing', label: 'I want to fly'} - ]; - this.addHTMLOutput(cp); - assert.deepEqual(cp.checkedKeys, []); - }); - - test('basicSomeCheckboxChecked', function() { - var cp = document.createElement('tr-ui-b-checkbox-picker'); - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Tesla', label: 'I want to drive electric car'}, - ]; - - cp.selectCheckbox('Toyota'); - cp.selectCheckbox('Tesla'); - this.addHTMLOutput(cp); - assert.deepEqual(cp.checkedKeys.sort(), ['Tesla', 'Toyota']); - cp.unselectCheckbox('Toyota'); - assert.deepEqual(cp.checkedKeys, ['Tesla']); - }); - - test('duplicateKeys', function() { - var cp = document.createElement('tr-ui-b-checkbox-picker'); - assert.throws(function() { - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Toyota', label: 'I want to drive electric car'}, - ]; - }); - }); - - test('selectAndUnselectNonExistingKey', function() { - var cp = document.createElement('tr-ui-b-checkbox-picker'); - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - ]; - assert.throws(function() { - cp.selectCheckbox('Lamborghini'); - }); - assert.throws(function() { - cp.unselectCheckbox('Roll Royce'); - }); - }); - - test('testPersistentStateOneSetSettingsKeyBeforeSettingItems', function() { - var container1 = tr.ui.b.createDiv({textContent: 'Checkbox Picker One'}); - container1.style.border = 'solid'; - var cp = document.createElement('tr-ui-b-checkbox-picker'); - cp.settingsKey = 'checkbox-picker-test-one'; - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Tesla', label: 'I want to drive electric car'}, - ]; - cp.selectCheckbox('Toyota'); - cp.selectCheckbox('Tesla'); - container1.appendChild(cp); - this.addHTMLOutput(container1); - cp.unselectCheckbox('Tesla'); - assert.deepEqual(cp.checkedKeys, ['Toyota']); - - this.addHTMLOutput(document.createElement('br')); - - var container2 = tr.ui.b.createDiv( - {textContent: - 'Checkbox Picker Two (Same settingsKey as Checkbox Picker One)'}); - container2.style.border = 'solid #0000FF'; - var cp2 = document.createElement('tr-ui-b-checkbox-picker'); - cp2.settingsKey = 'checkbox-picker-test-one'; - cp2.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Tesla', label: 'I want to drive electric car'}, - ]; - container2.appendChild(cp2); - this.addHTMLOutput(container2); - assert.deepEqual(cp2.checkedKeys, ['Toyota']); - }); - - test('testPersistentStateTwoSetSettingsKeyAfterSettingItems', function() { - var container1 = tr.ui.b.createDiv({textContent: 'Checkbox Picker One'}); - container1.style.border = 'solid'; - var cp = document.createElement('tr-ui-b-checkbox-picker'); - cp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Tesla', label: 'I want to drive electric car'}, - ]; - cp.settingsKey = 'checkbox-picker-test-one'; - cp.selectCheckbox('Toyota'); - cp.selectCheckbox('Tesla'); - container1.appendChild(cp); - this.addHTMLOutput(container1); - assert.deepEqual(cp.checkedKeys.sort(), ['Tesla', 'Toyota']); - - this.addHTMLOutput(document.createElement('br')); - - var container2 = tr.ui.b.createDiv( - {textContent: - 'Checkbox Picker Two (Same settingsKey as Checkbox Picker One)'}); - container2.style.border = 'solid #0000FF'; - var cp2 = document.createElement('tr-ui-b-checkbox-picker'); - cp2.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Honda', label: 'I want to drive Honda'}, - {key: 'Tesla', label: 'I want to drive electric car'}, - ]; - container2.appendChild(cp2); - this.addHTMLOutput(container2); - cp2.settingsKey = 'checkbox-picker-test-one'; - assert.deepEqual(cp2.checkedKeys.sort(), ['Tesla', 'Toyota']); - - }); - - - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_test.html deleted file mode 100644 index 16f0223110a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/checkbox_test.html +++ /dev/null @@ -1,69 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/checkbox.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basicUnchecked', function() { - var checkbox = document.createElement('tr-ui-b-checkbox'); - checkbox.label = 'Yo like pizza?'; - this.addHTMLOutput(checkbox); - assert.equal(checkbox.label, 'Yo like pizza?'); - assert.isFalse(checkbox.checked); - }); - - test('basicChecked', function() { - var checkbox = document.createElement('tr-ui-b-checkbox'); - checkbox.label = 'Yo like cookie?'; - checkbox.checked = true; - this.addHTMLOutput(checkbox); - assert.equal(checkbox.label, 'Yo like cookie?'); - assert.isTrue(checkbox.checked); - }); - - test('testPersistentStateOneSetSettingsKeyBeforeAddToDom', function() { - var checkbox = document.createElement('tr-ui-b-checkbox'); - checkbox.settingsKey = 'checkbox-basic-test-one'; - checkbox.label = 'I like sushi'; - checkbox.defaultCheckedValue = false; - this.addHTMLOutput(checkbox); - assert.isFalse(checkbox.checked); - checkbox.checked = true; - - var checkbox2 = document.createElement('tr-ui-b-checkbox'); - checkbox2.label = 'I like sushi'; - checkbox2.defaultCheckedValue = false; - checkbox2.settingsKey = 'checkbox-basic-test-one'; - this.addHTMLOutput(checkbox2); - assert.isTrue(checkbox2.checked); - }); - - test('testPersistentStateTwoSetSettingsKeyAfterAddToDom', function() { - var checkbox = document.createElement('tr-ui-b-checkbox'); - this.addHTMLOutput(checkbox); - checkbox.label = 'I like Ramen'; - checkbox.settingsKey = 'checkbox-basic-test-two'; - checkbox.defaultCheckedValue = false; - assert.isFalse(checkbox.checked); - checkbox.checked = true; - - var checkbox2 = document.createElement('tr-ui-b-checkbox'); - this.addHTMLOutput(checkbox2); - checkbox2.label = 'I like Ramen'; - checkbox2.defaultCheckedValue = false; - checkbox2.settingsKey = 'checkbox-basic-test-two'; - assert.isTrue(checkbox2.checked); - }); - - - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend.html b/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend.html deleted file mode 100644 index 3804b4b144c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend.html +++ /dev/null @@ -1,79 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/base/color_scheme.html"> -<link rel="import" href="/tracing/model/compound_event_selection_state.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<!-- -@fileoverview A component used to display a label and a color square. - -The colored square is typically filled with the color associated with -that label, using the getColorId* methods from base/color_scheme. ---> -<polymer-element name="tr-ui-b-color-legend"> - <template> - <style> - :host { - display: inline-block; - } - - #square { - font-size: 150%; /* Make the square bigger. */ - line-height: 0%; /* Prevent the square from increasing legend height. */ - } - </style> - <span id="square"></span> - <span id="label"></span> - </template> - <script> - 'use strict'; - - Polymer({ - ready: function() { - var blackSquareCharCode = 9632; - this.$.square.innerText = String.fromCharCode(blackSquareCharCode); - this.label_ = undefined; - - this.compoundEventSelectionState_ = - tr.model.CompoundEventSelectionState.NOT_SELECTED; - }, - - set compoundEventSelectionState(compoundEventSelectionState) { - this.compoundEventSelectionState_ = compoundEventSelectionState; - // TODO(nduca): Adjust appearance based on associated state. - }, - - get label() { - return this.label_; - }, - - set label(label) { - if (label === undefined) { - this.setLabelAndColorId(undefined, undefined); - return; - } - - var colorId = tr.b.ColorScheme.getColorIdForGeneralPurposeString( - label); - this.setLabelAndColorId(label, colorId); - }, - - setLabelAndColorId: function(label, colorId) { - this.label_ = label; - - this.$.label.textContent = ''; - this.$.label.appendChild(tr.ui.b.asHTMLOrTextNode(label)); - - if (colorId === undefined) - this.$.square.style.color = 'initial'; - else - this.$.square.style.color = tr.b.ColorScheme.colorsAsStrings[colorId]; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend_test.html deleted file mode 100644 index fbe802d6a8f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/color_legend_test.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/ui/base/color_legend.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var CompoundEventSelectionState = tr.model.CompoundEventSelectionState; - - function checkSquareColor(colorLegend, expectedColor) { - assert.equal(getComputedStyle(colorLegend.$.square).color, expectedColor); - } - - test('noLabelSet', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(0, 0, 0)'); - }); - - test('undefinedLabel', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = undefined; - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(0, 0, 0)'); - }); - - test('emptyLabel', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = ''; - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(122, 98, 135)'); - }); - - test('nonEmptyLabel', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Frequency'; - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(83, 150, 97)'); - }); - - test('longLabel', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Total memory usage'; - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(96, 128, 137)'); - }); - - test('directlySetColorId', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.setLabelAndColorId('hello_world', 7 /* colorId */); - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(111, 145, 88)'); - }); - - test('directlyProvidedLabelElement', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.setLabelAndColorId( - tr.ui.b.createSpan({textContent: 'hello', - className: 'hello-span'}), - 7 /* colorId */); - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(111, 145, 88)'); - }); - - test('cessObjectSelected', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Object selected'; - colorLegend.compoundEventSelectionState = - CompoundEventSelectionState.EVENT_SELECTED; - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(143, 72, 161)'); - }); - - test('cessSomeAssociatedObjectsSelected', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Some associated objects selected'; - colorLegend.compoundEventSelectionState = - CompoundEventSelectionState.SOME_ASSOCIATED_EVENTS_SELECTED; - - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(159, 74, 86)'); - }); - - test('cessAllAssociatedObjectsSelected', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'All associated objects selected'; - colorLegend.compoundEventSelectionState = - CompoundEventSelectionState.ALL_ASSOCIATED_EVENTS_SELECTED; - - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(112, 91, 142)'); - }); - - test('cessObjectAndSomeAssociatedObjectsSelected', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Object and some associated objects selected'; - colorLegend.compoundEventSelectionState = - CompoundEventSelectionState.EVENT_AND_SOME_ASSOCIATED_SELECTED; - - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(83, 150, 97)'); - }); - - test('cessObjectAndAllAssociatedObjectsSelected', function() { - var colorLegend = document.createElement('tr-ui-b-color-legend'); - colorLegend.label = 'Object and all associated objects selected'; - colorLegend.compoundEventSelectionState = - CompoundEventSelectionState.EVENT_AND_ALL_ASSOCIATED_SELECTED; - - this.addHTMLOutput(colorLegend); - checkSquareColor(colorLegend, 'rgb(87, 109, 147)'); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/constants.html b/chromium/third_party/catapult/tracing/tracing/ui/base/constants.html deleted file mode 100644 index 1a412656369..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/constants.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var constants = { - HEADING_WIDTH: 250 - }; - - return { - constants: constants - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children.html b/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children.html deleted file mode 100644 index 11ed53a5fda..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children.html +++ /dev/null @@ -1,107 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/event.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -/** - * @fileoverview Container that decorates its children. - */ -tr.exportTo('tr.ui.b', function() { - /** - * @constructor - */ - var ContainerThatDecoratesItsChildren = tr.ui.b.define('div'); - - ContainerThatDecoratesItsChildren.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.observer_ = new WebKitMutationObserver(this.didMutate_.bind(this)); - this.observer_.observe(this, { childList: true }); - - // textContent is a variable on regular HTMLElements. However, we want to - // hook and prevent writes to it. - Object.defineProperty( - this, 'textContent', - { get: undefined, set: this.onSetTextContent_}); - }, - - appendChild: function(x) { - HTMLUnknownElement.prototype.appendChild.call(this, x); - this.didMutate_(this.observer_.takeRecords()); - }, - - insertBefore: function(x, y) { - HTMLUnknownElement.prototype.insertBefore.call(this, x, y); - this.didMutate_(this.observer_.takeRecords()); - }, - - removeChild: function(x) { - HTMLUnknownElement.prototype.removeChild.call(this, x); - this.didMutate_(this.observer_.takeRecords()); - }, - - replaceChild: function(x, y) { - HTMLUnknownElement.prototype.replaceChild.call(this, x, y); - this.didMutate_(this.observer_.takeRecords()); - }, - - onSetTextContent_: function(textContent) { - if (textContent != '') - throw new Error('textContent can only be set to \'\'.'); - this.clear(); - }, - - clear: function() { - while (this.lastChild) - HTMLUnknownElement.prototype.removeChild.call(this, this.lastChild); - this.didMutate_(this.observer_.takeRecords()); - }, - - didMutate_: function(records) { - this.beginDecorating_(); - for (var i = 0; i < records.length; i++) { - var addedNodes = records[i].addedNodes; - if (addedNodes) { - for (var j = 0; j < addedNodes.length; j++) - this.decorateChild_(addedNodes[j]); - } - var removedNodes = records[i].removedNodes; - if (removedNodes) { - for (var j = 0; j < removedNodes.length; j++) { - this.undecorateChild_(removedNodes[j]); - } - } - } - this.doneDecoratingForNow_(); - }, - - decorateChild_: function(child) { - throw new Error('Not implemented'); - }, - - undecorateChild_: function(child) { - throw new Error('Not implemented'); - }, - - beginDecorating_: function() { - }, - - doneDecoratingForNow_: function() { - } - }; - - return { - ContainerThatDecoratesItsChildren: ContainerThatDecoratesItsChildren - }; - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children_test.html deleted file mode 100644 index 0f7ff710061..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/container_that_decorates_its_children_test.html +++ /dev/null @@ -1,97 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - - function createChild() { - var span = document.createElement('span'); - span.decorated = false; - return span; - } - - /** - * @constructor - */ - var SimpleContainer = tr.ui.b.define( - 'simple-container', tr.ui.b.ContainerThatDecoratesItsChildren); - - SimpleContainer.prototype = { - __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, - - decorateChild_: function(child) { - assert.isFalse(child.decorated); - child.decorated = true; - }, - - undecorateChild_: function(child) { - assert.isTrue(child.decorated); - child.decorated = false; - } - }; - - test('add', function() { - var container = new SimpleContainer(); - container.appendChild(createChild()); - container.appendChild(createChild()); - container.appendChild(createChild()); - assert.isTrue(container.children[0].decorated); - assert.isTrue(container.children[1].decorated); - assert.isTrue(container.children[2].decorated); - }); - - test('clearUsingTextContent', function() { - var c0 = createChild(); - var container = new SimpleContainer(); - container.appendChild(c0); - container.textContent = ''; - assert.isFalse(c0.decorated); - }); - - test('clear', function() { - var c0 = createChild(); - var container = new SimpleContainer(); - container.appendChild(c0); - container.clear(); - assert.isFalse(c0.decorated); - }); - - test('insertNewBefore', function() { - var c0 = createChild(); - var c1 = createChild(); - var container = new SimpleContainer(); - container.appendChild(c1); - container.insertBefore(c0, c1); - assert.isTrue(c0.decorated); - assert.isTrue(c1.decorated); - }); - - test('insertExistingBefore', function() { - var c0 = createChild(); - var c1 = createChild(); - var container = new SimpleContainer(); - container.appendChild(c1); - container.appendChild(c0); - container.insertBefore(c0, c1); - assert.isTrue(c0.decorated); - assert.isTrue(c1.decorated); - }); - - test('testReplace', function() { - var c0 = createChild(); - var c1 = createChild(); - var container = new SimpleContainer(); - container.appendChild(c0); - container.replaceChild(c1, c0); - assert.isFalse(c0.decorated); - assert.isTrue(c1.decorated); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/d3.html b/chromium/third_party/catapult/tracing/tracing/ui/base/d3.html deleted file mode 100644 index ed4c962a25e..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/d3.html +++ /dev/null @@ -1,7 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<script src="/d3.min.js"></script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils.html b/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils.html deleted file mode 100644 index 6476dee1af1..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils.html +++ /dev/null @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> - -'use strict'; - -tr.exportTo('tr.b', function() { - function _iterateElementDeeplyImpl(element, cb, thisArg, includeElement) { - if (includeElement) { - if (cb.call(thisArg, element)) - return true; - } - - if (element.shadowRoot) { - if (_iterateElementDeeplyImpl(element.shadowRoot, cb, thisArg, false)) - return true; - } - for (var i = 0; i < element.children.length; i++) { - if (_iterateElementDeeplyImpl(element.children[i], cb, thisArg, true)) - return true; - } - } - function iterateElementDeeply(element, cb, thisArg) { - _iterateElementDeeplyImpl(element, cb, thisArg, false); - } - - function findDeepElementMatchingPredicate(element, predicate) { - var foundElement = undefined; - function matches(element) { - var match = predicate(element); - if (!match) - return false; - foundElement = element; - return true; - } - iterateElementDeeply(element, matches); - return foundElement; - } - - function findDeepElementsMatchingPredicate(element, predicate) { - var foundElements = []; - function matches(element) { - var match = predicate(element); - if (match) { - foundElements.push(element); - } - return false; - } - iterateElementDeeply(element, matches); - return foundElements; - } - - function findDeepElementMatching(element, selector) { - return findDeepElementMatchingPredicate(element, function(element) { - return element.matches(selector); - }); - } - function findDeepElementsMatching(element, selector) { - return findDeepElementsMatchingPredicate(element, function(element) { - return element.matches(selector); - }); - } - function findDeepElementWithTextContent(element, re) { - return findDeepElementMatchingPredicate(element, function(element) { - if (element.children.length !== 0) - return false; - return re.test(element.textContent); - }); - } - return { - iterateElementDeeply: iterateElementDeeply, - findDeepElementMatching: findDeepElementMatching, - findDeepElementsMatching: findDeepElementsMatching, - findDeepElementMatchingPredicate: findDeepElementMatchingPredicate, - findDeepElementsMatchingPredicate: findDeepElementsMatchingPredicate, - findDeepElementWithTextContent: findDeepElementWithTextContent - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils_test.html deleted file mode 100644 index fa0d843e106..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/deep_utils_test.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> - -<link rel="import" href="/tracing/ui/base/deep_utils.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function createElement(tagName, opt_class) { - var el = document.createElement(tagName); - if (opt_class) - el.className = opt_class; - return el; - } - - test('testFindDeepElementMatching', function() { - var a = createElement('a'); - var a_ = a.createShadowRoot(); - - var b = createElement('b'); - a_.appendChild(b); - - var b_ = b.createShadowRoot(); - b_.appendChild(createElement('c', 'x')); - - var m = tr.b.findDeepElementMatching(a, 'c.x'); - assert.equal(m, b_.children[0]); - }); - - test('testFindDeepElementsMatching', function() { - var a = createElement('a'); - var a_ = a.createShadowRoot(); - - var b = createElement('b'); - a_.appendChild(b); - - var b_ = b.createShadowRoot(); - b_.appendChild(createElement('c', 'x')); - b_.appendChild(createElement('c', 'x')); - - var m = tr.b.findDeepElementsMatching(a, 'c.x'); - assert.equal(m[0], b_.children[0]); - assert.equal(m[1], b_.children[1]); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers.html b/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers.html deleted file mode 100644 index 02af70a52fc..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers.html +++ /dev/null @@ -1,337 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<style> -* /deep/ .labeled-checkbox { - display: flex; - white-space: nowrap; -} -</style> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - - function createSpan(opt_dictionary) { - var ownerDocument = document; - if (opt_dictionary && opt_dictionary.ownerDocument) - ownerDocument = opt_dictionary.ownerDocument; - var spanEl = ownerDocument.createElement('span'); - if (opt_dictionary) { - if (opt_dictionary.className) - spanEl.className = opt_dictionary.className; - if (opt_dictionary.textContent) - spanEl.textContent = opt_dictionary.textContent; - if (opt_dictionary.tooltip) - spanEl.title = opt_dictionary.tooltip; - if (opt_dictionary.parent) - opt_dictionary.parent.appendChild(spanEl); - if (opt_dictionary.bold) - spanEl.style.fontWeight = 'bold'; - if (opt_dictionary.italic) - spanEl.style.fontStyle = 'italic'; - if (opt_dictionary.marginLeft) - spanEl.style.marginLeft = opt_dictionary.marginLeft; - if (opt_dictionary.marginRight) - spanEl.style.marginRight = opt_dictionary.marginRight; - if (opt_dictionary.backgroundColor) - spanEl.style.backgroundColor = opt_dictionary.backgroundColor; - if (opt_dictionary.color) - spanEl.style.color = opt_dictionary.color; - } - return spanEl; - }; - - function createDiv(opt_dictionary) { - var divEl = document.createElement('div'); - if (opt_dictionary) { - if (opt_dictionary.className) - divEl.className = opt_dictionary.className; - if (opt_dictionary.parent) - opt_dictionary.parent.appendChild(divEl); - if (opt_dictionary.textContent) - divEl.textContent = opt_dictionary.textContent; - if (opt_dictionary.maxWidth) - divEl.style.maxWidth = opt_dictionary.maxWidth; - } - return divEl; - }; - - function createScopedStyle(styleContent) { - var styleEl = document.createElement('style'); - styleEl.scoped = true; - styleEl.innerHTML = styleContent; - return styleEl; - } - - function valuesEqual(a, b) { - if (a instanceof Array && b instanceof Array) - return a.length === b.length && JSON.stringify(a) === JSON.stringify(b); - return a === b; - } - - function createSelector( - targetEl, targetElProperty, - settingsKey, defaultValue, - items, opt_namespace) { - var defaultValueIndex; - for (var i = 0; i < items.length; i++) { - var item = items[i]; - if (valuesEqual(item.value, defaultValue)) { - defaultValueIndex = i; - break; - } - } - if (defaultValueIndex === undefined) - throw new Error('defaultValue must be in the items list'); - - var selectorEl = document.createElement('select'); - selectorEl.addEventListener('change', onChange); - for (var i = 0; i < items.length; i++) { - var item = items[i]; - var optionEl = document.createElement('option'); - optionEl.textContent = item.label; - optionEl.targetPropertyValue = item.value; - optionEl.item = item; - selectorEl.appendChild(optionEl); - } - function onChange(e) { - var value = selectorEl.selectedOptions[0].targetPropertyValue; - tr.b.Settings.set(settingsKey, value, opt_namespace); - targetEl[targetElProperty] = value; - } - var oldSetter = targetEl.__lookupSetter__('selectedIndex'); - selectorEl.__defineGetter__('selectedValue', function(v) { - return selectorEl.children[selectorEl.selectedIndex].targetPropertyValue; - }); - selectorEl.__defineGetter__('selectedItem', function(v) { - return selectorEl.children[selectorEl.selectedIndex].item; - }); - selectorEl.__defineSetter__('selectedValue', function(v) { - for (var i = 0; i < selectorEl.children.length; i++) { - var value = selectorEl.children[i].targetPropertyValue; - if (valuesEqual(value, v)) { - var changed = selectorEl.selectedIndex != i; - if (changed) { - selectorEl.selectedIndex = i; - onChange(); - } - return; - } - } - throw new Error('Not a valid value'); - }); - - var initialValue = tr.b.Settings.get( - settingsKey, defaultValue, opt_namespace); - var didSet = false; - for (var i = 0; i < selectorEl.children.length; i++) { - if (valuesEqual(selectorEl.children[i].targetPropertyValue, - initialValue)) { - didSet = true; - targetEl[targetElProperty] = initialValue; - selectorEl.selectedIndex = i; - break; - } - } - if (!didSet) { - selectorEl.selectedIndex = defaultValueIndex; - targetEl[targetElProperty] = defaultValue; - } - - return selectorEl; - } - - function createEditCategorySpan(optionGroupEl, targetEl) { - var spanEl = createSpan({className: 'edit-categories'}); - spanEl.textContent = 'Edit categories'; - spanEl.classList.add('labeled-option'); - - spanEl.addEventListener('click', function() { - targetEl.onClickEditCategories(); - }); - return spanEl; - } - - function createOptionGroup(targetEl, targetElProperty, - settingsKey, defaultValue, - items) { - function onChange() { - var value = []; - if (this.value.length) - value = this.value.split(','); - tr.b.Settings.set(settingsKey, value); - targetEl[targetElProperty] = value; - } - - var optionGroupEl = createSpan({className: 'labeled-option-group'}); - var initialValue = tr.b.Settings.get(settingsKey, defaultValue); - for (var i = 0; i < items.length; ++i) { - var item = items[i]; - var id = 'category-preset-' + item.label.replace(/ /g, '-'); - - var radioEl = document.createElement('input'); - radioEl.type = 'radio'; - radioEl.setAttribute('id', id); - radioEl.setAttribute('name', 'category-presets-group'); - radioEl.setAttribute('value', item.value); - radioEl.addEventListener('change', onChange.bind(radioEl, targetEl, - targetElProperty, - settingsKey)); - if (valuesEqual(initialValue, item.value)) - radioEl.checked = true; - - var labelEl = document.createElement('label'); - labelEl.textContent = item.label; - labelEl.setAttribute('for', id); - - var spanEl = createSpan({className: 'labeled-option'}); - spanEl.appendChild(radioEl); - spanEl.appendChild(labelEl); - - spanEl.__defineSetter__('checked', function(opt_bool) { - var changed = radioEl.checked !== (!!opt_bool); - if (!changed) - return; - - radioEl.checked = !!opt_bool; - onChange(); - }); - spanEl.__defineGetter__('checked', function() { - return radioEl.checked; - }); - - optionGroupEl.appendChild(spanEl); - } - optionGroupEl.appendChild(createEditCategorySpan(optionGroupEl, targetEl)); - // Since this option group element is not yet added to the tree, - // querySelector will fail during updateEditCategoriesStatus_ call. - // Hence, creating the element with the 'expanded' classlist category - // added, if last selected value was 'Manual' selection. - if (!initialValue.length) - optionGroupEl.classList.add('categories-expanded'); - targetEl[targetElProperty] = initialValue; - - return optionGroupEl; - } - - var nextCheckboxId = 1; - function createCheckBox(targetEl, targetElProperty, - settingsKey, defaultValue, - label, opt_changeCb) { - var buttonEl = document.createElement('input'); - buttonEl.type = 'checkbox'; - - var initialValue = tr.b.Settings.get(settingsKey, defaultValue); - buttonEl.checked = !!initialValue; - if (targetEl) - targetEl[targetElProperty] = initialValue; - - function onChange() { - tr.b.Settings.set(settingsKey, buttonEl.checked); - if (targetEl) - targetEl[targetElProperty] = buttonEl.checked; - if (opt_changeCb) - opt_changeCb.call(); - } - - buttonEl.addEventListener('change', onChange); - - var id = '#checkbox-' + nextCheckboxId++; - - var spanEl = createSpan({className: 'labeled-checkbox'}); - buttonEl.setAttribute('id', id); - - var labelEl = document.createElement('label'); - labelEl.textContent = label; - labelEl.setAttribute('for', id); - spanEl.appendChild(buttonEl); - spanEl.appendChild(labelEl); - - spanEl.__defineSetter__('checked', function(opt_bool) { - var changed = buttonEl.checked !== (!!opt_bool); - if (!changed) - return; - - buttonEl.checked = !!opt_bool; - onChange(); - }); - spanEl.__defineGetter__('checked', function() { - return buttonEl.checked; - }); - - return spanEl; - } - - /** - * @param {!string} label - * @param {function()=} opt_callback - * @param {*=} opt_this - */ - function createButton(label, opt_callback, opt_this) { - var buttonEl = document.createElement('input'); - buttonEl.type = 'button'; - buttonEl.value = label; - - function onClick() { - opt_callback.call(opt_this || buttonEl); - } - - if (opt_callback) - buttonEl.addEventListener('click', onClick); - - return buttonEl; - } - - function createTextInput( - targetEl, targetElProperty, settingsKey, defaultValue) { - var initialValue = tr.b.Settings.get(settingsKey, defaultValue); - var el = document.createElement('input'); - el.type = 'text'; - function onChange(e) { - tr.b.Settings.set(settingsKey, el.value); - targetEl[targetElProperty] = el.value; - } - el.addEventListener('input', onChange); - el.value = initialValue; - targetEl[targetElProperty] = initialValue; - - return el; - } - - function isElementAttachedToDocument(el) { - var cur = el; - while (cur.parentNode) - cur = cur.parentNode; - return (cur === el.ownerDocument || cur.nodeName === '#document-fragment'); - } - - function asHTMLOrTextNode(value, opt_ownerDocument) { - if (value instanceof Node) - return value; - var ownerDocument = opt_ownerDocument || document; - return ownerDocument.createTextNode(value); - } - - return { - createSpan: createSpan, - createDiv: createDiv, - createScopedStyle: createScopedStyle, - createSelector: createSelector, - createOptionGroup: createOptionGroup, - createCheckBox: createCheckBox, - createButton: createButton, - createTextInput: createTextInput, - isElementAttachedToDocument: isElementAttachedToDocument, - asHTMLOrTextNode: asHTMLOrTextNode - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers_test.html deleted file mode 100644 index 64ba68ba36f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/dom_helpers_test.html +++ /dev/null @@ -1,151 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var THIS_DOC = document._currentScript.ownerDocument; - - test('simpleSpanAndDiv', function() { - var divEl = tr.ui.b.createDiv({ - className: 'a-div-class', parent: document.body - }); - var testText = 'some span text'; - var spanEl = tr.ui.b.createSpan({ - className: 'a-span-class', - textContent: testText, - parent: divEl - }); - var eltInDocument = document.querySelector('.a-div-class>.a-span-class'); - assert.equal(eltInDocument.textContent, testText); - eltInDocument.parentElement.removeChild(eltInDocument); - }); - - test('createSpan_ownerDocument', function() { - var spanEl = tr.ui.b.createSpan({ - className: 'a-span-class', - bold: true, - ownerDocument: THIS_DOC - }); - assert.strictEqual(spanEl.ownerDocument, THIS_DOC); - }); - - test('checkboxFromDefaults', function() { - var target = {foo: undefined}; - var cb = tr.ui.b.createCheckBox(target, 'foo', 'myCheckBox', false, 'Foo'); - assert.isFalse(target.foo); - }); - - test('checkboxFromSettings', function() { - tr.b.Settings.set('myCheckBox', true); - var target = {foo: undefined}; - var cb = tr.ui.b.createCheckBox(target, 'foo', 'myCheckBox', false, 'Foo'); - assert.isTrue(target.foo); - }); - - test('checkboxChanged', function() { - var target = {foo: undefined}; - var cb = tr.ui.b.createCheckBox(target, 'foo', 'myCheckBox', false, 'Foo'); - cb.checked = true; - - assert.isTrue(tr.b.Settings.get('myCheckBox', undefined)); - assert.isTrue(target.foo); - }); - - test('selectorSettingsAlreaySet', function() { - tr.b.Settings.set('myScale', 0.25); - - var target = { - scale: 314 - }; - var sel = tr.ui.b.createSelector( - target, 'scale', - 'myScale', 0.375, - [{label: '6.25%', value: 0.0625}, - {label: '12.5%', value: 0.125}, - {label: '25%', value: 0.25}, - {label: '37.5%', value: 0.375}, - {label: '50%', value: 0.5}, - {label: '75%', value: 0.75}, - {label: '100%', value: 1}, - {label: '200%', value: 2} - ]); - assert.equal(target.scale, 0.25); - assert.equal(sel.selectedIndex, 2); - }); - - test('selectorSettingsDefault', function() { - var target = { - scale: 314 - }; - var sel = tr.ui.b.createSelector( - target, 'scale', - 'myScale', 0.375, - [{label: '6.25%', value: 0.0625}, - {label: '12.5%', value: 0.125}, - {label: '25%', value: 0.25}, - {label: '37.5%', value: 0.375}, - {label: '50%', value: 0.5}, - {label: '75%', value: 0.75}, - {label: '100%', value: 1}, - {label: '200%', value: 2} - ]); - assert.equal(target.scale, 0.375); - assert.equal(sel.selectedIndex, 3); - }); - - test('selectorSettingsChanged', function() { - var target = { - scale: 314 - }; - var sel = tr.ui.b.createSelector( - target, 'scale', - 'myScale', 0.375, - [{label: '6.25%', value: 0.0625}, - {label: '12.5%', value: 0.125}, - {label: '25%', value: 0.25}, - {label: '37.5%', value: 0.375}, - {label: '50%', value: 0.5}, - {label: '75%', value: 0.75}, - {label: '100%', value: 1}, - {label: '200%', value: 2} - ]); - assert.equal(sel.selectedValue, 0.375); - sel.selectedValue = 0.75; - assert.equal(target.scale, 0.75); - assert.equal(sel.selectedValue, 0.75); - assert.equal(undefined), 0.75, tr.b.Settings.get('myScale'); - }); - - test('asHTMLOrTextNode_string', function() { - // Default owner document. - var node = tr.ui.b.asHTMLOrTextNode('Hello, World!'); - assert.instanceOf(node, Node); - assert.equal(node.textContent, 'Hello, World!'); - assert.strictEqual(node.ownerDocument, document); - - // Custom owner document. - var node = tr.ui.b.asHTMLOrTextNode('Bye, World!', THIS_DOC); - assert.instanceOf(node, Node); - assert.equal(node.textContent, 'Bye, World!'); - assert.strictEqual(node.ownerDocument, THIS_DOC); - }); - - test('asHTMLOrTextNode_node', function() { - // Node object. Owner document should NOT be modified. - var node = document.createTextNode('Hi', THIS_DOC); - assert.strictEqual(tr.ui.b.asHTMLOrTextNode(node), node); - assert.strictEqual(node.ownerDocument, document); - - // HTMLElement object. Owner document should NOT be modified. - var node = THIS_DOC.createElement('div'); - assert.strictEqual(tr.ui.b.asHTMLOrTextNode(node), node); - assert.strictEqual(node.ownerDocument, THIS_DOC); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle.html b/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle.html deleted file mode 100644 index d919bbbad93..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle.html +++ /dev/null @@ -1,184 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/ui.html"> - -<polymer-element name="tr-ui-b-drag-handle"> - <template> - <style> - :host { - -webkit-user-select: none; - box-sizing: border-box; - display: block; - } - - :host(.horizontal-drag-handle) { - background-image: -webkit-gradient(linear, - 0 0, 0 100%, - from(#E5E5E5), - to(#D1D1D1)); - border-bottom: 1px solid #8e8e8e; - border-top: 1px solid white; - cursor: ns-resize; - flex: 0 0 auto; - height: 7px; - position: relative; - } - - :host(.vertical-drag-handle) { - background-image: -webkit-gradient(linear, - 0 0, 100% 0, - from(#E5E5E5), - to(#D1D1D1)); - border-left: 1px solid white; - border-right: 1px solid #8e8e8e; - cursor: ew-resize; - flex: 0 0 auto; - position: relative; - width: 7px; - } - </style> - </template> - <script> - 'use strict'; - - Polymer({ - __proto__: HTMLDivElement.prototype, - - created: function() { - this.lastMousePos_ = 0; - this.onMouseMove_ = this.onMouseMove_.bind(this); - this.onMouseUp_ = this.onMouseUp_.bind(this); - this.addEventListener('mousedown', this.onMouseDown_); - this.target_ = undefined; - this.horizontal = true; - this.observer_ = new WebKitMutationObserver( - this.didTargetMutate_.bind(this)); - this.targetSizesByModeKey_ = {}; - }, - - get modeKey_() { - return this.target_.className == '' ? '.' : this.target_.className; - }, - - get target() { - return this.target_; - }, - - set target(target) { - this.observer_.disconnect(); - this.target_ = target; - if (!this.target_) - return; - this.observer_.observe(this.target_, { - attributes: true, - attributeFilter: ['class'] - }); - }, - - get horizontal() { - return this.horizontal_; - }, - - set horizontal(h) { - this.horizontal_ = h; - if (this.horizontal_) - this.className = 'horizontal-drag-handle'; - else - this.className = 'vertical-drag-handle'; - }, - - get vertical() { - return !this.horizontal_; - }, - - set vertical(v) { - this.horizontal = !v; - }, - - forceMutationObserverFlush_: function() { - var records = this.observer_.takeRecords(); - if (records.length) - this.didTargetMutate_(records); - }, - - didTargetMutate_: function(e) { - var modeSize = this.targetSizesByModeKey_[this.modeKey_]; - if (modeSize !== undefined) { - this.setTargetSize_(modeSize); - return; - } - - // If we hadn't previously sized the target, then just remove any manual - // sizing that we applied. - this.target_.style[this.targetStyleKey_] = ''; - }, - - get targetStyleKey_() { - return this.horizontal_ ? 'height' : 'width'; - }, - - getTargetSize_: function() { - // If style is not set, start off with computed height. - var targetStyleKey = this.targetStyleKey_; - if (!this.target_.style[targetStyleKey]) { - this.target_.style[targetStyleKey] = - window.getComputedStyle(this.target_)[targetStyleKey]; - } - var size = parseInt(this.target_.style[targetStyleKey]); - this.targetSizesByModeKey_[this.modeKey_] = size; - return size; - }, - - setTargetSize_: function(s) { - this.target_.style[this.targetStyleKey_] = s + 'px'; - this.targetSizesByModeKey_[this.modeKey_] = s; - }, - - applyDelta_: function(delta) { - // Apply new size to the container. - var curSize = this.getTargetSize_(); - var newSize; - if (this.target_ === this.nextElementSibling) { - newSize = curSize + delta; - } else { - newSize = curSize - delta; - } - this.setTargetSize_(newSize); - }, - - onMouseMove_: function(e) { - // Compute the difference in height position. - var curMousePos = this.horizontal_ ? e.clientY : e.clientX; - var delta = this.lastMousePos_ - curMousePos; - - this.applyDelta_(delta); - - this.lastMousePos_ = curMousePos; - e.preventDefault(); - return true; - }, - - onMouseDown_: function(e) { - if (!this.target_) - return; - this.forceMutationObserverFlush_(); - this.lastMousePos_ = this.horizontal_ ? e.clientY : e.clientX; - document.addEventListener('mousemove', this.onMouseMove_); - document.addEventListener('mouseup', this.onMouseUp_); - e.preventDefault(); - return true; - }, - - onMouseUp_: function(e) { - document.removeEventListener('mousemove', this.onMouseMove_); - document.removeEventListener('mouseup', this.onMouseUp_); - e.preventDefault(); - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle_test.html deleted file mode 100644 index bd52880503d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/drag_handle_test.html +++ /dev/null @@ -1,94 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/drag_handle.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var createDragHandle = function() { - var el = document.createElement('div'); - el.style.border = '1px solid black'; - el.style.width = '200px'; - el.style.height = '200px'; - el.style.display = 'flex'; - el.style.flexDirection = 'column'; - - var upperEl = document.createElement('div'); - upperEl.style.flex = '1 1 auto'; - upperEl.style.minHeight = '0'; - - var lowerEl = document.createElement('div'); - lowerEl.style.height = '100px'; - - var dragHandle = document.createElement('tr-ui-b-drag-handle'); - dragHandle.target = lowerEl; - - el.appendChild(upperEl); - el.appendChild(dragHandle); - el.appendChild(lowerEl); - el.upperEl = upperEl; - el.dragHandle = dragHandle; - el.lowerEl = lowerEl; - - el.getLowerElHeight = function() { - return parseInt(getComputedStyle(this.lowerEl).height); - }; - return el; - }; - - test('instantiate', function() { - this.addHTMLOutput(createDragHandle()); - }); - - test('applyDelta', function() { - var el = createDragHandle(); - this.addHTMLOutput(el); - - var dragHandle = el.dragHandle; - var oldHeight = el.getLowerElHeight(); - dragHandle.applyDelta_(10); - assert.equal(el.getLowerElHeight(), oldHeight + 10); - }); - - test('classNameMutation', function() { - var el = createDragHandle(); - - var styleEl = document.createElement('style'); - styleEl.textContent = - '.mode-a { height: 100px; } .mode-b { height: 50px; }'; - document.head.appendChild(styleEl); - - this.addHTMLOutput(el); - - try { - var dragHandle = el.dragHandle; - el.lowerEl.className = 'mode-a'; - assert.equal(el.getLowerElHeight(), 100); - - dragHandle.applyDelta_(10); - assert.equal(el.getLowerElHeight(), 110); - - // Change the class, which should restore the layout - // to the default sizing for mode-b - el.lowerEl.className = 'mode-b'; - dragHandle.forceMutationObserverFlush_(); - assert.equal(el.getLowerElHeight(), 50); - - dragHandle.applyDelta_(10); - assert.equal(el.getLowerElHeight(), 60); - - // Restore the class-a, which should restore the layout - // to sizing when we were changed. - el.lowerEl.className = 'mode-a'; - dragHandle.forceMutationObserverFlush_(); - assert.equal(el.getLowerElHeight(), 110); - } finally { - document.head.removeChild(styleEl); - } - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/draw_helpers.html b/chromium/third_party/catapult/tracing/tracing/ui/base/draw_helpers.html deleted file mode 100644 index 981f16da3e6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/draw_helpers.html +++ /dev/null @@ -1,419 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> - -<link rel="import" href="/tracing/ui/base/event_presenter.html"> -<link rel="import" href="/tracing/base/sorted_array_utils.html"> -<link rel="import" href="/tracing/ui/base/elided_cache.html"> - -<script> -'use strict'; - -/** - * @fileoverview Provides various helper methods for drawing to a provided - * canvas. - */ -tr.exportTo('tr.ui.b', function() { - var elidedTitleCache = new tr.ui.b.ElidedTitleCache(); - var ColorScheme = tr.b.ColorScheme; - var colorsAsStrings = ColorScheme.colorsAsStrings; - - var EventPresenter = tr.ui.b.EventPresenter; - var blackColorId = ColorScheme.getColorIdForReservedName('black'); - - /** - * This value is used to allow for consistent style UI elements. - * Thread time visualisation uses a smaller rectangle that has this height. - * @const - */ - var THIN_SLICE_HEIGHT = 4; - - /** - * This value is used to for performance considerations when drawing large - * zoomed out traces that feature cpu time in the slices. If the waiting - * width is less than the threshold, we only draw the rectangle as a solid. - * @const - */ - var SLICE_WAITING_WIDTH_DRAW_THRESHOLD = 3; - - /** - * If the slice has mostly been waiting to be scheduled on the cpu, the - * wall clock will be far greater than the cpu clock. Draw the slice - * only as an idle slice, if the active width is not thicker than the - * threshold. - * @const - */ - var SLICE_ACTIVE_WIDTH_DRAW_THRESHOLD = 1; - - /** - * Should we elide text on trace labels? - * Without eliding, text that is too wide isn't drawn at all. - * Disable if you feel this causes a performance problem. - * This is a default value that can be overridden in tracks for testing. - * @const - */ - var SHOULD_ELIDE_TEXT = true; - - /** - * Draw the define line into |ctx|. - * - * @param {Context} ctx The context to draw into. - * @param {float} x1 The start x position of the line. - * @param {float} y1 The start y position of the line. - * @param {float} x2 The end x position of the line. - * @param {float} y2 The end y position of the line. - */ - function drawLine(ctx, x1, y1, x2, y2) { - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - } - - /** - * Draw the defined triangle into |ctx|. - * - * @param {Context} ctx The context to draw into. - * @param {float} x1 The first corner x. - * @param {float} y1 The first corner y. - * @param {float} x2 The second corner x. - * @param {float} y2 The second corner y. - * @param {float} x3 The third corner x. - * @param {float} y3 The third corner y. - */ - function drawTriangle(ctx, x1, y1, x2, y2, x3, y3) { - ctx.beginPath(); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.lineTo(x3, y3); - ctx.closePath(); - } - - /** - * Draw an arrow into |ctx|. - * - * @param {Context} ctx The context to draw into. - * @param {float} x1 The shaft x. - * @param {float} y1 The shaft y. - * @param {float} x2 The head x. - * @param {float} y2 The head y. - * @param {float} arrowLength The length of the head. - * @param {float} arrowWidth The width of the head. - */ - function drawArrow(ctx, x1, y1, x2, y2, arrowLength, arrowWidth) { - var dx = x2 - x1; - var dy = y2 - y1; - var len = Math.sqrt(dx * dx + dy * dy); - var perc = (len - arrowLength) / len; - var bx = x1 + perc * dx; - var by = y1 + perc * dy; - var ux = dx / len; - var uy = dy / len; - var ax = uy * arrowWidth; - var ay = -ux * arrowWidth; - - ctx.beginPath(); - drawLine(ctx, x1, y1, x2, y2); - ctx.stroke(); - - drawTriangle(ctx, - bx + ax, by + ay, - x2, y2, - bx - ax, by - ay); - ctx.fill(); - } - - /** - * Draw the provided slices to the screen. - * - * Each of the elements in |slices| must provide the follow methods: - * * start - * * duration - * * colorId - * * selected - * - * @param {Context} ctx The canvas context. - * @param {TimelineDrawTransform} dt The draw transform. - * @param {float} viewLWorld The left most point of the world viewport. - * @param {float} viewRWorld The right most point of the world viewport. - * @param {float} viewHeight The height of the viewport. - * @param {Array} slices The slices to draw. - * @param {bool} async Whether the slices are drawn with async style. - */ - function drawSlices(ctx, dt, viewLWorld, viewRWorld, viewHeight, slices, - async) { - var pixelRatio = window.devicePixelRatio || 1; - var pixWidth = dt.xViewVectorToWorld(1); - var height = viewHeight * pixelRatio; - - var darkRectHeight = THIN_SLICE_HEIGHT * pixelRatio; - - // Not enough space for both colors, use light color only. - if (height < darkRectHeight) - darkRectHeight = 0; - - var lightRectHeight = height - darkRectHeight; - - // Begin rendering in world space. - ctx.save(); - dt.applyTransformToCanvas(ctx); - - var rect = new tr.ui.b.FastRectRenderer( - ctx, 2 * pixWidth, 2 * pixWidth, colorsAsStrings); - rect.setYandH(0, height); - - var lowSlice = tr.b.findLowIndexInSortedArray( - slices, - function(slice) { return slice.start + slice.duration; }, - viewLWorld); - - var hadTopLevel = false; - - for (var i = lowSlice; i < slices.length; ++i) { - var slice = slices[i]; - var x = slice.start; - if (x > viewRWorld) - break; - - var w = pixWidth; - if (slice.duration > 0) { - w = Math.max(slice.duration, 0.000001); - if (w < pixWidth) - w = pixWidth; - } - - var colorId = EventPresenter.getSliceColorId(slice); - var alpha = EventPresenter.getSliceAlpha(slice, async); - var lightAlpha = alpha * 0.70; - - if (async && slice.isTopLevel) { - rect.setYandH(3, height - 3); - hadTopLevel = true; - } else { - rect.setYandH(0, height); - } - - // If cpuDuration is available, draw rectangles proportional to the - // amount of cpu time taken. - if (!slice.cpuDuration) { - // No cpuDuration available, draw using only one alpha. - rect.fillRect(x, w, colorId, alpha); - continue; - } - - var activeWidth = w * (slice.cpuDuration / slice.duration); - var waitingWidth = w - activeWidth; - - // Check if we have enough screen space to draw the whole slice, with - // both color tones. - // - // Truncate the activeWidth to 0 if it is less than 'threshold' pixels. - if (activeWidth < SLICE_ACTIVE_WIDTH_DRAW_THRESHOLD * pixWidth) { - activeWidth = 0; - waitingWidth = w; - } - - // Truncate the waitingWidth to 0 if it is less than 'threshold' pixels. - if (waitingWidth < SLICE_WAITING_WIDTH_DRAW_THRESHOLD * pixWidth) { - activeWidth = w; - waitingWidth = 0; - } - - // We now draw the two rectangles making up the event slice. - // NOTE: The if statements are necessary for performance considerations. - // We do not want to force draws, if the width of the rectangle is 0. - // - // First draw the solid color, representing the 'active' part. - if (activeWidth > 0) { - rect.fillRect(x, activeWidth, colorId, alpha); - } - - // Next draw the two toned 'idle' part. - // NOTE: Substracting pixWidth and drawing one extra pixel is done to - // prevent drawing artifacts. Without it, the two parts of the slice, - // ('active' and 'idle') may appear split apart. - if (waitingWidth > 0) { - // First draw the light toned top part. - rect.setYandH(0, lightRectHeight); - rect.fillRect(x + activeWidth - pixWidth, - waitingWidth + pixWidth, colorId, lightAlpha); - // Then the solid bottom half. - rect.setYandH(lightRectHeight, darkRectHeight); - rect.fillRect(x + activeWidth - pixWidth, - waitingWidth + pixWidth, colorId, alpha); - // Reset for the next slice. - rect.setYandH(0, height); - } - } - rect.flush(); - - if (async && hadTopLevel) { - // Draw a top border over async slices in order to visually separate - // them from events above it. - // See https://github.com/google/trace-viewer/issues/725. - rect.setYandH(2, 1); - for (var i = lowSlice; i < slices.length; ++i) { - var slice = slices[i]; - var x = slice.start; - if (x > viewRWorld) - break; - - if (!slice.isTopLevel) - continue; - - var w = pixWidth; - if (slice.duration > 0) { - w = Math.max(slice.duration, 0.000001); - if (w < pixWidth) - w = pixWidth; - } - - rect.fillRect(x, w, blackColorId, 0.7); - } - rect.flush(); - } - - ctx.restore(); - } - - /** - * Draw the provided instant slices as lines to the screen. - * - * Each of the elements in |slices| must provide the follow methods: - * * start - * * duration with value of 0. - * * colorId - * * selected - * - * @param {Context} ctx The canvas context. - * @param {TimelineDrawTransform} dt The draw transform. - * @param {float} viewLWorld The left most point of the world viewport. - * @param {float} viewRWorld The right most point of the world viewport. - * @param {float} viewHeight The height of the viewport. - * @param {Array} slices The slices to draw. - * @param {Numer} lineWidthInPixels The width of the lines. - */ - function drawInstantSlicesAsLines( - ctx, dt, viewLWorld, viewRWorld, viewHeight, slices, lineWidthInPixels) { - var pixelRatio = window.devicePixelRatio || 1; - var height = viewHeight * pixelRatio; - - var pixWidth = dt.xViewVectorToWorld(1); - - // Begin rendering in world space. - ctx.save(); - ctx.lineWidth = pixWidth * lineWidthInPixels * pixelRatio; - dt.applyTransformToCanvas(ctx); - ctx.beginPath(); - - var lowSlice = tr.b.findLowIndexInSortedArray( - slices, - function(slice) { return slice.start; }, - viewLWorld); - - for (var i = lowSlice; i < slices.length; ++i) { - var slice = slices[i]; - var x = slice.start; - if (x > viewRWorld) - break; - - ctx.strokeStyle = EventPresenter.getInstantSliceColor(slice); - - ctx.beginPath(); - ctx.moveTo(x, 0); - ctx.lineTo(x, height); - ctx.stroke(); - } - ctx.restore(); - } - - /** - * Draws the labels for the given slices. - * - * The |slices| array must contain objects with the following API: - * * start - * * duration - * * title - * * didNotFinish (optional) - * - * @param {Context} ctx The graphics context. - * @param {TimelineDrawTransform} dt The draw transform. - * @param {float} viewLWorld The left most point of the world viewport. - * @param {float} viewRWorld The right most point of the world viewport. - * @param {Array} slices The slices to label. - * @param {bool} async Whether the slice labels are drawn with async style. - * @param {float} fontSize The font size. - * @param {float} yOffset The font offset. - */ - function drawLabels(ctx, dt, viewLWorld, viewRWorld, slices, async, - fontSize, yOffset) { - var pixelRatio = window.devicePixelRatio || 1; - var pixWidth = dt.xViewVectorToWorld(1); - - ctx.save(); - - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.font = (fontSize * pixelRatio) + 'px sans-serif'; - - if (async) - ctx.font = 'italic ' + ctx.font; - - var cY = yOffset * pixelRatio; - - var lowSlice = tr.b.findLowIndexInSortedArray( - slices, - function(slice) { return slice.start + slice.duration; }, - viewLWorld); - - // Don't render text until until it is 20px wide - var quickDiscardThresshold = pixWidth * 20; - for (var i = lowSlice; i < slices.length; ++i) { - var slice = slices[i]; - if (slice.start > viewRWorld) - break; - - if (slice.duration <= quickDiscardThresshold) - continue; - - var title = slice.title + - (slice.didNotFinish ? ' (Did Not Finish)' : ''); - - var drawnTitle = title; - var drawnWidth = elidedTitleCache.labelWidth(ctx, drawnTitle); - var fullLabelWidth = elidedTitleCache.labelWidthWorld( - ctx, drawnTitle, pixWidth); - if (SHOULD_ELIDE_TEXT && fullLabelWidth > slice.duration) { - var elidedValues = elidedTitleCache.get( - ctx, pixWidth, - drawnTitle, drawnWidth, - slice.duration); - drawnTitle = elidedValues.string; - drawnWidth = elidedValues.width; - } - - if (drawnWidth * pixWidth < slice.duration) { - ctx.fillStyle = EventPresenter.getTextColor(slice); - var cX = dt.xWorldToView(slice.start + 0.5 * slice.duration); - ctx.fillText(drawnTitle, cX, cY, drawnWidth); - } - } - ctx.restore(); - } - - return { - drawSlices: drawSlices, - drawInstantSlicesAsLines: drawInstantSlicesAsLines, - drawLabels: drawLabels, - - drawLine: drawLine, - drawTriangle: drawTriangle, - drawArrow: drawArrow, - - elidedTitleCache_: elidedTitleCache, - - THIN_SLICE_HEIGHT: THIN_SLICE_HEIGHT - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown.html b/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown.html deleted file mode 100644 index 2d0fe220eef..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown.html +++ /dev/null @@ -1,158 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/base/base.html"> - -<polymer-element name="tr-ui-b-dropdown"> - <template> - <style> - :host { - position: relative; - display: flex; - } - #outer { - display: flex; - flex: 0 0 auto; - padding: 1px 4px 1px 4px; - -webkit-user-select: none; - cursor: default; - } - - #state { - display: flex; - flex: 0 0 auto; - margin-left: 2px; - margin-right: 0px; - flex: 0 0 auto; - } - - #icon { - display: flex; - flex: 0 0 auto; - flex: 0 0 auto; - } - dialog { - position: absolute; - padding: 0; - border: 0; - margin: 0; - } - dialog::backdrop { - background: rgba(0,0,0,.05); - } - - #dialog-frame { - background-color: #fff; - display: flex; - flex-direction: column; - flex: 1 1 auto; - padding: 6px; - border: 1px solid black; - -webkit-user-select: none; - cursor: default; - } - </style> - <tr-ui-b-toolbar-button id="outer" - on-keydown="{{ onOuterKeyDown_ }}" - on-click="{{ onOuterClick_ }}"> - <div id="icon">⚙</div> - <div id="state">▾</div> - </tr-ui-b-toolbar-button> - <dialog id="dialog" - on-click="{{ onDialogClick_ }}" - on-cancel="{{ onDialogCancel_ }}"> - <div id="dialog-frame"> - <content></content> - </div> - </dialog> - </template> - <script> - 'use strict'; - - Polymer({ - ready: function() { - this.$.outer.tabIndex = 0; - }, - - get iconElement() { - return this.$.icon; - }, - - onOuterKeyDown_: function(e) { - if (e.keyCode === ' '.charCodeAt(0)) { - this.toggle_(); - e.preventDefault(); - e.stopPropagation(); - } - }, - - onOuterClick_: function(e) { - var or = this.$.outer.getBoundingClientRect(); - var inside = true; - inside &= e.clientX >= or.left; - inside &= e.clientX < or.right; - inside &= e.clientY >= or.top; - inside &= e.clientY < or.bottom; - if (!inside) - return; - - e.preventDefault(); - this.toggle_(); - }, - - toggle_: function() { - if (!this.isOpen) - this.show(); - else - this.close(); - }, - - show: function() { - if (this.isOpen) - return; - - this.$.outer.classList.add('open'); - - var ddr = this.$.outer.getBoundingClientRect(); - var rW = Math.max(ddr.width, 150); - this.$.dialog.style.minWidth = rW + 'px'; - this.$.dialog.showModal(); - - var ddw = this.$.outer.getBoundingClientRect().width; - var w = this.$.dialog.getBoundingClientRect().width; - this.$.dialog.style.top = ddr.bottom - 1 + 'px'; - this.$.dialog.style.left = ddr.left + 'px'; - }, - - onDialogClick_: function(e) { - if (!this.isOpen) - return; - if (e.srcElement !== this.$.dialog) - return; - e.preventDefault(); - this.close(); - }, - - onDialogCancel_: function(e) { - e.preventDefault(); - this.close(); - }, - - close: function() { - if (!this.isOpen) - return; - this.$.dialog.close(); - this.$.outer.classList.remove('open'); - this.$.outer.focus(); - }, - - get isOpen() { - return this.$.dialog.hasAttribute('open'); - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown_test.html deleted file mode 100644 index 8801a927a1f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/dropdown_test.html +++ /dev/null @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/ui/base/dropdown.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basic', function() { - var dd = document.createElement('tr-ui-b-dropdown'); - dd.style.marginLeft = '50px'; - dd.style.width = '50px'; - dd.iconElement.textContent = 'Settings ' + String.fromCharCode(0x2699); - - dd.appendChild(tr.ui.b.createDiv({textContent: 'item 1'})); - dd.appendChild(tr.ui.b.createDiv({textContent: 'item 2 longer'})); - dd.appendChild(tr.ui.b.createDiv({textContent: 'item 3'})); - - var container = tr.ui.b.createDiv(); - container.style.height = '100px'; - container.appendChild(dd); - container.appendChild(tr.ui.b.createDiv({textContent: 'some text'})); - container.appendChild(tr.ui.b.createDiv({textContent: 'some more text'})); - container.appendChild(tr.ui.b.createDiv({textContent: 'more text'})); - this.addHTMLOutput(container); - - dd.show(); - dd.close(); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/elided_cache.html b/chromium/third_party/catapult/tracing/tracing/ui/base/elided_cache.html deleted file mode 100644 index 7019f9807da..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/elided_cache.html +++ /dev/null @@ -1,113 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -/** - * @fileoverview Provides a caching layer for elided text values. - */ -tr.exportTo('tr.ui.b', function() { - /** - * Cache for elided strings. - * Moved from the ElidedTitleCache protoype to a "global" for speed - * (variable reference is 100x faster). - * key: String we wish to elide. - * value: Another dict whose key is width - * and value is an ElidedStringWidthPair. - */ - var elidedTitleCacheDict = {}; - var elidedTitleCache = new ElidedTitleCache(); - - /** - * A cache for elided strings. - * @constructor - */ - function ElidedTitleCache() { - // TODO(jrg): possibly obsoleted with the elided string cache. - // Consider removing. - this.textWidthMap = {}; - } - - ElidedTitleCache.prototype = { - /** - * Return elided text. - * - * @param {ctx} Context The graphics context. - * @param {pixWidth} Pixel width. - * @param {title} Original title text. - * @param {width} Drawn width in world coords. - * @param {sliceDuration} Where the title must fit (in world coords). - * @return {ElidedStringWidthPair} Elided string and width. - */ - get: function(ctx, pixWidth, title, width, sliceDuration) { - var elidedDict = elidedTitleCacheDict[title]; - if (!elidedDict) { - elidedDict = {}; - elidedTitleCacheDict[title] = elidedDict; - } - - var elidedDictForPixWidth = elidedDict[pixWidth]; - if (!elidedDictForPixWidth) { - elidedDict[pixWidth] = {}; - elidedDictForPixWidth = elidedDict[pixWidth]; - } - - var stringWidthPair = elidedDictForPixWidth[sliceDuration]; - if (stringWidthPair === undefined) { - var newtitle = title; - var elided = false; - while (this.labelWidthWorld(ctx, newtitle, pixWidth) > sliceDuration) { - if (newtitle.length * 0.75 < 1) - break; - newtitle = newtitle.substring(0, newtitle.length * 0.75); - elided = true; - } - - if (elided && newtitle.length > 3) - newtitle = newtitle.substring(0, newtitle.length - 3) + '...'; - - stringWidthPair = new ElidedStringWidthPair( - newtitle, this.labelWidth(ctx, newtitle)); - elidedDictForPixWidth[sliceDuration] = stringWidthPair; - } - return stringWidthPair; - }, - - quickMeasureText_: function(ctx, text) { - var w = this.textWidthMap[text]; - if (!w) { - w = ctx.measureText(text).width; - this.textWidthMap[text] = w; - } - return w; - }, - - labelWidth: function(ctx, title) { - return this.quickMeasureText_(ctx, title) + 2; - }, - - labelWidthWorld: function(ctx, title, pixWidth) { - return this.labelWidth(ctx, title) * pixWidth; - } - }; - - /** - * A pair representing an elided string and world-coordinate width - * to draw it. - * @constructor - */ - function ElidedStringWidthPair(string, width) { - this.string = string; - this.width = width; - } - - return { - ElidedTitleCache: ElidedTitleCache - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/event_presenter.html b/chromium/third_party/catapult/tracing/tracing/ui/base/event_presenter.html deleted file mode 100644 index 68497381687..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/event_presenter.html +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2012 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. ---> - -<link rel="import" href="/tracing/base/color_scheme.html"> -<link rel="import" href="/tracing/model/selection_state.html"> - -<script> -'use strict'; - -/** - * @fileoverview Provides color scheme related functions. - */ -tr.exportTo('tr.ui.b', function() { - var ColorScheme = tr.b.ColorScheme; - - var colors = ColorScheme.colors; - var colorsAsStrings = ColorScheme.colorsAsStrings; - var numColorsPerVariant = ColorScheme.properties.numColorsPerVariant; - - var SelectionState = tr.model.SelectionState; - - /** - * Provides methods to get view values for events. - */ - var EventPresenter = { - getSelectableItemColorAsString: function(item) { - var colorId = item.colorId + this.getColorIdOffset_(item); - return colorsAsStrings[colorId]; - }, - - getColorIdOffset_: function(event) { - return event.selectionState; - }, - - getTextColor: function(event) { - if (event.selectionState === SelectionState.DIMMED) - return 'rgb(60,60,60)'; - return 'rgb(0,0,0)'; - }, - - getSliceColorId: function(slice) { - return slice.colorId + this.getColorIdOffset_(slice); - }, - - getSliceAlpha: function(slice, async) { - var alpha = 1; - if (async) - alpha *= 0.3; - return alpha; - }, - - getInstantSliceColor: function(instant) { - var colorId = instant.colorId + this.getColorIdOffset_(instant); - return colors[colorId].toStringWithAlphaOverride(1.0); - }, - - getObjectInstanceColor: function(instance) { - var colorId = instance.colorId + this.getColorIdOffset_(instance); - return colors[colorId].toStringWithAlphaOverride(0.25); - }, - - getObjectSnapshotColor: function(snapshot) { - var colorId = - snapshot.objectInstance.colorId + this.getColorIdOffset_(snapshot); - return colors[colorId]; - }, - - getCounterSeriesColor: function(colorId, selectionState, - opt_alphaMultiplier) { - var event = {selectionState: selectionState}; - var c = colors[colorId + this.getColorIdOffset_(event)]; - return c.toStringWithAlphaOverride( - opt_alphaMultiplier !== undefined ? opt_alphaMultiplier : 1.0); - }, - - getBarSnapshotColor: function(snapshot, offset) { - var colorId = - (snapshot.objectInstance.colorId + offset) % - numColorsPerVariant; - colorId += this.getColorIdOffset_(snapshot); - return colors[colorId].toStringWithAlphaOverride(1.0); - } - }; - - return { - EventPresenter: EventPresenter - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/fast_rect_renderer.html b/chromium/third_party/catapult/tracing/tracing/ui/base/fast_rect_renderer.html deleted file mode 100644 index 1729596fc95..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/fast_rect_renderer.html +++ /dev/null @@ -1,134 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2012 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -/** - * @fileoverview Provides a mechanism for drawing massive numbers of - * colored rectangles into a canvas in an efficient manner, provided - * they are drawn left to right with fixed y and height throughout. - * - * The basic idea used here is to fuse subpixel rectangles together so that - * we never issue a canvas fillRect for them. It turns out Javascript can - * do this quite efficiently, compared to asking Canvas2D to do the same. - * - * A few extra things are done by this class in the name of speed: - * - Viewport culling: off-viewport rectangles are discarded. - * - * - The actual discarding operation is done in world space, - * e.g. pre-transform. - * - * - Rather than expending compute cycles trying to figure out an average - * color for fused rectangles from css strings, you instead draw using - * palletized colors. The fused rect color is choosen from the rectangle with - * the higher alpha value, if equal the max pallete index encountered. - * - * Make sure to flush the trackRenderer before finishing drawing in order - * to commit any queued drawing operations. - */ -tr.exportTo('tr.ui.b', function() { - - /** - * Creates a fast rect renderer with a specific set of culling rules - * and color pallette. - * @param {GraphicsContext2D} ctx Canvas2D drawing context. - * @param {number} minRectSize Only rectangles with width < minRectSize are - * considered for merging. - * @param {number} maxMergeDist Controls how many successive small rectangles - * can be merged together before issuing a rectangle. - * @param {Array} pallette The color pallete for drawing. Pallette slots - * should map to valid Canvas fillStyle strings. - * - * @constructor - */ - function FastRectRenderer(ctx, minRectSize, maxMergeDist, pallette) { - this.ctx_ = ctx; - this.minRectSize_ = minRectSize; - this.maxMergeDist_ = maxMergeDist; - this.pallette_ = pallette; - } - - FastRectRenderer.prototype = { - y_: 0, - h_: 0, - merging_: false, - mergeStartX_: 0, - mergeCurRight_: 0, - mergedColorId_: 0, - mergedAlpha_: 0, - - /** - * Changes the y position and height for subsequent fillRect - * calls. x and width are specifieid on the fillRect calls. - */ - setYandH: function(y, h) { - if (this.y_ === y && - this.h_ === h) - return; - this.flush(); - this.y_ = y; - this.h_ = h; - }, - - /** - * Fills rectangle at the specified location, if visible. If the - * rectangle is subpixel, it will be merged with adjacent rectangles. - * The drawing operation may not take effect until flush is called. - * @param {number} colorId The color of this rectangle, as an index - * in the renderer's color pallete. - * @param {number} alpha The opacity of the rectangle as 0.0-1.0 number. - */ - fillRect: function(x, w, colorId, alpha) { - var r = x + w; - if (w < this.minRectSize_) { - if (r - this.mergeStartX_ > this.maxMergeDist_) - this.flush(); - if (!this.merging_) { - this.merging_ = true; - this.mergeStartX_ = x; - this.mergeCurRight_ = r; - this.mergedColorId_ = colorId; - this.mergedAlpha_ = alpha; - } else { - this.mergeCurRight_ = r; - - if (this.mergedAlpha_ < alpha || - (this.mergedAlpha_ === alpha && this.mergedColorId_ < colorId)) { - this.mergedAlpha_ = alpha; - this.mergedColorId_ = colorId; - } - } - } else { - if (this.merging_) - this.flush(); - this.ctx_.fillStyle = this.pallette_[colorId]; - this.ctx_.globalAlpha = alpha; - this.ctx_.fillRect(x, this.y_, w, this.h_); - } - }, - - /** - * Commits any pending fillRect operations to the underlying graphics - * context. - */ - flush: function() { - if (this.merging_) { - this.ctx_.fillStyle = this.pallette_[this.mergedColorId_]; - this.ctx_.globalAlpha = this.mergedAlpha_; - this.ctx_.fillRect(this.mergeStartX_, this.y_, - this.mergeCurRight_ - this.mergeStartX_, this.h_); - this.merging_ = false; - } - } - }; - - return { - FastRectRenderer: FastRectRenderer - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/favicons.html b/chromium/third_party/catapult/tracing/tracing/ui/base/favicons.html deleted file mode 100644 index 66e74de6f65..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/favicons.html +++ /dev/null @@ -1,27 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2012 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. ---> - -<link rel="import" href="/tracing/base/base.html"> - -<script> -'use strict'; -tr.exportTo('tr.ui.b', function() { - var FaviconsByHue = { - blue: 'data:image/vndmicrosofticon;base64,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NP+9ZjT/vGY0/7xmNP+8ZjT/vGY0/7xmNP+8ZjT/u2U0/7FiLY0AAAACk5OTFu/v78X5+fn/+fn5//n5+f/5+vr/+fn5//n5+f/5+fn/+fn5//n5+f/5+/3/99iy//KWI//ylSH/8ZUh//GVIf/xlSH/8ZUh//GVIf/xlSH/8ZUh//GVIf/xlSH/8ZUh//GVIf/xlSH/8ZUh//CUIf/vkyD/5Y0fxY1XExbDw8Mz9PT05fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n7/f/32LL/85cj//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/wlCD/7pIg/+6SIP/pjx/lunIZM9XV1VD39/f0+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fv9//fYsv/zlyP/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/75Mg/+uRH//qkB//6pAf/+iPH/TIfBtQ3d3dYfj4+Pn5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+/3/99iy//OXI//zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh/+6TIP/ojx//548f/+ePH//njx//5o4f+c1/HGHh4eFl+Pj4+vn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n7/f/32LL/85cj//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/tkiD/5Y0f/+SNH//ljR//5Y0f/+WNH//kjB/6zn8cZeDg4Fr4+Pj3+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fv9//fYsv/zlyP/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/65Eg/+KMHv/iix7/4ose/+KLHv/iix7/4ose/+CLHvfLfRta3NzcQvf39+/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+/3/99iy//OXI//zliH/85Yh//OWIf/zliH/85Yh//OWIf/zliH/85Yh/+qR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', // @suppress longLineCheck - - green: 'data:image/vndmicrosofticon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAASCwAAEgsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbWJLAEpCMwptYks8eWxTdn1wVpd9cFaXeWxTdm1iSzxKQzMKbWJLAAAAAAAAAAAAAAAAAAAAAAA+OCsAAAAAAXBlTTSBdFmliHpe6Yp8X/2LfWD/i31g/4p8X/2HeV3pf3NYpW5jTDQAAAABPTcqAAAAAAB7e3sAlv//AIB1Xk+HeV3di31g/4t9YP+LfWD/i31g/4t9YP+Je1//h3pd/4d5Xf+DdVrddGhQTwAAAABDPC4A+fn5ANrb3DmupZPfinxf/4t9YP+LfWD/i31g/4t9YP+Iel7/hHdb/4R2W/+Edlv/hHdb/4BzWN9wZU05g3ZaALS0tA3w8PGuu7Sj/4h5W/+Je17/iXte/4t8X/+HeFz/gnNY/4FyWP+Bclj/gXJY/4FyWP+Bclj/fG1Url9NPA3h4eFK9/j48MvFuf+kmoP/ppuF/6abhf+JkHL/c4Rj/3OEY/9zhGP/coNj/3KDY/9yg2P/coNj/3CDYvBgf19K7e3tjPn5+f/39vb/9fTz//X08//09PP/itKw/0m+h/9Mv4n/TL+J/0y/if9Mv4n/TL+J/0y+iP9Lu4b/RrJ/jPHx8bL5+fn/+fn5//n5+f/5+fn/+fn5/4rXtP9Hwon/SsOL/0rDi/9Kw4v/SsOL/0nCiv9HvYb/RruF/0S1gbLz8/O2+fn5//n5+f/5+fn/+fn5//n5+f+K17P/R8KJ/0rDi/9Kw4v/SsOL/0nBif9GuYT/RbaC/0W2gv9Dsn+28vLymfn5+f/5+fn/+fn5//n5+f/5+fn/jdi1/0vDjP9OxI7/TsSO/0rAiv9FtoP/RLKA/0SygP9EsoD/Qq59mfHx8Vz4+Pj3+fn5//n5+f/5+fn/+fn5/9rw5v/H6tn/yOra/8Lp2f9e1b7/O8yz/z3MtP89zLT/Pcuy9zzApVzr6+sY9/f3xvn5+f/5+fn/+fn5//n5+f/7+vr//Pr7//z6+//z+fn/ZuPY/zbczv853c7/Od3O/zjbzcY10sYY////APT09Fb4+Pjy+fn5//n5+f/5+fn/+fn5//n5+f/6+fn/8Pj3/2Xj1/823Mz/OdzN/znczfI42MlWO+XWAOzs7ADm5uYF9vb2ePn5+fT5+fn/+fn5//n5+f/5+fn/+vn5//D49/9j4tf/NdvM/znczfQ42ct4Ncu9BTbRwgAAAAAA8PDwAOzs7Ab29vZd+Pj40vn5+fz5+fn/+fn5//n5+f/z+Pj/jung/FLf0tI42ctdNdHCBjfUxgAAAAAAAAAAAAAAAADn5+cAqKioAPT09CH39/dy+Pj4tvj4+NX4+PjV+Pj4tu329XLO7+whAFQmAGrUygAAAAAAAAAAAPAPAADAAwAAwAMAAIABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAwAMAAPAPAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAASCwAAEgsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABCQgGDCsmHRxCOy4tS0M0N0tDNDdCOy4tKyYdHAkIBgwAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wAVEg4KTUU1MWtgSmx5bVOigHNYx4N2W9uFd1zjhXdc44N2W9uAc1jHeW1TomtgSmxNRjUxFRMOCv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACsnHgALCggHWE88PHdrUpqEd1vhiXxf/It9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/iXxf/IR3W+F3a1KaV048PAsKCAcrJx4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///AAPjcqGXJnT4CFeFzki31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+KfWD/iXxf/4l7Xv+DdlrkcGVNgDw2Khn//+sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AFJKOSp9cFavinxf+4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/inxf/4h6Xv+Iel3/iHpd/4h6Xv+GeV37eW1Ur1BINyr///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwMDAP//3gBsZ1osgnVbv4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4l8X/+HeV3/hnlc/4Z5XP+GeVz/hnlc/4Z5XP+GeFz/fG9Vv1RLOiz/9LoAAgIBAAAAAAAAAAAAAAAAAAAAAAD19fUAl5ibHcbCurWShGn/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+Je1//hXhc/4R3W/+Fd1v/hXdb/4V3W/+Fd1v/hXdb/4V3W/+Ed1v/eW1TtUlCMh2CdVkAAAAAAAAAAAAAAAAAeXl5ADY2Ngne3t+O4t/Z/ZKFaf+LfV//i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/iXte/4R3W/+Ddlr/g3Za/4N2Wv+Ddlr/g3Za/4N2Wv+Ddlr/g3Za/4N2Wv+CdVr9c2dPjhwZEwk/OSsAAAAAAAAAAAD///8AxMTES/X19u3k4dv/koRp/4t9X/+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4h6Xv+CdVr/gXRZ/4F0Wf+BdFn/gXRZ/4F0Wf+BdFn/gXRZ/4F0Wf+BdFn/gXRZ/4F0Wf9+clftZVtGS/3jrgAAAAAAm5ubAHBwcA/o6Oix+/v7/+Pg2/+ShGn/i31f/4t9YP+LfWD/i31g/4t9YP+LfWD/i31g/4t9YP+Iel7/gXRZ/4BzWP+Ac1j/gHNY/4BzWP+Ac1j/gHNY/4BzWP+Ac1j/gHNY/4BzWP+Ac1j/gHNY/4BzWP93a1KxOTMnD1BHNwD///8AycnJRfX19fD7+/v/4+Da/5CCZ/+Jel3/iXtd/4l7Xf+Je13/iXtd/4l7Xf+Ke17/iHhd/4BxV/9/cFb/f3BW/39wVv9/cFb/f3BW/39wVv9/cFb/f3BW/39wVv9/cFb/f3BW/39wVv9/cFb/f3BW/31uVPBnWURFo45tAAAAAALk5OSN+fn5//r6+v/t7Oj/vLSk/7aunP+3rp3/t66d/7eunf+3rp3/uK+e/6Gmjv9vkG3/bI5r/2yOa/9sjmv/bI5r/2yOa/9sjmv/bI5r/2yOa/9sjmr/bI1q/2yNav9sjWr/bI1q/2uNav9rjWr/a41q/16GZI0AAAACk5OTFu/v78X5+fn/+fn5//n5+f/5+fr/+fn5//n5+f/5+fn/+fn5//n5+f/8+vv/wOfV/0vCi/9Kwor/SsKK/0rCiv9Kwor/SsKK/0rCiv9Kwor/SsKK/0rCiv9Kwor/SsKK/0rCiv9Kwor/SsKK/0nAif9Jv4j/RreCxStxUBbDw8Mz9PT05fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//z6+/+/59X/TMSM/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9JwYn/SL6I/0i+iP9GuoXlOJVqM9XV1VD39/f0+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//Pr7/7/n1f9Mw4z/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/ScCJ/0e8hv9HvIb/R7yG/0a6hfQ9oXJQ3d3dYfj4+Pn5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/8+vv/v+fV/0zDjP9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0i/iP9GuoX/RrqE/0a6hP9GuoT/RrmD+T6ldWHh4eFl+Pj4+vn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//z6+/+/59X/TMOM/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Ivof/RbiD/0W3gv9FuIP/RbiD/0W4g/9Ft4L6PqZ2ZeDg4Fr4+Pj3+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//Pr7/7/n1f9Mw4z/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SL2H/0W2gv9FtYH/RbWB/0W1gf9FtYH/RbWB/0S0gPc+o3Ra3NzcQvf39+/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/8+vv/v+fV/0zDjP9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0rDi/9Kw4v/SsOL/0e8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', // @suppress longLineCheck - - red: 'data:image/vndmicrosofticon;base64,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xv9HL8b/Ry/G/0cvxv9HL8b/Ry/G/0cvxv9HL8X/Ry7F/z8tuI0AAAACk5OTFu/v78X5+fn/+fn5//n5+f/6+vn/+fr5//n6+f/5+vn/+fr5//n6+f/9/fn/ub73/zhF8v82Q/L/NkPy/zZD8v82Q/L/NkPy/zZD8v82Q/L/NkPy/zZD8v82Q/L/NkPy/zZD8v82Q/L/NkPy/zVC8f81QvD/Mz/mxR8njhbDw8Mz9PT05fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//z8+f+5vff/OEX0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P81QvH/NEHv/zRB7/8zQOrlKTO6M9XV1VD39/f0+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//Pz5/7m99/84RfT/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NULw/zRA7P80QOv/NEDr/zNA6fQsN8lQ3d3dYfj4+Pn5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/8/Pn/ub33/zhF9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zVB7/8zQOn/Mz/o/zM/6P8zQOj/Mz/n+S04zmHh4eFl+Pj4+vn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//z8+f+5vff/OEX0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P80Qe7/Mz/m/zM/5f8zP+b/Mz/m/zM/5v8yP+X6LjnPZeDg4Fr4+Pj3+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//Pz5/7m99/84RfT/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NEHs/zI+4/8yPuP/Mj7j/zI+4/8yPuP/Mj7j/zI+4fctOMxa3NzcQvf39+/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/8/Pn/ub33/zhF9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zZD9P82Q/T/NkP0/zRA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', // @suppress longLineCheck - - yellow: 'data:image/vndmicrosofticon;base64,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//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hv/3/Br36/wa9+v8GuvbsBZnLQNra2mD39/f4+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//fr5/6Xm+/8Jwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B778/wa79/8Guvf/Brr3/wa59fgFo9hg4uLidPj4+P35+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/9+vn/peb7/wnB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//we++/8GufX/Brj0/wa49P8GuPT/Brfz/QWm3XTk5OR6+Pj4/fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//36+f+l5vv/CcH//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hvfr/Brfy/wa28f8GtvH/Brbx/wa28f8GtfD9BafdeuXl5W/4+Pj8+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn//fr5/6Xm+/8Jwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B7z5/wa17/8GtO7/BrTu/wa07v8GtO7/BrTu/waz7fwFpdtv4eHhVvj4+Pb5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/9+vn/peb7/wnB//8Hwf//B8H//wfB//8Hwf//B8H//wfB//8Hwf//B8H//we7+P8Gsu3/BrHr/wax6/8Gsev/BrHr/wax6/8Gsev/BrDq9gWh1Vba2toz9vb25vn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//36+f+k5fv/BsH//wPA//8DwP//A8D//wPA//8DwP//A8D//wXA//8Guvb/BrDq/wau6P8Gruj/Bq7o/wau6P8Gruj/Bq7o/wau6P8GreXmBZnLM7+/vxH09PTC+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+/r5/83v+v9x2vz/btn9/2/Z/f9v2f3/b9n9/2/Z/f9v2f3/RdL5/yXG7v8mxOz/JsTs/ybE6/8mxOv/JsTr/yXE6/8lw+v/JcPr/yK95cIQirAR////APDw8IH5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+vn5//r5+f/6+fn/+vn5//r5+f/6+fn/+vn5//r5+f+H8Pz/Oer+/zzq/v886v7/POr+/zzq/v886v7/POr+/zzq/v886v3/OuDzgWz//wD09PQA5+fnNPf39+n5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5/4Xw/f846///O+v//zvr//876///O+v//zvr//876///O+v//zvp/ek32+00Ouf6AMrKygCzs7MF8/Pzmvn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/hfD9/zjr//876///O+v//zvr//876///O+v//zvr//876///OuX5miqptwUwv88AAAAAAPPz8wDp6eku9/f33fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f+F8P3/OOv//zvr//876///O+v//zvr//876///O+v//zvp/d033O8uOuX5AAAAAAAAAAAAvr6+AP///wDx8fFl+Pj49fn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5/4Xw/f846///O+v//zvr//876///O+v//zvr//876v71OeP2ZY7//wAus8IAAAAAAAAAAAAAAAAA4ODgANPT0wj09PSI+fn5+vn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/hfD9/zjr//876///O+v//zvr//876///O+v/+jrm+Ygyx9gINdPlAAAAAAAAAAAAAAAAAAAAAAAAAAAA6enpAOHh4Q309PSM+fn5+Pn5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5+f/5+fn/+fn5//n5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' // @suppress longLineCheck - }; - - return { - FaviconsByHue: FaviconsByHue - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/file.html b/chromium/third_party/catapult/tracing/tracing/ui/base/file.html deleted file mode 100644 index c599c5e3ef8..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/file.html +++ /dev/null @@ -1,35 +0,0 @@ -<!DOCTYPE html> -<!-- -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. ---> -<link rel="import" href="/tracing/base/base.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - function readFile(fileBlob) { - return new Promise(function(resolve, reject) { - var reader = new FileReader(); - var filename = fileBlob.name; - reader.onload = function(data) { - resolve(data.target.result); - }; - reader.onerror = function(err) { - reject(err); - }; - - var is_binary = filename.endsWith('.gz') || filename.endsWith('.zip'); - if (is_binary) - reader.readAsArrayBuffer(fileBlob); - else - reader.readAsText(fileBlob); - }); - } - return { - readFile: readFile - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table.html b/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table.html deleted file mode 100644 index 341574145c6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table.html +++ /dev/null @@ -1,227 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/table.html"> - -<polymer-element name="tr-ui-b-grouping-table"> - <template> - <style> - :host { - display: flex; - } - #table { - flex: 1 1 auto; - } - </style> - <tr-ui-b-table id="table"></tr-ui-b-table> - </template> -</polymer-element> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - - function Row(title, data, groupingKeyFuncs, rowStatsConstructor) { - this.title = title; - this.data_ = data; - if (groupingKeyFuncs === undefined) - groupingKeyFuncs = []; - this.groupingKeyFuncs_ = groupingKeyFuncs; - this.rowStatsConstructor_ = rowStatsConstructor; - - this.subRowsBuilt_ = false; - this.subRows_ = undefined; - - this.rowStats_ = undefined; - } - - Row.prototype = { - getCurrentGroupingKeyFunc_: function() { - if (this.groupingKeyFuncs_.length === 0) - return undefined; - return this.groupingKeyFuncs_[0]; - }, - - get data() { - return this.data_; - }, - - get rowStats() { - if (this.rowStats_ === undefined) { - this.rowStats_ = new this.rowStatsConstructor_(this); - } - return this.rowStats_; - }, - - rebuildSubRowsIfNeeded_: function() { - if (this.subRowsBuilt_) - return; - this.subRowsBuilt_ = true; - - var groupingKeyFunc = this.getCurrentGroupingKeyFunc_(); - if (groupingKeyFunc === undefined) { - this.subRows_ = undefined; - return; - } - - var dataByKey = {}; - var hasValues = false; - this.data_.forEach(function(datum) { - var key = groupingKeyFunc(datum); - hasValues = hasValues || (key !== undefined); - if (dataByKey[key] === undefined) - dataByKey[key] = []; - dataByKey[key].push(datum); - }); - if (!hasValues) { - this.subRows_ = undefined; - return; - } - - this.subRows_ = []; - for (var key in dataByKey) { - var row = new Row(key, - dataByKey[key], - this.groupingKeyFuncs_.slice(1), - this.rowStatsConstructor_); - this.subRows_.push(row); - } - }, - - get isExpanded() { - return (this.subRows && - (this.subRows.length > 0) && - (this.subRows.length < 5)); - }, - - get subRows() { - this.rebuildSubRowsIfNeeded_(); - return this.subRows_; - } - }; - - Polymer('tr-ui-b-grouping-table', { - created: function() { - this.dataToGroup_ = undefined; - this.groupBy_ = undefined; - this.rowStatsConstructor_ = undefined; - }, - - get tableColumns() { - return this.$.table.tableColumns; - }, - - set tableColumns(tableColumns) { - this.$.table.tableColumns = tableColumns; - }, - - get tableRows() { - return this.$.table.tableRows; - }, - - get sortColumnIndex() { - return this.$.table.sortColumnIndex; - }, - - set sortColumnIndex(sortColumnIndex) { - this.$.table.sortColumnIndex = sortColumnIndex; - }, - - get sortDescending() { - return this.$.table.sortDescending; - }, - - set sortDescending(sortDescending) { - this.$.table.sortDescending = sortDescending; - }, - - get selectionMode() { - return this.$.table.selectionMode; - }, - - set selectionMode(selectionMode) { - this.$.table.selectionMode = selectionMode; - }, - - get rowHighlightStyle() { - return this.$.table.rowHighlightStyle; - }, - - set rowHighlightStyle(rowHighlightStyle) { - this.$.table.rowHighlightStyle = rowHighlightStyle; - }, - - get cellHighlightStyle() { - return this.$.table.cellHighlightStyle; - }, - - set cellHighlightStyle(cellHighlightStyle) { - this.$.table.cellHighlightStyle = cellHighlightStyle; - }, - - get selectedColumnIndex() { - return this.$.table.selectedColumnIndex; - }, - - set selectedColumnIndex(selectedColumnIndex) { - this.$.table.selectedColumnIndex = selectedColumnIndex; - }, - - get selectedTableRow() { - return this.$.table.selectedTableRow; - }, - - set selectedTableRow(selectedTableRow) { - this.$.table.selectedTableRow = selectedTableRow; - }, - - get groupBy() { - return this.groupBy_; - }, - - set groupBy(groupBy) { - this.groupBy_ = groupBy; - this.updateContents_(); - }, - - get dataToGroup() { - return this.dataToGroup_; - }, - - set dataToGroup(dataToGroup) { - this.dataToGroup_ = dataToGroup; - this.updateContents_(); - }, - - get rowStatsConstructor() { - return this.rowStatsConstructor_; - }, - - set rowStatsConstructor(rowStatsConstructor) { - this.rowStatsConstructor_ = rowStatsConstructor; - this.updateContents_(); - }, - - rebuild: function() { - this.$.table.rebuild(); - }, - - updateContents_: function() { - var groupBy = this.groupBy_ || []; - var dataToGroup = this.dataToGroup_ || []; - var rowStatsConstructor = this.rowStatsConstructor_ || function() {}; - - var superRow = new Row('', dataToGroup, groupBy, - rowStatsConstructor); - this.$.table.tableRows = superRow.subRows || []; - } - }); - - return { - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker.html b/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker.html deleted file mode 100644 index ef12f0450d6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker.html +++ /dev/null @@ -1,313 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> -<link rel="import" href="/tracing/base/iteration_helpers.html"> -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/dropdown.html"> - -<polymer-element name="tr-ui-b-grouping-table-groupby-picker"> - <template> - <style> - :host { - display: flex; - flex-direction: row; - align-items: center; - } - groups { - -webkit-user-select: none; - display: flex; - flex-direction: row; - padding-left: 10px; - } - - group, possible-group { - display: span; - padding-right: 10px; - padding-left: 10px; - } - - group { - border-left: 1px solid rgba(0,0,0,0); - cursor: move; - } - - group.dragging { - opacity: 0.2; - } - - group.drop-targeted { - border-left: 1px solid black; - } - - - #remove { - cursor: default; - } - - #remove:not([hovered]) { - visibility: hidden; - } - </style> - <groups> - </groups> - <tr-ui-b-dropdown id="add-group"></tr-ui-b-dropdown> - </template> -</polymer-element> - -<template id="tr-ui-b-grouping-table-groupby-picker-group-template"> - <span id="key"></span> - <span id="remove">×</span> -</template> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var THIS_DOC = document._currentScript.ownerDocument; - - Polymer('tr-ui-b-grouping-table-groupby-picker', { - created: function() { - this.needsInit_ = true; - this.defaultGroupKeys_ = undefined; - this.possibleGroups_ = []; - this.settingsKey_ = []; - - this.currentGroupKeys_ = undefined; - - this.dragging_ = false; - }, - - get defaultGroupKeys() { - return this.defaultGroupKeys_; - }, - - set defaultGroupKeys(defaultGroupKeys) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.defaultGroupKeys_ = defaultGroupKeys; - this.maybeInit_(); - }, - - get possibleGroups() { - return this.possibleGroups_; - }, - - set possibleGroups(possibleGroups) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.possibleGroups_ = possibleGroups; - this.maybeInit_(); - }, - - get settingsKey() { - return this.settingsKey_; - }, - - set settingsKey(settingsKey) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.settingsKey_ = settingsKey; - this.maybeInit_(); - }, - - maybeInit_: function() { - if (!this.needsInit_) - return; - - if (this.settingsKey_ === undefined) - return; - if (this.defaultGroupKeys_ === undefined) - return; - if (this.possibleGroups_ === undefined) - return; - - this.needsInit_ = false; - - var addGroupEl = this.shadowRoot.querySelector('#add-group'); - addGroupEl.iconElement.textContent = 'Add another...'; - - this.currentGroupKeys = tr.b.Settings.get( - this.settingsKey_, this.defaultGroupKeys_); - }, - - get currentGroupKeys() { - return this.currentGroupKeys_; - }, - - get currentGroups() { - var groupsByKey = {}; - this.possibleGroups_.forEach(function(group) { - groupsByKey[group.key] = group; - }); - return this.currentGroupKeys_.map(function(groupKey) { - return groupsByKey[groupKey]; - }); - }, - - set currentGroupKeys(currentGroupKeys) { - if (this.currentGroupKeys_ === currentGroupKeys) - return; - - if (!(currentGroupKeys instanceof Array)) - throw new Error('Must be array'); - - this.currentGroupKeys_ = currentGroupKeys; - this.updateGroups_(); - - tr.b.Settings.set( - this.settingsKey_, this.currentGroupKeys_); - - var e = new tr.b.Event('current-groups-changed'); - this.dispatchEvent(e); - }, - - updateGroups_: function() { - var groupsEl = this.shadowRoot.querySelector('groups'); - var addGroupEl = this.shadowRoot.querySelector('#add-group'); - - groupsEl.textContent = ''; - addGroupEl.textContent = ''; - - var unusedGroups = {}; - var groupsByKey = {}; - this.possibleGroups_.forEach(function(group) { - unusedGroups[group.key] = group; - groupsByKey[group.key] = group; - }); - - this.currentGroupKeys_.forEach(function(key) { - delete unusedGroups[key]; - }); - - // Create groups. - var groupTemplateEl = THIS_DOC.querySelector( - '#tr-ui-b-grouping-table-groupby-picker-group-template'); - this.currentGroupKeys_.forEach(function(key, index) { - var group = groupsByKey[key]; - var groupEl = document.createElement('group'); - groupEl.groupKey = key; - groupEl.appendChild(document.importNode(groupTemplateEl.content, true)); - groupEl.querySelector('#key').textContent = group.label; - groupsEl.appendChild(groupEl); - - this.configureRemoveButtonForGroup_(groupEl); - this.configureDragAndDropForGroup_(groupEl); - }, this); - - // Adjust dropdown. - tr.b.iterItems(unusedGroups, function(key, group) { - var groupEl = document.createElement('possible-group'); - groupEl.textContent = group.label; - groupEl.addEventListener('click', function() { - var newKeys = this.currentGroupKeys.slice(); - newKeys.push(key); - this.currentGroupKeys = newKeys; - addGroupEl.close(); - }.bind(this)); - addGroupEl.appendChild(groupEl); - }, this); - - // Hide dropdown if needed. - if (tr.b.dictionaryLength(unusedGroups) == 0) { - addGroupEl.style.display = 'none'; - } else { - addGroupEl.style.display = ''; - } - }, - - configureRemoveButtonForGroup_: function(groupEl) { - var removeEl = groupEl.querySelector('#remove'); - removeEl.addEventListener('click', function() { - var newKeys = this.currentGroupKeys.slice(); - var i = newKeys.indexOf(groupEl.groupKey); - newKeys.splice(i, 1); - this.currentGroupKeys = newKeys; - }.bind(this)); - - groupEl.addEventListener('mouseenter', function() { - removeEl.setAttribute('hovered', true); - }); - groupEl.addEventListener('mouseleave', function() { - removeEl.removeAttribute('hovered'); - }); - }, - - configureDragAndDropForGroup_: function(groupEl) { - var groupsEl = groupEl.parentElement; - - groupEl.setAttribute('draggable', true); - - groupEl.addEventListener('dragstart', function(e) { - e.dataTransfer.setData('groupKey', groupEl.groupKey); - groupEl.querySelector('#remove').removeAttribute('hovered'); - groupEl.classList.add('dragging'); - this.dragging_ = true; - }.bind(this)); - - groupEl.addEventListener('dragend', function(e) { - console.log(e.type, groupEl.groupKey); - for (var i = 0; i < groupsEl.children.length; i++) - groupsEl.children[i].classList.remove('drop-targeted'); - groupEl.classList.remove('dragging'); - this.dragging_ = false; - }.bind(this)); - - // Drop targeting. - groupEl.addEventListener('dragenter', function(e) { - if (!this.dragging_) - return; - groupEl.classList.add('drop-targeted'); - if (this.dragging_) - e.preventDefault(); - }.bind(this)); - - groupEl.addEventListener('dragleave', function(e) { - if (!this.dragging_) - return; - groupEl.classList.remove('drop-targeted'); - e.preventDefault(); - }.bind(this)); - - - // Drop logic. - groupEl.addEventListener('dragover', function(e) { - if (!this.dragging_) - return; - e.preventDefault(); - groupEl.classList.add('drop-targeted'); - }.bind(this)); - - groupEl.addEventListener('drop', function(e) { - if (!this.dragging_) - return; - - var srcKey = e.dataTransfer.getData('groupKey'); - var dstKey = groupEl.groupKey; - - if (srcKey === dstKey) - return; - - var newKeys = this.currentGroupKeys_.slice(); - - var srcIndex = this.currentGroupKeys_.indexOf(srcKey); - newKeys.splice(srcIndex, 1); - - var dstIndex = this.currentGroupKeys_.indexOf(dstKey); - newKeys.splice(dstIndex, 0, srcKey); - - this.currentGroupKeys = newKeys; - - e.dataTransfer.clearData(); - e.preventDefault(); - e.stopPropagation(); - }.bind(this)); - } - }); - - return { - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker_test.html deleted file mode 100644 index 1bbbc4f2057..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/grouping_table_groupby_picker_test.html +++ /dev/null @@ -1,60 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/grouping_table_groupby_picker.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basic', function() { - var picker = document.createElement( - 'tr-ui-b-grouping-table-groupby-picker'); - picker.settingsKey = 'basic-test'; - picker.possibleGroups = [ - {key: 'a', label: 'A'}, - {key: 'b', label: 'B'}, - {key: 'c', label: 'C'}, - {key: 'd', label: 'D'}, - {key: 'e', label: 'E'} - ]; - picker.defaultGroupKeys = ['a', 'b', 'd']; - this.addHTMLOutput(picker); - }); - - test('allGroupsAdded', function() { - var picker = document.createElement( - 'tr-ui-b-grouping-table-groupby-picker'); - picker.settingsKey = 'basic-test'; - picker.possibleGroups = [ - {key: 'a', label: 'A'}, - {key: 'b', label: 'B'}, - {key: 'c', label: 'C'}, - {key: 'd', label: 'D'}, - {key: 'e', label: 'E'} - ]; - picker.defaultGroupKeys = ['a', 'b', 'c', 'd', 'e']; - this.addHTMLOutput(picker); - }); - - test('noGroupsAdded', function() { - var picker = document.createElement( - 'tr-ui-b-grouping-table-groupby-picker'); - picker.settingsKey = 'basic-test'; - picker.possibleGroups = [ - {key: 'a', label: 'A'}, - {key: 'b', label: 'B'}, - {key: 'c', label: 'C'}, - {key: 'd', label: 'D'}, - {key: 'e', label: 'E'} - ]; - picker.defaultGroupKeys = []; - this.addHTMLOutput(picker); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/heading.html b/chromium/third_party/catapult/tracing/tracing/ui/base/heading.html deleted file mode 100644 index 0c884b65a96..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/heading.html +++ /dev/null @@ -1,142 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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. ---> - -<link rel='import' href='/tracing/ui/base/constants.html'> - -<polymer-element name='tr-ui-heading'> - <template> - <style> - :host { - background-color: rgb(243, 245, 247); - border-right: 1px solid #8e8e8e; - display: block; - height: 100%; - margin: 0; - padding: 0 5px 0 0; - } - - heading { - display: block; - overflow-x: hidden; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - } - - #arrow { - -webkit-flex: 0 0 auto; - font-family: sans-serif; - margin-left: 5px; - margin-right: 5px; - width: 8px; - } - - #link, #heading_content { - display: none; - } - </style> - <heading id='heading' on-click='{{onHeadingDivClicked_}}'> - <span id='arrow'></span> - <span id='heading_content'></span> - <tr-ui-a-analysis-link id='link'></tr-ui-a-analysis-link> - </heading> - </template> - - <script> - 'use strict'; - Polymer({ - DOWN_ARROW: String.fromCharCode(0x25BE), - RIGHT_ARROW: String.fromCharCode(0x25B8), - - ready: function(viewport) { - // Minus 6 == 1px border + 5px padding right. - this.style.width = (tr.ui.b.constants.HEADING_WIDTH - 6) + 'px'; - - this.heading_ = ''; - this.expanded_ = true; - this.arrowVisible_ = false; - this.selectionGenerator_ = undefined; - - this.updateContents_(); - }, - - get heading() { - return this.heading_; - }, - - set heading(text) { - if (this.heading_ === text) - return; - - this.heading_ = text; - this.updateContents_(); - }, - - set arrowVisible(val) { - if (this.arrowVisible_ === val) - return; - - this.arrowVisible_ = !!val; - this.updateContents_(); - }, - - set tooltip(text) { - this.$.heading.title = text; - }, - - set selectionGenerator(generator) { - if (this.selectionGenerator_ === generator) - return; - - this.selectionGenerator_ = generator; - this.updateContents_(); - }, - - get expanded() { - return this.expanded_; - }, - - set expanded(expanded) { - if (this.expanded_ === expanded) - return; - - this.expanded_ = !!expanded; - this.updateContents_(); - }, - - onHeadingDivClicked_: function() { - this.dispatchEvent(new tr.b.Event('heading-clicked', {'bubbles': true})); - }, - - updateContents_: function() { - if (this.arrowVisible_) { - this.$.arrow.style.display = ''; - } else { - this.$.arrow.style.display = 'none'; - this.$.heading.style.display = this.expanded_ ? '' : 'none'; - } - - if (this.arrowVisible_) { - this.$.arrow.textContent = - this.expanded_ ? this.DOWN_ARROW : this.RIGHT_ARROW; - } - - this.$.link.style.display = 'none'; - this.$.heading_content.style.display = 'none'; - - if (this.selectionGenerator_) { - this.$.link.style.display = 'inline-block'; - this.$.link.selection = this.selectionGenerator_; - this.$.link.textContent = this.heading_; - } else { - this.$.heading_content.style.display = 'inline-block'; - this.$.heading_content.textContent = this.heading_; - } - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/hot_key.html b/chromium/third_party/catapult/tracing/tracing/ui/base/hot_key.html deleted file mode 100644 index 699b41a8e0a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/hot_key.html +++ /dev/null @@ -1,64 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/guid.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - function HotKey(dict) { - if (dict.eventType === undefined) - throw new Error('eventType must be given'); - if (dict.keyCode === undefined && dict.keyCodes === undefined) - throw new Error('keyCode or keyCodes must be given'); - if (dict.keyCode !== undefined && dict.keyCodes !== undefined) - throw new Error('Only keyCode or keyCodes can be given'); - if (dict.callback === undefined) - throw new Error('callback must be given'); - - this.eventType_ = dict.eventType; - this.keyCodes_ = []; - - if (dict.keyCode) - this.pushKeyCode_(dict.keyCode); - else if (dict.keyCodes) { - dict.keyCodes.forEach(this.pushKeyCode_, this); - } - - this.useCapture_ = !!dict.useCapture; - this.callback_ = dict.callback; - this.thisArg_ = dict.thisArg !== undefined ? dict.thisArg : undefined; - - this.helpText_ = dict.helpText !== undefined ? dict.helpText : undefined; - } - - HotKey.prototype = { - get eventType() { - return this.eventType_; - }, - - get keyCodes() { - return this.keyCodes_; - }, - - get helpText() { - return this.helpText_; - }, - - call: function(e) { - this.callback_.call(this.thisArg_, e); - }, - - pushKeyCode_: function(keyCode) { - this.keyCodes_.push(keyCode); - } - }; - - return { - HotKey: HotKey - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller.html b/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller.html deleted file mode 100644 index 892b7e7593a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller.html +++ /dev/null @@ -1,298 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/guid.html"> -<link rel="import" href="/tracing/ui/base/hot_key.html"> - -<polymer-element name="tv-ui-b-hotkey-controller"> - <script> - 'use strict'; - Polymer({ - created: function() { - this.isAttached_ = false; - this.globalMode_ = false; - this.slavedToParentController_ = undefined; - this.curHost_ = undefined; - this.childControllers_ = []; - - this.bubblingKeyDownHotKeys_ = {}; - this.capturingKeyDownHotKeys_ = {}; - this.bubblingKeyPressHotKeys_ = {}; - this.capturingKeyPressHotKeys_ = {}; - - this.onBubblingKeyDown_ = this.onKey_.bind(this, false); - this.onCapturingKeyDown_ = this.onKey_.bind(this, true); - this.onBubblingKeyPress_ = this.onKey_.bind(this, false); - this.onCapturingKeyPress_ = this.onKey_.bind(this, true); - }, - - attached: function() { - this.isAttached_ = true; - - var host = this.findHost_(); - if (host.__hotkeyController) - throw new Error('Multiple hotkey controllers attached to this host'); - - host.__hotkeyController = this; - this.curHost_ = host; - - var parentElement; - if (host.parentElement) - parentElement = host.parentElement; - else - parentElement = host.parentNode.host; - var parentController = tr.b.getHotkeyControllerForElement( - parentElement); - - if (parentController) { - this.slavedToParentController_ = parentController; - parentController.addChildController_(this); - return; - } - - host.addEventListener('keydown', this.onBubblingKeyDown_, false); - host.addEventListener('keydown', this.onCapturingKeyDown_, true); - host.addEventListener('keypress', this.onBubblingKeyPress_, false); - host.addEventListener('keypress', this.onCapturingKeyPress_, true); - }, - - detached: function() { - this.isAttached_ = false; - - var host = this.curHost_; - if (!host) - return; - - delete host.__hotkeyController; - this.curHost_ = undefined; - - if (this.slavedToParentController_) { - this.slavedToParentController_.removeChildController_(this); - this.slavedToParentController_ = undefined; - return; - } - - host.removeEventListener('keydown', this.onBubblingKeyDown_, false); - host.removeEventListener('keydown', this.onCapturingKeyDown_, true); - host.removeEventListener('keypress', this.onBubblingKeyPress_, false); - host.removeEventListener('keypress', this.onCapturingKeyPress_, true); - }, - - addChildController_: function(controller) { - var i = this.childControllers_.indexOf(controller); - if (i !== -1) - throw new Error('Controller already registered'); - this.childControllers_.push(controller); - }, - - removeChildController_: function(controller) { - var i = this.childControllers_.indexOf(controller); - if (i === -1) - throw new Error('Controller not registered'); - this.childControllers_.splice(i, 1); - return controller; - }, - - getKeyMapForEventType_: function(eventType, useCapture) { - if (eventType === 'keydown') { - if (!useCapture) - return this.bubblingKeyDownHotKeys_; - else - return this.capturingKeyDownHotKeys_; - } else if (eventType === 'keypress') { - if (!useCapture) - return this.bubblingKeyPressHotKeys_; - else - return this.capturingKeyPressHotKeys_; - } else { - throw new Error('Unsupported key event'); - } - }, - - addHotKey: function(hotKey) { - if (!(hotKey instanceof tr.ui.b.HotKey)) - throw new Error('hotKey must be a tr.ui.b.HotKey'); - - var keyMap = this.getKeyMapForEventType_( - hotKey.eventType, hotKey.useCapture); - - for (var i = 0; i < hotKey.keyCodes.length; i++) { - var keyCode = hotKey.keyCodes[i]; - if (keyMap[keyCode]) - throw new Error('Key is already bound for keyCode=' + keyCode); - } - - for (var i = 0; i < hotKey.keyCodes.length; i++) { - var keyCode = hotKey.keyCodes[i]; - keyMap[keyCode] = hotKey; - } - return hotKey; - }, - - removeHotKey: function(hotKey) { - if (!(hotKey instanceof tr.ui.b.HotKey)) - throw new Error('hotKey must be a tr.ui.b.HotKey'); - - var keyMap = this.getKeyMapForEventType_( - hotKey.eventType, hotKey.useCapture); - - for (var i = 0; i < hotKey.keyCodes.length; i++) { - var keyCode = hotKey.keyCodes[i]; - if (!keyMap[keyCode]) - throw new Error('Key is not bound for keyCode=' + keyCode); - keyMap[keyCode] = hotKey; - } - for (var i = 0; i < hotKey.keyCodes.length; i++) { - var keyCode = hotKey.keyCodes[i]; - delete keyMap[keyCode]; - } - return hotKey; - }, - - get globalMode() { - return this.globalMode_; - }, - - set globalMode(globalMode) { - var wasAttached = this.isAttached_; - if (wasAttached) - this.detached(); - this.globalMode_ = !!globalMode; - if (wasAttached) - this.attached(); - }, - - get topmostConroller_() { - if (this.slavedToParentController_) - return this.slavedToParentController_.topmostConroller_; - return this; - }, - - childRequestsGeneralFocus: function(child) { - var topmost = this.topmostConroller_; - if (topmost.curHost_) { - if (topmost.curHost_.hasAttribute('tabIndex')) { - topmost.curHost_.focus(); - } else { - if (document.activeElement) - document.activeElement.blur(); - } - } else { - if (document.activeElement) - document.activeElement.blur(); - } - }, - - childRequestsBlur: function(child) { - child.blur(); - - var topmost = this.topmostConroller_; - if (topmost.curHost_) { - topmost.curHost_.focus(); - } - }, - - findHost_: function() { - if (this.globalMode_) { - return document.body; - } else { - if (this.parentElement) - return this.parentElement; - - var node = this; - while (node.parentNode) { - node = node.parentNode; - } - return node.host; - } - }, - - appendMatchingHotKeysTo_: function(matchedHotKeys, - useCapture, e) { - var localKeyMap = this.getKeyMapForEventType_(e.type, useCapture); - var localHotKey = localKeyMap[e.keyCode]; - if (localHotKey) - matchedHotKeys.push(localHotKey); - - for (var i = 0; i < this.childControllers_.length; i++) { - var controller = this.childControllers_[i]; - controller.appendMatchingHotKeysTo_(matchedHotKeys, - useCapture, e); - } - }, - - onKey_: function(useCapture, e) { - // Keys dispatched to INPUT elements still bubble, even when they're - // handled. So, skip any events that targeted the input element. - if (useCapture == false && e.path[0].tagName == 'INPUT') - return; - - var sortedControllers; - - var matchedHotKeys = []; - this.appendMatchingHotKeysTo_(matchedHotKeys, useCapture, e); - - if (matchedHotKeys.length === 0) - return false; - - if (matchedHotKeys.length > 1) { - // TODO(nduca): To do support for coddling hotKeys, we need to - // sort the listeners by their capturing/bubbling order and then pick - // the one that would topologically win the tie, per DOM dispatch rules. - throw new Error('More than one hotKey is currently unsupported'); - } - - - var hotKey = matchedHotKeys[0]; - - var prevented = 0; - prevented |= hotKey.call(e); - - // We want to return false if preventDefaulted, or one of the handlers - // return false. But otherwise, we want to return undefiend. - return !prevented && e.defaultPrevented; - } - }); - </script> -</polymer-element> -<script> -'use strict'; - -tr.exportTo('tr.b', function() { - - function getHotkeyControllerForElement(refElement) { - var curElement = refElement; - while (curElement) { - if (curElement.tagName === 'tv-ui-b-hotkey-controller') - return curElement; - - if (curElement.__hotkeyController) - return curElement.__hotkeyController; - - if (curElement.parentElement) { - curElement = curElement.parentElement; - continue; - } - - // Probably inside a shadow - curElement = findHost(curElement); - } - return undefined; - } - - function findHost(initialNode) { - var node = initialNode; - while (node.parentNode) { - node = node.parentNode; - } - return node.host; - } - - return { - getHotkeyControllerForElement: getHotkeyControllerForElement - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller_test.html deleted file mode 100644 index 0895e724250..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/hotkey_controller_test.html +++ /dev/null @@ -1,138 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/event.html"> -<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var KeyEventManager = tr.b.KeyEventManager; - - function newKeyEvent(eventType, dict) { - var e = new tr.b.Event(eventType, true, true); - if (dict.keyCode === undefined) - throw new Error('keyCode required'); - e.keyCode = dict.keyCode; - return e; - } - - test('simpleHotkeyManager', function() { - var rootElement = document.createElement('div'); - document.body.appendChild(rootElement); - try { - var elementShadow = rootElement.createShadowRoot(); - - var hkc = document.createElement('tv-ui-b-hotkey-controller'); - elementShadow.appendChild(hkc); - - var subElement = document.createElement('div'); - elementShadow.appendChild(subElement); - - assert.equal(tr.b.getHotkeyControllerForElement(subElement), hkc); - - var didGetCalled = false; - hkc.addHotKey(new tr.ui.b.HotKey({ - eventType: 'keydown', - keyCode: 73, useCapture: true, - callback: function() { - didGetCalled = true; - } - })); - - // Ensure it is called when events target the root element. - var e = newKeyEvent('keydown', {keyCode: 73}); - rootElement.dispatchEvent(e); - assert.isTrue(didGetCalled); - - // Ensure it is still called when we target the sub element. - didGetCalled = false; - var e = newKeyEvent('keydown', {keyCode: 73}); - subElement.dispatchEvent(e); - assert.isTrue(didGetCalled); - - } finally { - document.body.removeChild(rootElement); - } - }); - - test('nestedHotkeyController', function() { - var rootElement = document.createElement('div'); - document.body.appendChild(rootElement); - try { - var elementShadow = rootElement.createShadowRoot(); - - var hkc = document.createElement('tv-ui-b-hotkey-controller'); - elementShadow.appendChild(hkc); - - var subElement = document.createElement('div'); - elementShadow.appendChild(subElement); - assert.equal(tr.b.getHotkeyControllerForElement(elementShadow), hkc); - - var subHKC = document.createElement('tv-ui-b-hotkey-controller'); - subElement.appendChild(subHKC); - - assert.equal(tr.b.getHotkeyControllerForElement(subElement), subHKC); - - var didGetCalled = false; - subHKC.addHotKey(new tr.ui.b.HotKey({ - eventType: 'keydown', - keyCode: 73, useCapture: true, - callback: function() { - didGetCalled = true; - } - })); - - // Ensure it is called when events target the root element. - var e = newKeyEvent('keydown', {keyCode: 73}); - rootElement.dispatchEvent(e); - assert.isTrue(didGetCalled); - } finally { - document.body.removeChild(rootElement); - } - }); - - test('inputInsideHKC', function() { - var rootElement = document.createElement('div'); - document.body.appendChild(rootElement); - try { - var elementShadow = rootElement.createShadowRoot(); - - var hkc = document.createElement('tv-ui-b-hotkey-controller'); - elementShadow.appendChild(hkc); - - var inputEl = document.createElement('input'); - elementShadow.appendChild(inputEl); - - var didGetCalled = false; - hkc.addHotKey(new tr.ui.b.HotKey({ - eventType: 'keypress', - keyCode: 'a'.charCodeAt(0), useCapture: false, - callback: function() { - didGetCalled = true; - } - })); - - // Ensure it is called when events target the root element. - didGetCalled = false; - var e = newKeyEvent('keypress', {keyCode: 'a'.charCodeAt(0)}); - rootElement.dispatchEvent(e); - assert.isTrue(didGetCalled); - - // Handler should NOT be called when events target the input element. - didGetCalled = false; - var e = newKeyEvent('keypress', {keyCode: 'a'.charCodeAt(0)}); - inputEl.dispatchEvent(e); - assert.isFalse(didGetCalled); - } finally { - document.body.removeChild(rootElement); - } - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar.html b/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar.html deleted file mode 100644 index a9b188556d1..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar.html +++ /dev/null @@ -1,82 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<polymer-element name='tr-ui-b-info-bar' is='HTMLDivElement'> - <template> - <style> - :host { - align-items: center; - flex: 0 0 auto; - background-color: rgb(252, 235, 162); - border-bottom: 1px solid #A3A3A3; - border-left: 1px solid white; - border-right: 1px solid #A3A3A3; - border-top: 1px solid white; - display: flex; - height: 26px; - padding: 0 3px 0 3px; - } - - :host(.info-bar-hidden) { - display: none; - } - - #message { flex: 1 1 auto; } - </style> - - <span id='message'></span> - <span id='buttons'></span> - </template> - - <script> - 'use strict'; - - Polymer({ - ready: function() { - this.messageEl_ = this.$.message; - this.buttonsEl_ = this.$.buttons; - - this.message = ''; - this.visible = false; - }, - - get message() { - return this.messageEl_.textContent; - }, - - set message(message) { - this.messageEl_.textContent = message; - }, - - get visible() { - return !this.classList.contains('info-bar-hidden'); - }, - - set visible(visible) { - if (visible) - this.classList.remove('info-bar-hidden'); - else - this.classList.add('info-bar-hidden'); - }, - - removeAllButtons: function() { - this.buttonsEl_.textContent = ''; - }, - - addButton: function(text, clickCallback) { - var button = document.createElement('button'); - button.textContent = text; - button.addEventListener('click', clickCallback); - this.buttonsEl_.appendChild(button); - return button; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group.html b/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group.html deleted file mode 100644 index 4d44a1b1099..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> -<link rel='import' href='/tracing/ui/base/info_bar.html'> - -<polymer-element name='tr-ui-b-info-bar-group' is='HTMLUnknownElement'> - <template> - <style> - :host { - flex: 0 0 auto; - flex-direction: column; - display: flex; - } - </style> - <div id='messages'></div> - </template> - - <script> - 'use strict'; - Polymer({ - ready: function() { - this.messages_ = []; - }, - - clearMessages: function() { - this.messages_ = []; - this.updateContents_(); - }, - - addMessage: function(text, opt_buttons) { - opt_buttons = opt_buttons || []; - for (var i = 0; i < opt_buttons.length; i++) { - if (opt_buttons[i].buttonText === undefined) - throw new Error('buttonText must be provided'); - if (opt_buttons[i].onClick === undefined) - throw new Error('onClick must be provided'); - } - - this.messages_.push({ - text: text, - buttons: opt_buttons || [] - }); - this.updateContents_(); - }, - - updateContents_: function() { - this.$.messages.textContent = ''; - this.messages_.forEach(function(message) { - var bar = document.createElement('tr-ui-b-info-bar'); - bar.message = message.text; - bar.visible = true; - - message.buttons.forEach(function(button) { - bar.addButton(button.buttonText, button.onClick); - }, this); - - this.$.messages.appendChild(bar); - }, this); - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group_test.html deleted file mode 100644 index 5600d4043a3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_group_test.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> -<link rel="import" href="/tracing/ui/base/info_bar_group.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('group-instantiate', function() { - var infoBarGroup = document.createElement('tr-ui-b-info-bar-group'); - infoBarGroup.addMessage( - 'Message 1', - [{buttonText: 'ok', onClick: function() {}}]); - infoBarGroup.addMessage( - 'Message 2', - [{buttonText: 'button 2', onClick: function() {}}]); - this.addHTMLOutput(infoBarGroup); - }); - - test('group-populate-then-clear', function() { - var infoBarGroup = document.createElement('tr-ui-b-info-bar-group'); - infoBarGroup.addMessage( - 'Message 1', - [{buttonText: 'ok', onClick: function() {}}]); - infoBarGroup.addMessage( - 'Message 2', - [{buttonText: 'button 2', onClick: function() {}}]); - infoBarGroup.clearMessages(); - assert.equal(infoBarGroup.children.length, 0); - }); - - test('group-populate-clear-repopulate', function() { - var infoBarGroup = document.createElement('tr-ui-b-info-bar-group'); - infoBarGroup.addMessage( - 'Message 1', - [{buttonText: 'ok', onClick: function() {}}]); - infoBarGroup.addMessage( - 'Message 2', - [{buttonText: 'button 2', onClick: function() {}}]); - infoBarGroup.clearMessages(); - infoBarGroup.addMessage( - 'Message 1', - [{buttonText: 'ok', onClick: function() {}}]); - this.addHTMLOutput(infoBarGroup); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_test.html deleted file mode 100644 index fffec0f8d4b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/info_bar_test.html +++ /dev/null @@ -1,47 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/info_bar.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiate', function() { - var infoBar = document.createElement('tr-ui-b-info-bar'); - infoBar.message = 'This is an info'; - infoBar.visible = true; - this.addHTMLOutput(infoBar); - }); - - test('buttons', function() { - var infoBar = document.createElement('tr-ui-b-info-bar'); - infoBar.visible = true; - infoBar.message = 'This is an info bar with buttons'; - var didClick = false; - var button = infoBar.addButton('More info...', function() { - didClick = true; - }); - button.click(); - assert.isTrue(didClick); - this.addHTMLOutput(infoBar); - }); - - test('hiding', function() { - var infoBar = document.createElement('tr-ui-b-info-bar'); - infoBar.message = 'This is an info bar'; - infoBar.visible = true; - this.addHTMLOutput(infoBar); - - assert.equal(getComputedStyle(infoBar)['display'], 'flex'); - - infoBar.visible = false; - assert.equal(getComputedStyle(infoBar)['display'], 'none'); - - infoBar.visible = true; - assert.equal(getComputedStyle(infoBar)['display'], 'flex'); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.css b/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.css deleted file mode 100644 index e2c945b8be3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Copyright 2014 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. - */ - -* /deep/ .line-chart .line { - fill: none; - stroke-width: 1.5px; -} - -* /deep/ .line-chart #brushes > rect { - fill: rgb(192, 192, 192); -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.html b/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.html deleted file mode 100644 index ba431695242..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart.html +++ /dev/null @@ -1,63 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html"> - -<link rel="stylesheet" href="/tracing/ui/base/line_chart.css"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ChartBase2DBrushX = tr.ui.b.ChartBase2DBrushX; - - /** - * @constructor - */ - var LineChart = tr.ui.b.define('line-chart', ChartBase2DBrushX); - - LineChart.prototype = { - __proto__: ChartBase2DBrushX.prototype, - - decorate: function() { - ChartBase2DBrushX.prototype.decorate.call(this); - this.classList.add('line-chart'); - }, - - isDatumFieldSeries_: function(fieldName) { - return fieldName != 'x'; - }, - - getXForDatum_: function(datum, index) { - return datum.x; - }, - - updateDataContents_: function(dataSel) { - dataSel.selectAll('*').remove(); - var dataBySeriesKey = this.getDataBySeriesKey_(); - var pathsSel = dataSel.selectAll('path').data(this.seriesKeys_); - pathsSel.enter() - .append('path') - .attr('class', 'line') - .style('stroke', function(key) { - return tr.ui.b.getColorOfKey(key); - }) - .attr('d', function(key) { - var line = d3.svg.line() - .x(function(d) { return this.xScale_(d.x); }.bind(this)) - .y(function(d) { return this.yScale_(d[key]); }.bind(this)); - return line(dataBySeriesKey[key]); - }.bind(this)); - pathsSel.exit().remove(); - } - }; - - return { - LineChart: LineChart - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart_test.html deleted file mode 100644 index 5a6cc13b754..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/line_chart_test.html +++ /dev/null @@ -1,163 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/line_chart.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiation_singleSeries', function() { - var chart = new tr.ui.b.LineChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, y: 100}, - {x: 20, y: 110}, - {x: 30, y: 100}, - {x: 40, y: 50} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSeries', function() { - var chart = new tr.ui.b.LineChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 100, beta: 50}, - {x: 20, alpha: 110, beta: 75}, - {x: 30, alpha: 100, beta: 125}, - {x: 40, alpha: 50, beta: 125} - ]; - chart.data = data; - - var r = new tr.b.Range(); - r.addValue(20); - r.addValue(40); - chart.brushedRange = r; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueSparse', function() { - var chart = new tr.ui.b.LineChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 20, beta: undefined}, - {x: 20, alpha: undefined, beta: 10}, - {x: 30, alpha: 10, beta: undefined}, - {x: 45, alpha: undefined, beta: 20}, - {x: 50, alpha: 30, beta: 30} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueNotSparse', function() { - var chart = new tr.ui.b.LineChart(); - - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, alpha: 20, beta: 40}, - {x: 20, alpha: undefined, beta: 10}, - {x: 30, alpha: 10, beta: undefined}, - {x: 45, alpha: undefined, beta: 20}, - {x: 50, alpha: 30, beta: undefined} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('brushRangeFromIndices', function() { - var chart = new tr.ui.b.LineChart(); - var data = [ - {x: 10, value: 50}, - {x: 30, value: 60}, - {x: 70, value: 70}, - {x: 80, value: 80}, - {x: 120, value: 90} - ]; - chart.data = data; - var r = new tr.b.Range(); - - // Range min should be 10. - r = chart.computeBrushRangeFromIndices(-2, 1); - assert.equal(r.min, 10); - - // Range max should be 120. - r = chart.computeBrushRangeFromIndices(3, 10); - assert.equal(r.max, 120); - - // Range should be [10, 120] - r = chart.computeBrushRangeFromIndices(-2, 10); - assert.equal(r.min, 10); - assert.equal(r.max, 120); - - // Range should be [20, 100] - r = chart.computeBrushRangeFromIndices(1, 3); - assert.equal(r.min, 20); - assert.equal(r.max, 100); - }); - - test('instantiation_interactiveBrushing', function() { - var chart = new tr.ui.b.LineChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, value: 50}, - {x: 20, value: 60}, - {x: 30, value: 80}, - {x: 40, value: 20}, - {x: 50, value: 30}, - {x: 60, value: 20}, - {x: 70, value: 15}, - {x: 80, value: 20} - ]; - chart.data = data; - - var mouseDownIndex = undefined; - var curMouseIndex = undefined; - - function updateBrushedRange() { - if (mouseDownIndex === undefined) { - chart.brushedRange = new tr.b.Range(); - return; - } - chart.brushedRange = chart.computeBrushRangeFromIndices( - mouseDownIndex, curMouseIndex); - } - - chart.addEventListener('item-mousedown', function(e) { - mouseDownIndex = e.index; - curMouseIndex = e.index; - updateBrushedRange(); - }); - chart.addEventListener('item-mousemove', function(e) { - if (e.button == undefined) - return; - curMouseIndex = e.index; - updateBrushedRange(); - }); - chart.addEventListener('item-mouseup', function(e) { - curMouseIndex = e.index; - updateBrushedRange(); - }); - this.addHTMLOutput(chart); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.css b/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.css deleted file mode 100644 index 78319f3d8db..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Copyright (c) 2012 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. - */ - -* /deep/ x-list-and-associated-view { - -webkit-flex-direction: row; - display: -webkit-flex; -} - -* /deep/ x-list-and-associated-view > .x-list-view { - min-width: 100px; -} - -* /deep/ x-list-and-associated-view > :nth-child(2) { - -webkit-flex: 1; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.html b/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.html deleted file mode 100644 index 3d1d8260954..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view.html +++ /dev/null @@ -1,138 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="stylesheet" href="/tracing/ui/base/list_and_associated_view.css"> - -<link rel="import" href="/tracing/ui/base/list_view.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -/** - * @fileoverview A list of things, and a viewer for the currently selected - * thing. - */ -tr.exportTo('tr.ui.b', function() { - - /** - * @constructor - */ - var ListAndAssociatedView = tr.ui.b.define('x-list-and-associated-view'); - ListAndAssociatedView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.list_ = undefined; - this.listProperty_ = undefined; - this.view_ = undefined; - this.viewProperty_ = undefined; - this.listView_ = new tr.ui.b.ListView(); - this.listView_.addEventListener('selection-changed', - this.onSelectionChanged_.bind(this)); - this.placeholder_ = document.createElement('div'); - this.appendChild(this.listView_); - this.appendChild(this.placeholder_); - }, - - get listView() { - return this.listView_; - }, - - get list() { - return this.list_; - }, - - set list(list) { - this.list_ = list; - this.updateChildren_(); - }, - - get listProperty() { - return this.listProperty_; - }, - - set listProperty(listProperty) { - this.listProperty_ = listProperty; - this.updateChildren_(); - }, - - get view() { - return this.view_; - }, - - set view(view) { - this.view_ = view; - this.updateChildren_(); - }, - - get viewProperty() { - return this.viewProperty_; - }, - - set viewProperty(viewProperty) { - this.viewProperty_ = viewProperty; - this.updateChildren_(); - }, - - updateChildren_: function() { - var complete = this.list_ && - this.listProperty_ && - this.view_ && - this.viewProperty_; - if (!complete) { - this.replaceChild(this.placeholder_, - this.children[1]); - return; - } - - for (var i = 0; i < this.list_.length; i++) { - var itemEl; - if (i >= this.listView_.children.length) { - itemEl = document.createElement('div'); - this.listView_.appendChild(itemEl); - } else { - itemEl = this.listView_.children[i]; - } - itemEl.item = this.list_[i]; - var getter = this.list_[i].__lookupGetter__(this.listProperty_); - if (getter) - itemEl.textContent = getter.call(this.list_[i]); - else - itemEl.textContent = this.list_[i][this.listProperty_]; - } - - if (this.children[1] == this.placeholder_) { - this.replaceChild(this.view_, - this.children[1]); - } - if (this.listView_.children.length && - !this.listView_.selectedElement) - this.listView_.selectedElement = this.listView_.children[0]; - }, - - onSelectionChanged_: function(e) { - var setter = this.view_.__lookupSetter__(this.viewProperty_); - if (!setter) { - var prop = this.viewProperty_; - setter = function(value) { this[prop] = value; } - } - if (this.listView_.selectedElement) { - setter.call(this.view_, - this.listView_.selectedElement.item); - } else { - setter.call(this.view_, - undefined); - } - } - }; - - return { - ListAndAssociatedView: ListAndAssociatedView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view_test.html deleted file mode 100644 index f35a8b26861..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_and_associated_view_test.html +++ /dev/null @@ -1,98 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/list_and_associated_view.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var ListAndAssociatedView = tr.ui.b.ListAndAssociatedView; - - var SimpleView = tr.ui.b.define('div'); - SimpleView.prototype = { - __proto__: HTMLDivElement.prototype, - - decorate: function() { - this.item_ = undefined; - }, - - set item(item) { - this.item_ = item; - }, - get item() { - return this.item_; - } - }; - - test('listViewNamingWithField', function() { - var lav = new ListAndAssociatedView(); - var list = [ - {x: '1'}, - {x: '2'}, - {x: '3'} - ]; - var view = new SimpleView(); - - lav.list = list; - lav.listProperty = 'x'; - lav.view = view; - lav.viewProperty = 'item'; - - var lavListView = lav.listView; - assert.equal(lavListView.children.length, 3); - assert.equal(lavListView.children[0].textContent, '1'); - }); - - test('listViewNamingWithProperty', function() { - var lav = new ListAndAssociatedView(); - - function X(x) { - this.x = x; - } - X.prototype = { - get title() { - return this.x; - } - }; - - var list = [ - new X('1'), - new X('2'), - new X('3') - ]; - var view = new SimpleView(); - - lav.list = list; - lav.listProperty = 'title'; - lav.view = view; - lav.viewProperty = 'item'; - - var lavListView = lav.listView; - assert.equal(lavListView.children.length, 3); - assert.equal(lavListView.children[0].textContent, '1'); - }); - - test('selectionChangesView', function() { - var lav = new ListAndAssociatedView(); - var list = [ - {x: '1'}, - {x: '2'}, - {x: '3'} - ]; - var view = new SimpleView(); - - lav.list = list; - lav.listProperty = 'x'; - lav.view = view; - lav.viewProperty = 'item'; - var lavListView = lav.listView; - - assert.equal(list[0], view.item); - lavListView.children[1].selected = true; - assert.equal(list[1], view.item); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.css b/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.css deleted file mode 100644 index 0a9ef18ed67..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.css +++ /dev/null @@ -1,30 +0,0 @@ -/* Copyright (c) 2012 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. - */ - -* /deep/ .x-list-view { - -webkit-user-select: none; - display: block; -} -* /deep/ .x-list-view:focus { - outline: none; -} - -* /deep/ .x-list-view * { - -webkit-user-select: none; -} - -* /deep/ .x-list-view > .list-item { - padding: 2px 4px 2px 4px; -} - -* /deep/ .x-list-view:focus > .list-item[selected] { - background-color: rgb(171, 217, 202); - outline: 1px dotted rgba(0,0,0,0.1); - outline-offset: 0; -} - -* /deep/ .x-list-view > .list-item[selected] { - background-color: rgb(103, 199, 165); -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.html b/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.html deleted file mode 100644 index c8279565620..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view.html +++ /dev/null @@ -1,167 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="stylesheet" href="/tracing/ui/base/list_view.css"> - -<link rel="import" href="/tracing/base/event.html"> -<link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<script> -'use strict'; - -/** - * @fileoverview Simple list view. - */ -tr.exportTo('tr.ui.b', function() { - /** - * @constructor - */ - var ListView = tr.ui.b.define( - 'x-list-view', tr.ui.b.ContainerThatDecoratesItsChildren); - - ListView.prototype = { - __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, - - decorate: function() { - tr.ui.b.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); - - this.classList.add('x-list-view'); - this.onItemClicked_ = this.onItemClicked_.bind(this); - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.tabIndex = 0; - this.addEventListener('keydown', this.onKeyDown_); - - this.selectionChanged_ = false; - }, - - decorateChild_: function(item) { - item.classList.add('list-item'); - item.addEventListener('click', this.onItemClicked_, true); - - var listView = this; - Object.defineProperty( - item, - 'selected', { - configurable: true, - set: function(value) { - var oldSelection = listView.selectedElement; - if (oldSelection && oldSelection != this && value) - listView.selectedElement.removeAttribute('selected'); - if (value) - this.setAttribute('selected', 'selected'); - else - this.removeAttribute('selected'); - var newSelection = listView.selectedElement; - if (newSelection != oldSelection) - tr.b.dispatchSimpleEvent(listView, 'selection-changed', false); - }, - get: function() { - return this.hasAttribute('selected'); - } - }); - }, - - undecorateChild_: function(item) { - this.selectionChanged_ |= item.selected; - - item.classList.remove('list-item'); - item.removeEventListener('click', this.onItemClicked_); - delete item.selected; - }, - - beginDecorating_: function() { - this.selectionChanged_ = false; - }, - - doneDecoratingForNow_: function() { - if (this.selectionChanged_) - tr.b.dispatchSimpleEvent(this, 'selection-changed', false); - }, - - get selectedElement() { - var el = this.querySelector('.list-item[selected]'); - if (!el) - return undefined; - return el; - }, - - set selectedElement(el) { - if (!el) { - if (this.selectedElement) - this.selectedElement.selected = false; - return; - } - - if (el.parentElement != this) - throw new Error( - 'Can only select elements that are children of this list view'); - el.selected = true; - }, - - getElementByIndex: function(index) { - return this.querySelector('.list-item:nth-child(' + index + ')'); - }, - - clear: function() { - var changed = this.selectedElement !== undefined; - tr.ui.b.ContainerThatDecoratesItsChildren.prototype.clear.call(this); - if (changed) - tr.b.dispatchSimpleEvent(this, 'selection-changed', false); - }, - - onItemClicked_: function(e) { - var currentSelectedElement = this.selectedElement; - if (currentSelectedElement) - currentSelectedElement.removeAttribute('selected'); - var element = e.target; - while (element.parentElement != this) - element = element.parentElement; - if (element !== currentSelectedElement) - element.setAttribute('selected', 'selected'); - tr.b.dispatchSimpleEvent(this, 'selection-changed', false); - }, - - onKeyDown_: function(e) { - if (this.selectedElement === undefined) - return; - - if (e.keyCode == 38) { // Up arrow. - var prev = this.selectedElement.previousSibling; - if (prev) { - prev.selected = true; - tr.ui.b.scrollIntoViewIfNeeded(prev); - e.preventDefault(); - return true; - } - } else if (e.keyCode == 40) { // Down arrow. - var next = this.selectedElement.nextSibling; - if (next) { - next.selected = true; - tr.ui.b.scrollIntoViewIfNeeded(next); - e.preventDefault(); - return true; - } - } - }, - - addItem: function(textContent) { - var item = document.createElement('div'); - item.textContent = textContent; - this.appendChild(item); - return item; - } - - }; - - return { - ListView: ListView - }; - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/list_view_test.html deleted file mode 100644 index 4f068437088..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/list_view_test.html +++ /dev/null @@ -1,67 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/list_view.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var ListView = tr.ui.b.ListView; - - test('instantiate', function() { - var view = new ListView(); - var i1 = view.addItem('item 1'); - var i2 = view.addItem('item 2'); - var i3 = view.addItem('item 3'); - this.addHTMLOutput(view); - }); - - test('programmaticSelection', function() { - var view = new ListView(); - var i1 = view.addItem('item 1'); - var i2 = view.addItem('item 2'); - var i3 = view.addItem('item 3'); - - i2.selected = true; - assert.isTrue(i2.hasAttribute('selected')); - i3.selected = true; - assert.isFalse(i2.hasAttribute('selected')); - assert.isTrue(i3.hasAttribute('selected')); - }); - - test('clickSelection', function() { - var view = new ListView(); - var didFireSelectionChange = false; - view.addEventListener('selection-changed', function() { - didFireSelectionChange = true; - }); - var i1 = view.addItem('item 1'); - var i2 = view.addItem('item 2'); - var i3 = view.addItem('item 3'); - - didFireSelectionChange = false; - i2.click(); - assert.isTrue(didFireSelectionChange); - assert.equal(view.selectedElement, i2); - - didFireSelectionChange = false; - i3.click(); - assert.isTrue(didFireSelectionChange); - assert.equal(view.selectedElement, i3); - - // Click the same target again. - didFireSelectionChange = false; - i3.click(); - assert.isTrue(didFireSelectionChange); - assert.isUndefined(view.selectedElement); - - didFireSelectionChange = false; - i1.click(); - assert.isTrue(didFireSelectionChange); - assert.equal(view.selectedElement, i1); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon.html deleted file mode 100644 index f31837e5c1b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon.html +++ /dev/null @@ -1,112 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/iteration_helpers.html"> -<link rel="import" href="/tracing/ui/base/mouse_modes.html"> - -<polymer-element name="tr-ui-b-mouse-mode-icon"> - <template> - <style> - :host { - display: block; - background-image: url(../images/ui-states.png); - width: 27px; - height: 30px; - } - :host.active { - cursor: auto; - } - </style> - </template> - <script> - 'use strict'; - - Polymer({ - publish: { - modeName: { - value: undefined, - reflect: true - } - }, - - created: function() { - this.active_ = false; - this.acceleratorKey_ = undefined; - }, - - ready: function() { - this.updateContents_(); - }, - - get mode() { - return tr.ui.b.MOUSE_SELECTOR_MODE[this.modeName]; - }, - - set mode(mode) { - var modeInfo = tr.ui.b.MOUSE_SELECTOR_MODE_INFOS[mode]; - var modeName = tr.b.findFirstKeyInDictMatching( - tr.ui.b.MOUSE_SELECTOR_MODE, - function(modeName, candidateMode) { - return candidateMode === mode; - }); - if (modeName === undefined) - throw new Error('Unknown mode'); - this.modeName = modeName; - }, - - modeNameChanged: function() { - this.updateContents_(); - }, - - get active() { - return this.active_; - }, - - set active(active) { - this.active_ = !!active; - if (this.active_) - this.classList.add('active'); - else - this.classList.remove('active'); - this.updateContents_(); - }, - - get acceleratorKey() { - return this.acceleratorKey_; - }, - - set acceleratorKey(acceleratorKey) { - this.acceleratorKey_ = acceleratorKey; - this.updateContents_(); - }, - - updateContents_: function() { - if (this.modeName === undefined) - return; - - var mode = this.mode; - if (mode === undefined) - throw new Error('Invalid mode'); - - var modeInfo = tr.ui.b.MOUSE_SELECTOR_MODE_INFOS[mode]; - if (!modeInfo) - throw new Error('Invalid mode'); - - var title = modeInfo.title; - if (this.acceleratorKey_) - title = title + ' (' + this.acceleratorKey_ + ')'; - this.title = title; - - var bp; - if (this.active_) - bp = modeInfo.activeBackgroundPosition; - else - bp = modeInfo.defaultBackgroundPosition; - this.style.backgroundPosition = bp; - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon_test.html deleted file mode 100644 index 905a1bbcf0d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_icon_test.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_icon.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var MOUSE_SELECTOR_MODE = tr.ui.b.MOUSE_SELECTOR_MODE; - - test('inactive', function() { - var icon = document.createElement('tr-ui-b-mouse-mode-icon'); - icon.mode = MOUSE_SELECTOR_MODE.SELECTION; - assert.equal(icon.modeName, 'SELECTION'); - icon.acceleratorKey = 'a'; - this.addHTMLOutput(icon); - }); - - test('active', function() { - var icon = document.createElement('tr-ui-b-mouse-mode-icon'); - icon.mode = MOUSE_SELECTOR_MODE.SELECTION; - assert.equal(icon.modeName, 'SELECTION'); - icon.active = true; - this.addHTMLOutput(icon); - }); - - test('modeNameSetter', function() { - var icon = document.createElement('tr-ui-b-mouse-mode-icon'); - icon.setAttribute('modeName', 'SELECTION'); - this.addHTMLOutput(icon); - - return Promise.resolve().then(function() { - assert.equal(icon.mode, 1); - }); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector.html deleted file mode 100644 index a8980d5ee8d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector.html +++ /dev/null @@ -1,574 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> - -<link rel="import" href="/tracing/base/event.html"> -<link rel="import" href="/tracing/base/iteration_helpers.html"> -<link rel="import" href="/tracing/ui/base/hotkey_controller.html"> -<link rel="import" href="/tracing/ui/base/mouse_tracker.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> -<link rel="import" href="/tracing/ui/base/mouse_modes.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_icon.html"> - -<polymer-element name="tr-ui-b-mouse-mode-selector"> - <template> - <style> - :host { - - -webkit-user-drag: element; - -webkit-user-select: none; - - background: #DDD; - border: 1px solid #BBB; - border-radius: 4px; - box-shadow: 0 1px 2px rgba(0,0,0,0.2); - left: calc(100% - 120px); - position: absolute; - top: 100px; - user-select: none; - width: 29px; - z-index: 20; - } - - .drag-handle { - background: url(../images/ui-states.png) 2px 3px no-repeat; - background-repeat: no-repeat; - border-bottom: 1px solid #BCBCBC; - cursor: move; - display: block; - height: 13px; - width: 27px; - } - - .tool-button { - background-position: center center; - background-repeat: no-repeat; - border-bottom: 1px solid #BCBCBC; - border-top: 1px solid #F1F1F1; - cursor: pointer; - } - - .buttons > .tool-button:last-child { - border-bottom: none; - } - - </style> - <div class="drag-handle"></div> - <div class="buttons"> - </div> - </template> -</polymer-element> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var MOUSE_SELECTOR_MODE = tr.ui.b.MOUSE_SELECTOR_MODE; - var MOUSE_SELECTOR_MODE_INFOS = tr.ui.b.MOUSE_SELECTOR_MODE_INFOS; - - - var MIN_MOUSE_SELECTION_DISTANCE = 4; - - var MODIFIER = { - SHIFT: 0x1, - SPACE: 0x2, - CMD_OR_CTRL: 0x4 - }; - - function isCmdOrCtrlPressed(event) { - if (tr.isMac) - return event.metaKey; - else - return event.ctrlKey; - } - - /** - * Provides a panel for switching the interaction mode of the mouse. - * It handles the user interaction and dispatches events for the various - * modes. - */ - Polymer('tr-ui-b-mouse-mode-selector', { - __proto__: HTMLDivElement.prototype, - - created: function() { - this.supportedModeMask_ = MOUSE_SELECTOR_MODE.ALL_MODES; - - this.initialRelativeMouseDownPos_ = {x: 0, y: 0}; - - this.defaultMode_ = MOUSE_SELECTOR_MODE.PANSCAN; - this.settingsKey_ = undefined; - this.mousePos_ = {x: 0, y: 0}; - this.mouseDownPos_ = {x: 0, y: 0}; - - this.onMouseDown_ = this.onMouseDown_.bind(this); - this.onMouseMove_ = this.onMouseMove_.bind(this); - this.onMouseUp_ = this.onMouseUp_.bind(this); - - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onKeyUp_ = this.onKeyUp_.bind(this); - - this.mode_ = undefined; - this.modeToKeyCodeMap_ = {}; - this.modifierToModeMap_ = {}; - - this.targetElement_ = undefined; - this.modeBeforeAlternativeModeActivated_ = null; - - this.isInteracting_ = false; - this.isClick_ = false; - }, - - ready: function() { - this.buttonsEl_ = this.shadowRoot.querySelector('.buttons'); - this.dragHandleEl_ = this.shadowRoot.querySelector('.drag-handle'); - this.supportedModeMask = MOUSE_SELECTOR_MODE.ALL_MODES; - - this.dragHandleEl_.addEventListener('mousedown', - this.onDragHandleMouseDown_.bind(this)); - - this.buttonsEl_.addEventListener('mouseup', this.onButtonMouseUp_); - this.buttonsEl_.addEventListener('mousedown', this.onButtonMouseDown_); - this.buttonsEl_.addEventListener('click', this.onButtonPress_.bind(this)); - }, - - attached: function() { - document.addEventListener('keydown', this.onKeyDown_); - document.addEventListener('keyup', this.onKeyUp_); - }, - - detached: function() { - document.removeEventListener('keydown', this.onKeyDown_); - document.removeEventListener('keyup', this.onKeyUp_); - }, - - get targetElement() { - return this.targetElement_; - }, - - set targetElement(target) { - if (this.targetElement_) - this.targetElement_.removeEventListener('mousedown', this.onMouseDown_); - this.targetElement_ = target; - if (this.targetElement_) - this.targetElement_.addEventListener('mousedown', this.onMouseDown_); - }, - - get defaultMode() { - return this.defaultMode_; - }, - - set defaultMode(defaultMode) { - this.defaultMode_ = defaultMode; - }, - - get settingsKey() { - return this.settingsKey_; - }, - - set settingsKey(settingsKey) { - this.settingsKey_ = settingsKey; - if (!this.settingsKey_) - return; - - var mode = tr.b.Settings.get(this.settingsKey_ + '.mode', undefined); - // Modes changed from 1,2,3,4 to 0x1, 0x2, 0x4, 0x8. Fix any stray - // settings to the best of our abilities. - if (MOUSE_SELECTOR_MODE_INFOS[mode] === undefined) - mode = undefined; - - // Restoring settings against unsupported modes should just go back to the - // default mode. - if ((mode & this.supportedModeMask_) === 0) - mode = undefined; - - if (!mode) - mode = this.defaultMode_; - this.mode = mode; - - var pos = tr.b.Settings.get(this.settingsKey_ + '.pos', undefined); - if (pos) - this.pos = pos; - }, - - get supportedModeMask() { - return this.supportedModeMask_; - }, - - /** - * Sets the supported modes. Should be an OR-ing of MOUSE_SELECTOR_MODE - * values. - */ - set supportedModeMask(supportedModeMask) { - if (this.mode && (supportedModeMask & this.mode) === 0) - throw new Error('supportedModeMask must include current mode.'); - - function createButtonForMode(mode) { - return button; - } - - this.supportedModeMask_ = supportedModeMask; - this.buttonsEl_.textContent = ''; - for (var modeName in MOUSE_SELECTOR_MODE) { - if (modeName == 'ALL_MODES') - continue; - var mode = MOUSE_SELECTOR_MODE[modeName]; - if ((this.supportedModeMask_ & mode) === 0) - continue; - - var button = document.createElement('tr-ui-b-mouse-mode-icon'); - button.mode = mode; - button.classList.add('tool-button'); - - this.buttonsEl_.appendChild(button); - } - }, - - getButtonForMode_: function(mode) { - for (var i = 0; i < this.buttonsEl_.children.length; i++) { - var buttonEl = this.buttonsEl_.children[i]; - if (buttonEl.mode === mode) - return buttonEl; - } - return undefined; - }, - - get mode() { - return this.currentMode_; - }, - - set mode(newMode) { - if (newMode !== undefined) { - if (typeof newMode !== 'number') - throw new Error('Mode must be a number'); - if ((newMode & this.supportedModeMask_) === 0) - throw new Error('Cannot switch to this mode, it is not supported'); - if (MOUSE_SELECTOR_MODE_INFOS[newMode] === undefined) - throw new Error('Unrecognized mode'); - } - - var modeInfo; - - if (this.currentMode_ === newMode) - return; - - if (this.currentMode_) { - var buttonEl = this.getButtonForMode_(this.currentMode_); - if (buttonEl) - buttonEl.active = false; - - // End event. - if (this.isInteracting_) { - - var mouseEvent = this.createEvent_( - MOUSE_SELECTOR_MODE_INFOS[this.mode].eventNames.end); - this.dispatchEvent(mouseEvent); - } - - // Exit event. - modeInfo = MOUSE_SELECTOR_MODE_INFOS[this.currentMode_]; - tr.b.dispatchSimpleEvent(this, modeInfo.eventNames.exit, true); - } - - this.currentMode_ = newMode; - - if (this.currentMode_) { - var buttonEl = this.getButtonForMode_(this.currentMode_); - if (buttonEl) - buttonEl.active = true; - - // Entering a new mode resets mouse down pos. - this.mouseDownPos_.x = this.mousePos_.x; - this.mouseDownPos_.y = this.mousePos_.y; - - // Enter event. - modeInfo = MOUSE_SELECTOR_MODE_INFOS[this.currentMode_]; - if (!this.isInAlternativeMode_) - tr.b.dispatchSimpleEvent(this, modeInfo.eventNames.enter, true); - - // Begin event. - if (this.isInteracting_) { - var mouseEvent = this.createEvent_( - MOUSE_SELECTOR_MODE_INFOS[this.mode].eventNames.begin); - this.dispatchEvent(mouseEvent); - } - - - } - - if (this.settingsKey_ && !this.isInAlternativeMode_) - tr.b.Settings.set(this.settingsKey_ + '.mode', this.mode); - }, - - setKeyCodeForMode: function(mode, keyCode) { - if ((mode & this.supportedModeMask_) === 0) - throw new Error('Mode not supported'); - this.modeToKeyCodeMap_[mode] = keyCode; - - if (!this.buttonsEl_) - return; - - var buttonEl = this.getButtonForMode_(mode); - if (buttonEl) - buttonEl.acceleratorKey = String.fromCharCode(keyCode); - }, - - setCurrentMousePosFromEvent_: function(e) { - this.mousePos_.x = e.clientX; - this.mousePos_.y = e.clientY; - }, - - createEvent_: function(eventName, sourceEvent) { - var event = new tr.b.Event(eventName, true); - event.clientX = this.mousePos_.x; - event.clientY = this.mousePos_.y; - event.deltaX = this.mousePos_.x - this.mouseDownPos_.x; - event.deltaY = this.mousePos_.y - this.mouseDownPos_.y; - event.mouseDownX = this.mouseDownPos_.x; - event.mouseDownY = this.mouseDownPos_.y; - event.didPreventDefault = false; - event.preventDefault = function() { - event.didPreventDefault = true; - if (sourceEvent) - sourceEvent.preventDefault(); - }; - event.stopPropagation = function() { - sourceEvent.stopPropagation(); - }; - event.stopImmediatePropagation = function() { - throw new Error('Not implemented'); - }; - return event; - }, - - onMouseDown_: function(e) { - if (e.button !== 0) - return; - this.setCurrentMousePosFromEvent_(e); - var mouseEvent = this.createEvent_( - MOUSE_SELECTOR_MODE_INFOS[this.mode].eventNames.begin, e); - if (this.mode === MOUSE_SELECTOR_MODE.SELECTION) - mouseEvent.appendSelection = isCmdOrCtrlPressed(e); - this.dispatchEvent(mouseEvent); - this.isInteracting_ = true; - this.isClick_ = true; - tr.ui.b.trackMouseMovesUntilMouseUp(this.onMouseMove_, this.onMouseUp_); - }, - - onMouseMove_: function(e) { - this.setCurrentMousePosFromEvent_(e); - - var mouseEvent = this.createEvent_( - MOUSE_SELECTOR_MODE_INFOS[this.mode].eventNames.update, e); - this.dispatchEvent(mouseEvent); - - if (this.isInteracting_) - this.checkIsClick_(e); - }, - - onMouseUp_: function(e) { - if (e.button !== 0) - return; - - var mouseEvent = this.createEvent_( - MOUSE_SELECTOR_MODE_INFOS[this.mode].eventNames.end, e); - mouseEvent.isClick = this.isClick_; - this.dispatchEvent(mouseEvent); - - if (this.isClick_ && !mouseEvent.didPreventDefault) - this.dispatchClickEvents_(e); - - this.isInteracting_ = false; - this.updateAlternativeModeState_(e); - }, - - onButtonMouseDown_: function(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - }, - - onButtonMouseUp_: function(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - }, - - onButtonPress_: function(e) { - this.modeBeforeAlternativeModeActivated_ = undefined; - this.mode = e.target.mode; - e.preventDefault(); - }, - - onKeyDown_: function(e) { - // Keys dispatched to INPUT elements still bubble, even when they're - // handled. So, skip any events that targeted the input element. - if (e.path[0].tagName == 'INPUT') - return; - - if (e.keyCode === ' '.charCodeAt(0)) - this.spacePressed_ = true; - this.updateAlternativeModeState_(e); - }, - - onKeyUp_: function(e) { - // Keys dispatched to INPUT elements still bubble, even when they're - // handled. So, skip any events that targeted the input element. - if (e.path[0].tagName == 'INPUT') - return; - - if (e.keyCode === ' '.charCodeAt(0)) - this.spacePressed_ = false; - - var didHandleKey = false; - tr.b.iterItems(this.modeToKeyCodeMap_, function(modeStr, keyCode) { - if (e.keyCode === keyCode) { - this.modeBeforeAlternativeModeActivated_ = undefined; - var mode = parseInt(modeStr); - this.mode = mode; - didHandleKey = true; - } - }, this); - - if (didHandleKey) { - e.preventDefault(); - e.stopPropagation(); - return; - } - this.updateAlternativeModeState_(e); - }, - - updateAlternativeModeState_: function(e) { - var shiftPressed = e.shiftKey; - var spacePressed = this.spacePressed_; - var cmdOrCtrlPressed = isCmdOrCtrlPressed(e); - - // Figure out the new mode - var smm = this.supportedModeMask_; - var newMode; - var isNewModeAnAlternativeMode = false; - if (shiftPressed && - (this.modifierToModeMap_[MODIFIER.SHIFT] & smm) !== 0) { - newMode = this.modifierToModeMap_[MODIFIER.SHIFT]; - isNewModeAnAlternativeMode = true; - } else if (spacePressed && - (this.modifierToModeMap_[MODIFIER.SPACE] & smm) !== 0) { - newMode = this.modifierToModeMap_[MODIFIER.SPACE]; - isNewModeAnAlternativeMode = true; - } else if (cmdOrCtrlPressed && - (this.modifierToModeMap_[MODIFIER.CMD_OR_CTRL] & smm) !== 0) { - newMode = this.modifierToModeMap_[MODIFIER.CMD_OR_CTRL]; - isNewModeAnAlternativeMode = true; - } else { - // Go to the old mode, if there is one. - if (this.isInAlternativeMode_) { - newMode = this.modeBeforeAlternativeModeActivated_; - isNewModeAnAlternativeMode = false; - } else { - newMode = undefined; - } - } - - // Maybe a mode change isn't needed. - if (this.mode === newMode || newMode === undefined) - return; - - // Okay, we're changing. - if (isNewModeAnAlternativeMode) - this.modeBeforeAlternativeModeActivated_ = this.mode; - this.mode = newMode; - }, - - get isInAlternativeMode_() { - return !!this.modeBeforeAlternativeModeActivated_; - }, - - setModifierForAlternateMode: function(mode, modifier) { - this.modifierToModeMap_[modifier] = mode; - }, - - get pos() { - return { - x: parseInt(this.style.left), - y: parseInt(this.style.top) - }; - }, - - set pos(pos) { - pos = this.constrainPositionToBounds_(pos); - - this.style.left = pos.x + 'px'; - this.style.top = pos.y + 'px'; - - if (this.settingsKey_) - tr.b.Settings.set(this.settingsKey_ + '.pos', this.pos); - }, - - constrainPositionToBounds_: function(pos) { - var parent = this.offsetParent || document.body; - var parentRect = tr.ui.b.windowRectForElement(parent); - - var top = 0; - var bottom = parentRect.height - this.offsetHeight; - var left = 0; - var right = parentRect.width - this.offsetWidth; - - var res = {}; - res.x = Math.max(pos.x, left); - res.x = Math.min(res.x, right); - - res.y = Math.max(pos.y, top); - res.y = Math.min(res.y, bottom); - return res; - }, - - onDragHandleMouseDown_: function(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - - var mouseDownPos = { - x: e.clientX - this.offsetLeft, - y: e.clientY - this.offsetTop - }; - tr.ui.b.trackMouseMovesUntilMouseUp(function(e) { - var pos = {}; - pos.x = e.clientX - mouseDownPos.x; - pos.y = e.clientY - mouseDownPos.y; - this.pos = pos; - }.bind(this)); - }, - - checkIsClick_: function(e) { - if (!this.isInteracting_ || !this.isClick_) - return; - - var deltaX = this.mousePos_.x - this.mouseDownPos_.x; - var deltaY = this.mousePos_.y - this.mouseDownPos_.y; - var minDist = MIN_MOUSE_SELECTION_DISTANCE; - - if (deltaX * deltaX + deltaY * deltaY > minDist * minDist) - this.isClick_ = false; - }, - - dispatchClickEvents_: function(e) { - if (!this.isClick_) - return; - - var modeInfo = MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.SELECTION]; - var eventNames = modeInfo.eventNames; - - var mouseEvent = this.createEvent_(eventNames.begin); - mouseEvent.appendSelection = isCmdOrCtrlPressed(e); - this.dispatchEvent(mouseEvent); - - mouseEvent = this.createEvent_(eventNames.end); - this.dispatchEvent(mouseEvent); - } - }); - - return { - MIN_MOUSE_SELECTION_DISTANCE: MIN_MOUSE_SELECTION_DISTANCE, - MODIFIER: MODIFIER - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector_test.html deleted file mode 100644 index 56719d76bd6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_mode_selector_test.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var MOUSE_SELECTOR_MODE = tr.ui.b.MOUSE_SELECTOR_MODE; - test('instantiate', function() { - var sel = document.createElement('tr-ui-b-mouse-mode-selector'); - sel.supportedModeMask = - MOUSE_SELECTOR_MODE.SELECTION | - MOUSE_SELECTOR_MODE.PANSCAN; - this.addHTMLOutput(sel); - }); - - test('changeMaskWithUnsupportedMode', function() { - var sel = document.createElement('tr-ui-b-mouse-mode-selector'); - sel.mode = MOUSE_SELECTOR_MODE.SELECTION; - assert.throw(function() { - sel.supportedModeMask = MOUSE_SELECTOR_MODE.ZOOM; - }); - }); - - test('modePersists', function() { - var sel1 = document.createElement('tr-ui-b-mouse-mode-selector'); - sel1.defaultMode_ = MOUSE_SELECTOR_MODE.ZOOM; - sel1.settingsKey = 'foo'; - assert.equal(sel1.mode, MOUSE_SELECTOR_MODE.ZOOM); - - sel1.mode = MOUSE_SELECTOR_MODE.PANSCAN; - - var sel2 = document.createElement('tr-ui-b-mouse-mode-selector'); - sel2.settingsKey = 'foo'; - assert.equal(sel2.mode, MOUSE_SELECTOR_MODE.PANSCAN); - }); - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_modes.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_modes.html deleted file mode 100644 index 9387ef2ce68..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_modes.html +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var MOUSE_SELECTOR_MODE = {}; - MOUSE_SELECTOR_MODE.SELECTION = 0x1; - MOUSE_SELECTOR_MODE.PANSCAN = 0x2; - MOUSE_SELECTOR_MODE.ZOOM = 0x4; - MOUSE_SELECTOR_MODE.TIMING = 0x8; - MOUSE_SELECTOR_MODE.ROTATE = 0x10; - MOUSE_SELECTOR_MODE.ALL_MODES = 0x1F; - - var MOUSE_SELECTOR_MODE_INFOS = {}; - MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.PANSCAN] = { - mode: MOUSE_SELECTOR_MODE.PANSCAN, - title: 'pan', - eventNames: { - enter: 'enterpan', - begin: 'beginpan', - update: 'updatepan', - end: 'endpan', - exit: 'exitpan' - }, - activeBackgroundPosition: '-30px -10px', - defaultBackgroundPosition: '0 -10px' - }; - MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.SELECTION] = { - mode: MOUSE_SELECTOR_MODE.SELECTION, - title: 'selection', - eventNames: { - enter: 'enterselection', - begin: 'beginselection', - update: 'updateselection', - end: 'endselection', - exit: 'exitselection' - }, - activeBackgroundPosition: '-30px -40px', - defaultBackgroundPosition: '0 -40px' - }; - - MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.ZOOM] = { - mode: MOUSE_SELECTOR_MODE.ZOOM, - title: 'zoom', - eventNames: { - enter: 'enterzoom', - begin: 'beginzoom', - update: 'updatezoom', - end: 'endzoom', - exit: 'exitzoom' - }, - activeBackgroundPosition: '-30px -70px', - defaultBackgroundPosition: '0 -70px' - }; - MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.TIMING] = { - mode: MOUSE_SELECTOR_MODE.TIMING, - title: 'timing', - eventNames: { - enter: 'entertiming', - begin: 'begintiming', - update: 'updatetiming', - end: 'endtiming', - exit: 'exittiming' - }, - activeBackgroundPosition: '-30px -100px', - defaultBackgroundPosition: '0 -100px' - }; - MOUSE_SELECTOR_MODE_INFOS[MOUSE_SELECTOR_MODE.ROTATE] = { - mode: MOUSE_SELECTOR_MODE.ROTATE, - title: 'rotate', - eventNames: { - enter: 'enterrotate', - begin: 'beginrotate', - update: 'updaterotate', - end: 'endrotate', - exit: 'exitrotate' - }, - activeBackgroundPosition: '-30px -130px', - defaultBackgroundPosition: '0 -130px' - }; - - return { - MOUSE_SELECTOR_MODE_INFOS: MOUSE_SELECTOR_MODE_INFOS, - MOUSE_SELECTOR_MODE: MOUSE_SELECTOR_MODE - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_tracker.html b/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_tracker.html deleted file mode 100644 index 3ee8c77b49b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/mouse_tracker.html +++ /dev/null @@ -1,114 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -/** - * @fileoverview A Mouse-event abtraction that waits for - * mousedown, then watches for subsequent mousemove events - * until the next mouseup event, then waits again. - * State changes are signaled with - * 'mouse-tracker-start' : mousedown and tracking - * 'mouse-tracker-move' : mouse move - * 'mouse-tracker-end' : mouseup and not tracking. - */ - -tr.exportTo('tr.ui.b', function() { - - /** - * @constructor - * @param {HTMLElement} targetElement will recv events 'mouse-tracker-start', - * 'mouse-tracker-move', 'mouse-tracker-end'. - */ - function MouseTracker(opt_targetElement) { - this.onMouseDown_ = this.onMouseDown_.bind(this); - this.onMouseMove_ = this.onMouseMove_.bind(this); - this.onMouseUp_ = this.onMouseUp_.bind(this); - - this.targetElement = opt_targetElement; - } - - MouseTracker.prototype = { - - get targetElement() { - return this.targetElement_; - }, - - set targetElement(targetElement) { - if (this.targetElement_) - this.targetElement_.removeEventListener('mousedown', this.onMouseDown_); - this.targetElement_ = targetElement; - if (this.targetElement_) - this.targetElement_.addEventListener('mousedown', this.onMouseDown_); - }, - - onMouseDown_: function(e) { - if (e.button !== 0) - return true; - - e = this.remakeEvent_(e, 'mouse-tracker-start'); - this.targetElement_.dispatchEvent(e); - document.addEventListener('mousemove', this.onMouseMove_); - document.addEventListener('mouseup', this.onMouseUp_); - this.targetElement_.addEventListener('blur', this.onMouseUp_); - this.savePreviousUserSelect_ = document.body.style['-webkit-user-select']; - document.body.style['-webkit-user-select'] = 'none'; - e.preventDefault(); - return true; - }, - - onMouseMove_: function(e) { - e = this.remakeEvent_(e, 'mouse-tracker-move'); - this.targetElement_.dispatchEvent(e); - }, - - onMouseUp_: function(e) { - document.removeEventListener('mousemove', this.onMouseMove_); - document.removeEventListener('mouseup', this.onMouseUp_); - this.targetElement_.removeEventListener('blur', this.onMouseUp_); - document.body.style['-webkit-user-select'] = - this.savePreviousUserSelect_; - e = this.remakeEvent_(e, 'mouse-tracker-end'); - this.targetElement_.dispatchEvent(e); - }, - - remakeEvent_: function(e, newType) { - var remade = new tr.b.Event(newType, true, true); - remade.x = e.x; - remade.y = e.y; - remade.offsetX = e.offsetX; - remade.offsetY = e.offsetY; - remade.clientX = e.clientX; - remade.clientY = e.clientY; - return remade; - } - - }; - - function trackMouseMovesUntilMouseUp(mouseMoveHandler, - opt_mouseUpHandler, opt_keyUpHandler) { - function cleanupAndDispatchToMouseUp(e) { - document.removeEventListener('mousemove', mouseMoveHandler); - if (opt_keyUpHandler) - document.removeEventListener('keyup', opt_keyUpHandler); - document.removeEventListener('mouseup', cleanupAndDispatchToMouseUp); - if (opt_mouseUpHandler) - opt_mouseUpHandler(e); - } - document.addEventListener('mousemove', mouseMoveHandler); - if (opt_keyUpHandler) - document.addEventListener('keyup', opt_keyUpHandler); - document.addEventListener('mouseup', cleanupAndDispatchToMouseUp); - } - - return { - MouseTracker: MouseTracker, - trackMouseMovesUntilMouseUp: trackMouseMovesUntilMouseUp - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart.html b/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart.html deleted file mode 100644 index dcfdbaa17c6..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart.html +++ /dev/null @@ -1,95 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/ui/base/d3.html"> -<link rel="import" href="/tracing/ui/base/bar_chart.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var BarChart = tr.ui.b.BarChart; - - // @constructor - var NameBarChart = tr.ui.b.define('name-bar-chart', BarChart); - - NameBarChart.prototype = { - __proto__: BarChart.prototype, - - decorate: function() { - BarChart.prototype.decorate.call(this); - this.classList.remove('bar-chart'); - this.classList.add('name-bar-chart'); - this.bottomMargin_ = 40; - }, - - isDatumFieldSeries_: function(fieldName) { - return fieldName != 'x'; - }, - - getXForDatum_: function(datum, index) { - return index; - }, - - getMargin_: function() { - var margin = BarChart.prototype.getMargin_.call(this); - margin.bottom = this.bottomMargin_; - return margin; - }, - - updateXAxis_: function(xAxis) { - xAxis.selectAll('*').remove(); - var y = this.chartAreaSize.height + 10; - var nameTexts = xAxis.selectAll('text') - .data(this.data_); - nameTexts - .enter() - .append('text') - .attr('transform', function(d, index) { - var cx = this.xScale_(index); - // If you change the angle, then check the Math.cos() below. - return 'rotate(45 ' + cx + ' ' + y + ')'; - }.bind(this)) - .attr('x', function(d, index) { - return this.xScale_(index); - }.bind(this)) - .attr('y', function(d) { - return y; - }.bind(this)) - .text(function(d, index) { - return d.x; - }.bind(this)); - nameTexts.exit().remove(); - - // If the nameTexts extend past the bottom of the chart, then increase - // this.bottomMargin_ and re-render. - var bottomMargin = this.bottomMargin_; - window.requestAnimationFrame(function() { - nameTexts[0].forEach(function(t) { - var box = t.getBBox(); - // When the text is rotated, its height is the hypotenuse - // of a small triangle H, and its width is the hypotenuse of a larger - // triangle W. The bottomMargin must be equal to a side of H plus a - // side of W. - var h = Math.cos(Math.PI / 4) * (box.height + box.width); - bottomMargin = Math.max(this.bottomMargin_, h); - }, this); - - if (Math.round(bottomMargin) !== Math.round(this.bottomMargin_)) { - this.bottomMargin_ = bottomMargin; - this.updateContents_(); - } - }.bind(this)); - } - }; - - return { - NameBarChart: NameBarChart - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart_test.html deleted file mode 100644 index 341a5a8fcb7..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/name_bar_chart_test.html +++ /dev/null @@ -1,172 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/name_bar_chart.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiation_singleSeries', function() { - var chart = new tr.ui.b.NameBarChart(); - chart.width = 200; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 'apple', value: 100}, - {x: 'ball', value: 110}, - {x: 'cat', value: 100}, - {x: 'dog', value: 50} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('undefined', function() { - var chart = new tr.ui.b.NameBarChart(); - assert.throws(function() { - chart.data = undefined; - }); - }); - - test('instantiation_twoSeries', function() { - var chart = new tr.ui.b.NameBarChart(); - - chart.width = 200; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 'apple', alpha: 100, beta: 50}, - {x: 'ball', alpha: 110, beta: 75}, - {x: 'cat', alpha: 100, beta: 125}, - {x: 'dog', alpha: 50, beta: 125} - ]; - chart.data = data; - - var r = new tr.b.Range(); - r.addValue(20); - r.addValue(40); - chart.brushedRange = r; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueSparse', function() { - var chart = new tr.ui.b.NameBarChart(); - - chart.width = 200; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 'apple', alpha: 20, beta: undefined}, - {x: 'ball', alpha: undefined, beta: 10}, - {x: 'cat', alpha: 10, beta: undefined}, - {x: 'dog', alpha: undefined, beta: 20}, - {x: 'echo', alpha: 30, beta: 30} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('instantiation_twoSparseSeriesWithFirstValueNotSparse', function() { - var chart = new tr.ui.b.NameBarChart(); - - chart.width = 200; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 'apple', alpha: 20, beta: 40}, - {x: 'ball', alpha: undefined, beta: 10}, - {x: 'cat', alpha: 10, beta: undefined}, - {x: 'dog', alpha: undefined, beta: 20}, - {x: 'echo', alpha: 30, beta: undefined} - ]; - chart.data = data; - - this.addHTMLOutput(chart); - }); - - test('brushRangeFromIndices', function() { - var chart = new tr.ui.b.NameBarChart(); - var data = [ - {x: 'apple', value: 50}, - {x: 'ball', value: 60}, - {x: 'cat', value: 70}, - {x: 'dog', value: 80}, - {x: 'echo', value: 90} - ]; - chart.data = data; - var r = new tr.b.Range(); - - // Range min should be 10. - r = chart.computeBrushRangeFromIndices(-2, 1); - assert.equal(r.min, 0); - - // Range max should be 120. - r = chart.computeBrushRangeFromIndices(3, 10); - assert.equal(r.max, 4); - - // Range should be [10, 120] - r = chart.computeBrushRangeFromIndices(-2, 10); - assert.equal(r.min, 0); - assert.equal(r.max, 4); - - // Range should be [20, 100] - r = chart.computeBrushRangeFromIndices(1, 3); - assert.equal(r.min, 0.5); - assert.equal(r.max, 3.5); - }); - - test('instantiation_interactiveBrushing', function() { - var chart = new tr.ui.b.NameBarChart(); - chart.width = 300; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 'apple', value: 50}, - {x: 'ball', value: 60}, - {x: 'cat', value: 80}, - {x: 'dog', value: 20}, - {x: 'echo', value: 30}, - {x: 'fortune', value: 20}, - {x: 'gpu', value: 15}, - {x: 'happy', value: 20} - ]; - chart.data = data; - - var mouseDownIndex = undefined; - var currentMouseIndex = undefined; - - function updateBrushedRange() { - var r = new tr.b.Range(); - r.min = Math.max(0, Math.min(mouseDownIndex, currentMouseIndex)); - r.max = Math.min(data.length, Math.max(mouseDownIndex, - currentMouseIndex) + 1); - chart.brushedRange = r; - } - - chart.addEventListener('item-mousedown', function(e) { - mouseDownIndex = e.index; - currentMouseIndex = e.index; - updateBrushedRange(); - }); - chart.addEventListener('item-mousemove', function(e) { - if (e.button === undefined) - return; - currentMouseIndex = e.index; - updateBrushedRange(); - }); - chart.addEventListener('item-mouseup', function(e) { - currentMouseIndex = e.index; - updateBrushedRange(); - }); - this.addHTMLOutput(chart); - }); -}); -</script> - diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/overlay.html b/chromium/third_party/catapult/tracing/tracing/ui/base/overlay.html deleted file mode 100644 index df8e13ceddf..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/overlay.html +++ /dev/null @@ -1,340 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/utils.html"> -<link rel="import" href="/tracing/base/event.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<template id="overlay-template"> - <style> - overlay-mask { - left: 0; - padding: 8px; - position: absolute; - top: 0; - z-index: 1000; - font-family: sans-serif; - -webkit-justify-content: center; - background: rgba(0, 0, 0, 0.8); - display: -webkit-flex; - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - } - overlay-mask:focus { - outline: none; - } - overlay-vertical-centering-container { - -webkit-justify-content: center; - -webkit-flex-direction: column; - display: -webkit-flex; - } - overlay-frame { - z-index: 1100; - background: rgb(255, 255, 255); - border: 1px solid #ccc; - margin: 75px; - display: -webkit-flex; - -webkit-flex-direction: column; - min-height: 0; - } - title-bar { - -webkit-align-items: center; - -webkit-flex-direction: row; - border-bottom: 1px solid #ccc; - background-color: #ddd; - display: -webkit-flex; - padding: 5px; - -webkit-flex: 0 0 auto; - } - title { - display: inline; - font-weight: bold; - -webkit-box-flex: 1; - -webkit-flex: 1 1 auto; - } - close-button { - -webkit-align-self: flex-end; - border: 1px solid #eee; - background-color: #999; - font-size: 10pt; - font-weight: bold; - padding: 2px; - text-align: center; - width: 16px; - } - close-button:hover { - background-color: #ddd; - border-color: black; - cursor: pointer; - } - overlay-content { - display: -webkit-flex; - -webkit-flex: 1 1 auto; - -webkit-flex-direction: column; - overflow-y: auto; - padding: 10px; - min-width: 300px; - min-height: 0; - } - button-bar { - -webkit-align-items: baseline; - border-top: 1px solid #ccc; - display: -webkit-flex; - -webkit-flex: 0 0 auto; - -webkit-flex-direction: row-reverse; - padding: 4px; - } - </style> - - <overlay-mask> - <overlay-vertical-centering-container> - <overlay-frame> - <title-bar> - <title></title> - <close-button>✕</close-button> - </title-bar> - <overlay-content> - <content></content> - </overlay-content> - <button-bar></button-bar> - </overlay-frame> - </overlay-vertical-centering-container> - </overlay-mask> -</template> - -<script> -'use strict'; - -/** - * @fileoverview Implements an element that is hidden by default, but - * when shown, dims and (attempts to) disable the main document. - * - * You can turn any div into an overlay. Note that while an - * overlay element is shown, its parent is changed. Hiding the overlay - * restores its original parentage. - * - */ -tr.exportTo('tr.ui.b', function() { - if (tr.isHeadless) - return {}; - - var THIS_DOC = document.currentScript.ownerDocument; - - /** - * Creates a new overlay element. It will not be visible until shown. - * @constructor - * @extends {HTMLDivElement} - */ - var Overlay = tr.ui.b.define('overlay'); - - Overlay.prototype = { - __proto__: HTMLDivElement.prototype, - - /** - * Initializes the overlay element. - */ - decorate: function() { - this.classList.add('overlay'); - - this.parentEl_ = this.ownerDocument.body; - - this.visible_ = false; - this.userCanClose_ = true; - - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onClick_ = this.onClick_.bind(this); - this.onFocusIn_ = this.onFocusIn_.bind(this); - this.onDocumentClick_ = this.onDocumentClick_.bind(this); - this.onClose_ = this.onClose_.bind(this); - - this.addEventListener('visible-change', - tr.ui.b.Overlay.prototype.onVisibleChange_.bind(this), true); - - // Setup the shadow root - var createShadowRoot = this.createShadowRoot || - this.webkitCreateShadowRoot; - this.shadow_ = createShadowRoot.call(this); - this.shadow_.appendChild(tr.ui.b.instantiateTemplate('#overlay-template', - THIS_DOC)); - - this.closeBtn_ = this.shadow_.querySelector('close-button'); - this.closeBtn_.addEventListener('click', this.onClose_); - - this.shadow_ - .querySelector('overlay-frame') - .addEventListener('click', this.onClick_); - - this.observer_ = new WebKitMutationObserver( - this.didButtonBarMutate_.bind(this)); - this.observer_.observe(this.shadow_.querySelector('button-bar'), - { childList: true }); - - // title is a variable on regular HTMLElements. However, we want to - // use it for something more useful. - Object.defineProperty( - this, 'title', { - get: function() { - return this.shadow_.querySelector('title').textContent; - }, - set: function(title) { - this.shadow_.querySelector('title').textContent = title; - } - }); - }, - - set userCanClose(userCanClose) { - this.userCanClose_ = userCanClose; - this.closeBtn_.style.display = - userCanClose ? 'block' : 'none'; - }, - - get buttons() { - return this.shadow_.querySelector('button-bar'); - }, - - get visible() { - return this.visible_; - }, - - set visible(newValue) { - if (this.visible_ === newValue) - return; - - this.visible_ = newValue; - var e = new tr.b.Event('visible-change'); - this.dispatchEvent(e); - }, - - onVisibleChange_: function() { - this.visible_ ? this.show_() : this.hide_(); - }, - - show_: function() { - this.parentEl_.appendChild(this); - - if (this.userCanClose_) { - this.addEventListener('keydown', this.onKeyDown_.bind(this)); - this.addEventListener('click', this.onDocumentClick_.bind(this)); - } - - this.parentEl_.addEventListener('focusin', this.onFocusIn_); - this.tabIndex = 0; - - // Focus the first thing we find that makes sense. (Skip the close button - // as it doesn't make sense as the first thing to focus.) - var focusEl = undefined; - var elList = this.querySelectorAll('button, input, list, select, a'); - if (elList.length > 0) { - if (elList[0] === this.closeBtn_) { - if (elList.length > 1) - focusEl = elList[1]; - } else { - focusEl = elList[0]; - } - } - if (focusEl === undefined) - focusEl = this; - focusEl.focus(); - }, - - hide_: function() { - this.parentEl_.removeChild(this); - - this.parentEl_.removeEventListener('focusin', this.onFocusIn_); - - if (this.closeBtn_) - this.closeBtn_.removeEventListener('click', this.onClose_); - - document.removeEventListener('keydown', this.onKeyDown_); - document.removeEventListener('click', this.onDocumentClick_); - }, - - onClose_: function(e) { - this.visible = false; - if ((e.type != 'keydown') || - (e.type === 'keydown' && e.keyCode === 27)) - e.stopPropagation(); - e.preventDefault(); - tr.b.dispatchSimpleEvent(this, 'closeclick'); - }, - - onFocusIn_: function(e) { - if (e.target === this) - return; - - window.setTimeout(function() { this.focus(); }, 0); - e.preventDefault(); - e.stopPropagation(); - }, - - didButtonBarMutate_: function(e) { - var hasButtons = this.buttons.children.length > 0; - if (hasButtons) - this.shadow_.querySelector('button-bar').style.display = undefined; - else - this.shadow_.querySelector('button-bar').style.display = 'none'; - }, - - onKeyDown_: function(e) { - // Disallow shift-tab back to another element. - if (e.keyCode === 9 && // tab - e.shiftKey && - e.target === this) { - e.preventDefault(); - return; - } - - if (e.keyCode !== 27) // escape - return; - - this.onClose_(e); - }, - - onClick_: function(e) { - e.stopPropagation(); - }, - - onDocumentClick_: function(e) { - if (!this.userCanClose_) - return; - - this.onClose_(e); - } - }; - - Overlay.showError = function(msg, opt_err) { - var o = new Overlay(); - o.title = 'Error'; - o.textContent = msg; - if (opt_err) { - var e = tr.b.normalizeException(opt_err); - - var stackDiv = document.createElement('pre'); - stackDiv.textContent = e.stack; - stackDiv.style.paddingLeft = '8px'; - stackDiv.style.margin = 0; - o.appendChild(stackDiv); - } - var b = document.createElement('button'); - b.textContent = 'OK'; - b.addEventListener('click', function() { - o.visible = false; - }); - o.buttons.appendChild(b); - o.visible = true; - return o; - } - - return { - Overlay: Overlay - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/overlay_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/overlay_test.html deleted file mode 100644 index d1d1b31e8e3..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/overlay_test.html +++ /dev/null @@ -1,124 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/overlay.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function addShowButtonForDialog(dlg) { - var btn = document.createElement('button'); - btn.textContent = 'Launch Overlay'; - btn.addEventListener('click', function(e) { - dlg.visible = true; - e.stopPropagation(); - }); - - this.addHTMLOutput(btn); - } - - function makeButton(title) { - var btn = document.createElement('button'); - btn.textContent = title; - return btn; - } - - function makeCloseButton(dlg) { - var btn = makeButton('close'); - btn.addEventListener('click', function(e) { - dlg.onClose_(e); - }); - return btn; - } - - test('instantiate', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.classList.add('example-overlay'); - dlg.title = 'ExampleOverlay'; - dlg.innerHTML = 'hello'; - dlg.buttons.appendChild(makeButton('i am a button')); - dlg.buttons.appendChild(makeCloseButton(dlg)); - dlg.buttons.appendChild(tr.ui.b.createSpan( - {textContent: 'i am a span'})); - addShowButtonForDialog.call(this, dlg); - }); - - test('instantiate_noButtons', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.classList.add('example-overlay'); - dlg.title = 'ExampleOverlay'; - dlg.innerHTML = 'hello'; - addShowButtonForDialog.call(this, dlg); - }); - - test('instantiate_disableUserClose', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.classList.add('example-overlay'); - dlg.userCanClose = false; - dlg.title = 'Unclosable'; - dlg.innerHTML = 'This has no close X button.'; - dlg.buttons.appendChild(makeCloseButton(dlg)); - addShowButtonForDialog.call(this, dlg); - }); - - test('instantiateTall', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.title = 'TallContent'; - var contentEl = document.createElement('div'); - contentEl.style.overflowY = 'auto'; - dlg.appendChild(contentEl); - - for (var i = 0; i < 1000; i++) { - var el = document.createElement('div'); - el.textContent = 'line ' + i; - contentEl.appendChild(el); - } - - - dlg.buttons.appendChild(makeButton('i am a button')); - addShowButtonForDialog.call(this, dlg); - }); - - test('instantiateTallWithManyDirectChildren', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.title = 'TallContent'; - for (var i = 0; i < 100; i++) { - var el = document.createElement('div'); - el.style.webkitFlex = '1 0 auto'; - el.textContent = 'line ' + i; - dlg.appendChild(el); - } - - dlg.buttons.appendChild(makeButton('i am a button')); - addShowButtonForDialog.call(this, dlg); - }); - - test('closeclickEvent', function() { - var dlg = new tr.ui.b.Overlay(); - dlg.title = 'Test closeclick event'; - var closeBtn = makeCloseButton(dlg); - dlg.buttons.appendChild(closeBtn); - - var closeClicked = false; - dlg.addEventListener('closeclick', function() { - closeClicked = true; - }); - - return new Promise(function(resolve, reject) { - function pressClose() { - closeBtn.click(); - if (closeClicked) - resolve(); - else - reject(new Error('closeclick event is not dispatched')); - } - dlg.visible = true; - setTimeout(pressClose, 60); - }); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.css b/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.css deleted file mode 100644 index e6dc135bf12..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.css +++ /dev/null @@ -1,16 +0,0 @@ -/* Copyright 2014 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. - */ -* /deep/ .pie-chart .arc-text { - font-size: 8pt; -} - -* /deep/ .pie-chart .label { - font-size: 10pt; -} - -* /deep/ .pie-chart polyline { - fill: none; - stroke: black; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.html b/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.html deleted file mode 100644 index 5edfd795219..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart.html +++ /dev/null @@ -1,277 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/ui/base/d3.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/chart_base.html"> -<link rel="stylesheet" href="/tracing/ui/base/pie_chart.css"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ChartBase = tr.ui.b.ChartBase; - var getColorOfKey = tr.ui.b.getColorOfKey; - - var MIN_RADIUS = 100; - - /** - * @constructor - */ - var PieChart = tr.ui.b.define('pie-chart', ChartBase); - - PieChart.prototype = { - __proto__: ChartBase.prototype, - - decorate: function() { - ChartBase.prototype.decorate.call(this); - this.classList.add('pie-chart'); - - this.data_ = undefined; - this.seriesKeys_ = undefined; - - var chartAreaSel = d3.select(this.chartAreaElement); - var pieGroupSel = chartAreaSel.append('g') - .attr('class', 'pie-group'); - this.pieGroup_ = pieGroupSel.node(); - - this.pathsGroup_ = pieGroupSel.append('g') - .attr('class', 'paths') - .node(); - this.labelsGroup_ = pieGroupSel.append('g') - .attr('class', 'labels') - .node(); - this.linesGroup_ = pieGroupSel.append('g') - .attr('class', 'lines') - .node(); - }, - - get data() { - return this.data_; - }, - - - /** - * @param {Array} data Data for the chart, where each element in the array - * must be of the form {label: str, value: number}. - */ - set data(data) { - if (data !== undefined) { - // Figure out the label values in the data set. E.g. from - // [{label: 'a', ...}, {label: 'b', ...}] - // we would commpute ['a', 'y']. These become the series keys. - var seriesKeys = []; - var seenSeriesKeys = {}; - data.forEach(function(d) { - var k = d.label; - if (seenSeriesKeys[k]) - throw new Error('Label ' + k + ' has been used already'); - seriesKeys.push(k); - seenSeriesKeys[k] = true; - }, this); - this.seriesKeys_ = seriesKeys; - } else { - this.seriesKeys_ = undefined; - } - this.data_ = data; - this.updateContents_(); - }, - - get margin() { - var margin = {top: 0, right: 0, bottom: 0, left: 0}; - if (this.chartTitle_) - margin.top += 40; - return margin; - }, - - getMinSize: function() { - this.updateContents_(); - - var labelSel = d3.select(this.labelsGroup_).selectAll('.label'); - var maxLabelWidth = -Number.MAX_VALUE; - var leftTextHeightSum = 0; - var rightTextHeightSum = 0; - labelSel.each(function(l) { - var r = this.getBoundingClientRect(); - maxLabelWidth = Math.max(maxLabelWidth, r.width + 32); - if (this.style.textAnchor == 'end') { - leftTextHeightSum += r.height; - } else { - rightTextHeightSum += r.height; - } - }); - - var titleWidth = this.querySelector( - '#title').getBoundingClientRect().width; - var margin = this.margin; - var marginWidth = margin.left + margin.right; - var marginHeight = margin.top + margin.bottom; - return { - width: Math.max(2 * MIN_RADIUS + 2 * maxLabelWidth, - titleWidth * 1.1) + marginWidth, - height: marginHeight + Math.max(2 * MIN_RADIUS, - leftTextHeightSum, - rightTextHeightSum) * 1.25 - }; - }, - - - getLegendKeys_: function() { - // This class creates its own legend, instead of using ChartBase. - return undefined; - }, - - updateScales_: function(width, height) { - if (this.data_ === undefined) - return; - }, - - updateContents_: function() { - ChartBase.prototype.updateContents_.call(this); - if (!this.data_) - return; - - var width = this.chartAreaSize.width; - var height = this.chartAreaSize.height; - var radius = Math.max(MIN_RADIUS, Math.min(width, height * 0.95) / 2); - - d3.select(this.pieGroup_).attr( - 'transform', - 'translate(' + width / 2 + ',' + height / 2 + ')'); - - // Bind the pie layout to its data - var pieLayout = d3.layout.pie() - .value(function(d) { return d.value; }) - .sort(null); - - var piePathsSel = d3.select(this.pathsGroup_) - .datum(this.data_) - .selectAll('path') - .data(pieLayout); - - function midAngle(d) { - return d.startAngle + (d.endAngle - d.startAngle) / 2; - } - - var pathsArc = d3.svg.arc() - .innerRadius(0) - .outerRadius(radius - 30); - - var valueLabelArc = d3.svg.arc() - .innerRadius(radius - 100) - .outerRadius(radius - 30); - - var lineBeginArc = d3.svg.arc() - .innerRadius(radius - 50) - .outerRadius(radius - 50); - - var lineEndArc = d3.svg.arc() - .innerRadius(radius) - .outerRadius(radius); - - // Paths. - piePathsSel.enter().append('path') - .attr('class', 'arc') - .attr('fill', function(d, i) { - var origData = this.data_[i]; - var highlighted = (origData.label === - this.currentHighlightedLegendKey); - return getColorOfKey(origData.label, highlighted); - }.bind(this)) - .attr('d', pathsArc) - .on('click', function(d, i) { - var origData = this.data_[i]; - var event = new tr.b.Event('item-click'); - event.data = origData; - event.index = i; - this.dispatchEvent(event); - d3.event.stopPropagation(); - }.bind(this)) - .on('mouseenter', function(d, i) { - var origData = this.data_[i]; - this.pushTempHighlightedLegendKey(origData.label); - }.bind(this)) - .on('mouseleave', function(d, i) { - var origData = this.data_[i]; - this.popTempHighlightedLegendKey(origData.label); - }.bind(this)); - - // Value labels. - piePathsSel.enter().append('text') - .attr('class', 'arc-text') - .attr('transform', function(d) { - return 'translate(' + valueLabelArc.centroid(d) + ')'; - }) - .attr('dy', '.35em') - .style('text-anchor', 'middle') - .text(function(d, i) { - var origData = this.data_[i]; - if (origData.valueText === undefined) - return ''; - - if (d.endAngle - d.startAngle < 0.4) - return ''; - return origData.valueText; - }.bind(this)); - - piePathsSel.exit().remove(); - - // Labels. - var labelSel = d3.select(this.labelsGroup_).selectAll('.label') - .data(pieLayout(this.data_)); - labelSel.enter() - .append('text') - .attr('class', 'label') - .attr('dy', '.35em'); - - labelSel.text(function(d) { - if (d.data.label.length > 40) - return d.data.label.substr(0, 40) + '...'; - return d.data.label; - }); - labelSel.attr('transform', function(d) { - var pos = lineEndArc.centroid(d); - pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1); - return 'translate(' + pos + ')'; - }); - labelSel.style('text-anchor', function(d) { - return midAngle(d) < Math.PI ? 'start' : 'end'; - }); - - // Lines. - var lineSel = d3.select(this.linesGroup_).selectAll('.line') - .data(pieLayout(this.data_)); - lineSel.enter() - .append('polyline') - .attr('class', 'line') - .attr('dy', '.35em'); - lineSel.attr('points', function(d) { - var pos = lineEndArc.centroid(d); - pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); - return [lineBeginArc.centroid(d), lineEndArc.centroid(d), pos]; - }); - }, - - updateHighlight_: function() { - ChartBase.prototype.updateHighlight_.call(this); - // Update color of pie segments. - var pathsGroupSel = d3.select(this.pathsGroup_); - var that = this; - pathsGroupSel.selectAll('.arc').each(function(d, i) { - var origData = that.data_[i]; - var highlighted = origData.label == that.currentHighlightedLegendKey; - var color = getColorOfKey(origData.label, highlighted); - this.style.fill = color; - }); - } - }; - - return { - PieChart: PieChart - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart_test.html deleted file mode 100644 index 7c0b35f5462..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/pie_chart_test.html +++ /dev/null @@ -1,207 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/pie_chart.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('simple', function() { - var chart = new tr.ui.b.PieChart(); - chart.width = 400; - chart.height = 200; - assert.equal(chart.getAttribute('width'), '400'); - assert.equal(chart.getAttribute('height'), '200'); - chart.chartTitle = 'Chart title'; - var data = [ - {label: 'a', value: 100}, - {label: 'b', value: 200}, - {label: 'c', value: 300} - ]; - chart.data = data; - chart.highlightedLegendKey = 'a'; - chart.pushTempHighlightedLegendKey('b'); - chart.highlightedLegendKey = 'c'; - assert.equal(chart.currentHighlightedLegendKey, 'b'); - chart.popTempHighlightedLegendKey('b'); - assert.equal(chart.highlightedLegendKey, 'c'); - this.addHTMLOutput(chart); - }); - - test('withValueText', function() { - var chart = new tr.ui.b.PieChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {label: 'a', value: 100, valueText: '100ms'}, - {label: 'b', value: 200, valueText: '200ms'}, - {label: 'c', value: 300, valueText: '300ms'} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('clickEvent', function() { - var chart = new tr.ui.b.PieChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {label: 'a', value: 100, foo: 42}, - {label: 'b', value: 200, foo: 43} - ]; - chart.data = data; - - var didGetClick = false; - chart.addEventListener('item-click', function(event) { - assert.equal(event.index, 1); - assert.equal(event.data.foo, 43); - didGetClick = true; - }); - - var arc0 = chart.querySelectorAll('.paths > path')[1]; - tr.b.dispatchSimpleEvent(arc0, 'click'); - assert.isTrue(didGetClick); - }); - - test('lotsOfValues', function() { - var chart = new tr.ui.b.PieChart(); - chart.chartTitle = 'Chart title'; - var data = [ - {label: 'a', value: 100}, - {label: 'bb', value: 200}, - {label: 'cccc', value: 300}, - {label: 'dd', value: 50}, - {label: 'eeeee', value: 250}, - {label: 'fffffff', value: 120}, - {label: 'ggg', value: 90}, - {label: 'hhhh', value: 175}, - {label: 'toolongiiiiiiiiiiiiiiiiiiiiiiiii', value: 325}, - {label: 'jjjjjj', value: 140}, - {label: 'kkkkkkkkk', value: 170}, - {label: 'lll', value: 220} - ]; - chart.data = data; - this.addHTMLOutput(chart); - - var minSize = chart.getMinSize(); - chart.setSize(chart.getMinSize()); - }); - - test('denseValues', function() { - var chart = new tr.ui.b.PieChart(); - chart.chartTitle = 'Chart title'; - var data = [ - { - valueText: '2.855ms', - value: 2.854999999999997, - label: '156959' - }, - { - valueText: '9.949ms', - value: 9.948999999999998, - label: '16131' - }, - { - valueText: '42.314ms', - value: 42.314000000000725, - label: '51511' - }, - { - valueText: '31.069ms', - value: 31.06900000000028, - label: 'AudioOutputDevice' - }, - { - valueText: '1.418ms', - value: 1.418, - label: 'BrowserBlockingWorker2/50951' - }, - { - valueText: '0.044ms', - value: 0.044, - label: 'BrowserBlockingWorker3/50695' - }, - { - valueText: '18.526ms', - value: 18.52599999999993, - label: 'Chrome_ChildIOThread' - }, - { - valueText: '2.888ms', - value: 2.888, - label: 'Chrome_FileThread' - }, - { - valueText: '0.067ms', - value: 0.067, - label: 'Chrome_HistoryThread' - }, - { - valueText: '25.421ms', - value: 25.421000000000046, - label: 'Chrome_IOThread' - }, - { - valueText: '0.019ms', - value: 0.019, - label: 'Chrome_ProcessLauncherThread' - }, - { - valueText: '643.088ms', - value: 643.087999999995, - label: 'Compositor' - }, - { - valueText: '4.05ms', - value: 4.049999999999973, - label: 'CompositorRasterWorker1/22031' - }, - { - valueText: '50.04ms', - value: 50.040000000000106, - label: 'CrBrowserMain' - }, - { - valueText: '1256.513ms', - value: 1256.5130000000042, - label: 'CrGpuMain' - }, - { - valueText: '5502.195ms', - value: 5502.19499999999, - label: 'CrRendererMain' - }, - { - valueText: '15.553ms', - value: 15.552999999999862, - label: 'FFmpegDemuxer' - }, - { - valueText: '63.706ms', - value: 63.706000000001524, - label: 'Media' - }, - { - valueText: '2.742ms', - value: 2.7419999999999987, - label: 'PowerSaveBlocker' - }, - { - valueText: '0.115ms', - value: 0.11500000000000005, - label: 'Watchdog' - } - ]; - chart.data = data; - this.addHTMLOutput(chart); - - var minSize = chart.getMinSize(); - chart.setSize(chart.getMinSize()); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils.html b/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils.html deleted file mode 100644 index b8c5e9d050d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils.html +++ /dev/null @@ -1,64 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/base.html"> - -<script> -'use strict'; - -/** - * @fileoverview Helper code for working with Polymer. - */ -tr.exportTo('tr.ui.b', function() { - - function getPolymerElementNamed(tagName) { - for (var i = 0; i < Polymer.elements.length; i++) { - if (Polymer.elements[i].name === tagName) - return Polymer.elements[i]; - } - } - - function getPolymerElementsThatSubclass(tagName) { - if (Polymer.waitingFor().length) { - throw new Error('There are unresolved polymer elements. ' + - 'Wait until Polymer.whenReady'); - } - - var baseElement; - var elementNamesThatExtend = {}; - Polymer.elements.forEach(function(element) { - if (element.name === tagName) - baseElement = element; - - if (element.extends) { - if (elementNamesThatExtend[element.extends] === undefined) - elementNamesThatExtend[element.extends] = []; - elementNamesThatExtend[element.extends].push(element.name); - } - }); - - if (!baseElement) - throw new Error(tagName + ' is not a polymer element'); - - var allFoundSubElementNames = [baseElement.name]; - for (var i = 0; i < allFoundSubElementNames.length; i++) { - var elementName = allFoundSubElementNames[i]; - allFoundSubElementNames.push.apply( - allFoundSubElementNames, elementNamesThatExtend[elementName]); - } - - // Remove the base element tag name from the list. - allFoundSubElementNames.shift(); - - return allFoundSubElementNames; - } - - return { - getPolymerElementNamed: getPolymerElementNamed, - getPolymerElementsThatSubclass: getPolymerElementsThatSubclass - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils_test.html deleted file mode 100644 index 698ec0cdc17..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/polymer_utils_test.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<!-- -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. ---> - -<link rel="import" href="/tracing/ui/base/polymer_utils.html"> - -<!-- -The Polymer elements defined in this file form the following class hierarchy: - - A (common superclass) - / \ - B C - / \ - D E - / \ - F G ---> - -<polymer-element name="polymer-utils-test-element-a" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-b" - extends="polymer-utils-test-element-a" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-c" - extends="polymer-utils-test-element-a" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-d" - extends="polymer-utils-test-element-c" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-e" - extends="polymer-utils-test-element-c" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-f" - extends="polymer-utils-test-element-d" noscript> -</polymer-element> - -<polymer-element name="polymer-utils-test-element-g" - extends="polymer-utils-test-element-d" noscript> -</polymer-element> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('getPolymerElementsThatSubclass', function() { - function checkSubclasses(classNameSuffix, subclassNameSuffixes) { - var className = 'polymer-utils-test-element-' + classNameSuffix; - var subclassNames = subclassNameSuffixes.map( - function(subclassNameSuffix) { - return 'polymer-utils-test-element-' + subclassNameSuffix; - }); - assert.sameMembers( - tr.ui.b.getPolymerElementsThatSubclass(className), subclassNames); - } - - checkSubclasses('a', ['b', 'c', 'd', 'e', 'f', 'g']); - checkSubclasses('b', []); - checkSubclasses('c', ['d', 'e', 'f', 'g']); - checkSubclasses('d', ['f', 'g']); - checkSubclasses('e', []); - checkSubclasses('f', []); - checkSubclasses('g', []); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/quad_stack_view.html b/chromium/third_party/catapult/tracing/tracing/ui/base/quad_stack_view.html deleted file mode 100644 index 7c181a61857..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/quad_stack_view.html +++ /dev/null @@ -1,689 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> -<link rel="import" href="/tracing/base/bbox2.html"> -<link rel="import" href="/tracing/base/math.html"> -<link rel="import" href="/tracing/base/quad.html"> -<link rel="import" href="/tracing/base/raf.html"> -<link rel="import" href="/tracing/base/rect.html"> -<link rel="import" href="/tracing/base/settings.html"> -<link rel="import" href="/tracing/ui/base/camera.html"> -<link rel="import" href="/tracing/ui/base/mouse_mode_selector.html"> -<link rel="import" href="/tracing/ui/base/mouse_tracker.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<style> -* /deep/ quad-stack-view { - display: block; - float: left; - height: 100%; - overflow: hidden; - position: relative; /* For the absolute positioned mouse-mode-selector */ - width: 100%; -} - -* /deep/ quad-stack-view > #header { - position: absolute; - font-size: 70%; - top: 10px; - left: 10px; - width: 800px; -} -* /deep/ quad-stack-view > #stacking-distance-slider { - position: absolute; - font-size: 70%; - top: 10px; - right: 10px; -} - -* /deep/ quad-stack-view > #chrome-left { - background-image: url('../images/chrome-left.png'); - display: none; -} - -* /deep/ quad-stack-view > #chrome-mid { - background-image: url('../images/chrome-mid.png'); - display: none; -} - -* /deep/ quad-stack-view > #chrome-right { - background-image: url('../images/chrome-right.png'); - display: none; -} -</style> - -<template id='quad-stack-view-template'> - <div id="header"></div> - <input id="stacking-distance-slider" type="range" min=1 max=400 step=1> - </input> - <canvas id='canvas'></canvas> - <img id='chrome-left'/> - <img id='chrome-mid'/> - <img id='chrome-right'/> -</template> - -<script> -'use strict'; - -/** - * @fileoverview QuadStackView controls the content and viewing angle a - * QuadStack. - */ -tr.exportTo('tr.ui.b', function() { - var THIS_DOC = document.currentScript.ownerDocument; - - var constants = {}; - constants.IMAGE_LOAD_RETRY_TIME_MS = 500; - constants.SUBDIVISION_MINIMUM = 1; - constants.SUBDIVISION_RECURSION_DEPTH = 3; - constants.SUBDIVISION_DEPTH_THRESHOLD = 100; - constants.FAR_PLANE_DISTANCE = 10000; - - // Care of bckenney@ via - // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120 - function drawTexturedTriangle(ctx, img, p0, p1, p2, t0, t1, t2) { - var tmp_p0 = [p0[0], p0[1]]; - var tmp_p1 = [p1[0], p1[1]]; - var tmp_p2 = [p2[0], p2[1]]; - var tmp_t0 = [t0[0], t0[1]]; - var tmp_t1 = [t1[0], t1[1]]; - var tmp_t2 = [t2[0], t2[1]]; - - ctx.beginPath(); - ctx.moveTo(tmp_p0[0], tmp_p0[1]); - ctx.lineTo(tmp_p1[0], tmp_p1[1]); - ctx.lineTo(tmp_p2[0], tmp_p2[1]); - ctx.closePath(); - - tmp_p1[0] -= tmp_p0[0]; - tmp_p1[1] -= tmp_p0[1]; - tmp_p2[0] -= tmp_p0[0]; - tmp_p2[1] -= tmp_p0[1]; - - tmp_t1[0] -= tmp_t0[0]; - tmp_t1[1] -= tmp_t0[1]; - tmp_t2[0] -= tmp_t0[0]; - tmp_t2[1] -= tmp_t0[1]; - - var det = 1 / (tmp_t1[0] * tmp_t2[1] - tmp_t2[0] * tmp_t1[1]), - - // linear transformation - a = (tmp_t2[1] * tmp_p1[0] - tmp_t1[1] * tmp_p2[0]) * det, - b = (tmp_t2[1] * tmp_p1[1] - tmp_t1[1] * tmp_p2[1]) * det, - c = (tmp_t1[0] * tmp_p2[0] - tmp_t2[0] * tmp_p1[0]) * det, - d = (tmp_t1[0] * tmp_p2[1] - tmp_t2[0] * tmp_p1[1]) * det, - - // translation - e = tmp_p0[0] - a * tmp_t0[0] - c * tmp_t0[1], - f = tmp_p0[1] - b * tmp_t0[0] - d * tmp_t0[1]; - - ctx.save(); - ctx.transform(a, b, c, d, e, f); - ctx.clip(); - ctx.drawImage(img, 0, 0); - ctx.restore(); - } - - function drawTriangleSub( - ctx, img, p0, p1, p2, t0, t1, t2, opt_recursion_depth) { - var depth = opt_recursion_depth || 0; - - // We may subdivide if we are not at the limit of recursion. - var subdivisionIndex = 0; - if (depth < constants.SUBDIVISION_MINIMUM) { - subdivisionIndex = 7; - } else if (depth < constants.SUBDIVISION_RECURSION_DEPTH) { - if (Math.abs(p0[2] - p1[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD) - subdivisionIndex += 1; - if (Math.abs(p0[2] - p2[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD) - subdivisionIndex += 2; - if (Math.abs(p1[2] - p2[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD) - subdivisionIndex += 4; - } - - // These need to be created every time, since temporaries - // outside of the scope will be rewritten in recursion. - var p01 = vec4.create(); - var p02 = vec4.create(); - var p12 = vec4.create(); - var t01 = vec2.create(); - var t02 = vec2.create(); - var t12 = vec2.create(); - - // Calculate the position before w-divide. - for (var i = 0; i < 2; ++i) { - p0[i] *= p0[2]; - p1[i] *= p1[2]; - p2[i] *= p2[2]; - } - - // Interpolate the 3d position. - for (var i = 0; i < 4; ++i) { - p01[i] = (p0[i] + p1[i]) / 2; - p02[i] = (p0[i] + p2[i]) / 2; - p12[i] = (p1[i] + p2[i]) / 2; - } - - // Re-apply w-divide to the original points and the interpolated ones. - for (var i = 0; i < 2; ++i) { - p0[i] /= p0[2]; - p1[i] /= p1[2]; - p2[i] /= p2[2]; - - p01[i] /= p01[2]; - p02[i] /= p02[2]; - p12[i] /= p12[2]; - } - - // Interpolate the texture coordinates. - for (var i = 0; i < 2; ++i) { - t01[i] = (t0[i] + t1[i]) / 2; - t02[i] = (t0[i] + t2[i]) / 2; - t12[i] = (t1[i] + t2[i]) / 2; - } - - // Based on the index, we subdivide the triangle differently. - // Assuming the triangle is p0, p1, p2 and points between i j - // are represented as pij (that is, a point between p2 and p0 - // is p02, etc), then the new triangles are defined by - // the 3rd 4th and 5th arguments into the function. - switch (subdivisionIndex) { - case 1: - drawTriangleSub(ctx, img, p0, p01, p2, t0, t01, t2, depth + 1); - drawTriangleSub(ctx, img, p01, p1, p2, t01, t1, t2, depth + 1); - break; - case 2: - drawTriangleSub(ctx, img, p0, p1, p02, t0, t1, t02, depth + 1); - drawTriangleSub(ctx, img, p1, p02, p2, t1, t02, t2, depth + 1); - break; - case 3: - drawTriangleSub(ctx, img, p0, p01, p02, t0, t01, t02, depth + 1); - drawTriangleSub(ctx, img, p02, p01, p2, t02, t01, t2, depth + 1); - drawTriangleSub(ctx, img, p01, p1, p2, t01, t1, t2, depth + 1); - break; - case 4: - drawTriangleSub(ctx, img, p0, p12, p2, t0, t12, t2, depth + 1); - drawTriangleSub(ctx, img, p0, p1, p12, t0, t1, t12, depth + 1); - break; - case 5: - drawTriangleSub(ctx, img, p0, p01, p2, t0, t01, t2, depth + 1); - drawTriangleSub(ctx, img, p2, p01, p12, t2, t01, t12, depth + 1); - drawTriangleSub(ctx, img, p01, p1, p12, t01, t1, t12, depth + 1); - break; - case 6: - drawTriangleSub(ctx, img, p0, p12, p02, t0, t12, t02, depth + 1); - drawTriangleSub(ctx, img, p0, p1, p12, t0, t1, t12, depth + 1); - drawTriangleSub(ctx, img, p02, p12, p2, t02, t12, t2, depth + 1); - break; - case 7: - drawTriangleSub(ctx, img, p0, p01, p02, t0, t01, t02, depth + 1); - drawTriangleSub(ctx, img, p01, p12, p02, t01, t12, t02, depth + 1); - drawTriangleSub(ctx, img, p01, p1, p12, t01, t1, t12, depth + 1); - drawTriangleSub(ctx, img, p02, p12, p2, t02, t12, t2, depth + 1); - break; - default: - // In the 0 case and all other cases, we simply draw the triangle. - drawTexturedTriangle(ctx, img, p0, p1, p2, t0, t1, t2); - break; - } - } - - // Created to avoid creating garbage when doing bulk transforms. - var tmp_vec4 = vec4.create(); - function transform(transformed, point, matrix, viewport) { - vec4.set(tmp_vec4, point[0], point[1], 0, 1); - vec4.transformMat4(tmp_vec4, tmp_vec4, matrix); - - var w = tmp_vec4[3]; - if (w < 1e-6) w = 1e-6; - - transformed[0] = ((tmp_vec4[0] / w) + 1) * viewport.width / 2; - transformed[1] = ((tmp_vec4[1] / w) + 1) * viewport.height / 2; - transformed[2] = w; - } - - function drawProjectedQuadBackgroundToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas) { - if (quad.imageData) { - quadCanvas.width = quad.imageData.width; - quadCanvas.height = quad.imageData.height; - quadCanvas.getContext('2d').putImageData(quad.imageData, 0, 0); - var quadBBox = new tr.b.BBox2(); - quadBBox.addQuad(quad); - var iw = quadCanvas.width; - var ih = quadCanvas.height; - drawTriangleSub( - ctx, quadCanvas, - p1, p2, p4, - [0, 0], [iw, 0], [0, ih]); - drawTriangleSub( - ctx, quadCanvas, - p2, p3, p4, - [iw, 0], [iw, ih], [0, ih]); - } - - if (quad.backgroundColor) { - ctx.fillStyle = quad.backgroundColor; - ctx.beginPath(); - ctx.moveTo(p1[0], p1[1]); - ctx.lineTo(p2[0], p2[1]); - ctx.lineTo(p3[0], p3[1]); - ctx.lineTo(p4[0], p4[1]); - ctx.closePath(); - ctx.fill(); - } - } - - function drawProjectedQuadOutlineToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas) { - ctx.beginPath(); - ctx.moveTo(p1[0], p1[1]); - ctx.lineTo(p2[0], p2[1]); - ctx.lineTo(p3[0], p3[1]); - ctx.lineTo(p4[0], p4[1]); - ctx.closePath(); - ctx.save(); - if (quad.borderColor) - ctx.strokeStyle = quad.borderColor; - else - ctx.strokeStyle = 'rgb(128,128,128)'; - - if (quad.shadowOffset) { - ctx.shadowColor = 'rgb(0, 0, 0)'; - ctx.shadowOffsetX = quad.shadowOffset[0]; - ctx.shadowOffsetY = quad.shadowOffset[1]; - if (quad.shadowBlur) - ctx.shadowBlur = quad.shadowBlur; - } - - if (quad.borderWidth) - ctx.lineWidth = quad.borderWidth; - else - ctx.lineWidth = 1; - - ctx.stroke(); - ctx.restore(); - } - - function drawProjectedQuadSelectionOutlineToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas) { - if (!quad.upperBorderColor) - return; - - ctx.lineWidth = 8; - ctx.strokeStyle = quad.upperBorderColor; - - ctx.beginPath(); - ctx.moveTo(p1[0], p1[1]); - ctx.lineTo(p2[0], p2[1]); - ctx.lineTo(p3[0], p3[1]); - ctx.lineTo(p4[0], p4[1]); - ctx.closePath(); - ctx.stroke(); - } - - function drawProjectedQuadToContext( - passNumber, quad, p1, p2, p3, p4, ctx, quadCanvas) { - if (passNumber === 0) { - drawProjectedQuadBackgroundToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas); - } else if (passNumber === 1) { - drawProjectedQuadOutlineToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas); - } else if (passNumber === 2) { - drawProjectedQuadSelectionOutlineToContext( - quad, p1, p2, p3, p4, ctx, quadCanvas); - } else { - throw new Error('Invalid pass number'); - } - } - - var tmp_p1 = vec3.create(); - var tmp_p2 = vec3.create(); - var tmp_p3 = vec3.create(); - var tmp_p4 = vec3.create(); - function transformAndProcessQuads( - matrix, viewport, quads, numPasses, handleQuadFunc, opt_arg1, opt_arg2) { - - for (var passNumber = 0; passNumber < numPasses; passNumber++) { - for (var i = 0; i < quads.length; i++) { - var quad = quads[i]; - transform(tmp_p1, quad.p1, matrix, viewport); - transform(tmp_p2, quad.p2, matrix, viewport); - transform(tmp_p3, quad.p3, matrix, viewport); - transform(tmp_p4, quad.p4, matrix, viewport); - handleQuadFunc(passNumber, quad, - tmp_p1, tmp_p2, tmp_p3, tmp_p4, - opt_arg1, opt_arg2); - } - } - } - - /** - * @constructor - */ - var QuadStackView = tr.ui.b.define('quad-stack-view'); - - QuadStackView.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.className = 'quad-stack-view'; - - var node = tr.ui.b.instantiateTemplate('#quad-stack-view-template', - THIS_DOC); - this.appendChild(node); - this.updateHeaderVisibility_(); - this.canvas_ = this.querySelector('#canvas'); - this.chromeImages_ = { - left: this.querySelector('#chrome-left'), - mid: this.querySelector('#chrome-mid'), - right: this.querySelector('#chrome-right') - }; - - var stackingDistanceSlider = this.querySelector( - '#stacking-distance-slider'); - stackingDistanceSlider.value = tr.b.Settings.get( - 'quadStackView.stackingDistance', 45); - stackingDistanceSlider.addEventListener( - 'change', this.onStackingDistanceChange_.bind(this)); - stackingDistanceSlider.addEventListener( - 'input', this.onStackingDistanceChange_.bind(this)); - - this.trackMouse_(); - - this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_); - this.camera_.addEventListener('renderrequired', - this.onRenderRequired_.bind(this)); - this.cameraWasReset_ = false; - this.camera_.canvas = this.canvas_; - - this.viewportRect_ = tr.b.Rect.fromXYWH(0, 0, 0, 0); - - this.pixelRatio_ = window.devicePixelRatio || 1; - }, - - updateHeaderVisibility_: function() { - if (this.headerText) - this.querySelector('#header').style.display = ''; - else - this.querySelector('#header').style.display = 'none'; - }, - - get headerText() { - return this.querySelector('#header').textContent; - }, - - set headerText(headerText) { - this.querySelector('#header').textContent = headerText; - this.updateHeaderVisibility_(); - }, - - onStackingDistanceChange_: function(e) { - tr.b.Settings.set('quadStackView.stackingDistance', - this.stackingDistance); - this.scheduleRender(); - e.stopPropagation(); - }, - - get stackingDistance() { - return this.querySelector('#stacking-distance-slider').value; - }, - - get mouseModeSelector() { - return this.mouseModeSelector_; - }, - - get camera() { - return this.camera_; - }, - - set quads(q) { - this.quads_ = q; - this.scheduleRender(); - }, - - set deviceRect(rect) { - if (!rect || rect.equalTo(this.deviceRect_)) - return; - - this.deviceRect_ = rect; - this.camera_.deviceRect = rect; - this.chromeQuad_ = undefined; - }, - - resize: function() { - if (!this.offsetParent) - return true; - - var width = parseInt(window.getComputedStyle(this.offsetParent).width); - var height = parseInt(window.getComputedStyle(this.offsetParent).height); - var rect = tr.b.Rect.fromXYWH(0, 0, width, height); - - if (rect.equalTo(this.viewportRect_)) - return false; - - this.viewportRect_ = rect; - this.style.width = width + 'px'; - this.style.height = height + 'px'; - this.canvas_.style.width = width + 'px'; - this.canvas_.style.height = height + 'px'; - this.canvas_.width = this.pixelRatio_ * width; - this.canvas_.height = this.pixelRatio_ * height; - if (!this.cameraWasReset_) { - this.camera_.resetCamera(); - this.cameraWasReset_ = true; - } - return true; - }, - - readyToDraw: function() { - // If src isn't set yet, set it to ensure we can use - // the image to draw onto a canvas. - if (!this.chromeImages_.left.src) { - var leftContent = - window.getComputedStyle(this.chromeImages_.left).backgroundImage; - leftContent = tr.ui.b.extractUrlString(leftContent); - - var midContent = - window.getComputedStyle(this.chromeImages_.mid).backgroundImage; - midContent = tr.ui.b.extractUrlString(midContent); - - var rightContent = - window.getComputedStyle(this.chromeImages_.right).backgroundImage; - rightContent = tr.ui.b.extractUrlString(rightContent); - - this.chromeImages_.left.src = leftContent; - this.chromeImages_.mid.src = midContent; - this.chromeImages_.right.src = rightContent; - } - - // If all of the images are loaded (height > 0), then - // we are ready to draw. - return (this.chromeImages_.left.height > 0) && - (this.chromeImages_.mid.height > 0) && - (this.chromeImages_.right.height > 0); - }, - - get chromeQuad() { - if (this.chromeQuad_) - return this.chromeQuad_; - - // Draw the chrome border into a separate canvas. - var chromeCanvas = document.createElement('canvas'); - var offsetY = this.chromeImages_.left.height; - - chromeCanvas.width = this.deviceRect_.width; - chromeCanvas.height = this.deviceRect_.height + offsetY; - - var leftWidth = this.chromeImages_.left.width; - var midWidth = this.chromeImages_.mid.width; - var rightWidth = this.chromeImages_.right.width; - - var chromeCtx = chromeCanvas.getContext('2d'); - chromeCtx.drawImage(this.chromeImages_.left, 0, 0); - - chromeCtx.save(); - chromeCtx.translate(leftWidth, 0); - - // Calculate the scale of the mid image. - var s = (this.deviceRect_.width - leftWidth - rightWidth) / midWidth; - chromeCtx.scale(s, 1); - - chromeCtx.drawImage(this.chromeImages_.mid, 0, 0); - chromeCtx.restore(); - - chromeCtx.drawImage( - this.chromeImages_.right, leftWidth + s * midWidth, 0); - - // Construct the quad. - var chromeRect = tr.b.Rect.fromXYWH( - this.deviceRect_.x, - this.deviceRect_.y - offsetY, - this.deviceRect_.width, - this.deviceRect_.height + offsetY); - var chromeQuad = tr.b.Quad.fromRect(chromeRect); - chromeQuad.stackingGroupId = this.maxStackingGroupId_ + 1; - chromeQuad.imageData = chromeCtx.getImageData( - 0, 0, chromeCanvas.width, chromeCanvas.height); - chromeQuad.shadowOffset = [0, 0]; - chromeQuad.shadowBlur = 5; - chromeQuad.borderWidth = 3; - this.chromeQuad_ = chromeQuad; - return this.chromeQuad_; - }, - - scheduleRender: function() { - if (this.redrawScheduled_) - return false; - this.redrawScheduled_ = true; - tr.b.requestAnimationFrame(this.render, this); - }, - - onRenderRequired_: function(e) { - this.scheduleRender(); - }, - - stackTransformAndProcessQuads_: function( - numPasses, handleQuadFunc, includeChromeQuad, opt_arg1, opt_arg2) { - var mv = this.camera_.modelViewMatrix; - var p = this.camera_.projectionMatrix; - - var viewport = tr.b.Rect.fromXYWH( - 0, 0, this.canvas_.width, this.canvas_.height); - - // Calculate the quad stacks. - var quadStacks = []; - for (var i = 0; i < this.quads_.length; ++i) { - var quad = this.quads_[i]; - var stackingId = quad.stackingGroupId || 0; - while (stackingId >= quadStacks.length) - quadStacks.push([]); - - quadStacks[stackingId].push(quad); - } - - var mvp = mat4.create(); - this.maxStackingGroupId_ = quadStacks.length; - var effectiveStackingDistance = - this.stackingDistance * this.camera_.stackingDistanceDampening; - - // Draw the quad stacks, raising each subsequent level. - mat4.multiply(mvp, p, mv); - for (var i = 0; i < quadStacks.length; ++i) { - transformAndProcessQuads(mvp, viewport, quadStacks[i], - numPasses, handleQuadFunc, - opt_arg1, opt_arg2); - - mat4.translate(mv, mv, [0, 0, effectiveStackingDistance]); - mat4.multiply(mvp, p, mv); - } - - if (includeChromeQuad && this.deviceRect_) { - transformAndProcessQuads(mvp, viewport, [this.chromeQuad], - numPasses, drawProjectedQuadToContext, - opt_arg1, opt_arg2); - } - }, - - render: function() { - this.redrawScheduled_ = false; - - if (!this.readyToDraw()) { - setTimeout(this.scheduleRender.bind(this), - constants.IMAGE_LOAD_RETRY_TIME_MS); - return; - } - - if (!this.quads_) - return; - - var canvasCtx = this.canvas_.getContext('2d'); - if (!this.resize()) - canvasCtx.clearRect(0, 0, this.canvas_.width, this.canvas_.height); - - var quadCanvas = document.createElement('canvas'); - this.stackTransformAndProcessQuads_( - 3, drawProjectedQuadToContext, true, - canvasCtx, quadCanvas); - quadCanvas.width = 0; // Hack: Frees the quadCanvas' resources. - }, - - trackMouse_: function() { - this.mouseModeSelector_ = document.createElement( - 'tr-ui-b-mouse-mode-selector'); - this.mouseModeSelector_.targetElement = this.canvas_; - this.mouseModeSelector_.supportedModeMask = - tr.ui.b.MOUSE_SELECTOR_MODE.SELECTION | - tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN | - tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM | - tr.ui.b.MOUSE_SELECTOR_MODE.ROTATE; - this.mouseModeSelector_.mode = tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN; - this.mouseModeSelector_.pos = {x: 0, y: 100}; - this.appendChild(this.mouseModeSelector_); - this.mouseModeSelector_.settingsKey = - 'quadStackView.mouseModeSelector'; - - this.mouseModeSelector_.setModifierForAlternateMode( - tr.ui.b.MOUSE_SELECTOR_MODE.ROTATE, tr.ui.b.MODIFIER.SHIFT); - this.mouseModeSelector_.setModifierForAlternateMode( - tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN, tr.ui.b.MODIFIER.SPACE); - this.mouseModeSelector_.setModifierForAlternateMode( - tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM, tr.ui.b.MODIFIER.CMD_OR_CTRL); - - this.mouseModeSelector_.addEventListener('updateselection', - this.onSelectionUpdate_.bind(this)); - this.mouseModeSelector_.addEventListener('endselection', - this.onSelectionUpdate_.bind(this)); - }, - - extractRelativeMousePosition_: function(e) { - var br = this.canvas_.getBoundingClientRect(); - return [ - this.pixelRatio_ * (e.clientX - this.canvas_.offsetLeft - br.left), - this.pixelRatio_ * (e.clientY - this.canvas_.offsetTop - br.top) - ]; - }, - - onSelectionUpdate_: function(e) { - var mousePos = this.extractRelativeMousePosition_(e); - var res = []; - function handleQuad(passNumber, quad, p1, p2, p3, p4) { - if (tr.b.pointInImplicitQuad(mousePos, p1, p2, p3, p4)) - res.push(quad); - } - this.stackTransformAndProcessQuads_(1, handleQuad, false); - var e = new tr.b.Event('selectionchange'); - e.quads = res; - this.dispatchEvent(e); - } - }; - - return { - QuadStackView: QuadStackView - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker.html b/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker.html deleted file mode 100644 index 85d204a9a30..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker.html +++ /dev/null @@ -1,122 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/ui.html"> - -<polymer-element name='tr-ui-b-radio-picker'> - <template> - <style> - #container { - display: flex; - flex-direction: column; - } - </style> - - <div id="container"> - </div> - - </template> - - <script> - 'use strict'; - - Polymer({ - created: function() { - this.needsInit_ = true; - this.settingsKey_ = undefined; - this.is_ready_ = false; - this.radio_buttons_ = undefined; - // Keeping track of which key is selected. This member should only be set - // set inside select() method to make sure that logical state & the UI - // state is consistent. - this.selectedKey_ = undefined; - }, - - ready: function() { - this.is_ready_ = true; - this.maybeInit_(); - this.maybeRenderRadioButtons_(); - }, - - get settingsKey() { - return this.settingsKey_; - }, - - set settingsKey(settingsKey) { - if (!this.needsInit_) - throw new Error('Already initialized.'); - this.settingsKey_ = settingsKey; - this.maybeInit_(); - }, - - maybeInit_: function() { - if (!this.needsInit_) - return; - if (this.settingsKey_ === undefined) - return; - this.needsInit_ = false; - this.select(tr.b.Settings.get(this.settingsKey_)); - }, - - set items(items) { - this.radio_buttons_ = {}; - items.forEach(function(e) { - if (e.key in this.radio_buttons_) - throw new Error(e.key + ' already exists'); - var radio_button = document.createElement('div'); - var input = document.createElement('input'); - var label = document.createElement('div'); - input.type = 'radio'; - input.addEventListener('click', function() { - this.select(e.key); - }.bind(this)); - label.innerHTML = e.label; - label.style.display = 'inline'; - radio_button.appendChild(input); - radio_button.appendChild(label); - this.radio_buttons_[e.key] = input; - }.bind(this)); - - this.maybeInit_(); - this.maybeRenderRadioButtons_(); - }, - - maybeRenderRadioButtons_: function() { - if (!this.is_ready_) - return; - if (this.radio_buttons_ === undefined) - return; - for (var key in this.radio_buttons_) - this.$.container.appendChild(this.radio_buttons_[key].parentElement); - if (this.selectedKey_ !== undefined) - this.select(this.selectedKey_); - }, - - select: function(key) { - if (key === undefined) - return; - if (this.radio_buttons_ == undefined) { - this.selectedKey_ = key; - return; - } - if (!(key in this.radio_buttons_)) - throw new Error(key + ' does not exists'); - // Unselect the previous radio, update the key & select the new one. - if (this.selectedKey_ !== undefined) - this.radio_buttons_[this.selectedKey_].checked = false; - this.selectedKey_ = key; - tr.b.Settings.set(this.settingsKey_, this.selectedKey_); - if (this.selectedKey_ !== undefined) - this.radio_buttons_[this.selectedKey_].checked = true; - }, - - get selectedKey() { - return this.selectedKey_; - }, - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker_test.html deleted file mode 100644 index dea60cdd492..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/radio_picker_test.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 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. ---> - -<link rel="import" href="/tracing/ui/base/radio_picker.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('basic', function() { - var rp = document.createElement('tr-ui-b-radio-picker'); - rp.items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Boeing', label: 'I want to fly'}, - {key: 'Submarine', label: 'I want to swim'} - ]; - this.addHTMLOutput(rp); - assert.equal(rp.selectedKey, undefined); - rp.select('Toyota'); - assert.equal(rp.selectedKey, 'Toyota'); - }); - - test('persistentState_setSelectedKeyAfterSettingItems', function() { - var items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Boeing', label: 'I want to fly'}, - {key: 'Submarine', label: 'I want to swim'} - ]; - var container1 = tr.ui.b.createDiv({textContent: 'Radio Picker One'}); - container1.style.border = 'solid'; - var rp = document.createElement('tr-ui-b-radio-picker'); - rp.items = items; - rp.settingsKey = 'radio-picker-test-one'; - container1.appendChild(rp); - this.addHTMLOutput(container1); - assert.equal(rp.selectedKey, undefined); - rp.select('Toyota'); - assert.equal(rp.selectedKey, 'Toyota'); - - var container2 = tr.ui.b.createDiv({ - textContent: 'Radio Picker Two (same settingKey as Radio Picker One)'}); - container2.style.border = 'solid'; - var rp2 = document.createElement('tr-ui-b-radio-picker'); - rp2.items = items; - rp2.settingsKey = 'radio-picker-test-one'; - container2.appendChild(rp2); - this.addHTMLOutput(container2); - - assert.equal(rp2.selectedKey, 'Toyota'); - }); - - test('persistentState_setSelectedKeyBeforeSettingItems', function() { - var items = [ - {key: 'Toyota', label: 'I want to drive Toyota'}, - {key: 'Boeing', label: 'I want to fly'}, - {key: 'Submarine', label: 'I want to swim'} - ]; - var container1 = tr.ui.b.createDiv({textContent: 'Radio Picker One'}); - container1.style.border = 'solid'; - var rp = document.createElement('tr-ui-b-radio-picker'); - rp.settingsKey = 'radio-picker-test-two'; - rp.items = items; - container1.appendChild(rp); - this.addHTMLOutput(container1); - assert.equal(rp.selectedKey, undefined); - rp.select('Boeing'); - assert.equal(rp.selectedKey, 'Boeing'); - - var container2 = tr.ui.b.createDiv({ - textContent: 'Radio Picker Two (same settingKey as Radio Picker One)'}); - container2.style.border = 'solid'; - var rp2 = document.createElement('tr-ui-b-radio-picker'); - rp2.settingsKey = 'radio-picker-test-two'; - container2.appendChild(rp2); - this.addHTMLOutput(container2); - rp2.items = items; - - assert.equal(rp2.selectedKey, 'Boeing'); - }); - - - -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor.html b/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor.html deleted file mode 100644 index bbb696062bf..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/ui/base/utils.html"> - -<script src="/css-element-queries/src/ResizeSensor.js"></script> - -<!-- -@fileoverview A container that senses when its size changes. ---> -<polymer-element name="tr-ui-b-resize-sensor"> - <template> - <style> - :host { - display: flex; - flex: 1 1 auto; - } - </style> - <div id="container"> - <content></content> - </div> - </template> - - <script> - 'use strict'; - (function() { - Polymer({ - attached: function() { - // ResizeSensor only works if it's rooted in a document when it's - // created, so wait until the tr-ui-b-resize-sensor is attached to the - // DOM before creating the ResizeSensor. - this.sensor_ = new ResizeSensor(this.$.container, - this.onResize_.bind(this)); - // ResizeSensor appends a div to this.$.container. That div must be a - // direct sibling of <content>. - // ResizeSensor's first argument must be a Node, so it cannot be - // this.shadowRoot. - }, - - onResize_: function() { - this.dispatchEvent(new tr.b.Event('resize', false, false)); - } - }); - })(); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor_test.html deleted file mode 100644 index fea1f71669b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/resize_sensor_test.html +++ /dev/null @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/base/task.html"> -<link rel="import" href="/tracing/ui/base/resize_sensor.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function forceLayout(element) { - element.offsetHeight; - } - - test('instantiate', function() { - var sensor = document.createElement('tr-ui-b-resize-sensor'); - sensor.appendChild(document.createTextNode('hello')); - - var resizeCount = 0; - function onResize(event) { - resizeCount += 1; - } - - this.addHTMLOutput(sensor); - forceLayout(sensor); - sensor.addEventListener('resize', onResize); - - // Trigger a resize: - sensor.style.fontSize = '20pt'; - forceLayout(sensor); - - // The event doesn't fire synchronously, so return a Promise that will - // resolve whenever the test is done. - return new Promise(function(resolve, reject) { - // The resize event fires when the sensor is re-laid-out. - // Use requestAnimationFrame to wait until after the sensor is - // re-laid-out. - // This doesn't work if the page becomes invisible. - window.requestAnimationFrame(function() { - assert.equal(1, resizeCount); - sensor.removeEventListener('resize', onResize); - sensor.style.fontSize = '12pt'; - forceLayout(sensor); - window.requestAnimationFrame(function() { - assert.equal(1, resizeCount); - resolve(); - }); - }); - }); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart.html b/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart.html deleted file mode 100644 index 5dffbe8da02..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart.html +++ /dev/null @@ -1,118 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/ui/base/chart_base_2d.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var ChartBase2D = tr.ui.b.ChartBase2D; - - // @constructor - var ScatterChart = tr.ui.b.define('scatter-chart', ChartBase2D); - - // @constructor - ScatterChart.Dot = function(x, y, radius, color, breadcrumb) { - this.x = x; - this.y = y; - this.radius = radius; - this.color = color; - this.breadcrumb = breadcrumb; - }; - - ScatterChart.prototype = { - __proto__: ChartBase2D.prototype, - - decorate: function() { - ChartBase2D.prototype.decorate.call(this); - this.classList.add('scatter-chart'); - - this.brushedXRange_ = new tr.b.Range(); - this.brushedYRange_ = new tr.b.Range(); - }, - - setBrushedRanges: function(xRange, yRange) { - this.brushedXRange_.reset(); - this.brushedYRange_.reset(); - if (!xRange.isEmpty && !yRange.isEmpty) { - this.brushedXRange_.addRange(xRange); - this.brushedYRange_.addRange(yRange); - } - this.updateContents_(); - }, - - updateBrushContents_: function(brushSel) { - brushSel.selectAll('*').remove(); - var brushes = []; - if (!this.brushedXRange_.isEmpty && !this.brushedYRange_.isEmpty) - brushes.push({}); - var brushRectsSel = brushSel.selectAll('rect').data(brushes); - brushRectsSel.enter().append('rect'); - brushRectsSel.exit().remove(); - brushRectsSel - .attr('x', function(d) { - return this.xScale_(this.brushedXRange_.min); - }.bind(this)) - .attr('y', function(d) { - return this.yScale_(this.brushedYRange_.max); - }.bind(this)) - .attr('width', function(d) { - return this.xScale_(this.brushedXRange_.max) - - this.xScale_(this.brushedXRange_.min); - }.bind(this)) - .attr('height', function(d) { - return this.yScale_(this.brushedYRange_.min) - - this.yScale_(this.brushedYRange_.max); - }.bind(this)); - }, - - setDataFromCallbacks: function(data, getX, getY, getRadius, getColor) { - this.data = data.map(function(datum) { - return new ScatterChart.Dot(getX(datum), - getY(datum), - getRadius(datum), - getColor(datum), - datum); - }); - }, - - isDatumFieldSeries_: function(fieldName) { - return fieldName === 'y'; - }, - - getXForDatum_: function(datum, index) { - return datum.x; - }, - - updateDataContents_: function(dataSel) { - dataSel.selectAll('*').remove(); - var dotsSel = dataSel.selectAll('circle') - .data(this.data_) - .enter() - .append('circle'); - dotsSel.attr('cx', function(datum) { - return this.xScale_(datum.x); - }.bind(this)) - .attr('cy', function(datum) { - return this.yScale_(datum.y); - }.bind(this)) - .attr('r', function(datum) { - return tr.b.clamp(datum.radius, 2, 10); - }.bind(this)) - .attr('fill', function(datum) { - return datum.color; - }.bind(this)); - } - }; - - return { - ScatterChart: ScatterChart - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart_test.html deleted file mode 100644 index 6b9243fa02f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/scatter_chart_test.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/scatter_chart.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('instantiation_singleSeries', function() { - var chart = new tr.ui.b.ScatterChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, y: 100, radius: 2, color: 'red'}, - {x: 20, y: 110, radius: 10, color: 'red'}, - {x: 30, y: 100, radius: 10, color: 'red'}, - {x: 40, y: 50, radius: 10, color: 'red'} - ]; - chart.data = data; - this.addHTMLOutput(chart); - }); - - test('instantiation_interactiveBrushing', function() { - var chart = new tr.ui.b.ScatterChart(); - chart.width = 400; - chart.height = 200; - chart.chartTitle = 'Chart title'; - var data = [ - {x: 10, y: 50, radius: 2, color: 'blue'}, - {x: 20, y: 60, radius: 3, color: 'red'}, - {x: 30, y: 80, radius: 4, color: 'orange'}, - {x: 40, y: 20, radius: 5, color: 'purple'}, - {x: 50, y: 30, radius: 6, color: 'yellow'}, - {x: 60, y: 20, radius: 7, color: 'green'}, - {x: 70, y: 15, radius: 8, color: 'blue'}, - {x: 80, y: 20, radius: 9, color: 'red'} - ]; - chart.data = data; - - var mouseDown = undefined; - - function updateBrushedRange(e) { - var xRange = new tr.b.Range(); - xRange.addValue(mouseDown.x); - xRange.addValue(e.x); - var yRange = new tr.b.Range(); - yRange.addValue(mouseDown.y); - yRange.addValue(e.y); - chart.setBrushedRanges(xRange, yRange); - } - - chart.addEventListener('item-mousedown', function(e) { - mouseDown = e; - }); - chart.addEventListener('item-mousemove', function(e) { - updateBrushedRange(e); - }); - chart.addEventListener('item-mouseup', function(e) { - updateBrushedRange(e); - mouseDown = undefined; - }); - this.addHTMLOutput(chart); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view.html b/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view.html deleted file mode 100644 index c8ecceb51cd..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view.html +++ /dev/null @@ -1,428 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<polymer-element name="tr-ui-a-tab-view" - constructor="TracingAnalysisTabView"> - <template> - <style> - :host { - display: flex; - flex-flow: column nowrap; - overflow: hidden; - box-sizing: border-box; - } - - tab-strip[tabs-hidden] { - display: none; - } - - tab-strip { - background-color: rgb(236, 236, 236); - border-bottom: 1px solid #8e8e8e; - display: flex; - flex: 0 0 auto; - flex-flow: row; - overflow-x: auto; - padding: 0 10px 0 10px; - font-size: 12px; - } - - tab-button { - display: block; - flex: 0 0 auto; - padding: 4px 15px 1px 15px; - margin-top: 2px; - } - - tab-button[selected=true] { - background-color: white; - border: 1px solid rgb(163, 163, 163); - border-bottom: none; - padding: 3px 14px 1px 14px; - } - - tabs-content-container { - display: flex; - flex: 1 1 auto; - overflow: auto; - width: 100%; - } - - ::content > * { - flex: 1 1 auto; - } - - ::content > *:not([selected]) { - display: none; - } - - button-label { - display: inline; - } - - tab-strip-heading { - display: block; - flex: 0 0 auto; - padding: 4px 15px 1px 15px; - margin-top: 2px; - margin-before: 20px; - margin-after: 10px; - } - #tsh { - display: inline; - font-weight: bold; - } - </style> - - <tab-strip> - <tab-strip-heading id="tshh"> - <span id="tsh"></span> - </tab-strip-heading> - <template repeat="{{tab in tabs_}}"> - <tab-button - button-id="{{ tab.id }}" - on-click="{{ tabButtonSelectHandler_ }}" - selected="{{ selectedTab_.id === tab.id }}"> - <button-label>{{ tab.label ? tab.label : 'No Label'}}</button-label> - </tab-button> - </template> - </tab-strip> - - <tabs-content-container id='content-container'> - <content></content> - </tabs-content-container> - - </template> - - <script> - 'use strict'; - Polymer({ - ready: function() { - this.$.tshh.style.display = 'none'; - - // A tab is represented by the following tuple: - // (id, label, content, observer, savedScrollTop, savedScrollLeft). - // The properties are used in the following way: - // id: Uniquely identifies a tab. It is the same number as the index - // in the tabs array. Used primarily by the on-click event attached - // to buttons. - // label: A string, representing the label printed on the tab button. - // content: The light-dom child representing the contents of the tab. - // The content is appended to this tab-view by the user. - // observers: The observers attached to the content node to watch for - // attribute changes. The attributes of interest are: 'selected', - // and 'tab-label'. - // savedScrollTop/Left: Used to return the scroll position upon switching - // tabs. The values are generally saved when a tab switch occurs. - // - // The order of the tabs is relevant for the tab ordering. - this.tabs_ = []; - this.selectedTab_ = undefined; - - // Register any already existing children. - for (var i = 0; i < this.children.length; i++) - this.processAddedChild_(this.children[i]); - - // In case the user decides to add more tabs, make sure we watch for - // any child mutations. - this.childrenObserver_ = new MutationObserver( - this.childrenUpdated_.bind(this)); - this.childrenObserver_.observe(this, { childList: 'true' }); - }, - - get tabStripHeadingText() { - return this.$.tsh.textContent; - }, - - set tabStripHeadingText(tabStripHeadingText) { - this.$.tsh.textContent = tabStripHeadingText; - if (!!tabStripHeadingText) - this.$.tshh.style.display = ''; - else - this.$.tshh.style.display = 'none'; - }, - - get selectedTab() { - // Make sure we process any pending children additions / removals, before - // trying to select a tab. Otherwise, we might not find some children. - this.childrenUpdated_( - this.childrenObserver_.takeRecords(), this.childrenObserver_); - - // Do not give access to the user to the inner data structure. - // A user should only be able to mutate the added tab content. - if (this.selectedTab_) - return this.selectedTab_.content; - return undefined; - }, - - set selectedTab(content) { - // Make sure we process any pending children additions / removals, before - // trying to select a tab. Otherwise, we might not find some children. - this.childrenUpdated_( - this.childrenObserver_.takeRecords(), this.childrenObserver_); - - if (content === undefined || content === null) { - this.changeSelectedTabById_(undefined); - return; - } - - // Search for the specific node in our tabs list. - // If it is not there print a warning. - var contentTabId = undefined; - for (var i = 0; i < this.tabs_.length; i++) - if (this.tabs_[i].content === content) { - contentTabId = this.tabs_[i].id; - break; - } - - if (contentTabId === undefined) - return; - - this.changeSelectedTabById_(contentTabId); - }, - - get tabsHidden() { - var ts = this.shadowRoot.querySelector('tab-strip'); - return ts.hasAttribute('tabs-hidden'); - }, - - set tabsHidden(tabsHidden) { - tabsHidden = !!tabsHidden; - var ts = this.shadowRoot.querySelector('tab-strip'); - if (tabsHidden) - ts.setAttribute('tabs-hidden', true); - else - ts.removeAttribute('tabs-hidden'); - }, - - get tabs() { - return this.tabs_.map(function(tabObject) { - return tabObject.content; - }); - }, - - /** - * Function called on light-dom child addition. - */ - processAddedChild_: function(child) { - var observerAttributeSelected = new MutationObserver( - this.childAttributesChanged_.bind(this)); - var observerAttributeTabLabel = new MutationObserver( - this.childAttributesChanged_.bind(this)); - var tabObject = { - id: this.tabs_.length, - content: child, - label: child.getAttribute('tab-label'), - observers: { - forAttributeSelected: observerAttributeSelected, - forAttributeTabLabel: observerAttributeTabLabel - } - }; - - this.tabs_.push(tabObject); - if (child.hasAttribute('selected')) { - // When receiving a child with the selected attribute, if we have no - // selected tab, mark the child as the selected tab, otherwise keep - // the previous selection. - if (this.selectedTab_) - child.removeAttribute('selected'); - else - this.setSelectedTabById_(tabObject.id); - } - - // This is required because the user might have set the selected - // property before we got to process the child. - var previousSelected = child.selected; - - var tabView = this; - - Object.defineProperty( - child, - 'selected', { - configurable: true, - set: function(value) { - if (value) { - tabView.changeSelectedTabById_(tabObject.id); - return; - } - - var wasSelected = tabView.selectedTab_ === tabObject; - if (wasSelected) - tabView.changeSelectedTabById_(undefined); - }, - get: function() { - return this.hasAttribute('selected'); - } - }); - - if (previousSelected) - child.selected = previousSelected; - - observerAttributeSelected.observe(child, - { attributeFilter: ['selected'] }); - observerAttributeTabLabel.observe(child, - { attributeFilter: ['tab-label'] }); - - }, - - /** - * Function called on light-dom child removal. - */ - processRemovedChild_: function(child) { - for (var i = 0; i < this.tabs_.length; i++) { - // Make sure ids are the same as the tab position after removal. - this.tabs_[i].id = i; - if (this.tabs_[i].content === child) { - this.tabs_[i].observers.forAttributeSelected.disconnect(); - this.tabs_[i].observers.forAttributeTabLabel.disconnect(); - // The user has removed the currently selected tab. - if (this.tabs_[i] === this.selectedTab_) { - this.clearSelectedTab_(); - this.fire('selected-tab-change'); - } - child.removeAttribute('selected'); - delete child.selected; - // Remove the observer since we no longer care about this child. - this.tabs_.splice(i, 1); - i--; - } - } - }, - - - /** - * This function handles child attribute changes. The only relevant - * attributes for the tab-view are 'tab-label' and 'selected'. - */ - childAttributesChanged_: function(mutations, observer) { - var tabObject = undefined; - // First figure out which child has been changed. - for (var i = 0; i < this.tabs_.length; i++) { - var observers = this.tabs_[i].observers; - if (observers.forAttributeSelected === observer || - observers.forAttributeTabLabel === observer) { - tabObject = this.tabs_[i]; - break; - } - } - - // This should not happen, unless the user has messed with our internal - // data structure. - if (!tabObject) - return; - - // Next handle the attribute changes. - for (var i = 0; i < mutations.length; i++) { - var node = tabObject.content; - // 'tab-label' attribute has been changed. - if (mutations[i].attributeName === 'tab-label') - tabObject.label = node.getAttribute('tab-label'); - // 'selected' attribute has been changed. - if (mutations[i].attributeName === 'selected') { - // The attribute has been set. - var nodeIsSelected = node.hasAttribute('selected'); - if (nodeIsSelected) - this.changeSelectedTabById_(tabObject.id); - else - this.changeSelectedTabById_(undefined); - } - } - }, - - /** - * This function handles light-dom additions and removals from the - * tab-view component. - */ - childrenUpdated_: function(mutations, observer) { - mutations.forEach(function(mutation) { - for (var i = 0; i < mutation.removedNodes.length; i++) - this.processRemovedChild_(mutation.removedNodes[i]); - for (var i = 0; i < mutation.addedNodes.length; i++) - this.processAddedChild_(mutation.addedNodes[i]); - }, this); - }, - - /** - * Handler called when a click event happens on any of the tab buttons. - */ - tabButtonSelectHandler_: function(event, detail, sender) { - this.changeSelectedTabById_(sender.getAttribute('button-id')); - }, - - /** - * This does the actual work. :) - */ - changeSelectedTabById_: function(id) { - var newTab = id !== undefined ? this.tabs_[id] : undefined; - var changed = this.selectedTab_ !== newTab; - this.saveCurrentTabScrollPosition_(); - this.clearSelectedTab_(); - if (id !== undefined) { - this.setSelectedTabById_(id); - this.restoreCurrentTabScrollPosition_(); - } - - if (changed) - this.fire('selected-tab-change'); - }, - - /** - * This function updates the currently selected tab based on its internal - * id. The corresponding light-dom element receives the selected attribute. - */ - setSelectedTabById_: function(id) { - this.selectedTab_ = this.tabs_[id]; - // Disconnect observer while we mutate the child. - this.selectedTab_.observers.forAttributeSelected.disconnect(); - this.selectedTab_.content.setAttribute('selected', 'selected'); - // Reconnect the observer to watch for changes in the future. - this.selectedTab_.observers.forAttributeSelected.observe( - this.selectedTab_.content, { attributeFilter: ['selected'] }); - - }, - - saveTabStates: function() { - // Scroll positions of unselected tabs have already been saved. - this.saveCurrentTabScrollPosition_(); - }, - - saveCurrentTabScrollPosition_: function() { - if (this.selectedTab_) { - this.selectedTab_.content._savedScrollTop = - this.$['content-container'].scrollTop; - this.selectedTab_.content._savedScrollLeft = - this.$['content-container'].scrollLeft; - } - }, - - restoreCurrentTabScrollPosition_: function() { - if (this.selectedTab_) { - this.$['content-container'].scrollTop = - this.selectedTab_.content._savedScrollTop || 0; - this.$['content-container'].scrollLeft = - this.selectedTab_.content._savedScrollLeft || 0; - } - }, - - /** - * This function clears the currently selected tab. This handles removal - * of the selected attribute from the light-dom element. - */ - clearSelectedTab_: function() { - if (this.selectedTab_) { - // Disconnect observer while we mutate the child. - this.selectedTab_.observers.forAttributeSelected.disconnect(); - this.selectedTab_.content.removeAttribute('selected'); - // Reconnect the observer to watch for changes in the future. - this.selectedTab_.observers.forAttributeSelected.observe( - this.selectedTab_.content, { attributeFilter: ['selected'] }); - this.selectedTab_ = undefined; - } - } - }); - </script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view_test.html deleted file mode 100644 index 42f16e594ae..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/tab_view_test.html +++ /dev/null @@ -1,323 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/tab_view.html"> - -<template id="tab-view-test-template"> - <tr-ui-a-tab-view> - <p tab-label="Existing Label"> Tab with label already set </p> - <p> Tab Content with no label </p> - <p selected="selected" tab-label="Should be selected"> - Already selected tab - </p> - <p selected="selected" tab-label="Should not be selected"> - Second already selected tab - </p> - </tr-ui-a-tab-view> -</template> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var THIS_DOC = document._currentScript.ownerDocument; - - test('instantiate', function() { - - var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + - ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + - 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + - 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' + - 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' + - 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' + - 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' + - 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' + - 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' + - 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' + - 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' + - 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' + - 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' + - 'a ipsum. Suspendisse potenti.'; - - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '500px'; - tabViewContainer.style.height = '200px'; - - var tabView = new TracingAnalysisTabView(); - - var firstTab = document.createElement('div'); - firstTab.setAttribute('tab-label', 'First Tab Label'); - firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>'; - - var secondTab = document.createElement('div'); - secondTab.setAttribute('tab-label', 'Second Tab Label'); - secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>'; - - var thirdTab = document.createElement('div'); - thirdTab.setAttribute('tab-label', 'Third Tab Label'); - thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>'; - - tabView.appendChild(firstTab); - tabView.appendChild(secondTab); - tabView.appendChild(thirdTab); - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - - thirdTab.setAttribute('tab-label', 'Something Different'); - - var button = document.createElement('button'); - button.textContent = 'Change label'; - - button.addEventListener('click', function() { - thirdTab.setAttribute('tab-label', 'Label Changed'); - }); - - tabView.selectedTab = secondTab; - this.addHTMLOutput(button); - }); - - - test('instantiateWithTabHeading', function() { - var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + - ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + - 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + - 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' + - 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' + - 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' + - 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' + - 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' + - 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' + - 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' + - 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' + - 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' + - 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' + - 'a ipsum. Suspendisse potenti.'; - - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '500px'; - tabViewContainer.style.height = '200px'; - - var tabView = new TracingAnalysisTabView(); - tabView.tabStripHeadingText = 'Hello world:'; - - var firstTab = document.createElement('div'); - firstTab.setAttribute('tab-label', 'First Tab Label'); - firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>'; - - var secondTab = document.createElement('div'); - secondTab.setAttribute('tab-label', 'Second Tab Label'); - secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>'; - - var thirdTab = document.createElement('div'); - thirdTab.setAttribute('tab-label', 'Third Tab Label'); - thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>'; - - tabView.appendChild(firstTab); - tabView.appendChild(secondTab); - tabView.appendChild(thirdTab); - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - tabView.selectedTab = secondTab; - }); - - test('instantiateChildrenAlreadyInside', function() { - var tabViewTemplate = THIS_DOC.querySelector('#tab-view-test-template'); - var tabView = tabViewTemplate.createInstance(); - - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '400px'; - tabViewContainer.style.height = '200px'; - - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - - }); - - test('programaticallySetSelectedTab', function() { - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '500px'; - tabViewContainer.style.height = '200px'; - - var tabView = new TracingAnalysisTabView(); - - var t1 = document.createElement('div'); - var t2 = document.createElement('div'); - var t3 = document.createElement('div'); - - tabView.appendChild(t1); - tabView.appendChild(t2); - tabView.appendChild(t3); - - assert.isUndefined(tabView.selectedTab); - tabView.selectedTab = t1; - - assert.isTrue(t1.hasAttribute('selected')); - assert.isFalse(t2.hasAttribute('selected')); - assert.isFalse(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t1, tabView.selectedTab)); - - tabView.selectedTab = t2; - assert.isFalse(t1.hasAttribute('selected')); - assert.isTrue(t2.hasAttribute('selected')); - assert.isFalse(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t2, tabView.selectedTab)); - - tabView.selectedTab = t3; - assert.isFalse(t1.hasAttribute('selected')); - assert.isFalse(t2.hasAttribute('selected')); - assert.isTrue(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t3, tabView.selectedTab)); - - t1.selected = true; - assert.isTrue(t1.hasAttribute('selected')); - assert.isFalse(t2.hasAttribute('selected')); - assert.isFalse(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t1, tabView.selectedTab)); - - // Make sure just randomly setting a tab as not selected does not - // break the existing selection. - t2.selected = false; - t3.selected = false; - assert.isTrue(t1.hasAttribute('selected')); - assert.isFalse(t2.hasAttribute('selected')); - assert.isFalse(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t1, tabView.selectedTab)); - - t3.selected = true; - assert.isFalse(t1.hasAttribute('selected')); - assert.isFalse(t2.hasAttribute('selected')); - assert.isTrue(t3.hasAttribute('selected')); - assert.isTrue(Object.is(t3, tabView.selectedTab)); - - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - }); - - /** - * This test checks that if an element has a selected property already set, - * before being attached to the tabView, it still gets selected if the - * property is true, after it gets attached. - */ - test('instantiateSetSelectedTabAlreadySet', function() { - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '500px'; - tabViewContainer.style.height = '200px'; - - var tabView = new TracingAnalysisTabView(); - - var t1 = document.createElement('div'); - t1.textContent = 'This text should BE visible.'; - var t2 = document.createElement('div'); - t2.textContent = 'This text should NOT be visible.'; - var t3 = document.createElement('div'); - t3.textContent = 'This text should NOT be visible, also.'; - - t1.selected = true; - t2.selected = false; - t3.selected = false; - - tabView.appendChild(t1); - tabView.appendChild(t2); - tabView.appendChild(t3); - - t1.setAttribute('tab-label', 'This should be selected'); - t2.setAttribute('tab-label', 'Not selected'); - t3.setAttribute('tab-label', 'Not selected'); - - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - }); - - test('selectingInvalidTabWorks', function() { - var tabView = new TracingAnalysisTabView(); - var t1 = document.createElement('div'); - var t2 = document.createElement('div'); - var t3 = document.createElement('div'); - var invalidChild = document.createElement('div'); - - tabView.appendChild(t1); - tabView.appendChild(t2); - tabView.appendChild(t3); - - tabView.selectedTab = t1; - - assert.equal(tabView.selectedTab, t1); - - // Make sure that selecting an invalid tab does not break the current - // selection. - tabView.selectedTab = invalidChild; - assert.equal(t1, tabView.selectedTab); - - // Also make sure the invalidChild does not influence the tab view when - // it has a selected property set. - invalidChild.selected = true; - tabView.selectedTab = invalidChild; - assert.equal(t1, tabView.selectedTab); - }); - - test('changeTabCausesEvent', function() { - var tabView = new TracingAnalysisTabView(); - var t1 = document.createElement('div'); - var t2 = document.createElement('div'); - var invalidChild = document.createElement('div'); - - tabView.appendChild(t1); - tabView.appendChild(t2); - - var numChangeEvents = 0; - tabView.addEventListener('selected-tab-change', function() { - numChangeEvents++; - }); - tabView.selectedTab = t1; - assert.equal(numChangeEvents, 1); - tabView.selectedTab = t1; - assert.equal(numChangeEvents, 1); - tabView.selectedTab = t2; - assert.equal(numChangeEvents, 2); - tabView.selectedTab = undefined; - assert.equal(numChangeEvents, 3); - }); - - /** - * This test makes sure that removing the selected tab does not select - * any other tab. - */ - test('instantiateRemovingSelectedTab', function() { - var tabViewContainer = document.createElement('div'); - tabViewContainer.style.width = '500px'; - tabViewContainer.style.height = '200px'; - - var tabView = new TracingAnalysisTabView(); - - var t1 = document.createElement('div'); - t1.textContent = 'This text should BE visible.'; - var t2 = document.createElement('div'); - t2.textContent = 'This text should NOT be visible.'; - var t3 = document.createElement('div'); - t3.textContent = 'This text should NOT be visible, also.'; - - tabView.appendChild(t1); - tabView.appendChild(t2); - tabView.appendChild(t3); - - t1.setAttribute('tab-label', 'This should not exist'); - t2.setAttribute('tab-label', 'Not selected'); - t3.setAttribute('tab-label', 'Not selected'); - - tabView.selectedTab = t1; - tabView.removeChild(t1); - - tabViewContainer.appendChild(tabView); - - this.addHTMLOutput(tabViewContainer); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/table.html b/chromium/third_party/catapult/tracing/tracing/ui/base/table.html deleted file mode 100644 index 1292a3af758..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/table.html +++ /dev/null @@ -1,1473 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<link rel="import" href="/tracing/ui/base/utils.html"> - -<!-- -@fileoverview A container that constructs a table-like container. ---> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - - var TableFormat = {}; - - TableFormat.SelectionMode = { - // Selection disabled. - // Default highlight: none. - NONE: 0, - - // Row selection mode. - // Default highlight: dark row. - ROW: 1, - - // Cell selection mode. - // Default highlight: dark cell and light row. - CELL: 2 - }; - - TableFormat.HighlightStyle = { - // Highlight depends on the current selection mode. - DEFAULT: 0, - - // No highlight. - NONE: 1, - - // Light highlight. - LIGHT: 2, - - // Dark highlight. - DARK: 3 - }; - - TableFormat.ColumnAlignment = { - LEFT: 0 /* default */, - RIGHT: 1 - }; - - return { - TableFormat: TableFormat - }; -}); -</script> - -<polymer-element name="tr-ui-b-table"> - <template> - <style> - :host { - display: flex; - flex-direction: column; - } - - table { - font-size: 12px; - - flex: 1 1 auto; - align-self: stretch; - border-collapse: separate; - border-spacing: 0; - border-width: 0; - -webkit-user-select: initial; - } - - tr > td { - padding: 2px 4px 2px 4px; - vertical-align: text-top; - } - - tr:focus, - td:focus { - outline: 1px dotted rgba(0,0,0,0.1); - outline-offset: 0; - } - - button.toggle-button { - height: 15px; - line-height: 60%; - vertical-align: middle; - width: 100%; - } - - button > * { - height: 15px; - vertical-align: middle; - } - - td.button-column { - width: 30px; - } - - table > thead > tr > td.sensitive:hover { - background-color: #fcfcfc; - } - - table > thead > tr > td { - font-weight: bold; - text-align: left; - - background-color: #eee; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - border-top: 1px solid #ffffff; - border-bottom: 1px solid #aaa; - } - - table > tfoot { - background-color: #eee; - font-weight: bold; - } - - /* Light row and cell highlight. */ - table > tbody[row-highlight-style="light"] > tr[selected], - table > tbody[cell-highlight-style="light"] > tr > td[selected] { - background-color: rgb(213, 236, 229); /* light turquoise */ - } - table > tbody[row-highlight-style="light"] > - tr:not(.empty-row):not([selected]):hover, - table > tbody[cell-highlight-style="light"] > - tr:not(.empty-row):not([selected]) > td:hover { - background-color: #f6f6f6; /* light grey */ - } - - /* Dark row and cell highlight. */ - table > tbody[row-highlight-style="dark"] > tr[selected], - table > tbody[cell-highlight-style="dark"] > tr > td[selected] { - background-color: rgb(103, 199, 165); /* turquoise */ - } - table > tbody[row-highlight-style="dark"] > - tr:not(.empty-row):not([selected]):hover, - table > tbody[cell-highlight-style="dark"] > - tr:not(.empty-row):not([selected]) > td:hover { - background-color: #e6e6e6; /* grey */ - } - table > tbody[row-highlight-style="dark"] > tr:hover[selected], - table > tbody[cell-highlight-style="dark"] > tr[selected] > td:hover { - background-color: rgb(171, 217, 202); /* semi-light turquoise */ - } - - table > tbody > tr.empty-row > td { - color: #666; - font-style: italic; - text-align: center; - } - - table > tbody.has-footer > tr:last-child > td { - border-bottom: 1px solid #aaa; - } - - table > tfoot > tr:first-child > td { - border-top: 1px solid #ffffff; - } - - expand-button { - -webkit-user-select: none; - display: inline-block; - cursor: pointer; - font-size: 9px; - min-width: 8px; - max-width: 8px; - } - - .button-expanded { - transform: rotate(90deg); - } - </style> - <table> - <thead id="head"> - </thead> - <tbody id="body"> - </tbody> - <tfoot id="foot"> - </tfoot> - </table> - </template> - <script> - 'use strict'; - (function() { - var RIGHT_ARROW = String.fromCharCode(0x25b6); - var UNSORTED_ARROW = String.fromCharCode(0x25BF); - var ASCENDING_ARROW = String.fromCharCode(0x25B4); - var DESCENDING_ARROW = String.fromCharCode(0x25BE); - var BASIC_INDENTATION = 8; - - var SelectionMode = tr.ui.b.TableFormat.SelectionMode; - var HighlightStyle = tr.ui.b.TableFormat.HighlightStyle; - var ColumnAlignment = tr.ui.b.TableFormat.ColumnAlignment; - - Polymer({ - created: function() { - this.selectionMode_ = SelectionMode.NONE; - this.rowHighlightStyle_ = HighlightStyle.DEFAULT; - this.cellHighlightStyle_ = HighlightStyle.DEFAULT; - this.selectedTableRowInfo_ = undefined; - this.selectedColumnIndex_ = undefined; - - this.tableColumns_ = []; - this.tableRows_ = []; - this.tableRowsInfo_ = new WeakMap(); - this.tableFooterRows_ = []; - this.tableFooterRowsInfo_ = new WeakMap(); - this.sortColumnIndex_ = undefined; - this.sortDescending_ = false; - this.columnsWithExpandButtons_ = []; - this.headerCells_ = []; - this.showHeader_ = true; - this.emptyValue_ = undefined; - this.subRowsPropertyName_ = 'subRows'; - this.customizeTableRowCallback_ = undefined; - }, - - ready: function() { - this.$.body.addEventListener( - 'keydown', this.onKeyDown_.bind(this), true); - }, - - clear: function() { - this.selectionMode_ = SelectionMode.NONE; - this.rowHighlightStyle_ = HighlightStyle.DEFAULT; - this.cellHighlightStyle_ = HighlightStyle.DEFAULT; - this.selectedTableRowInfo_ = undefined; - this.selectedColumnIndex_ = undefined; - - this.textContent = ''; - this.tableColumns_ = []; - this.tableRows_ = []; - this.tableRowsInfo_ = new WeakMap(); - this.tableFooterRows_ = []; - this.tableFooterRowsInfo_ = new WeakMap(); - this.sortColumnIndex_ = undefined; - this.sortDescending_ = false; - this.columnsWithExpandButtons_ = []; - this.headerCells_ = []; - this.subRowsPropertyName_ = 'subRows'; - this.defaultExpansionStateCallback_ = undefined; - }, - - get showHeader() { - return this.showHeader_; - }, - - set showHeader(showHeader) { - this.showHeader_ = showHeader; - this.scheduleRebuildHeaders_(); - }, - - set subRowsPropertyName(name) { - this.subRowsPropertyName_ = name; - }, - - /** - * This callback will be called whenever a body row is built - * for a userRow that has subRows and does not have an explicit - * isExpanded field. - * The callback should return true if the row should be expanded, - * or false if the row should be collapsed. - * @param {function(userRow, parentUserRow): boolean} cb The callback. - */ - set defaultExpansionStateCallback(cb) { - this.defaultExpansionStateCallback_ = cb; - this.scheduleRebuildBody_(); - }, - - /** - * This callback will be called whenever a body row is built. - * The callback's return value is ignored. - * @param {function(userRow, trElement)} cb The callback. - */ - set customizeTableRowCallback(cb) { - this.customizeTableRowCallback_ = cb; - this.scheduleRebuildBody_(); - }, - - get emptyValue() { - return this.emptyValue_; - }, - - set emptyValue(emptyValue) { - var previousEmptyValue = this.emptyValue_; - this.emptyValue_ = emptyValue; - if (this.tableRows_.length === 0 && emptyValue !== previousEmptyValue) - this.scheduleRebuildBody_(); - }, - - /** - * Data objects should have the following fields: - * mandatory: title, value - * optional: width {string}, cmp {function}, colSpan {number}, - * showExpandButtons {boolean}, - * align {tr.ui.b.TableFormat.ColumnAlignment} - * - * @param {Array} columns An array of data objects. - */ - set tableColumns(columns) { - // Figure out the columns with expand buttons... - var columnsWithExpandButtons = []; - for (var i = 0; i < columns.length; i++) { - if (columns[i].showExpandButtons) - columnsWithExpandButtons.push(i); - } - if (columnsWithExpandButtons.length === 0) { - // First column if none have specified. - columnsWithExpandButtons = [0]; - } - - // Sanity check columns. - for (var i = 0; i < columns.length; i++) { - var colInfo = columns[i]; - if (colInfo.width === undefined) - continue; - - var hasExpandButton = columnsWithExpandButtons.indexOf(i) !== -1; - - var w = colInfo.width; - if (w) { - if (/\d+px/.test(w)) { - continue; - } else if (/\d+%/.test(w)) { - if (hasExpandButton) { - throw new Error('Columns cannot be %-sized and host ' + - ' an expand button'); - } - } else { - throw new Error('Unrecognized width string'); - } - } - } - - // Commit the change. - this.tableColumns_ = columns; - this.headerCells_ = []; - this.columnsWithExpandButtons_ = columnsWithExpandButtons; - this.sortColumnIndex = undefined; - this.scheduleRebuildHeaders_(); - - // Blow away the table rows, too. - this.tableRows = this.tableRows_; - }, - - get tableColumns() { - return this.tableColumns_; - }, - - /** - * @param {Array} rows An array of 'row' objects with the following - * fields: - * optional: subRows An array of objects that have the same 'row' - * structure. Set subRowsPropertyName to use an - * alternative field name. - */ - set tableRows(rows) { - this.selectedTableRowInfo_ = undefined; - this.selectedColumnIndex_ = undefined; - this.maybeUpdateSelectedRow_(); - this.tableRows_ = rows; - this.tableRowsInfo_ = new WeakMap(); - this.scheduleRebuildBody_(); - }, - - get tableRows() { - return this.tableRows_; - }, - - set footerRows(rows) { - this.tableFooterRows_ = rows; - this.tableFooterRowsInfo_ = new WeakMap(); - this.scheduleRebuildFooter_(); - }, - - get footerRows() { - return this.tableFooterRows_; - }, - - set sortColumnIndex(number) { - if (number === this.sortColumnIndex_) - return; - - if (number === undefined) { - this.sortColumnIndex_ = undefined; - this.updateHeaderArrows_(); - this.dispatchSortingChangedEvent_(); - return; - } - - if (this.tableColumns_.length <= number) - throw new Error('Column number ' + number + ' is out of bounds.'); - if (!this.tableColumns_[number].cmp) - throw new Error('Column ' + number + ' does not have a comparator.'); - - this.sortColumnIndex_ = number; - this.updateHeaderArrows_(); - this.scheduleRebuildBody_(); - this.dispatchSortingChangedEvent_(); - }, - - get sortColumnIndex() { - return this.sortColumnIndex_; - }, - - set sortDescending(value) { - var newValue = !!value; - - if (newValue !== this.sortDescending_) { - this.sortDescending_ = newValue; - this.updateHeaderArrows_(); - this.scheduleRebuildBody_(); - this.dispatchSortingChangedEvent_(); - } - }, - - get sortDescending() { - return this.sortDescending_; - }, - - updateHeaderArrows_: function() { - for (var i = 0; i < this.headerCells_.length; i++) { - if (!this.tableColumns_[i].cmp) { - this.headerCells_[i].sideContent = ''; - continue; - } - if (i !== this.sortColumnIndex_) { - this.headerCells_[i].sideContent = UNSORTED_ARROW; - continue; - } - this.headerCells_[i].sideContent = this.sortDescending_ ? - DESCENDING_ARROW : ASCENDING_ARROW; - } - }, - - sortRows_: function(rows) { - rows.sort(function(rowA, rowB) { - if (this.sortDescending_) - return this.tableColumns_[this.sortColumnIndex_].cmp( - rowB.userRow, rowA.userRow); - return this.tableColumns_[this.sortColumnIndex_].cmp( - rowA.userRow, rowB.userRow); - }.bind(this)); - // Sort expanded sub rows recursively. - for (var i = 0; i < rows.length; i++) { - if (this.getExpandedForUserRow_(rows[i])) - this.sortRows_(rows[i][this.subRowsPropertyName_]); - } - }, - - generateHeaderColumns_: function() { - this.headerCells_ = []; - this.$.head.textContent = ''; - if (!this.showHeader_) - return; - - var tr = this.appendNewElement_(this.$.head, 'tr'); - for (var i = 0; i < this.tableColumns_.length; i++) { - var td = this.appendNewElement_(tr, 'td'); - - var headerCell = document.createElement('tr-ui-b-table-header-cell'); - headerCell.cellTitle = this.tableColumns_[i].title; - headerCell.align = this.tableColumns_[i].align; - - // If the table can be sorted by this column, attach a tap callback - // to the column. - if (this.tableColumns_[i].cmp) { - td.classList.add('sensitive'); - headerCell.tapCallback = this.createSortCallback_(i); - // Set arrow position, depending on the sortColumnIndex. - if (this.sortColumnIndex_ === i) - headerCell.sideContent = this.sortDescending_ ? - DESCENDING_ARROW : ASCENDING_ARROW; - else - headerCell.sideContent = UNSORTED_ARROW; - } - - td.appendChild(headerCell); - this.headerCells_.push(headerCell); - } - }, - - applySizes_: function() { - if (this.tableRows_.length === 0 && !this.showHeader) - return; - var rowToRemoveSizing; - var rowToSize; - if (this.showHeader) { - rowToSize = this.$.head.children[0]; - rowToRemoveSizing = this.$.body.children[0]; - } else { - rowToSize = this.$.body.children[0]; - rowToRemoveSizing = this.$.head.children[0]; - } - for (var i = 0; i < this.tableColumns_.length; i++) { - if (rowToRemoveSizing && rowToRemoveSizing.children[i]) { - var tdToRemoveSizing = rowToRemoveSizing.children[i]; - tdToRemoveSizing.style.minWidth = ''; - tdToRemoveSizing.style.width = ''; - } - - // Apply sizing. - var td = rowToSize.children[i]; - - var delta; - if (this.columnsWithExpandButtons_.indexOf(i) !== -1) { - td.style.paddingLeft = BASIC_INDENTATION + 'px'; - delta = BASIC_INDENTATION + 'px'; - } else { - delta = undefined; - } - - function calc(base, delta) { - if (delta) - return 'calc(' + base + ' - ' + delta + ')'; - else - return base; - } - - var w = this.tableColumns_[i].width; - if (w) { - if (/\d+px/.test(w)) { - td.style.minWidth = calc(w, delta); - } else if (/\d+%/.test(w)) { - td.style.width = w; - } else { - throw new Error('Unrecognized width string: ' + w); - } - } - } - }, - - createSortCallback_: function(columnNumber) { - return function() { - var previousIndex = this.sortColumnIndex; - this.sortColumnIndex = columnNumber; - if (previousIndex !== columnNumber) - this.sortDescending = false; - else - this.sortDescending = !this.sortDescending; - }.bind(this); - }, - - generateTableRowNodes_: function(tableSection, userRows, rowInfoMap, - indentation, lastAddedRow, - parentRowInfo) { - if (this.sortColumnIndex_ !== undefined && - tableSection === this.$.body) { - userRows = userRows.slice(); // Don't mess with the input data. - userRows.sort(function(rowA, rowB) { - var c = this.tableColumns_[this.sortColumnIndex_].cmp( - rowA, rowB); - if (this.sortDescending_) - c = -c; - return c; - }.bind(this)); - } - - for (var i = 0; i < userRows.length; i++) { - var userRow = userRows[i]; - var rowInfo = this.getOrCreateRowInfoFor_(rowInfoMap, userRow, - parentRowInfo); - var htmlNode = this.getHTMLNodeForRowInfo_( - tableSection, rowInfo, rowInfoMap, indentation); - - if (lastAddedRow === undefined) { - // Put first into the table. - tableSection.insertBefore(htmlNode, tableSection.firstChild); - } else { - // This is shorthand for insertAfter(htmlNode, lastAdded). - var nextSiblingOfLastAdded = lastAddedRow.nextSibling; - tableSection.insertBefore(htmlNode, nextSiblingOfLastAdded); - } - this.updateTabIndexForTableRowNode_(htmlNode); - - lastAddedRow = htmlNode; - if (!rowInfo.isExpanded) - continue; - - // Append subrows now. - lastAddedRow = this.generateTableRowNodes_( - tableSection, userRow[this.subRowsPropertyName_], rowInfoMap, - indentation + 1, lastAddedRow, rowInfo); - } - return lastAddedRow; - }, - - getOrCreateRowInfoFor_: function(rowInfoMap, userRow, parentRowInfo) { - var rowInfo = undefined; - - if (rowInfoMap.has(userRow)) { - rowInfo = rowInfoMap.get(userRow); - } else { - rowInfo = { - userRow: userRow, - htmlNode: undefined, - parentRowInfo: parentRowInfo - }; - rowInfoMap.set(userRow, rowInfo); - } - - // Recompute isExpanded in case defaultExpansionStateCallback_ has - // changed. - rowInfo.isExpanded = this.getExpandedForUserRow_(userRow); - - return rowInfo; - }, - - customizeTableRow_: function(userRow, trElement) { - if (!this.customizeTableRowCallback_) - return; - this.customizeTableRowCallback_(userRow, trElement); - }, - - getHTMLNodeForRowInfo_: function(tableSection, rowInfo, - rowInfoMap, indentation) { - if (rowInfo.htmlNode) { - this.customizeTableRow_(rowInfo.userRow, rowInfo.htmlNode); - return rowInfo.htmlNode; - } - - var INDENT_SPACE = indentation * 16; - var INDENT_SPACE_NO_BUTTON = indentation * 16 + BASIC_INDENTATION; - var trElement = this.ownerDocument.createElement('tr'); - rowInfo.htmlNode = trElement; - rowInfo.indentation = indentation; - trElement.rowInfo = rowInfo; - this.customizeTableRow_(rowInfo.userRow, trElement); - - for (var i = 0; i < this.tableColumns_.length;) { - var td = this.appendNewElement_(trElement, 'td'); - td.columnIndex = i; - - var column = this.tableColumns_[i]; - var value = column.value(rowInfo.userRow); - var colSpan = column.colSpan ? column.colSpan : 1; - td.style.colSpan = colSpan; - - switch (column.align) { - case undefined: - case ColumnAlignment.LEFT: - break; - - case ColumnAlignment.RIGHT: - td.style.textAlign = 'right'; - break; - - default: - throw new Error('Invalid alignment of column at index=' + i + - ': ' + column.align); - } - - if (this.doesColumnIndexSupportSelection(i)) - td.classList.add('supports-selection'); - - if (this.columnsWithExpandButtons_.indexOf(i) != -1) { - if (rowInfo.userRow[this.subRowsPropertyName_] && - rowInfo.userRow[this.subRowsPropertyName_].length > 0) { - td.style.paddingLeft = INDENT_SPACE + 'px'; - var expandButton = this.appendNewElement_(td, - 'expand-button'); - expandButton.textContent = RIGHT_ARROW; - if (rowInfo.isExpanded) - expandButton.classList.add('button-expanded'); - } else { - td.style.paddingLeft = INDENT_SPACE_NO_BUTTON + 'px'; - } - } - - if (value !== undefined) - td.appendChild(tr.ui.b.asHTMLOrTextNode(value, this.ownerDocument)); - - i += colSpan; - } - - var isSelectable = tableSection === this.$.body; - var isExpandable = rowInfo.userRow[this.subRowsPropertyName_] && - rowInfo.userRow[this.subRowsPropertyName_].length; - - if (isSelectable || isExpandable) { - trElement.addEventListener('click', function(e) { - e.stopPropagation(); - if (e.target.tagName == 'EXPAND-BUTTON') { - this.setExpandedForUserRow_( - tableSection, rowInfoMap, - rowInfo.userRow, !rowInfo.isExpanded); - return; - } - - function getTD(cur) { - if (cur === trElement) - throw new Error('woah'); - if (cur.parentElement === trElement) - return cur; - return getTD(cur.parentElement); - } - - // If the row/cell can be selected and it's not selected yet, - // select it. - if (isSelectable && this.selectionMode_ !== SelectionMode.NONE) { - var shouldSelect = false; - var columnIndex = getTD(e.target).columnIndex; - switch (this.selectionMode_) { - case SelectionMode.ROW: - shouldSelect = this.selectedTableRowInfo_ !== rowInfo; - break; - - case SelectionMode.CELL: - if (this.doesColumnIndexSupportSelection(columnIndex)) { - shouldSelect = this.selectedTableRowInfo_ !== rowInfo || - this.selectedColumnIndex_ !== columnIndex; - } - break; - - default: - throw new Error('Invalid selection mode ' + - this.selectionMode_); - } - if (shouldSelect) { - this.didTableRowInfoGetClicked_(rowInfo, columnIndex); - return; - } - } - - // Otherwise, if the row is expandable, expand/collapse it. - if (isExpandable) { - this.setExpandedForUserRow_(tableSection, rowInfoMap, - rowInfo.userRow, !rowInfo.isExpanded); - } - }.bind(this)); - } - - return rowInfo.htmlNode; - }, - - removeSubNodes_: function(tableSection, rowInfo, rowInfoMap) { - if (rowInfo.userRow[this.subRowsPropertyName_] === undefined) - return; - for (var i = 0; - i < rowInfo.userRow[this.subRowsPropertyName_].length; i++) { - var subRow = rowInfo.userRow[this.subRowsPropertyName_][i]; - var subRowInfo = rowInfoMap.get(subRow); - if (!subRowInfo) - continue; - - var subNode = subRowInfo.htmlNode; - if (subNode && subNode.parentNode === tableSection) { - tableSection.removeChild(subNode); - this.removeSubNodes_(tableSection, subRowInfo, rowInfoMap); - } - } - }, - - scheduleRebuildHeaders_: function() { - this.headerDirty_ = true; - this.scheduleRebuild_(); - }, - - scheduleRebuildBody_: function() { - this.bodyDirty_ = true; - this.scheduleRebuild_(); - }, - - scheduleRebuildFooter_: function() { - this.footerDirty_ = true; - this.scheduleRebuild_(); - }, - - scheduleRebuild_: function() { - if (this.rebuildPending_) - return; - this.rebuildPending_ = true; - setTimeout(function() { - this.rebuildPending_ = false; - this.rebuild(); - }.bind(this), 0); - }, - - rebuildIfNeeded_: function() { - this.rebuild(); - }, - - rebuild: function() { - var wasBodyOrHeaderDirty = this.headerDirty_ || this.bodyDirty_; - - if (this.headerDirty_) { - this.generateHeaderColumns_(); - this.headerDirty_ = false; - } - if (this.bodyDirty_) { - this.$.body.textContent = ''; - this.generateTableRowNodes_( - this.$.body, - this.tableRows_, this.tableRowsInfo_, 0, - undefined, undefined); - if (this.tableRows_.length === 0 && this.emptyValue_ !== undefined) { - var trElement = this.ownerDocument.createElement('tr'); - this.$.body.appendChild(trElement); - trElement.classList.add('empty-row'); - var td = this.ownerDocument.createElement('td'); - trElement.appendChild(td); - td.colSpan = this.tableColumns_.length; - var emptyValue = this.emptyValue_; - td.appendChild( - tr.ui.b.asHTMLOrTextNode(emptyValue, this.ownerDocument)); - } - this.bodyDirty_ = false; - } - - if (wasBodyOrHeaderDirty) - this.applySizes_(); - - if (this.footerDirty_) { - this.$.foot.textContent = ''; - this.generateTableRowNodes_( - this.$.foot, - this.tableFooterRows_, this.tableFooterRowsInfo_, 0, - undefined, undefined); - if (this.tableFooterRowsInfo_.length) { - this.$.body.classList.add('has-footer'); - } else { - this.$.body.classList.remove('has-footer'); - } - this.footerDirty_ = false; - } - }, - - appendNewElement_: function(parent, tagName) { - var element = parent.ownerDocument.createElement(tagName); - parent.appendChild(element); - return element; - }, - - getExpandedForTableRow: function(userRow) { - this.rebuildIfNeeded_(); - var rowInfo = this.tableRowsInfo_.get(userRow); - if (rowInfo === undefined) - throw new Error('Row has not been seen, must expand its parents'); - return rowInfo.isExpanded; - }, - - getExpandedForUserRow_: function(userRow) { - if (userRow[this.subRowsPropertyName_] === undefined) - return false; - if (userRow[this.subRowsPropertyName_].length === 0) - return false; - if (userRow.isExpanded) - return true; - if (userRow.isExpanded === false) - return false; - - var rowInfo = this.tableRowsInfo_.get(userRow); - if (rowInfo && rowInfo.isExpanded) - return true; - - if (this.defaultExpansionStateCallback_ === undefined) - return false; - - var parentUserRow = undefined; - if (rowInfo && rowInfo.parentRowInfo) - parentUserRow = rowInfo.parentRowInfo.userRow; - - return this.defaultExpansionStateCallback_( - userRow, parentUserRow); - }, - - setExpandedForTableRow: function(userRow, expanded) { - this.rebuildIfNeeded_(); - var rowInfo = this.tableRowsInfo_.get(userRow); - if (rowInfo === undefined) - throw new Error('Row has not been seen, must expand its parents'); - return this.setExpandedForUserRow_(this.$.body, this.tableRowsInfo_, - userRow, expanded); - }, - - setExpandedForUserRow_: function(tableSection, rowInfoMap, - userRow, expanded) { - this.rebuildIfNeeded_(); - - var rowInfo = rowInfoMap.get(userRow); - if (rowInfo === undefined) - throw new Error('Row has not been seen, must expand its parents'); - - rowInfo.isExpanded = !!expanded; - // If no node, then nothing further needs doing. - if (rowInfo.htmlNode === undefined) - return; - - // If its detached, then nothing needs doing. - if (rowInfo.htmlNode.parentElement !== tableSection) - return; - - // Otherwise, rebuild. - var expandButton = rowInfo.htmlNode.querySelector('expand-button'); - if (rowInfo.isExpanded) { - expandButton.classList.add('button-expanded'); - var lastAddedRow = rowInfo.htmlNode; - if (rowInfo.userRow[this.subRowsPropertyName_]) { - this.generateTableRowNodes_( - tableSection, - rowInfo.userRow[this.subRowsPropertyName_], rowInfoMap, - rowInfo.indentation + 1, - lastAddedRow, rowInfo); - } - } else { - expandButton.classList.remove('button-expanded'); - this.removeSubNodes_(tableSection, rowInfo, rowInfoMap); - } - - this.maybeUpdateSelectedRow_(); - }, - - get selectionMode() { - return this.selectionMode_; - }, - - set selectionMode(selectionMode) { - if (!tr.b.dictionaryContainsValue(SelectionMode, selectionMode)) - throw new Error('Invalid selection mode ' + selectionMode); - this.rebuildIfNeeded_(); - this.selectionMode_ = selectionMode; - this.didSelectionStateChange_(); - }, - - get rowHighlightStyle() { - return this.rowHighlightStyle_; - }, - - set rowHighlightStyle(rowHighlightStyle) { - if (!tr.b.dictionaryContainsValue(HighlightStyle, rowHighlightStyle)) - throw new Error('Invalid row highlight style ' + rowHighlightStyle); - this.rebuildIfNeeded_(); - this.rowHighlightStyle_ = rowHighlightStyle; - this.didSelectionStateChange_(); - }, - - get resolvedRowHighlightStyle() { - if (this.rowHighlightStyle_ !== HighlightStyle.DEFAULT) - return this.rowHighlightStyle_; - switch (this.selectionMode_) { - case SelectionMode.NONE: - return HighlightStyle.NONE; - case SelectionMode.ROW: - return HighlightStyle.DARK; - case SelectionMode.CELL: - return HighlightStyle.LIGHT; - default: - throw new Error('Invalid selection mode ' + selectionMode); - } - }, - - get cellHighlightStyle() { - return this.cellHighlightStyle_; - }, - - set cellHighlightStyle(cellHighlightStyle) { - if (!tr.b.dictionaryContainsValue(HighlightStyle, cellHighlightStyle)) - throw new Error('Invalid cell highlight style ' + cellHighlightStyle); - this.rebuildIfNeeded_(); - this.cellHighlightStyle_ = cellHighlightStyle; - this.didSelectionStateChange_(); - }, - - get resolvedCellHighlightStyle() { - if (this.cellHighlightStyle_ !== HighlightStyle.DEFAULT) - return this.cellHighlightStyle_; - switch (this.selectionMode_) { - case SelectionMode.NONE: - case SelectionMode.ROW: - return HighlightStyle.NONE; - case SelectionMode.CELL: - return HighlightStyle.DARK; - default: - throw new Error('Invalid selection mode ' + selectionMode); - } - }, - - setHighlightStyle_: function(highlightAttribute, resolvedHighlightStyle) { - switch (resolvedHighlightStyle) { - case HighlightStyle.NONE: - this.$.body.removeAttribute(highlightAttribute); - break; - case HighlightStyle.LIGHT: - this.$.body.setAttribute(highlightAttribute, 'light'); - break; - case HighlightStyle.DARK: - this.$.body.setAttribute(highlightAttribute, 'dark'); - break; - default: - throw new Error('Invalid resolved highlight style ' + - resolvedHighlightStyle); - } - }, - - didSelectionStateChange_: function() { - this.setHighlightStyle_('row-highlight-style', - this.resolvedRowHighlightStyle); - this.setHighlightStyle_('cell-highlight-style', - this.resolvedCellHighlightStyle); - - for (var i = 0; i < this.$.body.children.length; i++) - this.updateTabIndexForTableRowNode_(this.$.body.children[i]); - this.maybeUpdateSelectedRow_(); - }, - - maybeUpdateSelectedRow_: function() { - if (this.selectedTableRowInfo_ === undefined) - return; - - // Selection may be off. - if (this.selectionMode_ === SelectionMode.NONE) { - this.removeSelectedState_(); - this.selectedTableRowInfo_ = undefined; - return; - } - - // selectedUserRow may not be visible - function isVisible(rowInfo) { - if (!rowInfo.htmlNode) - return false; - return !!rowInfo.htmlNode.parentElement; - } - if (isVisible(this.selectedTableRowInfo_)) { - this.updateSelectedState_(); - return; - } - - this.removeSelectedState_(); - var curRowInfo = this.selectedTableRowInfo_; - while (curRowInfo && !isVisible(curRowInfo)) - curRowInfo = curRowInfo.parentRowInfo; - - this.selectedTableRowInfo_ = curRowInfo; - if (this.selectedTableRowInfo_) - this.updateSelectedState_(); - }, - - didTableRowInfoGetClicked_: function(rowInfo, columnIndex) { - switch (this.selectionMode_) { - case SelectionMode.NONE: - return; - - case SelectionMode.CELL: - if (!this.doesColumnIndexSupportSelection(columnIndex)) - return; - if (this.selectedColumnIndex !== columnIndex) - this.selectedColumnIndex = columnIndex; - // Fall through. - - case SelectionMode.ROW: - if (this.selectedTableRowInfo_ !== rowInfo) - this.selectedTableRow = rowInfo.userRow; - } - }, - - get selectedTableRow() { - if (!this.selectedTableRowInfo_) - return undefined; - return this.selectedTableRowInfo_.userRow; - }, - - set selectedTableRow(userRow) { - this.rebuildIfNeeded_(); - if (this.selectionMode_ === SelectionMode.NONE) - throw new Error('Selection is off.'); - - var rowInfo; - if (userRow === undefined) { - rowInfo = undefined; - } else { - rowInfo = this.tableRowsInfo_.get(userRow); - if (!rowInfo) - throw new Error('Row has not been seen, must expand its parents.'); - } - - var e = this.prepareToChangeSelection_(); - this.selectedTableRowInfo_ = rowInfo; - - if (this.selectedTableRowInfo_ === undefined) { - this.selectedColumnIndex_ = undefined; - this.removeSelectedState_(); - } else { - switch (this.selectionMode_) { - case SelectionMode.ROW: - this.selectedColumnIndex_ = undefined; - break; - - case SelectionMode.CELL: - if (this.selectedColumnIndex_ === undefined) { - var i = this.getFirstSelectableColumnIndex_(); - if (i == -1) - throw new Error('Cannot find a selectable column.'); - this.selectedColumnIndex_ = i; - } - break; - - default: - throw new Error('Invalid selection mode ' + this.selectionMode_); - } - this.updateSelectedState_(); - } - - this.dispatchEvent(e); - }, - - updateTabIndexForTableRowNode_: function(row) { - if (this.selectionMode_ === SelectionMode.ROW) - row.tabIndex = 0; - else - row.removeAttribute('tabIndex'); - - var enableCellTab = this.selectionMode_ === SelectionMode.CELL; - for (var i = 0; i < this.tableColumns_.length; i++) { - var cell = row.children[i]; - if (enableCellTab && this.doesColumnIndexSupportSelection(i)) - cell.tabIndex = 0; - else - cell.removeAttribute('tabIndex'); - } - }, - - prepareToChangeSelection_: function() { - var e = new tr.b.Event('selection-changed'); - var previousSelectedRowInfo = this.selectedTableRowInfo_; - if (previousSelectedRowInfo) - e.previousSelectedTableRow = previousSelectedRowInfo.userRow; - else - e.previousSelectedTableRow = undefined; - - this.removeSelectedState_(); - - return e; - }, - - removeSelectedState_: function() { - this.setSelectedState_(false); - }, - - updateSelectedState_: function() { - this.setSelectedState_(true); - }, - - setSelectedState_: function(select) { - if (this.selectedTableRowInfo_ === undefined) - return; - - // Row selection. - var rowNode = this.selectedTableRowInfo_.htmlNode; - if (select) - rowNode.setAttribute('selected', true); - else - rowNode.removeAttribute('selected'); - - // Cell selection (if applicable). - var cellNode = rowNode.children[this.selectedColumnIndex_]; - if (!cellNode) - return; - if (select) - cellNode.setAttribute('selected', true); - else - cellNode.removeAttribute('selected'); - }, - - doesColumnIndexSupportSelection: function(columnIndex) { - var columnInfo = this.tableColumns_[columnIndex]; - var scs = columnInfo.supportsCellSelection; - if (scs === false) - return false; - return true; - }, - - getFirstSelectableColumnIndex_: function() { - for (var i = 0; i < this.tableColumns_.length; i++) { - if (this.doesColumnIndexSupportSelection(i)) - return i; - } - return -1; - }, - - getSelectableNodeGivenTableRowNode_: function(htmlNode) { - switch (this.selectionMode_) { - case SelectionMode.ROW: - return htmlNode; - - case SelectionMode.CELL: - return htmlNode.children[this.selectedColumnIndex_]; - - default: - throw new Error('Invalid selection mode ' + this.selectionMode_); - } - }, - - get selectedColumnIndex() { - if (this.selectionMode_ !== SelectionMode.CELL) - return undefined; - return this.selectedColumnIndex_; - }, - - set selectedColumnIndex(selectedColumnIndex) { - this.rebuildIfNeeded_(); - if (this.selectionMode_ === SelectionMode.NONE) - throw new Error('Selection is off.'); - if (selectedColumnIndex < 0 || - selectedColumnIndex >= this.tableColumns_.length) - throw new Error('Invalid index'); - if (!this.doesColumnIndexSupportSelection(selectedColumnIndex)) - throw new Error('Selection is not supported on this column'); - - var e = this.prepareToChangeSelection_(); - this.selectedColumnIndex_ = selectedColumnIndex; - if (this.selectedColumnIndex_ === undefined) - this.selectedTableRowInfo_ = undefined; - this.updateSelectedState_(); - - this.dispatchEvent(e); - }, - - onKeyDown_: function(e) { - if (this.selectionMode_ === SelectionMode.NONE) - return; - if (this.selectedTableRowInfo_ === undefined) - return; - - var code_to_command_names = { - 13: 'ENTER', - 37: 'ARROW_LEFT', - 38: 'ARROW_UP', - 39: 'ARROW_RIGHT', - 40: 'ARROW_DOWN' - }; - var cmdName = code_to_command_names[e.keyCode]; - if (cmdName === undefined) - return; - - e.stopPropagation(); - e.preventDefault(); - this.performKeyCommand_(cmdName); - }, - - performKeyCommand_: function(cmdName) { - this.rebuildIfNeeded_(); - - var rowInfo = this.selectedTableRowInfo_; - var htmlNode = rowInfo.htmlNode; - if (cmdName === 'ARROW_UP') { - var prev = htmlNode.previousElementSibling; - if (prev) { - tr.ui.b.scrollIntoViewIfNeeded(prev); - this.selectedTableRow = prev.rowInfo.userRow; - this.focusSelected_(); - return; - } - return; - } - - if (cmdName === 'ARROW_DOWN') { - var next = htmlNode.nextElementSibling; - if (next) { - tr.ui.b.scrollIntoViewIfNeeded(next); - this.selectedTableRow = next.rowInfo.userRow; - this.focusSelected_(); - return; - } - return; - } - - if (cmdName === 'ARROW_RIGHT') { - switch (this.selectionMode_) { - case SelectionMode.ROW: - if (rowInfo.userRow[this.subRowsPropertyName_] === undefined) - return; - if (rowInfo.userRow[this.subRowsPropertyName_].length === 0) - return; - - if (!rowInfo.isExpanded) - this.setExpandedForTableRow(rowInfo.userRow, true); - this.selectedTableRow = - htmlNode.nextElementSibling.rowInfo.userRow; - this.focusSelected_(); - return; - - case SelectionMode.CELL: - var newIndex = this.selectedColumnIndex_ + 1; - if (newIndex >= this.tableColumns_.length) - return; - if (!this.doesColumnIndexSupportSelection(newIndex)) - return; - this.selectedColumnIndex = newIndex; - this.focusSelected_(); - return; - - default: - throw new Error('Invalid selection mode ' + this.selectionMode_); - } - } - - if (cmdName === 'ARROW_LEFT') { - switch (this.selectionMode_) { - case SelectionMode.ROW: - if (rowInfo.isExpanded) { - this.setExpandedForTableRow(rowInfo.userRow, false); - this.focusSelected_(); - return; - } - - // Not expanded. Select parent... - var parentRowInfo = rowInfo.parentRowInfo; - if (parentRowInfo) { - this.selectedTableRow = parentRowInfo.userRow; - this.focusSelected_(); - return; - } - return; - - case SelectionMode.CELL: - var newIndex = this.selectedColumnIndex_ - 1; - if (newIndex < 0) - return; - if (!this.doesColumnIndexSupportSelection(newIndex)) - return; - this.selectedColumnIndex = newIndex; - this.focusSelected_(); - return; - - default: - throw new Error('Invalid selection mode ' + this.selectionMode_); - } - } - - if (cmdName === 'ENTER') { - if (rowInfo.userRow[this.subRowsPropertyName_] === undefined) - return; - if (rowInfo.userRow[this.subRowsPropertyName_].length === 0) - return; - this.setExpandedForTableRow(rowInfo.userRow, !rowInfo.isExpanded); - this.focusSelected_(); - return; - } - - throw new Error('Unrecognized command ' + cmdName); - }, - - focusSelected_: function() { - if (!this.selectedTableRowInfo_) - return; - var node = this.getSelectableNodeGivenTableRowNode_( - this.selectedTableRowInfo_.htmlNode); - node.focus(); - }, - - dispatchSortingChangedEvent_: function() { - var e = new tr.b.Event('sort-column-changed'); - e.sortColumnIndex = this.sortColumnIndex_; - e.sortDescending = this.sortDescending_; - this.dispatchEvent(e); - } - }); - })(); - </script> -</polymer-element> -<polymer-element name="tr-ui-b-table-header-cell" on-tap="onTap_"> - <template> - <style> - :host { - -webkit-user-select: none; - display: flex; - } - - span { - flex: 0 1 auto; - } - - side-element { - -webkit-user-select: none; - flex: 0 0 auto; - padding-left: 4px; - vertical-align: top; - font-size: 15px; - font-family: sans-serif; - display: inline; - line-height: 85%; - } - </style> - - <span id="title"></span><side-element id="side"></side-element> - </template> - - <script> - 'use strict'; - - var ColumnAlignment = tr.ui.b.TableFormat.ColumnAlignment; - - Polymer({ - created: function() { - this.tapCallback_ = undefined; - this.cellTitle_ = ''; - this.align_ = undefined; - }, - - set cellTitle(value) { - this.cellTitle_ = value; - - var titleNode = tr.ui.b.asHTMLOrTextNode( - this.cellTitle_, this.ownerDocument); - - this.$.title.innerText = ''; - this.$.title.appendChild(titleNode); - }, - - get cellTitle() { - return this.cellTitle_; - }, - - set align(align) { - switch (align) { - case undefined: - case ColumnAlignment.LEFT: - this.style.justifyContent = ''; - break; - - case ColumnAlignment.RIGHT: - this.style.justifyContent = 'flex-end'; - break; - - default: - throw new Error('Invalid alignment of column (title=\'' + - this.cellTitle_ + '\'): ' + align); - } - this.align_ = align; - }, - - get align() { - return this.align_; - }, - - clearSideContent: function() { - this.$.side.textContent = ''; - }, - - set sideContent(content) { - this.$.side.textContent = content; - }, - - get sideContent() { - return this.$.side.textContent; - }, - - set tapCallback(callback) { - this.style.cursor = 'pointer'; - this.tapCallback_ = callback; - }, - - get tapCallback() { - return this.tapCallback_; - }, - - onTap_: function() { - if (this.tapCallback_) - this.tapCallback_(); - } - }); -</script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/table_header_cell.html b/chromium/third_party/catapult/tracing/tracing/ui/base/table_header_cell.html deleted file mode 100644 index f6ba5eb35dd..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/table_header_cell.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/base/utils.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> - -<polymer-element name="tr-ui-b-table-header-cell" - on-tap="onTap_"> - <template> - <style> - :host { - -webkit-user-select: none; - display: flex; - } - - span { - flex: 0 1 auto; - } - - side-element { - -webkit-user-select: none; - flex: 1 0 auto; - padding-left: 4px; - vertical-align: top; - font-size: 15px; - font-family: sans-serif; - display: inline; - line-height: 85%; - } - </style> - - <span id="title"></span><side-element id="side"></side-element> - </template> - - <script> - 'use strict'; - - Polymer({ - created: function() { - this.tapCallback_ = undefined; - this.cellTitle_ = ''; - }, - - set cellTitle(value) { - this.cellTitle_ = value; - - var titleNode = - tr.ui.b.asHTMLOrTextNode(this.cellTitle_, this.ownerDocument); - - this.$.title.innerText = ''; - this.$.title.appendChild(titleNode); - }, - - get cellTitle() { - return this.cellTitle_; - }, - - clearSideContent: function() { - this.$.side.textContent = ''; - }, - - set sideContent(content) { - this.$.side.textContent = content; - }, - - get sideContent() { - return this.$.side.textContent; - }, - - set tapCallback(callback) { - this.style.cursor = 'pointer'; - this.tapCallback_ = callback; - }, - - get tapCallback() { - return this.tapCallback_; - }, - - onTap_: function() { - if (this.tapCallback_) - this.tapCallback_(); - } - }); -</script> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/table_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/table_test.html deleted file mode 100644 index 0c3504fc318..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/table_test.html +++ /dev/null @@ -1,1461 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/deep_utils.html"> -<link rel="import" href="/tracing/ui/base/table.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var THIS_DOC = document._currentScript.ownerDocument; - var SelectionMode = tr.ui.b.TableFormat.SelectionMode; - var HighlightStyle = tr.ui.b.TableFormat.HighlightStyle; - var ColumnAlignment = tr.ui.b.TableFormat.ColumnAlignment; - - function isSelected(element) { - if (!element.hasAttribute('selected')) - return false; - return element.getAttribute('selected') === 'true'; - } - - test('instantiateEmptyTable_withoutEmptyValue', function() { - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '300px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; } - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = []; - table.rebuild(); - - this.addHTMLOutput(table); - - // Check that the width of the first column was set correctly (despite no - // body rows). - var firstColumnHeader = table.$.head.children[0].children[0]; - assert.closeTo(firstColumnHeader.offsetWidth, 300, 20); - - // Check that the first column has a non-empty header. - var firstColumnTitle = tr.b.findDeepElementMatchingPredicate( - firstColumnHeader, function(element) { - return element.textContent === 'First Column'; - }); - assert.isDefined(firstColumnTitle); - - // Check that empty value was not appended. - assert.lengthOf(table.$.body.children, 0); - }); - - test('instantiateEmptyTable_withEmptyValue', function() { - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '300px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; } - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = []; - table.emptyValue = 'This table is left intentionally empty'; - table.rebuild(); - - this.addHTMLOutput(table); - - // Check that the width of the first column was set correctly (despite no - // body rows). - var firstColumnHeader = table.$.head.children[0].children[0]; - assert.closeTo(firstColumnHeader.offsetWidth, 300, 20); - - // Check that empty value was appended. - assert.lengthOf(table.$.body.children, 1); - }); - - test('instantiateNestedTableNoNests', function() { - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '200px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; } - } - ]; - - var rows = [ - { - firstData: 'A1', - secondData: 'A2' - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.emptyValue = 'THIS SHOULD NOT BE VISIBLE!!!'; - table.rebuild(); - - this.addHTMLOutput(table); - - // Check that empty value was not appended. - assert.lengthOf(table.$.body.children, 2); - }); - - test('sequentialRebuildsBehaveSanely', function() { - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '200px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; } - } - ]; - - var rows = [ - { - firstData: 'A1', - secondData: 'A2' - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - var footerRows = [ - { - firstData: 'A1', - secondData: 'A2' - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.footerRows = footerRows; - table.rebuild(); - table.rebuild(); - assert.equal(table.$.body.children.length, 2); - assert.equal(table.$.foot.children.length, 2); - - this.addHTMLOutput(table); - }); - - test('instantiateNestedTableWithNests', function() { - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '250px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; }, - width: '50%' - } - ]; - - var rows = [ - { - firstData: 'A1', - secondData: 'A2', - subRows: [ - { - firstData: 'Sub1 A1', - secondData: 'Sub1 A2' - }, - { - firstData: 'Sub2 A1', - secondData: 'Sub2 A2', - subRows: [ - { - firstData: 'SubSub1 A1', - secondData: 'SubSub1 A2' - }, - { - firstData: 'SubSub2 A1', - secondData: 'SubSub2 A2' - } - ] - }, - { - firstData: 'Sub3 A1', - secondData: 'Sub3 A2' - } - ] - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - }); - - test('instantiateSortingCallbacksWithNests', function() { - var table = document.createElement('tr-ui-b-table'); - - var columns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '50%' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; }, - width: '250px', - cmp: function(rowA, rowB) { - return rowA.secondData.toString().localeCompare( - rowB.secondData.toString()); - }, - showExpandButtons: true - } - ]; - - var rows = [ - { - firstData: 'A1', - secondData: 'A2', - subRows: [ - { - firstData: 'Sub1 A1', - secondData: 'Sub1 A2' - }, - { - firstData: 'Sub2 A1', - secondData: 'Sub2 A2', - subRows: [ - { - firstData: 'SubSub1 A1', - secondData: 'SubSub1 A2' - }, - { - firstData: 'SubSub2 A1', - secondData: 'SubSub2 A2' - } - ] - }, - { - firstData: 'Sub3 A1', - secondData: 'Sub3 A2' - } - ] - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - - var footerRows = [ - { - firstData: 'F1', - secondData: 'F2', - subRows: [ - { - firstData: 'Sub1F1', - secondData: 'Sub1F2' - }, - { - firstData: 'Sub2F1', - secondData: 'Sub2F2', - subRows: [ - { - firstData: 'SubSub1F1', - secondData: 'SubSub1F2' - }, - { - firstData: 'SubSub2F1', - secondData: 'SubSub2F2' - } - ] - }, - { - firstData: 'Sub3F1', - secondData: 'Sub3F2' - } - ] - }, - { - firstData: 'F\'1', - secondData: 'F\'2' - } - - ]; - - table.tableColumns = columns; - table.tableRows = rows; - table.footerRows = footerRows; - table.rebuild(); - - this.addHTMLOutput(table); - - var button = THIS_DOC.createElement('button'); - button.textContent = 'Sort By Col 0'; - button.addEventListener('click', function() { - table.sortDescending = !table.sortDescending; - table.sortColumnIndex = 0; - }); - table.rebuild(); - - this.addHTMLOutput(button); - }); - - - test('instantiateNestedTableAlreadyExpanded', function() { - var columns = [ - { - title: 'a', - value: function(row) { return row.a; }, - width: '150px' - }, - { - title: 'a', - value: function(row) { return row.b; }, - width: '50%' - } - ]; - - var rows = [ - { - a: 'aToplevel', - b: 'bToplevel', - isExpanded: true, - subRows: [ - { - a: 'a1', - b: 'b1' - } - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - this.addHTMLOutput(table); - - var a1El = tr.b.findDeepElementMatchingPredicate(table, function(element) { - return element.textContent == 'a1'; - }); - assert.isDefined(a1El); - - var bToplevelEl = tr.b.findDeepElementMatchingPredicate( - table, - function(element) { - return element.textContent == 'bToplevel'; - }); - assert.isDefined(bToplevelEl); - var expandButton = bToplevelEl.parentElement.querySelector('expand-button'); - assert.isTrue(expandButton.classList.contains('button-expanded')); - }); - - - test('subRowsThatAreRetrievedOnDemand', function() { - var columns = [ - { - title: 'a', - value: function(row) { return row.a; }, - width: '150px' - } - ]; - - var rows = [ - { - a: 'row1', - subRows: [ - { - b: 'row1.1', - get subRows() { - throw new Error('Shold not be called'); - } - } - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - this.addHTMLOutput(table); - }); - - - test('instantiateTableWithHiddenHeader', function() { - var columns = [ - { - title: 'a', - value: function(row) { return row.a; }, - width: '150px' - }, - { - title: 'a', - value: function(row) { return row.b; }, - width: '50%' - } - ]; - - var rows = [ - { - a: 'aToplevel', - b: 'bToplevel' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.showHeader = false; - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - this.addHTMLOutput(table); - - var tHead = table.$.head; - assert.equal(table.$.head.children.length, 0); - assert.equal(0, tHead.getBoundingClientRect().height); - - table.showHeader = true; - table.rebuild(); - table.showHeader = false; - table.rebuild(); - assert.equal(table.$.head.children.length, 0); - }); - - - test('sortColumnsNotPossibleOnPercentSizedColumns', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px' - }, - { - title: 'Value', - value: function(row) { return row.b; }, - width: '100%', - showExpandButtons: true - } - ]; - - var table1 = document.createElement('tr-ui-b-table'); - table1.showHeader = true; - - assert.throws(function() { - table1.tableColumns = columns; - }); - }); - - test('twoTablesFirstColumnMatching', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px' - }, - { - title: 'Value', - value: function(row) { return row.b; }, - width: '100%' - } - ]; - - var table1 = document.createElement('tr-ui-b-table'); - table1.showHeader = true; - table1.tableColumns = columns; - table1.tableRows = [ - { - a: 'first', - b: 'row' - } - ]; - table1.rebuild(); - this.addHTMLOutput(table1); - - var table2 = document.createElement('tr-ui-b-table'); - table2.showHeader = false; - table2.tableColumns = columns; - table2.tableRows = [ - { - a: 'second', - b: 'row' - } - ]; - table2.rebuild(); - this.addHTMLOutput(table2); - - var h1FirstCol = table1.$.head.children[0].children[0]; - var h2FirstCol = table2.$.body.children[0].children[0]; - assert.equal(h1FirstCol.getBoundingClientRect().width, - h2FirstCol.getBoundingClientRect().width); - }); - - test('programmaticSorting', function() { - var table = document.createElement('tr-ui-b-table'); - - var columns = [ - { - title: 'Column', - value: function(row) { return row.value; }, - cmp: function(rowA, rowB) { - return rowA.value.toString().localeCompare( - rowB.value.toString()); - } - } - ]; - - var rows = [ - { - value: 'A1', - subRows: [ - { - value: 'A1.1' - }, - { - value: 'A1.2', - subRows: [ - { - value: 'A1.2.1' - }, - { - value: 'A1.2.2' - } - ] - }, - { - value: 'A1.3' - } - ] - }, - { - value: 'A2' - } - ]; - - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - table.sortDescending = true; - table.sortColumnIndex = 0; - table.rebuild(); - var r0 = table.$.body.children[0]; - assert.equal(r0.rowInfo.userRow, rows[1]); - - var r1 = table.$.body.children[1]; - assert.equal(r1.rowInfo.userRow, rows[0]); - }); - - test('sortDispatchesEvent', function() { - var table = document.createElement('tr-ui-b-table'); - var columns = [ - { - title: 'Column 0', - value: function(row) { return row.value0; }, - cmp: function(rowA, rowB) { return rowA.value0 - rowB.value0; } - }, - { - title: 'Column 1', - value: function(row) { return row.value1; }, - cmp: function(rowA, rowB) { return rowA.value1 - rowB.value1; } - } - ]; - - var sortColumnIndex = undefined; - var sortDescending = undefined; - var numListenerCalls = 0; - table.tableColumns = columns; - table.addEventListener('sort-column-changed', function(e) { - sortColumnIndex = e.sortColumnIndex; - sortDescending = e.sortDescending; - numListenerCalls++; - }); - table.rebuild(); - - table.sortColumnIndex = 0; - assert.equal(sortColumnIndex, 0); - assert.equal(numListenerCalls, 1); - - table.sortDescending = true; - assert.equal(sortColumnIndex, 0); - assert.isTrue(sortDescending); - assert.equal(numListenerCalls, 2); - - table.sortColumnIndex = 1; - table.sortDescending = false; - assert.equal(sortColumnIndex, 1); - assert.isFalse(sortDescending); - assert.equal(numListenerCalls, 4); - - table.sortColumnIndex = undefined; - assert.equal(sortColumnIndex, undefined); - assert.equal(numListenerCalls, 5); - }); - - test('sortingAfterExpand', function() { - var table = document.createElement('tr-ui-b-table'); - - var columns = [ - { - title: 'Column', - value: function(row) { return row.value; }, - cmp: function(rowA, rowB) { - return rowA.value.toString().localeCompare( - rowB.value.toString()); - } - } - ]; - - var rows = [ - { - value: 'A1', - isExpanded: true, - subRows: [ - { - value: 'A1.1' - }, - { - value: 'A1.2', - subRows: [ - { - value: 'A1.2.1' - }, - { - value: 'A1.2.2' - } - ] - }, - { - value: 'A1.3' - } - ] - }, - { - value: 'A2' - } - ]; - - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - table.sortDescending = true; - table.sortColumnIndex = 0; - table.rebuild(); - var r0 = table.$.body.children[0]; - assert.equal(r0.rowInfo.userRow, rows[1]); - - var r1 = table.$.body.children[1]; - assert.equal(r1.rowInfo.userRow, rows[0]); - - var r2 = table.$.body.children[2]; - assert.equal(r2.rowInfo.userRow, rows[0].subRows[2]); - - assert.isFalse(r0.hasAttribute('tabIndex')); - }); - - function createSimpleOneColumnNestedTable() { - var table = document.createElement('tr-ui-b-table'); - - var columns = [ - { - title: 'Column', - value: function(row) { return row.value; }, - cmp: function(rowA, rowB) { - return rowA.value.toString().localeCompare( - rowB.value.toString()); - } - } - ]; - - var rows = [ - { - value: 'A1', - subRows: [ - { - value: 'A1.1' - }, - { - value: 'A1.2', - subRows: [ - { - value: 'A1.2.1' - }, - { - value: 'A1.2.2' - } - ] - }, - { - value: 'A1.3' - } - ] - }, - { - value: 'A2' - } - ]; - - table.tableColumns = columns; - table.tableRows = rows; - return table; - } - - test('expandAfterRebuild', function() { - var table = createSimpleOneColumnNestedTable(); - table.rebuild(); - var rows = table.tableRows; - - this.addHTMLOutput(table); - - table.rebuild(); - assert.isFalse(table.getExpandedForTableRow(rows[0])); - table.setExpandedForTableRow(rows[0], true); - assert.isTrue(table.getExpandedForTableRow(rows[0])); - - var r1 = table.$.body.children[1]; - assert.equal(r1.rowInfo.userRow, rows[0].subRows[0]); - }); - - test('tableSelection', function() { - var table = createSimpleOneColumnNestedTable(); - var rows = table.tableRows; - - table.selectionMode = SelectionMode.ROW; - table.selectedTableRow = rows[0]; - - table.setExpandedForTableRow(rows[0], true); - table.selectedTableRow = rows[0].subRows[1]; - assert.equal(table.selectedTableRow, rows[0].subRows[1]); - - table.setExpandedForTableRow(rows[0], false); - assert.equal(table.selectedTableRow, rows[0]); - - table.selectionMode = SelectionMode.NONE; - assert.equal(table.selectedTableRow, undefined); - - table.selectionMode = SelectionMode.ROW; - table.setExpandedForTableRow(rows[0].subRows[1], true); - this.addHTMLOutput(table); - - var r0 = table.$.body.children[0]; - assert.isTrue(r0.hasAttribute('tabIndex')); - }); - - - test('keyMovement', function() { - var table = createSimpleOneColumnNestedTable(); - table.selectionMode = SelectionMode.ROW; - this.addHTMLOutput(table); - - var rows = table.tableRows; - table.selectedTableRow = rows[0]; - - table.performKeyCommand_('ARROW_DOWN'); - assert.equal(table.selectedTableRow, rows[1]); - - table.performKeyCommand_('ARROW_UP'); - assert.equal(table.selectedTableRow, rows[0]); - - // Enter on collapsed row should expand. - table.selectedTableRow = rows[0]; - table.performKeyCommand_('ENTER'); - assert.equal(table.selectedTableRow, rows[0]); - assert.isTrue(table.getExpandedForTableRow(rows[0])); - - table.performKeyCommand_('ENTER'); - assert.isFalse(table.getExpandedForTableRow(rows[0])); - - // Arrow right on collapsed row should expand. - table.selectedTableRow = rows[0]; - table.performKeyCommand_('ARROW_RIGHT'); - assert.equal(table.selectedTableRow, rows[0].subRows[0]); - assert.isTrue(table.getExpandedForTableRow(rows[0])); - - table.performKeyCommand_('ARROW_DOWN'); - assert.equal(table.selectedTableRow, rows[0].subRows[1]); - - // Arrow left on collapsed item should select parent. - table.performKeyCommand_('ARROW_LEFT'); - assert.equal(table.selectedTableRow, rows[0]); - assert.isTrue(table.getExpandedForTableRow(rows[0])); - // Arrow left on parent should collapse its children. - table.performKeyCommand_('ARROW_LEFT'); - assert.isFalse(table.getExpandedForTableRow(rows[0])); - - // Arrow right on expanded row should select first child. - table.selectedTableRow = rows[0]; - table.setExpandedForTableRow(rows[0], true); - table.performKeyCommand_('ARROW_RIGHT'); - assert.equal(table.selectedTableRow, rows[0].subRows[0]); - - // Arrow right on a non-expandable row should do nothing. - table.selectedTableRow = rows[1]; - assert.equal(table.selectedTableRow, rows[1]); - table.performKeyCommand_('ARROW_RIGHT'); - assert.equal(table.selectedTableRow, rows[1]); - assert.isFalse(table.getExpandedForTableRow(rows[1])); - }); - - test('RightArrowKeyWhenTableSorted', function() { - var table = createSimpleOneColumnNestedTable(); - table.selectionMode = SelectionMode.ROW; - this.addHTMLOutput(table); - table.sortDescending = true; - table.sortColumnIndex = 0; - table.rebuild(); - var rows = table.tableRows; - - // Arrow right should select the first child showing up on the viewer, - // rather than first child in sub rows since sorted. - table.selectedTableRow = rows[0]; - table.performKeyCommand_('ARROW_RIGHT'); - assert.equal(table.selectedTableRow, rows[0].subRows[2]); - }); - - test('reduceNumberOfColumnsAfterRebuild', function() { - // Create a table with two columns. - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '100px' - }, - { - title: 'Second Column', - value: function(row) { return row.secondData; }, - width: '100px' - } - ]; - - // Build the table. - table.rebuild(); - - // Check that reducing the number of columns doesn't throw an exception. - table.tableColumns = [ - { - title: 'First Column', - value: function(row) { return row.firstData; }, - width: '200px' - } - ]; - }); - - test('rowHighlightDark', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px', - supportsCellSelection: false - }, - { - title: 'Col1', - value: function(row) { return row.b; }, - width: '33%' - }, - { - title: 'Col2', - value: function(row) { return row.b * 2; }, - width: '33%' - }, - { - title: 'Col3', - value: function(row) { return row.b * 3; }, - width: '33%' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.showHeader = true; - table.rowHighlightStyle = HighlightStyle.DARK; - table.tableColumns = columns; - table.tableRows = [ - { - a: 'first', - b: '1' - }, - { - a: 'second', - b: '2' - } - ]; - table.rebuild(); - this.addHTMLOutput(table); - }); - - test('cellHighlightLight', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px', - supportsCellSelection: false - }, - { - title: 'Col1', - value: function(row) { return row.b; }, - width: '33%' - }, - { - title: 'Col2', - value: function(row) { return row.b * 2; }, - width: '33%' - }, - { - title: 'Col3', - value: function(row) { return row.b * 3; }, - width: '33%' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.showHeader = true; - table.cellHighlightStyle = HighlightStyle.LIGHT; - table.tableColumns = columns; - table.tableRows = [ - { - a: 'first', - b: '1' - }, - { - a: 'second', - b: '2' - } - ]; - table.rebuild(); - this.addHTMLOutput(table); - }); - - test('cellSelectionBasic', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px', - supportsCellSelection: false - }, - { - title: 'Col1', - value: function(row) { return row.b; }, - width: '33%' - }, - { - title: 'Col2', - value: function(row) { return row.b * 2; }, - width: '33%' - }, - { - title: 'Col3', - value: function(row) { return row.b * 3; }, - width: '33%' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.showHeader = true; - table.selectionMode = SelectionMode.CELL; - table.rowHighlightStyle = HighlightStyle.NONE; - table.tableColumns = columns; - table.tableRows = [ - { - a: 'first', - b: '1' - }, - { - a: 'second', - b: '2' - } - ]; - table.rebuild(); - this.addHTMLOutput(table); - - table.selectedTableRow = table.tableRows[0]; - assert.equal(table.selectedColumnIndex, 1); - - table.performKeyCommand_('ARROW_DOWN'); - table.performKeyCommand_('ARROW_RIGHT'); - table.performKeyCommand_('ARROW_RIGHT'); - table.performKeyCommand_('ARROW_LEFT'); - assert.equal(table.selectedTableRow, table.tableRows[1]); - assert.equal(table.selectedColumnIndex, 2); - - table.selectedTableRow = undefined; - assert.equal(table.selectedTableRow, undefined); - assert.equal(table.selectedColumnIndex, undefined); - assert.equal(table.selectedColumnIndex, undefined); - }); - - test('cellSelectionNested', function() { - var columns = [ - { - title: 'Title', - value: function(row) { return row.a; }, - width: '150px', - supportsCellSelection: false - }, - { - title: 'Value', - value: function(row) { return row.b; }, - width: '150px' - } - ]; - - var rows = [ - { - a: 'parent', - b: '1', - subRows: [ - { - a: 'child', - b: '2' - } - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.showHeader = true; - table.selectionMode = SelectionMode.CELL; - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - this.addHTMLOutput(table); - - // Expand the parent row. - table.setExpandedForTableRow(rows[0], true); - - // Select the second cell in the child row. - table.selectedTableRow = rows[0].subRows[0]; - assert.isFalse(isSelected(table.$.body.children[0])); - assert.isFalse(isSelected(table.$.body.children[0].children[1])); - assert.isTrue(isSelected(table.$.body.children[1])); - assert.isTrue(isSelected(table.$.body.children[1].children[1])); - - // Fold the parent row. The second cell in the parent row should be - // automatically selected. - table.setExpandedForTableRow(rows[0], false); - assert.isTrue(isSelected(table.$.body.children[0])); - assert.isTrue(isSelected(table.$.body.children[0].children[1])); - - // Expand the parent row again. Only the second cell of the parent row - // should still be selected. - table.setExpandedForTableRow(rows[0], true); - assert.isTrue(isSelected(table.$.body.children[0])); - assert.isTrue(isSelected(table.$.body.children[0].children[1])); - assert.isFalse(isSelected(table.$.body.children[1])); - assert.isFalse(isSelected(table.$.body.children[1].children[1])); - }); - - test('resolvedHighlightStyle', function() { - var table = document.createElement('tr-ui-b-table'); - - // Undefined selection mode. - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.NONE); - - // Row selection mode. - table.selectionMode = SelectionMode.ROW; - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.DARK); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.NONE); - - // Cell selection mode. - table.selectionMode = SelectionMode.CELL; - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.LIGHT); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); - - // Explicit row highlight style. - table.rowHighlightStyle = HighlightStyle.NONE; - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); - - // Explicit row and cell highlight styles. - table.cellHighlightStyle = HighlightStyle.LIGHT; - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.NONE); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.LIGHT); - - // Back to default highlight styles. - table.cellHighlightStyle = HighlightStyle.DEFAULT; - table.rowHighlightStyle = HighlightStyle.DEFAULT; - assert.strictEqual(table.resolvedRowHighlightStyle, HighlightStyle.LIGHT); - assert.strictEqual(table.resolvedCellHighlightStyle, HighlightStyle.DARK); - }); - - test('headersWithHtmlElements', function() { - var firstColumnTitle = document.createTextNode('First Column'); - var secondColumnTitle = document.createElement('span'); - secondColumnTitle.innerText = 'Second Column'; - secondColumnTitle.style.color = 'blue'; - - var columns = [ - { - title: firstColumnTitle, - value: function(row) { return row.firstData; }, - width: '200px' - }, - { - title: secondColumnTitle, - value: function(row) { return row.secondData; } - } - ]; - - var rows = [ - { - firstData: 'A1', - secondData: 'A2' - }, - { - firstData: 'B1', - secondData: 'B2' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - var firstColumnHeader = table.$.head.children[0].children[0].children[0]; - var secondColumnHeader = table.$.head.children[0].children[1].children[0]; - assert.equal(firstColumnHeader.cellTitle.textContent, 'First Column'); - assert.equal(secondColumnHeader.cellTitle.textContent, 'Second Column'); - }); - - test('align', function() { - var columns = [ - { - title: 'a', - align: ColumnAlignment.RIGHT, - value: function(row) { - return row.a; - } - } - ]; - var rows = [{a: 1}, {a: 'long-row-so-that-alignment-would-be-visible'}]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - assert.strictEqual( - table.$.body.children[0].children[0].style.textAlign, 'right'); - }); - - test('subRowsPropertyName', function() { - var columns = [ - { - title: 'a', - value: function(row) { - return row.a; - } - } - ]; - var rows = [ - { - a: 1, - isExpanded: true, - children: [ - {a: 2} - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.subRowsPropertyName = 'children'; - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - assert.equal(2, table.$.body.children[1].children[0].textContent); - }); - - test('shouldNotRenderUndefined', function() { - var columns = [ - { - title: 'Column', - value: function(row) { return row.firstData; } - } - ]; - - var rows = [ - { - firstData: undefined, - secondData: 'A2' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - // check that we don't have 'undefined' anywhere - assert.isTrue(table.$.body.innerHTML.indexOf('undefined') < 0); - }); - - test('customizeTableRowCallback', function() { - var columns = [ - { - title: 'Column', - value: function(row) { return row.data; } - } - ]; - - var rows = [ - { - data: 'data' - } - ]; - - var table = document.createElement('tr-ui-b-table'); - var callbackCalled = false; - table.tableColumns = columns; - table.tableRows = rows; - table.customizeTableRowCallback = function(userRow, trElement) { - callbackCalled = (userRow === rows[0]); - }; - table.rebuild(); - assert.isTrue(callbackCalled); - - this.addHTMLOutput(table); - - // The callback can also be set after the table is first built. - table.customizeTableRowCallback = function(userRow, trElement) { - callbackCalled = (userRow === rows[0]); - }; - - // Setting the customize callback should set the body dirty. - assert.isTrue(table.bodyDirty_); - - callbackCalled = false; - - // Don't bother waiting for the timeout. - table.rebuild(); - - assert.isTrue(callbackCalled); - }); - - test('selectionEdgeCases', function() { - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = [ - { - title: 'Column', - value: function(row) { return row.data; }, - supportsCellSelection: false - } - ]; - table.tableRows = [{ data: 'body row' }]; - table.footerRows = [{ data: 'footer row' }]; - table.selectionMode = SelectionMode.ROW; - this.addHTMLOutput(table); - - // Clicking on the body row should *not* throw an exception (despite the - // column not supporting cell selection). - table.$.body.children[0].children[0].click(); - - // Clicking on the footer row should *not* throw an exception (despite - // footer rows not being selectable in general). - table.$.foot.children[0].children[0].click(); - }); - - test('defaultExpansionStateCallback', function() { - var columns = [ - { - title: 'Name', - value: function(row) { return row.name; } - }, - { - title: 'Value', - value: function(row) { return row.value; } - } - ]; - - var rows = [ - { - name: 'A', - value: 10, - subRows: [ - { - name: 'B', - value: 8, - subRows: [ - { - name: 'C', - value: 4 - }, - { - name: 'D', - value: 4 - } - ] - }, - { - name: 'E', - value: 2, - subRows: [ - { - name: 'F', - value: 1 - }, - { - name: 'G', - value: 1 - } - ] - } - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - var cRow = tr.b.findDeepElementMatchingPredicate( - table, function(element) { - return element.textContent === 'C'; - }); - assert.equal(cRow, undefined); - - var callbackCalled = false; - table.defaultExpansionStateCallback = function(row, parentRow) { - callbackCalled = true; - - if (parentRow === undefined) - return true; - - if (row.value >= (parentRow.value * 0.8)) - return true; - - return false; - }; - - // Setting the callback should set the body dirty. - assert.isTrue(table.bodyDirty_); - assert.isFalse(callbackCalled); - - table.rebuild(); - - assert.isTrue(callbackCalled); - cRow = tr.b.findDeepElementMatchingPredicate(table, function(element) { - return element.textContent === 'C'; - }); - assert.isDefined(cRow); - }); - - test('sortExpanded', function() { - var columns = [ - { - title: 'Name', - value: function(row) { return row.name; } - }, - { - title: 'Value', - value: function(row) { return row.value; }, - cmp: function(x, y) { return x.value - y.value; } - } - ]; - - var rows = [ - { - name: 'A', - value: 10, - subRows: [ - { - name: 'B', - value: 8 - }, - { - name: 'C', - value: 4 - }, - ] - } - ]; - - var table = document.createElement('tr-ui-b-table'); - table.tableColumns = columns; - table.tableRows = rows; - table.rebuild(); - - this.addHTMLOutput(table); - - function isB(row) { - return row.textContent === 'B'; - } - - // Check that 'A' row is not expanded. - assert.isUndefined(tr.b.findDeepElementMatchingPredicate(table, isB)); - - // Expand 'A' row. - table.setExpandedForTableRow(rows[0], true); - - // Check that 'A' is expanded. - assert.isDefined(tr.b.findDeepElementMatchingPredicate(table, isB)); - - // Sort by value. - table.sortColumnIndex = 1; - - // Rebuild the table synchronously instead of waiting for scheduleRebuild_'s - // setTimeout(0). - table.rebuild(); - - // Check that 'A' is still expanded. - assert.isDefined(tr.b.findDeepElementMatchingPredicate(table, isB)); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool.html b/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool.html deleted file mode 100644 index 5fe8c74e86b..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool.html +++ /dev/null @@ -1,322 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2013 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. ---> - -<link rel="import" href="/tracing/base/range.html"> -<link rel="import" href="/tracing/model/event_set.html"> -<link rel="import" href="/tracing/model/slice.html"> -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -/** - * @fileoverview Provides the TimingTool class. - */ -tr.exportTo('tr.ui.b', function() { - - /** - * Tool for taking time measurements in the TimelineTrackView using - * Viewportmarkers. - * @constructor - */ - function TimingTool(viewport, targetElement) { - this.viewport_ = viewport; - - // Prepare the event handlers to be added and removed repeatedly. - this.onMouseMove_ = this.onMouseMove_.bind(this); - this.onDblClick_ = this.onDblClick_.bind(this); - this.targetElement_ = targetElement; - - // Valid only during mousedown. - this.isMovingLeftEdge_ = false; - }; - - TimingTool.prototype = { - - onEnterTiming: function(e) { - this.targetElement_.addEventListener('mousemove', this.onMouseMove_); - this.targetElement_.addEventListener('dblclick', this.onDblClick_); - }, - - onBeginTiming: function(e) { - if (!this.isTouchPointInsideTrackBounds_(e.clientX, e.clientY)) - return; - - var pt = this.getSnappedToEventPosition_(e); - this.mouseDownAt_(pt.x, pt.y); - - this.updateSnapIndicators_(pt); - }, - - updateSnapIndicators_: function(pt) { - if (!pt.snapped) - return; - var ir = this.viewport_.interestRange; - if (ir.min === pt.x) - ir.leftSnapIndicator = new tr.ui.SnapIndicator(pt.y, pt.height); - if (ir.max === pt.x) - ir.rightSnapIndicator = new tr.ui.SnapIndicator(pt.y, pt.height); - }, - - onUpdateTiming: function(e) { - var pt = this.getSnappedToEventPosition_(e); - this.mouseMoveAt_(pt.x, pt.y, true); - this.updateSnapIndicators_(pt); - }, - - onEndTiming: function(e) { - this.mouseUp_(); - }, - - onExitTiming: function(e) { - this.targetElement_.removeEventListener('mousemove', this.onMouseMove_); - this.targetElement_.removeEventListener('dblclick', this.onDblClick_); - }, - - onMouseMove_: function(e) { - if (e.button) - return; - var worldX = this.getWorldXFromEvent_(e); - this.mouseMoveAt_(worldX, e.clientY, false); - }, - - onDblClick_: function(e) { - // TODO(nduca): Implement dobuleclicking. - console.error('not implemented'); - }, - - //////////////////////////////////////////////////////////////////////////// - - isTouchPointInsideTrackBounds_: function(clientX, clientY) { - if (!this.viewport_ || - !this.viewport_.modelTrackContainer || - !this.viewport_.modelTrackContainer.canvas) - return false; - - var canvas = this.viewport_.modelTrackContainer.canvas; - var canvasRect = canvas.getBoundingClientRect(); - if (clientX >= canvasRect.left && clientX <= canvasRect.right && - clientY >= canvasRect.top && clientY <= canvasRect.bottom) - return true; - - return false; - }, - - mouseDownAt_: function(worldX, y) { - var ir = this.viewport_.interestRange; - var dt = this.viewport_.currentDisplayTransform; - - var pixelRatio = window.devicePixelRatio || 1; - var nearnessThresholdWorld = dt.xViewVectorToWorld(6 * pixelRatio); - - if (ir.isEmpty) { - ir.setMinAndMax(worldX, worldX); - ir.rightSelected = true; - this.isMovingLeftEdge_ = false; - return; - } - - - // Left edge test. - if (Math.abs(worldX - ir.min) < nearnessThresholdWorld) { - ir.leftSelected = true; - ir.min = worldX; - this.isMovingLeftEdge_ = true; - return; - } - - // Right edge test. - if (Math.abs(worldX - ir.max) < nearnessThresholdWorld) { - ir.rightSelected = true; - ir.max = worldX; - this.isMovingLeftEdge_ = false; - return; - } - - ir.setMinAndMax(worldX, worldX); - ir.rightSelected = true; - this.isMovingLeftEdge_ = false; - }, - - mouseMoveAt_: function(worldX, y, mouseDown) { - var ir = this.viewport_.interestRange; - - if (mouseDown) { - this.updateMovingEdge_(worldX); - return; - } - - var ir = this.viewport_.interestRange; - var dt = this.viewport_.currentDisplayTransform; - - var pixelRatio = window.devicePixelRatio || 1; - var nearnessThresholdWorld = dt.xViewVectorToWorld(6 * pixelRatio); - - // Left edge test. - if (Math.abs(worldX - ir.min) < nearnessThresholdWorld) { - ir.leftSelected = true; - ir.rightSelected = false; - return; - } - - // Right edge test. - if (Math.abs(worldX - ir.max) < nearnessThresholdWorld) { - ir.leftSelected = false; - ir.rightSelected = true; - return; - } - - ir.leftSelected = false; - ir.rightSelected = false; - return; - }, - - updateMovingEdge_: function(newWorldX) { - var ir = this.viewport_.interestRange; - var a = ir.min; - var b = ir.max; - if (this.isMovingLeftEdge_) - a = newWorldX; - else - b = newWorldX; - - if (a <= b) - ir.setMinAndMax(a, b); - else - ir.setMinAndMax(b, a); - - if (ir.min == newWorldX) { - this.isMovingLeftEdge_ = true; - ir.leftSelected = true; - ir.rightSelected = false; - } else { - this.isMovingLeftEdge_ = false; - ir.leftSelected = false; - ir.rightSelected = true; - } - }, - - mouseUp_: function() { - var dt = this.viewport_.currentDisplayTransform; - var ir = this.viewport_.interestRange; - - ir.leftSelected = false; - ir.rightSelected = false; - - var pixelRatio = window.devicePixelRatio || 1; - var minWidthValue = dt.xViewVectorToWorld(2 * pixelRatio); - if (ir.range < minWidthValue) - ir.reset(); - }, - - getWorldXFromEvent_: function(e) { - var pixelRatio = window.devicePixelRatio || 1; - var canvas = this.viewport_.modelTrackContainer.canvas; - var worldOffset = canvas.getBoundingClientRect().left; - var viewX = (e.clientX - worldOffset) * pixelRatio; - return this.viewport_.currentDisplayTransform.xViewToWorld(viewX); - }, - - - /** - * Get the closest position of an event within a vertical range of the mouse - * position if possible, otherwise use the position of the mouse pointer. - * @param {MouseEvent} e Mouse event with the current mouse coordinates. - * @return { - * {Number} x, The x coordinate in world space. - * {Number} y, The y coordinate in world space. - * {Number} height, The height of the event. - * {boolean} snapped Whether the coordinates are from a snapped event or - * the mouse position. - * } - */ - getSnappedToEventPosition_: function(e) { - var pixelRatio = window.devicePixelRatio || 1; - var EVENT_SNAP_RANGE = 16 * pixelRatio; - - var modelTrackContainer = this.viewport_.modelTrackContainer; - var modelTrackContainerRect = modelTrackContainer.getBoundingClientRect(); - - var viewport = this.viewport_; - var dt = viewport.currentDisplayTransform; - var worldMaxDist = dt.xViewVectorToWorld(EVENT_SNAP_RANGE); - - var worldX = this.getWorldXFromEvent_(e); - var mouseY = e.clientY; - - var selection = new tr.model.EventSet(); - - // Look at the track under mouse position first for better performance. - modelTrackContainer.addClosestEventToSelection( - worldX, worldMaxDist, mouseY, mouseY, selection); - - // Look at all tracks visible on screen. - if (!selection.length) { - modelTrackContainer.addClosestEventToSelection( - worldX, worldMaxDist, - modelTrackContainerRect.top, modelTrackContainerRect.bottom, - selection); - } - - var minDistX = worldMaxDist; - var minDistY = Infinity; - var pixWidth = dt.xViewVectorToWorld(1); - - // Create result object with the mouse coordinates. - var result = { - x: worldX, - y: mouseY - modelTrackContainerRect.top, - height: 0, - snapped: false - }; - - var eventBounds = new tr.b.Range(); - for (var event of selection) { - var track = viewport.trackForEvent(event); - var trackRect = track.getBoundingClientRect(); - - eventBounds.reset(); - event.addBoundsToRange(eventBounds); - var eventX; - if (Math.abs(eventBounds.min - worldX) < - Math.abs(eventBounds.max - worldX)) { - eventX = eventBounds.min; - } else { - eventX = eventBounds.max; - } - - var distX = eventX - worldX; - - var eventY = trackRect.top; - var eventHeight = trackRect.height; - var distY = Math.abs(eventY + eventHeight / 2 - mouseY); - - // Prefer events with a closer y position if their x difference is below - // the width of a pixel. - if ((distX <= minDistX || Math.abs(distX - minDistX) < pixWidth) && - distY < minDistY) { - minDistX = distX; - minDistY = distY; - - // Retrieve the event position from the hit. - result.x = eventX; - result.y = eventY + - modelTrackContainer.scrollTop - modelTrackContainerRect.top; - result.height = eventHeight; - result.snapped = true; - } - } - - return result; - } - }; - - return { - TimingTool: TimingTool - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool_test.html deleted file mode 100644 index 91e630b945a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/timing_tool_test.html +++ /dev/null @@ -1,78 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/timeline_viewport.html"> -<link rel="import" href="/tracing/ui/base/timing_tool.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - function create100PxWideViewportInto10WideWorld() { - var vp = new tr.ui.TimelineViewport(document.createElement('div')); - var tempDisplayTransform = new tr.ui.TimelineDisplayTransform(); - tempDisplayTransform.xSetWorldBounds(0, 10, 100); - vp.setDisplayTransformImmediately(tempDisplayTransform); - - assert.equal(vp.currentDisplayTransform.xViewToWorld(0), 0); - assert.equal(vp.currentDisplayTransform.xViewToWorld(100), 10); - - return vp; - } - - test('dragLeftInterestRegion', function() { - var vp = create100PxWideViewportInto10WideWorld(); - vp.interestRange.min = 1; - vp.interestRange.max = 9; - var tool = new tr.ui.b.TimingTool(vp); - - tool.mouseDownAt_(1.1, 0); - assert.isTrue(vp.interestRange.leftSelected); - tool.mouseMoveAt_(1.5, 0, true); - assert.equal(vp.interestRange.min, 1.5); - tool.mouseUp_(); - assert.equal(vp.interestRange.min, 1.5); - assert.isFalse(vp.interestRange.leftSelected); - }); - - test('dragRightInterestRegion', function() { - var vp = create100PxWideViewportInto10WideWorld(); - vp.interestRange.min = 1; - vp.interestRange.max = 9; - var tool = new tr.ui.b.TimingTool(vp); - - tool.mouseDownAt_(9.1, 0); - assert.isTrue(vp.interestRange.rightSelected); - tool.mouseMoveAt_(8, 0, true); - assert.equal(vp.interestRange.max, 8); - tool.mouseUp_(); - assert.equal(vp.interestRange.max, 8); - assert.isFalse(vp.interestRange.leftSelected); - }); - - test('dragInNewSpace', function() { - var vp = create100PxWideViewportInto10WideWorld(); - vp.interestRange.min = 1; - vp.interestRange.max = 9; - var tool = new tr.ui.b.TimingTool(vp); - - tool.mouseDownAt_(5, 0); - assert.isTrue(vp.interestRange.rightSelected); - assert.equal(vp.interestRange.min, 5); - assert.equal(vp.interestRange.max, 5); - tool.mouseMoveAt_(4, 0, true); - assert.equal(vp.interestRange.min, 4); - assert.equal(vp.interestRange.max, 5); - assert.isTrue(vp.interestRange.leftSelected); - tool.mouseUp_(); - assert.equal(vp.interestRange.min, 4); - assert.isFalse(vp.interestRange.leftSelected); - assert.isFalse(vp.interestRange.rightSelected); - }); -}); -</script> - diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/tool_button.css b/chromium/third_party/catapult/tracing/tracing/ui/base/tool_button.css deleted file mode 100644 index 1c5ae4170c0..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/tool_button.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Copyright (c) 2013 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. - */ - -* /deep/ .tool-button { - background-position: center center; - background-repeat: no-repeat; - border-bottom: 1px solid #BCBCBC; - border-top: 1px solid #F1F1F1; - cursor: pointer; - height: 30px; -} - -* /deep/ .tool-button.active { - cursor: auto; -} diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button.html b/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button.html deleted file mode 100644 index 9d2405d8480..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright 2015 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. ---> - -<link rel="import" href="/tracing/base/base.html"> - -</script> -<polymer-element name='tr-ui-b-toolbar-button' noscript> - <template> - <style> - :host { - display: flex; - background-color: #f8f8f8; - border: 1px solid rgba(0, 0, 0, 0.5); - color: rgba(0,0,0,0.8); - justify-content: center; - align-self: stretch; - min-width: 23px; - } - - :host(:hover) { - background-color: rgba(255, 255, 255, 1.0); - border-color: rgba(0, 0, 0, 0.8); - box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4); - color: rgba(0, 0, 0, 1); - } - - #aligner { - display: flex; - flex: 0 0 auto; - align-self: center; - } - </style> - <div id="aligner"> - <content></content> - </div> - </template> -</polymer-element> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button_test.html deleted file mode 100644 index 78f94081163..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/toolbar_button_test.html +++ /dev/null @@ -1,39 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/ui/base/toolbar_button.html"> -<link rel="import" href="/tracing/ui/base/dom_helpers.html"> -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - test('tallWithTextContent', function() { - var el = document.createElement('tr-ui-b-toolbar-button'); - el.style.width = '100px'; - el.style.height = '40px'; - - el.textContent = 'blahblah'; - - this.addHTMLOutput(el); - }); - - test('tallWithInnerSpan', function() { - var el = document.createElement('tr-ui-b-toolbar-button'); - el.style.width = '100px'; - el.style.height = '40px'; - - el.appendChild(tr.ui.b.createSpan({textContent: 'blahblah'})); - - this.addHTMLOutput(el); - }); - - test('puny', function() { - var el = document.createElement('tr-ui-b-toolbar-button'); - el.textContent = 'M'; - this.addHTMLOutput(el); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/ui.html b/chromium/third_party/catapult/tracing/tracing/ui/base/ui.html deleted file mode 100644 index 20c1bd4471d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/ui.html +++ /dev/null @@ -1,169 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> -<link rel="import" href="/tracing/base/base.html"> -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - - /** - * Decorates elements as an instance of a class. - * @param {string|!Element} source The way to find the element(s) to decorate. - * If this is a string then {@code querySeletorAll} is used to find the - * elements to decorate. - * @param {!Function} constr The constructor to decorate with. The constr - * needs to have a {@code decorate} function. - */ - function decorate(source, constr) { - var elements; - if (typeof source == 'string') - elements = tr.doc.querySelectorAll(source); - else - elements = [source]; - - for (var i = 0, el; el = elements[i]; i++) { - if (!(el instanceof constr)) - constr.decorate(el); - } - } - - /** - * Defines a tracing UI component, a function that can be called to construct - * the component. - * - * tr class: - * var List = tr.ui.b.define('list'); - * List.prototype = { - * __proto__: HTMLUListElement.prototype, - * decorate: function() { - * ... - * }, - * ... - * }; - * - * Derived class: - * var CustomList = tr.ui.b.define('custom-list', List); - * CustomList.prototype = { - * __proto__: List.prototype, - * decorate: function() { - * ... - * }, - * ... - * }; - * - * @param {string} className The className of the newly created subtype. If - * subclassing by passing in opt_parentConstructor, this is used for - * debugging. If not subclassing, then it is the tag name that will be - * created by the component. - - * @param {function=} opt_parentConstructor The parent class for this new - * element, if subclassing is desired. If provided, the parent class must - * be also a function created by tr.ui.b.define. - * - * @param {string=} opt_tagNS The namespace in which to create the base - * element. Has no meaning when opt_parentConstructor is passed and must - * either be undefined or the same namespace as the parent class. - * - * @return {function(Object=):Element} The newly created component - * constructor. - */ - function define(className, opt_parentConstructor, opt_tagNS) { - if (typeof className == 'function') { - throw new Error('Passing functions as className is deprecated. Please ' + - 'use (className, opt_parentConstructor) to subclass'); - } - - var className = className.toLowerCase(); - if (opt_parentConstructor && !opt_parentConstructor.tagName) - throw new Error('opt_parentConstructor was not ' + - 'created by tr.ui.b.define'); - - // Walk up the parent constructors until we can find the type of tag - // to create. - var tagName = className; - var tagNS = undefined; - if (opt_parentConstructor) { - if (opt_tagNS) - throw new Error('Must not specify tagNS if parentConstructor is given'); - var parent = opt_parentConstructor; - while (parent && parent.tagName) { - tagName = parent.tagName; - tagNS = parent.tagNS; - parent = parent.parentConstructor; - } - } else { - tagNS = opt_tagNS; - } - - /** - * Creates a new UI element constructor. - * Arguments passed to the constuctor are provided to the decorate method. - * You will need to call the parent elements decorate method from within - * your decorate method and pass any required parameters. - * @constructor - */ - function f() { - if (opt_parentConstructor && - f.prototype.__proto__ != opt_parentConstructor.prototype) { - throw new Error( - className + ' prototye\'s __proto__ field is messed up. ' + - 'It MUST be the prototype of ' + opt_parentConstructor.tagName); - } - - var el; - if (tagNS === undefined) - el = tr.doc.createElement(tagName); - else - el = tr.doc.createElementNS(tagNS, tagName); - f.decorate.call(this, el, arguments); - return el; - } - - /** - * Decorates an element as a UI element class. - * @param {!Element} el The element to decorate. - */ - f.decorate = function(el) { - el.__proto__ = f.prototype; - el.decorate.apply(el, arguments[1]); - el.constructor = f; - }; - - f.className = className; - f.tagName = tagName; - f.tagNS = tagNS; - f.parentConstructor = (opt_parentConstructor ? opt_parentConstructor : - undefined); - f.toString = function() { - if (!f.parentConstructor) - return f.tagName; - return f.parentConstructor.toString() + '::' + f.className; - }; - - return f; - } - - function elementIsChildOf(el, potentialParent) { - if (el == potentialParent) - return false; - - var cur = el; - while (cur.parentNode) { - if (cur == potentialParent) - return true; - cur = cur.parentNode; - } - return false; - }; - - return { - decorate: decorate, - define: define, - elementIsChildOf: elementIsChildOf - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state.html b/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state.html deleted file mode 100644 index eb515ddf15c..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state.html +++ /dev/null @@ -1,85 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/model/location.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - var Location = tr.model.Location; - - /** - * UIState is a class that represents the current state of the timeline by - * the Location of the point of interest and the current scaleX of the - * timeline. - * - * @constructor - */ - function UIState(location, scaleX) { - this.location_ = location; - this.scaleX_ = scaleX; - }; - - /** - * Accepts a UIState string in the format of (timestamp)@(stableID)x(scaleX) - * Returns undefined if string is not in this format, or throws an Error if - * variables in a syntactically-correct stateString does not produce a valid - * UIState. Otherwise returns a constructed UIState instance. - */ - UIState.fromUserFriendlyString = function(model, viewport, stateString) { - var navByFinderPattern = /^(-?\d+(\.\d+)?)@(.+)x(\d+(\.\d+)?)$/g; - var match = navByFinderPattern.exec(stateString); - if (!match) - return; - - var timestamp = parseFloat(match[1]); - var stableId = match[3]; - var scaleX = parseFloat(match[4]); - - if (scaleX <= 0) - throw new Error('Invalid ScaleX value in UI State string.'); - - if (!viewport.containerToTrackMap.getTrackByStableId(stableId)) - throw new Error('Invalid StableID given in UI State String.'); - - var loc = tr.model.Location.fromStableIdAndTimestamp( - viewport, stableId, timestamp); - return new UIState(loc, scaleX); - } - - UIState.prototype = { - - get location() { - return this.location_; - }, - - get scaleX() { - return this.scaleX_; - }, - - toUserFriendlyString: function(viewport) { - var timestamp = this.location_.xWorld; - var stableId = - this.location_.getContainingTrack(viewport).eventContainer.stableId; - var scaleX = this.scaleX_; - return timestamp.toFixed(5) + '@' + stableId + 'x' + scaleX.toFixed(5); - }, - - toDict: function() { - return { - location: this.location_.toDict(), - scaleX: this.scaleX_ - }; - } - }; - - return { - UIState: UIState - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state_test.html deleted file mode 100644 index 91ee74eda1a..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_state_test.html +++ /dev/null @@ -1,99 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/core/test_utils.html"> -<link rel="import" href="/tracing/ui/tracks/track.html"> -<link rel="import" href="/tracing/ui/base/ui_state.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var UIState = tr.ui.b.UIState; - - function FakeModel() { - this.processes = { 1: { threads: { 2: { stableId: '1.2' } } } }; - } - - // FakeTrack needs to be an instance of tr.ui.tracks.Track because a - // location is constructed in terms of Track instances. - function FakeTrack() { } - FakeTrack.prototype = { - __proto__: tr.ui.tracks.Track.prototype, - - get eventContainer() { - return { stableId: '1.2' }; - }, - - getBoundingClientRect: function() { - return { top: 5, height: 2 }; - }, - - get parentElement() { - return null; - } - }; - - function FakeViewPort() { - this.containerToTrackMap = { - // "1.2" is the only valid stableId this test function accepts. - getTrackByStableId: function(stableId) { - if (stableId === '1.2') - return new FakeTrack; - return undefined; - } - }; - } - - test('invalidStableId', function() { - var model = new FakeModel; - var vp = new FakeViewPort; - assert.throws(function() { - UIState.fromUserFriendlyString(model, vp, '15@1.3x6'); - }); - assert.throws(function() { - UIState.fromUserFriendlyString(model, vp, '15@2.2x6'); - }); - assert.throws(function() { - UIState.fromUserFriendlyString(model, vp, '505@1.x5'); - }); - }); - - test('invalidScaleX', function() { - var model = new FakeModel; - var vp = new FakeViewPort; - assert.isUndefined(UIState.fromUserFriendlyString(model, vp, '1@1.2x-1')); - assert.throws(function() { - UIState.fromUserFriendlyString(model, vp, '1@1.2x0'); - }); - }); - - test('invalidSyntax', function() { - var model = new FakeModel; - var vp = new FakeViewPort; - assert.isUndefined(UIState.fromUserFriendlyString(model, vp, '5')); - assert.isUndefined(UIState.fromUserFriendlyString(model, vp, '5@x5')); - assert.isUndefined(UIState.fromUserFriendlyString(model, vp, 'ab@1.2x5')); - }); - - test('validString', function() { - var model = new FakeModel; - var vp = new FakeViewPort; - var str = '-50125.51231@1.2x1.12345'; - var uiState = UIState.fromUserFriendlyString(model, vp, str); - - assert.isDefined(uiState); - assert.equal(uiState.location.xWorld, -50125.51231); - assert.equal( - uiState.location.getContainingTrack(vp).eventContainer.stableId, - '1.2'); - assert.equal(uiState.scaleX, 1.12345); - - assert.equal(uiState.toUserFriendlyString(vp), str); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/ui_test.html deleted file mode 100644 index 9db0b9f396f..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/ui_test.html +++ /dev/null @@ -1,245 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2014 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. ---> - -<link rel="import" href="/tracing/ui/base/ui.html"> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var TestElement = tr.ui.b.define('div'); - TestElement.prototype = { - __proto__: HTMLDivElement.prototype, - - decorate: function() { - if (!this.decorateCallCount) - this.decorateCallCount = 0; - this.decorateCallCount++; - } - }; - - var Base = tr.ui.b.define('div'); - Base.prototype = { - __proto__: HTMLDivElement.prototype, - decorate: function() { - this.decoratedAsBase = true; - }, - set baseProperty(v) { - this.basePropertySet = v; - } - }; - - test('decorateOnceViaNew', function() { - var testElement = new TestElement(); - assert.equal(testElement.decorateCallCount, 1); - }); - - test('decorateOnceDirectly', function() { - var testElement = document.createElement('div'); - tr.ui.b.decorate(testElement, TestElement); - assert.equal(testElement.decorateCallCount, 1); - }); - - test('componentToString', function() { - assert.equal(Base.toString(), 'div'); - - var Sub = tr.ui.b.define('Sub', Base); - assert.equal(Sub.toString(), 'div::sub'); - - var SubSub = tr.ui.b.define('Marine', Sub); - assert.equal(SubSub.toString(), 'div::sub::marine'); - }); - - test('basicDefines', function() { - var baseInstance = new Base(); - assert.instanceOf(baseInstance, Base); - assert.isTrue(baseInstance.decoratedAsBase); - - assert.equal(baseInstance.constructor, Base); - assert.equal(baseInstance.constructor.toString(), 'div'); - - baseInstance.basePropertySet = 7; - assert.equal(baseInstance.basePropertySet, 7); - }); - - test('subclassing', function() { - var Sub = tr.ui.b.define('sub', Base); - Sub.prototype = { - __proto__: Base.prototype, - decorate: function() { - this.decoratedAsSub = true; - } - }; - - var subInstance = new Sub(); - assert.instanceOf(subInstance, Sub); - assert.isTrue(subInstance.decoratedAsSub); - - assert.instanceOf(subInstance, Base); - assert.isUndefined(subInstance.decoratedAsBase); - - assert.equal(subInstance.constructor, Sub); - assert.equal(subInstance.constructor.toString(), 'div::sub'); - - subInstance.baseProperty = true; - assert.isTrue(subInstance.basePropertySet); - }); - - var NoArgs = tr.ui.b.define('div'); - NoArgs.prototype = { - __proto__: HTMLDivElement.prototype, - decorate: function() { - this.noArgsDecorated_ = true; - }, - get noArgsDecorated() { - return this.noArgsDecorated_; - } - }; - - var Args = tr.ui.b.define('args', NoArgs); - Args.prototype = { - __proto__: NoArgs.prototype, - decorate: function(first) { - this.first_ = first; - this.argsDecorated_ = true; - }, - get first() { - return this.first_; - }, - get argsDecorated() { - return this.argsDecorated_; - } - }; - - var ArgsChild = tr.ui.b.define('args-child', Args); - ArgsChild.prototype = { - __proto__: Args.prototype, - decorate: function(_, second) { - this.second_ = second; - this.argsChildDecorated_ = true; - }, - get second() { - return this.second_; - }, - get decorated() { - return this.decorated_; - }, - get argsChildDecorated() { - return this.argsChildDecorated_ = true; - } - }; - - var ArgsDecoratingChild = tr.ui.b.define('args-decorating-child', Args); - ArgsDecoratingChild.prototype = { - __proto__: Args.prototype, - decorate: function(first, second) { - Args.prototype.decorate.call(this, first); - this.second_ = second; - this.argsDecoratingChildDecorated_ = true; - }, - get second() { - return this.second_; - }, - get decorated() { - return this.decorated_; - }, - get argsDecoratingChildDecorated() { - return this.argsChildDecorated_ = true; - } - }; - - test('decorate_noArguments', function() { - var noArgs; - assert.doesNotThrow(function() { - noArgs = new NoArgs(); - }); - assert.isTrue(noArgs.noArgsDecorated); - }); - - test('decorate_arguments', function() { - var args = new Args('this is first'); - assert.equal(args.first, 'this is first'); - assert.isTrue(args.argsDecorated); - assert.isUndefined(args.noArgsDecorated); - }); - - test('decorate_subclassArguments', function() { - var argsChild = new ArgsChild('this is first', 'and second'); - assert.isUndefined(argsChild.first); - assert.equal(argsChild.second, 'and second'); - - assert.isTrue(argsChild.argsChildDecorated); - assert.isUndefined(argsChild.argsDecorated); - assert.isUndefined(argsChild.noArgsDecorated); - }); - - test('decorate_subClassCallsParentDecorate', function() { - var argsDecoratingChild = new ArgsDecoratingChild( - 'this is first', 'and second'); - assert.equal(argsDecoratingChild.first, 'this is first'); - assert.equal(argsDecoratingChild.second, 'and second'); - assert.isTrue(argsDecoratingChild.argsDecoratingChildDecorated); - assert.isTrue(argsDecoratingChild.argsDecorated); - assert.isUndefined(argsDecoratingChild.noArgsDecorated); - }); - - test('defineWithNamespace', function() { - var svgNS = 'http://www.w3.org/2000/svg'; - var cls = tr.ui.b.define('svg', undefined, svgNS); - cls.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.setAttribute('width', 200); - this.setAttribute('height', 200); - this.setAttribute('viewPort', '0 0 200 200'); - var rectEl = document.createElementNS(svgNS, 'rect'); - rectEl.setAttribute('x', 10); - rectEl.setAttribute('y', 10); - rectEl.setAttribute('width', 180); - rectEl.setAttribute('height', 180); - this.appendChild(rectEl); - } - }; - var el = new cls(); - assert.equal(el.tagName, 'svg'); - assert.equal(el.namespaceURI, svgNS); - this.addHTMLOutput(el); - }); - - test('defineSubclassWithNamespace', function() { - var svgNS = 'http://www.w3.org/2000/svg'; - var cls = tr.ui.b.define('svg', undefined, svgNS); - cls.prototype = { - __proto__: HTMLUnknownElement.prototype, - - decorate: function() { - this.setAttribute('width', 200); - this.setAttribute('height', 200); - this.setAttribute('viewPort', '0 0 200 200'); - var rectEl = document.createElementNS(svgNS, 'rect'); - rectEl.setAttribute('x', 10); - rectEl.setAttribute('y', 10); - rectEl.setAttribute('width', 180); - rectEl.setAttribute('height', 180); - this.appendChild(rectEl); - } - }; - - var subCls = tr.ui.b.define('sub', cls); - subCls.prototype = { - __proto__: cls.prototype - }; - assert.equal(subCls.toString(), 'svg::sub'); - - var el = new subCls(); - this.addHTMLOutput(el); - assert.equal(el.tagName, 'svg'); - assert.equal(el.namespaceURI, svgNS); - }); -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/utils.html b/chromium/third_party/catapult/tracing/tracing/ui/base/utils.html deleted file mode 100644 index a205d1db1b7..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/utils.html +++ /dev/null @@ -1,68 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/base/rect.html"> - -<script> -'use strict'; - -tr.exportTo('tr.ui.b', function() { - function instantiateTemplate(selector, doc) { - doc = doc || document; - var el = doc.querySelector(selector); - if (!el) - throw new Error('Element not found'); - return el.createInstance(); - } - - function windowRectForElement(element) { - var position = [element.offsetLeft, element.offsetTop]; - var size = [element.offsetWidth, element.offsetHeight]; - var node = element.offsetParent; - while (node) { - position[0] += node.offsetLeft; - position[1] += node.offsetTop; - node = node.offsetParent; - } - return tr.b.Rect.fromXYWH(position[0], position[1], size[0], size[1]); - } - - function scrollIntoViewIfNeeded(el) { - var pr = el.parentElement.getBoundingClientRect(); - var cr = el.getBoundingClientRect(); - if (cr.top < pr.top) { - el.scrollIntoView(true); - } else if (cr.bottom > pr.bottom) { - el.scrollIntoView(false); - } - } - - function extractUrlString(url) { - var extracted = url.replace(/url\((.*)\)/, '$1'); - - // In newer versions of chrome, the contents of url() will be quoted. Remove - // these quotes as well. If quotes are not present, match will fail and this - // becomes a no-op. - extracted = extracted.replace(/\"(.*)\"/, '$1'); - - return extracted; - } - - function toThreeDigitLocaleString(value) { - return value.toLocaleString( - undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}); - } - - return { - toThreeDigitLocaleString: toThreeDigitLocaleString, - instantiateTemplate: instantiateTemplate, - windowRectForElement: windowRectForElement, - scrollIntoViewIfNeeded: scrollIntoViewIfNeeded, - extractUrlString: extractUrlString - }; -}); -</script> diff --git a/chromium/third_party/catapult/tracing/tracing/ui/base/utils_test.html b/chromium/third_party/catapult/tracing/tracing/ui/base/utils_test.html deleted file mode 100644 index 7e82132fe8d..00000000000 --- a/chromium/third_party/catapult/tracing/tracing/ui/base/utils_test.html +++ /dev/null @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<!-- -Copyright (c) 2015 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. ---> - -<link rel="import" href="/tracing/ui/base/utils.html"> - -<polymer-element name="instantiate-template-polymer-element-test"> - <template></template> - <script> - 'use strict'; - Polymer({ - testProperty: 'Test' - }); - </script> -</polymer-element> - -<template id="instantiate-template-polymer-test"> - <instantiate-template-polymer-element-test> - </instantiate-template-polymer-element-test> -</template> - -<template id="multiple-template-test"> - <template> - <instantiate-template-polymer-element-test> - </instantiate-template-polymer-element-test> - <span test-attribute='TestAttribute'>Foo</span> - </template> - <instantiate-template-polymer-element-test> - </instantiate-template-polymer-element-test> -</template> - -<script> -'use strict'; - -tr.b.unittest.testSuite(function() { - var THIS_DOC = document._currentScript.ownerDocument; - - test('instantiateTemplatePolymer', function() { - var e = tr.ui.b.instantiateTemplate( - '#instantiate-template-polymer-test', - THIS_DOC); - assert.equal(e.children.length, 1); - assert.equal(e.children[0].testProperty, 'Test'); - }); - - test('instantiateTemplateMultipleTemplates', function() { - var outerElement = tr.ui.b.instantiateTemplate( - '#multiple-template-test', - THIS_DOC); - assert.equal(outerElement.children.length, 2); - assert.equal(outerElement.children[1].testProperty, 'Test'); - - // Make sure we can still instantiate inner templates, if we need them. - var innerElement = outerElement.children[0].createInstance(); - assert.equal(innerElement.children.length, 2); - assert.equal(innerElement.children[0].testProperty, 'Test'); - assert.equal( - innerElement.children[1].getAttribute('test-attribute'), - 'TestAttribute'); - assert.equal(innerElement.children[1].textContent, 'Foo'); - }); - - test('extractUrlStringAcceptsBothVersions', function() { - var oldStyleUrl = 'url(content)'; - var newStyleUrl = 'url("content")'; - var expectedResult = 'content'; - - assert.equal(tr.ui.b.extractUrlString(oldStyleUrl), expectedResult); - assert.equal(tr.ui.b.extractUrlString(newStyleUrl), expectedResult); - }); -}); -</script> - |