Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(848)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui_lazy/SortableDataGrid.js ('k') | third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js
index d58d35bfde6ab791fcca33e93805306103ae5ee7..bb373b071401aa551ea2fa2b37660a05c7796368 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineGrid.js
@@ -27,32 +27,30 @@
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-
/**
- * @constructor
+ * @unrestricted
*/
-WebInspector.TimelineGrid = function()
-{
- this.element = createElement("div");
- WebInspector.appendStyle(this.element, "ui_lazy/timelineGrid.css");
+WebInspector.TimelineGrid = class {
+ constructor() {
+ this.element = createElement('div');
+ WebInspector.appendStyle(this.element, 'ui_lazy/timelineGrid.css');
- this._dividersElement = this.element.createChild("div", "resources-dividers");
+ this._dividersElement = this.element.createChild('div', 'resources-dividers');
- this._gridHeaderElement = createElement("div");
- this._gridHeaderElement.classList.add("timeline-grid-header");
- this._eventDividersElement = this._gridHeaderElement.createChild("div", "resources-event-dividers");
- this._dividersLabelBarElement = this._gridHeaderElement.createChild("div", "resources-dividers-label-bar");
+ this._gridHeaderElement = createElement('div');
+ this._gridHeaderElement.classList.add('timeline-grid-header');
+ this._eventDividersElement = this._gridHeaderElement.createChild('div', 'resources-event-dividers');
+ this._dividersLabelBarElement = this._gridHeaderElement.createChild('div', 'resources-dividers-label-bar');
this.element.appendChild(this._gridHeaderElement);
-};
+ }
-/**
- * @param {!WebInspector.TimelineGrid.Calculator} calculator
- * @param {number=} freeZoneAtLeft
- * @return {!{offsets: !Array.<number>, precision: number}}
- */
-WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, freeZoneAtLeft)
-{
- /** @const */ var minGridSlicePx = 64; // minimal distance between grid lines.
+ /**
+ * @param {!WebInspector.TimelineGrid.Calculator} calculator
+ * @param {number=} freeZoneAtLeft
+ * @return {!{offsets: !Array.<number>, precision: number}}
+ */
+ static calculateDividerOffsets(calculator, freeZoneAtLeft) {
+ /** @const */ var minGridSlicePx = 64; // minimal distance between grid lines.
var clientWidth = calculator.computePosition(calculator.maximumBoundary());
var dividersCount = clientWidth / minGridSlicePx;
@@ -67,12 +65,13 @@ WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, freeZon
var logGridSliceTime = Math.ceil(Math.log(gridSliceTime) / Math.LN10);
gridSliceTime = Math.pow(10, logGridSliceTime);
if (gridSliceTime * pixelsPerTime >= 5 * minGridSlicePx)
- gridSliceTime = gridSliceTime / 5;
+ gridSliceTime = gridSliceTime / 5;
if (gridSliceTime * pixelsPerTime >= 2 * minGridSlicePx)
- gridSliceTime = gridSliceTime / 2;
+ gridSliceTime = gridSliceTime / 2;
var leftBoundaryTime = calculator.minimumBoundary() - calculator.paddingLeft() / pixelsPerTime;
- var firstDividerTime = Math.ceil((leftBoundaryTime - calculator.zeroTime()) / gridSliceTime) * gridSliceTime + calculator.zeroTime();
+ var firstDividerTime =
+ Math.ceil((leftBoundaryTime - calculator.zeroTime()) / gridSliceTime) * gridSliceTime + calculator.zeroTime();
var lastDividerTime = calculator.maximumBoundary();
// Add some extra space past the right boundary as the rightmost divider label text
// may be partially shown rather than just pop up when a new rightmost divider gets into the view.
@@ -80,27 +79,26 @@ WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, freeZon
dividersCount = Math.ceil((lastDividerTime - firstDividerTime) / gridSliceTime);
if (!gridSliceTime)
- dividersCount = 0;
+ dividersCount = 0;
var offsets = [];
for (var i = 0; i < dividersCount; ++i) {
- var time = firstDividerTime + gridSliceTime * i;
- if (calculator.computePosition(time) < freeZoneAtLeft)
- continue;
- offsets.push(time);
+ var time = firstDividerTime + gridSliceTime * i;
+ if (calculator.computePosition(time) < freeZoneAtLeft)
+ continue;
+ offsets.push(time);
}
return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSliceTime * 1.01) / Math.LN10))};
-};
-
-/**
- * @param {!CanvasRenderingContext2D} context
- * @param {!WebInspector.TimelineGrid.Calculator} calculator
- * @param {number} paddingTop
- * @param {number=} freeZoneAtLeft
- */
-WebInspector.TimelineGrid.drawCanvasGrid = function(context, calculator, paddingTop, freeZoneAtLeft)
-{
+ }
+
+ /**
+ * @param {!CanvasRenderingContext2D} context
+ * @param {!WebInspector.TimelineGrid.Calculator} calculator
+ * @param {number} paddingTop
+ * @param {number=} freeZoneAtLeft
+ */
+ static drawCanvasGrid(context, calculator, paddingTop, freeZoneAtLeft) {
context.save();
var ratio = window.devicePixelRatio;
context.scale(ratio, ratio);
@@ -110,195 +108,183 @@ WebInspector.TimelineGrid.drawCanvasGrid = function(context, calculator, padding
var dividerOffsets = dividersData.offsets;
var precision = dividersData.precision;
- context.fillStyle = "rgba(255, 255, 255, 0.5)";
+ context.fillStyle = 'rgba(255, 255, 255, 0.5)';
context.fillRect(0, 0, width, 15);
- context.fillStyle = "#333";
- context.strokeStyle = "rgba(0, 0, 0, 0.1)";
- context.textBaseline = "hanging";
- context.font = "11px " + WebInspector.fontFamily();
+ context.fillStyle = '#333';
+ context.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+ context.textBaseline = 'hanging';
+ context.font = '11px ' + WebInspector.fontFamily();
context.lineWidth = 1;
context.translate(0.5, 0.5);
const paddingRight = 4;
freeZoneAtLeft = freeZoneAtLeft || 0;
for (var i = 0; i < dividerOffsets.length; ++i) {
- var time = dividerOffsets[i];
- var position = calculator.computePosition(time);
- var text = calculator.formatValue(time, precision);
- var textWidth = context.measureText(text).width;
- var textPosition = position - textWidth - paddingRight;
- if (freeZoneAtLeft < textPosition)
- context.fillText(text, textPosition, paddingTop);
- context.moveTo(position, 0);
- context.lineTo(position, height);
+ var time = dividerOffsets[i];
+ var position = calculator.computePosition(time);
+ var text = calculator.formatValue(time, precision);
+ var textWidth = context.measureText(text).width;
+ var textPosition = position - textWidth - paddingRight;
+ if (freeZoneAtLeft < textPosition)
+ context.fillText(text, textPosition, paddingTop);
+ context.moveTo(position, 0);
+ context.lineTo(position, height);
}
context.stroke();
context.restore();
-};
+ }
+
+ get dividersElement() {
+ return this._dividersElement;
+ }
+
+ get dividersLabelBarElement() {
+ return this._dividersLabelBarElement;
+ }
+
+ removeDividers() {
+ this._dividersElement.removeChildren();
+ this._dividersLabelBarElement.removeChildren();
+ }
+
+ /**
+ * @param {!WebInspector.TimelineGrid.Calculator} calculator
+ * @param {number=} freeZoneAtLeft
+ * @return {boolean}
+ */
+ updateDividers(calculator, freeZoneAtLeft) {
+ var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calculator, freeZoneAtLeft);
+ var dividerOffsets = dividersData.offsets;
+ var precision = dividersData.precision;
+
+ var dividersElementClientWidth = this._dividersElement.clientWidth;
-WebInspector.TimelineGrid.prototype = {
- get dividersElement()
- {
- return this._dividersElement;
- },
-
- get dividersLabelBarElement()
- {
- return this._dividersLabelBarElement;
- },
-
- removeDividers: function()
- {
- this._dividersElement.removeChildren();
- this._dividersLabelBarElement.removeChildren();
- },
-
- /**
- * @param {!WebInspector.TimelineGrid.Calculator} calculator
- * @param {number=} freeZoneAtLeft
- * @return {boolean}
- */
- updateDividers: function(calculator, freeZoneAtLeft)
- {
- var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calculator, freeZoneAtLeft);
- var dividerOffsets = dividersData.offsets;
- var precision = dividersData.precision;
-
- var dividersElementClientWidth = this._dividersElement.clientWidth;
-
- // Reuse divider elements and labels.
- var divider = /** @type {?Element} */ (this._dividersElement.firstChild);
- var dividerLabelBar = /** @type {?Element} */ (this._dividersLabelBarElement.firstChild);
-
- for (var i = 0; i < dividerOffsets.length; ++i) {
- if (!divider) {
- divider = createElement("div");
- divider.className = "resources-divider";
- this._dividersElement.appendChild(divider);
-
- dividerLabelBar = createElement("div");
- dividerLabelBar.className = "resources-divider";
- var label = createElement("div");
- label.className = "resources-divider-label";
- dividerLabelBar._labelElement = label;
- dividerLabelBar.appendChild(label);
- this._dividersLabelBarElement.appendChild(dividerLabelBar);
- }
-
- var time = dividerOffsets[i];
- var position = calculator.computePosition(time);
- dividerLabelBar._labelElement.textContent = calculator.formatValue(time, precision);
-
- var percentLeft = 100 * position / dividersElementClientWidth;
- divider.style.left = percentLeft + "%";
- dividerLabelBar.style.left = percentLeft + "%";
-
- divider = /** @type {?Element} */ (divider.nextSibling);
- dividerLabelBar = /** @type {?Element} */ (dividerLabelBar.nextSibling);
- }
-
- // Remove extras.
- while (divider) {
- var nextDivider = divider.nextSibling;
- this._dividersElement.removeChild(divider);
- divider = nextDivider;
- }
- while (dividerLabelBar) {
- var nextDivider = dividerLabelBar.nextSibling;
- this._dividersLabelBarElement.removeChild(dividerLabelBar);
- dividerLabelBar = nextDivider;
- }
- return true;
- },
-
- /**
- * @param {!Element} divider
- */
- addEventDivider: function(divider)
- {
- this._eventDividersElement.appendChild(divider);
- },
-
- /**
- * @param {!Array.<!Element>} dividers
- */
- addEventDividers: function(dividers)
- {
- this._gridHeaderElement.removeChild(this._eventDividersElement);
- for (var divider of dividers)
- this._eventDividersElement.appendChild(divider);
- this._gridHeaderElement.appendChild(this._eventDividersElement);
- },
-
- removeEventDividers: function()
- {
- this._eventDividersElement.removeChildren();
- },
-
- hideEventDividers: function()
- {
- this._eventDividersElement.classList.add("hidden");
- },
-
- showEventDividers: function()
- {
- this._eventDividersElement.classList.remove("hidden");
- },
-
- hideDividers: function()
- {
- this._dividersElement.classList.add("hidden");
- },
-
- showDividers: function()
- {
- this._dividersElement.classList.remove("hidden");
- },
-
- /**
- * @param {number} scrollTop
- */
- setScrollTop: function(scrollTop)
- {
- this._dividersLabelBarElement.style.top = scrollTop + "px";
- this._eventDividersElement.style.top = scrollTop + "px";
+ // Reuse divider elements and labels.
+ var divider = /** @type {?Element} */ (this._dividersElement.firstChild);
+ var dividerLabelBar = /** @type {?Element} */ (this._dividersLabelBarElement.firstChild);
+
+ for (var i = 0; i < dividerOffsets.length; ++i) {
+ if (!divider) {
+ divider = createElement('div');
+ divider.className = 'resources-divider';
+ this._dividersElement.appendChild(divider);
+
+ dividerLabelBar = createElement('div');
+ dividerLabelBar.className = 'resources-divider';
+ var label = createElement('div');
+ label.className = 'resources-divider-label';
+ dividerLabelBar._labelElement = label;
+ dividerLabelBar.appendChild(label);
+ this._dividersLabelBarElement.appendChild(dividerLabelBar);
+ }
+
+ var time = dividerOffsets[i];
+ var position = calculator.computePosition(time);
+ dividerLabelBar._labelElement.textContent = calculator.formatValue(time, precision);
+
+ var percentLeft = 100 * position / dividersElementClientWidth;
+ divider.style.left = percentLeft + '%';
+ dividerLabelBar.style.left = percentLeft + '%';
+
+ divider = /** @type {?Element} */ (divider.nextSibling);
+ dividerLabelBar = /** @type {?Element} */ (dividerLabelBar.nextSibling);
}
+
+ // Remove extras.
+ while (divider) {
+ var nextDivider = divider.nextSibling;
+ this._dividersElement.removeChild(divider);
+ divider = nextDivider;
+ }
+ while (dividerLabelBar) {
+ var nextDivider = dividerLabelBar.nextSibling;
+ this._dividersLabelBarElement.removeChild(dividerLabelBar);
+ dividerLabelBar = nextDivider;
+ }
+ return true;
+ }
+
+ /**
+ * @param {!Element} divider
+ */
+ addEventDivider(divider) {
+ this._eventDividersElement.appendChild(divider);
+ }
+
+ /**
+ * @param {!Array.<!Element>} dividers
+ */
+ addEventDividers(dividers) {
+ this._gridHeaderElement.removeChild(this._eventDividersElement);
+ for (var divider of dividers)
+ this._eventDividersElement.appendChild(divider);
+ this._gridHeaderElement.appendChild(this._eventDividersElement);
+ }
+
+ removeEventDividers() {
+ this._eventDividersElement.removeChildren();
+ }
+
+ hideEventDividers() {
+ this._eventDividersElement.classList.add('hidden');
+ }
+
+ showEventDividers() {
+ this._eventDividersElement.classList.remove('hidden');
+ }
+
+ hideDividers() {
+ this._dividersElement.classList.add('hidden');
+ }
+
+ showDividers() {
+ this._dividersElement.classList.remove('hidden');
+ }
+
+ /**
+ * @param {number} scrollTop
+ */
+ setScrollTop(scrollTop) {
+ this._dividersLabelBarElement.style.top = scrollTop + 'px';
+ this._eventDividersElement.style.top = scrollTop + 'px';
+ }
};
+
/**
* @interface
*/
-WebInspector.TimelineGrid.Calculator = function() { };
+WebInspector.TimelineGrid.Calculator = function() {};
WebInspector.TimelineGrid.Calculator.prototype = {
- /**
- * @return {number}
- */
- paddingLeft: function() { },
-
- /**
- * @param {number} time
- * @return {number}
- */
- computePosition: function(time) { },
-
- /**
- * @param {number} time
- * @param {number=} precision
- * @return {string}
- */
- formatValue: function(time, precision) { },
-
- /** @return {number} */
- minimumBoundary: function() { },
-
- /** @return {number} */
- zeroTime: function() { },
-
- /** @return {number} */
- maximumBoundary: function() { },
-
- /** @return {number} */
- boundarySpan: function() { }
+ /**
+ * @return {number}
+ */
+ paddingLeft: function() {},
+
+ /**
+ * @param {number} time
+ * @return {number}
+ */
+ computePosition: function(time) {},
+
+ /**
+ * @param {number} time
+ * @param {number=} precision
+ * @return {string}
+ */
+ formatValue: function(time, precision) {},
+
+ /** @return {number} */
+ minimumBoundary: function() {},
+
+ /** @return {number} */
+ zeroTime: function() {},
+
+ /** @return {number} */
+ maximumBoundary: function() {},
+
+ /** @return {number} */
+ boundarySpan: function() {}
};
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui_lazy/SortableDataGrid.js ('k') | third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698