| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. | 5 found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 | 7 |
| 8 <link rel="import" href="/tracing/base/math/math.html"> | 8 <link rel="import" href="/tracing/base/math/math.html"> |
| 9 <link rel="import" href="/tracing/base/math/range.html"> | 9 <link rel="import" href="/tracing/base/math/range.html"> |
| 10 <link rel="import" href="/tracing/base/math/statistics.html"> | 10 <link rel="import" href="/tracing/base/math/statistics.html"> |
| 11 <link rel="import" href="/tracing/base/raf.html"> | 11 <link rel="import" href="/tracing/base/raf.html"> |
| 12 <link rel="import" href="/tracing/base/utils.html"> | 12 <link rel="import" href="/tracing/base/utils.html"> |
| 13 <link rel="import" href="/tracing/ui/base/chart_base.html"> | 13 <link rel="import" href="/tracing/ui/base/chart_base.html"> |
| 14 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> | 14 <link rel="import" href="/tracing/ui/base/mouse_tracker.html"> |
| 15 | 15 |
| 16 <style> | |
| 17 * /deep/ .chart-base-2d.updating-brushing-state #brushes > * { | |
| 18 fill: rgb(103, 199, 165) | |
| 19 } | |
| 20 | |
| 21 * /deep/ .chart-base-2d #brushes { | |
| 22 fill: rgb(213, 236, 229) | |
| 23 } | |
| 24 </style> | |
| 25 | |
| 26 <script> | 16 <script> |
| 27 'use strict'; | 17 'use strict'; |
| 28 | 18 |
| 29 tr.exportTo('tr.ui.b', function() { | 19 tr.exportTo('tr.ui.b', function() { |
| 30 // This does not include the tick labels. | 20 // This does not include the tick labels. |
| 31 const D3_Y_AXIS_WIDTH_PX = 9; | 21 const D3_Y_AXIS_WIDTH_PX = 9; |
| 32 | 22 |
| 33 // This includes the tick labels. | 23 // This includes the tick labels. |
| 34 const D3_X_AXIS_HEIGHT_PX = 23; | 24 const D3_X_AXIS_HEIGHT_PX = 23; |
| 35 | 25 |
| (...skipping 411 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 447 // 0. Callers should make sure that updateContents_ is called at least | 437 // 0. Callers should make sure that updateContents_ is called at least |
| 448 // once after the chart is rooted in a document so that textHeightPx_ | 438 // once after the chart is rooted in a document so that textHeightPx_ |
| 449 // can be computed. | 439 // can be computed. |
| 450 } | 440 } |
| 451 | 441 |
| 452 this.updateScales_(); | 442 this.updateScales_(); |
| 453 super.updateContents_(); | 443 super.updateContents_(); |
| 454 const chartAreaSel = d3.select(this.chartAreaElement); | 444 const chartAreaSel = d3.select(this.chartAreaElement); |
| 455 this.updateXAxis_(chartAreaSel.select('.x.axis')); | 445 this.updateXAxis_(chartAreaSel.select('.x.axis')); |
| 456 this.updateYAxis_(chartAreaSel.select('.y.axis')); | 446 this.updateYAxis_(chartAreaSel.select('.y.axis')); |
| 447 for (const child of this.querySelectorAll('.axis path, .axis line')) { |
| 448 child.style.fill = 'none'; |
| 449 child.style.shapeRendering = 'crispEdges'; |
| 450 child.style.stroke = 'black'; |
| 451 } |
| 457 this.updateBrushContents_(chartAreaSel.select('#brushes')); | 452 this.updateBrushContents_(chartAreaSel.select('#brushes')); |
| 458 this.updateDataContents_(chartAreaSel.select('#series')); | 453 this.updateDataContents_(chartAreaSel.select('#series')); |
| 459 }, | 454 }, |
| 460 | 455 |
| 461 updateDataContents_(seriesSel) { | 456 updateDataContents_(seriesSel) { |
| 462 throw new Error('Not implemented'); | 457 throw new Error('Not implemented'); |
| 463 }, | 458 }, |
| 464 | 459 |
| 465 /** | 460 /** |
| 466 * Returns a map of series key to the data for that series. | 461 * Returns a map of series key to the data for that series. |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 531 tr.ui.b.trackMouseMovesUntilMouseUp( | 526 tr.ui.b.trackMouseMovesUntilMouseUp( |
| 532 this.onMouseMove_.bind(this, mouseEvent.button), | 527 this.onMouseMove_.bind(this, mouseEvent.button), |
| 533 this.onMouseUp_.bind(this, mouseEvent.button)); | 528 this.onMouseUp_.bind(this, mouseEvent.button)); |
| 534 mouseEvent.preventDefault(); | 529 mouseEvent.preventDefault(); |
| 535 mouseEvent.stopPropagation(); | 530 mouseEvent.stopPropagation(); |
| 536 const dataEvent = new tr.b.Event('item-mousedown'); | 531 const dataEvent = new tr.b.Event('item-mousedown'); |
| 537 dataEvent.button = mouseEvent.button; | 532 dataEvent.button = mouseEvent.button; |
| 538 Polymer.dom(this).classList.add('updating-brushing-state'); | 533 Polymer.dom(this).classList.add('updating-brushing-state'); |
| 539 this.prepareDataEvent_(mouseEvent, dataEvent); | 534 this.prepareDataEvent_(mouseEvent, dataEvent); |
| 540 this.dispatchEvent(dataEvent); | 535 this.dispatchEvent(dataEvent); |
| 536 for (const child of this.querySelectorAll('#brushes')) { |
| 537 child.style.fill = 'rgb(103, 199, 165)'; |
| 538 } |
| 541 }, | 539 }, |
| 542 | 540 |
| 543 onMouseMove_(button, mouseEvent) { | 541 onMouseMove_(button, mouseEvent) { |
| 544 if (mouseEvent.buttons !== undefined) { | 542 if (mouseEvent.buttons !== undefined) { |
| 545 mouseEvent.preventDefault(); | 543 mouseEvent.preventDefault(); |
| 546 mouseEvent.stopPropagation(); | 544 mouseEvent.stopPropagation(); |
| 547 } | 545 } |
| 548 const dataEvent = new tr.b.Event('item-mousemove'); | 546 const dataEvent = new tr.b.Event('item-mousemove'); |
| 549 dataEvent.button = button; | 547 dataEvent.button = button; |
| 550 this.prepareDataEvent_(mouseEvent, dataEvent); | 548 this.prepareDataEvent_(mouseEvent, dataEvent); |
| 551 this.dispatchEvent(dataEvent); | 549 this.dispatchEvent(dataEvent); |
| 550 for (const child of this.querySelectorAll('#brushes')) { |
| 551 child.style.fill = 'rgb(103, 199, 165)'; |
| 552 } |
| 552 }, | 553 }, |
| 553 | 554 |
| 554 onMouseUp_(button, mouseEvent) { | 555 onMouseUp_(button, mouseEvent) { |
| 555 mouseEvent.preventDefault(); | 556 mouseEvent.preventDefault(); |
| 556 mouseEvent.stopPropagation(); | 557 mouseEvent.stopPropagation(); |
| 557 const dataEvent = new tr.b.Event('item-mouseup'); | 558 const dataEvent = new tr.b.Event('item-mouseup'); |
| 558 dataEvent.button = button; | 559 dataEvent.button = button; |
| 559 this.prepareDataEvent_(mouseEvent, dataEvent); | 560 this.prepareDataEvent_(mouseEvent, dataEvent); |
| 560 this.dispatchEvent(dataEvent); | 561 this.dispatchEvent(dataEvent); |
| 561 Polymer.dom(this).classList.remove('updating-brushing-state'); | 562 Polymer.dom(this).classList.remove('updating-brushing-state'); |
| 563 for (const child of this.querySelectorAll('#brushes')) { |
| 564 child.style.fill = 'rgb(213, 236, 229)'; |
| 565 } |
| 562 } | 566 } |
| 563 }; | 567 }; |
| 564 | 568 |
| 565 return { | 569 return { |
| 566 ChartBase2D, | 570 ChartBase2D, |
| 567 }; | 571 }; |
| 568 }); | 572 }); |
| 569 </script> | 573 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 3017523002:
Fix uses of /deep/ in trace viewer. (Closed)
