Changeset 117778 in webkit


Ignore:
Timestamp:
May 21, 2012 6:50:36 AM (12 years ago)
Author:
caseq@chromium.org
Message:

Web Inspector: [refactoring] promote fill/border colors used by timeline's frame overview to TimelineCategory
https://bugs.webkit.org/show_bug.cgi?id=87016

Reviewed by Pavel Feldman.

  • drop unused 'color' field from TimelineCategory;
  • add borderColor and fillColorStop[0-1] to TimelineCategory;
  • fix style in a handful of places.

Note we store textual values for color stops, not premade gradients so we can build gradients with different
orientations rather than transforming a gradient.

  • inspector/front-end/TimelineOverviewPane.js:

(WebInspector.HeapGraph):
(WebInspector.HeapGraph.prototype.get element):
(WebInspector.HeapGraph.prototype.get visible):
(WebInspector.HeapGraph.prototype.show):
(WebInspector.HeapGraph.prototype.hide):
(WebInspector.HeapGraph.prototype._clear):
(WebInspector.TimelineCategoryStrips):
(WebInspector.TimelineVerticalOverview):
(WebInspector.TimelineVerticalOverview.prototype._renderBar):

  • inspector/front-end/TimelinePresentationModel.js:

(WebInspector.TimelinePresentationModel.categories):
(WebInspector.TimelinePresentationModel.recordStyle):
(WebInspector.TimelineCategory):

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r117774 r117778  
     12012-05-21  Andrey Kosyakov  <caseq@chromium.org>
     2
     3        Web Inspector: [refactoring] promote fill/border colors used by timeline's frame overview to TimelineCategory
     4        https://bugs.webkit.org/show_bug.cgi?id=87016
     5
     6        Reviewed by Pavel Feldman.
     7
     8        - drop unused 'color' field from TimelineCategory;
     9        - add borderColor and fillColorStop[0-1] to TimelineCategory;
     10        - fix style in a handful of places.
     11
     12        Note we store textual values for color stops, not premade gradients so we can build gradients with different
     13        orientations rather than transforming a gradient.
     14
     15        * inspector/front-end/TimelineOverviewPane.js:
     16        (WebInspector.HeapGraph):
     17        (WebInspector.HeapGraph.prototype.get element):
     18        (WebInspector.HeapGraph.prototype.get visible):
     19        (WebInspector.HeapGraph.prototype.show):
     20        (WebInspector.HeapGraph.prototype.hide):
     21        (WebInspector.HeapGraph.prototype._clear):
     22        (WebInspector.TimelineCategoryStrips):
     23        (WebInspector.TimelineVerticalOverview):
     24        (WebInspector.TimelineVerticalOverview.prototype._renderBar):
     25        * inspector/front-end/TimelinePresentationModel.js:
     26        (WebInspector.TimelinePresentationModel.categories):
     27        (WebInspector.TimelinePresentationModel.recordStyle):
     28        (WebInspector.TimelineCategory):
     29
    1302012-05-21  'Pavel Feldman'  <pfeldman@chromium.org>
    231
  • trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js

    r116237 r117778  
    768768 * @param {WebInspector.TimelineModel} model
    769769 */
    770 WebInspector.HeapGraph = function(model) {
     770WebInspector.HeapGraph = function(model)
     771{
    771772    this._canvas = document.createElement("canvas");
    772773    this._model = model;
     
    787788
    788789WebInspector.HeapGraph.prototype = {
    789     get element() {
     790    /**
     791     * @return {Node}
     792     */
     793    get element()
     794    {
    790795        return this._element;
    791796    },
    792797
    793     get visible() {
     798    /**
     799     * @return {boolean}
     800     */
     801    get visible()
     802    {
    794803        return !this.element.hasStyleClass("hidden");
    795804    },
    796805
    797     show: function() {
     806    show: function()
     807    {
    798808        this.element.removeStyleClass("hidden");
    799809    },
    800810
    801     hide: function() {
     811    hide: function()
     812    {
    802813        this.element.addStyleClass("hidden");
    803814    },
     
    875886    },
    876887
    877     _clear: function(ctx) {
     888    _clear: function(ctx)
     889    {
    878890        ctx.fillStyle = "rgba(255,255,255,0.8)";
    879891        ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
    880892    },
     893}
     894
     895WebInspector.TimelineCategoryStrips = function(model)
     896{
    881897}
    882898
     
    886902 * @param {WebInspector.TimelineModel} model
    887903 */
    888 WebInspector.TimelineVerticalOverview = function(model) {
     904WebInspector.TimelineVerticalOverview = function(model)
     905{
    889906    WebInspector.View.call(this);
    890907    this.element = document.createElement("canvas");
     
    901918
    902919    this._context = this.element.getContext("2d");
     920
    903921    this._fillStyles = {};
    904     this._fillStyles.loading = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
    905     this._fillStyles.loading.addColorStop(0, "rgb(201, 220, 245)");
    906     this._fillStyles.loading.addColorStop(1, "rgb(109, 157, 222)");
    907     this._fillStyles.scripting = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
    908     this._fillStyles.scripting.addColorStop(0, "rgb(251, 222, 168)");
    909     this._fillStyles.scripting.addColorStop(1, "rgb(234, 182, 77)");
    910     this._fillStyles.rendering = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
    911     this._fillStyles.rendering.addColorStop(0, "rgb(213, 185, 236)");
    912     this._fillStyles.rendering.addColorStop(1, "rgb(137, 62, 200)");
    913 
    914     this._borderStyles = {};
    915     this._borderStyles.loading = "rgb(106, 152, 213)";
    916     this._borderStyles.scripting = "rgb(223, 175, 77)";
    917     this._borderStyles.rendering = "rgb(130, 59, 190)";
    918     this._borderStyles._frameLength = "rgb(90, 90, 90)";
     922    var categories = WebInspector.TimelinePresentationModel.categories();
     923    for (var category in categories) {
     924        var fillStyle = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
     925        fillStyle.addColorStop(0, categories[category].fillColorStop0);
     926        fillStyle.addColorStop(1, categories[category].fillColorStop1);
     927        this._fillStyles[category] = fillStyle;
     928    }
    919929}
    920930
     
    10381048            this._context.restore();
    10391049
    1040             this._context.strokeStyle = this._borderStyles[category];
     1050            this._context.strokeStyle = WebInspector.TimelinePresentationModel.categories()[category];
    10411051            this._context.strokeRect(x, y, width, Math.floor(height));
    10421052            bottomOffset -= height - 1;
     
    10471057        var y1 = Math.floor(bottomOffset) + 0.5;
    10481058
    1049         this._context.strokeStyle = this._borderStyles._frameLength;
     1059        this._context.strokeStyle = "rgb(90, 90, 90)";
    10501060        this._context.beginPath();
    10511061        this._context.moveTo(x, y1);
  • trunk/Source/WebCore/inspector/front-end/TimelinePresentationModel.js

    r115194 r117778  
    4848        return WebInspector.TimelinePresentationModel._categories;
    4949    WebInspector.TimelinePresentationModel._categories = {
    50         loading: new WebInspector.TimelineCategory("loading", WebInspector.UIString("Loading"), "rgb(47,102,236)"),
    51         scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), "rgb(157,231,119)"),
    52         rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), "rgb(164,60,255)")
     50        loading: new WebInspector.TimelineCategory("loading", WebInspector.UIString("Loading"), "rgb(106, 152, 213)", "rgb(201, 220, 245)", "rgb(109, 157, 222)"),
     51        scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), "rgb(223, 175, 77)", "rgb(251, 222, 168)", "rgb(234, 182, 77)"),
     52        rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), "rgb(130, 59, 190)", "rgb(213, 185, 236)", "rgb(137, 62, 200)")
    5353    };
    5454    return WebInspector.TimelinePresentationModel._categories;
     
    5858 * @param {Object} record
    5959 */
    60 WebInspector.TimelinePresentationModel.recordStyle = function(record) {
     60WebInspector.TimelinePresentationModel.recordStyle = function(record)
     61{
    6162    if (WebInspector.TimelinePresentationModel._recordStylesMap)
    6263        return WebInspector.TimelinePresentationModel._recordStylesMap[record.type];
     
    770771 * @constructor
    771772 * @extends {WebInspector.Object}
     773 * @param {string} name
     774 * @param {string} title
     775 * @param {string} borderColor
     776 * @param {string} fillColorStop0
     777 * @param {string} fillColorStop1
    772778 */
    773 WebInspector.TimelineCategory = function(name, title, color)
     779WebInspector.TimelineCategory = function(name, title, borderColor, fillColorStop0, fillColorStop1)
    774780{
    775781    this.name = name;
    776782    this.title = title;
    777     this.color = color;
     783    this.borderColor = borderColor;
     784    this.fillColorStop0 = fillColorStop0;
     785    this.fillColorStop1 = fillColorStop1;
    778786    this.hidden = false;
    779787}
Note: See TracChangeset for help on using the changeset viewer.