Changeset 126268 in webkit


Ignore:
Timestamp:
Aug 21, 2012 11:58:30 PM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: TabbedPane: measure tab widths in batches.
​https://bugs.webkit.org/show_bug.cgi?id=94484

Reviewed by Vsevolod Vlasov.

Source/WebCore:

  • Introduces global batch update schema
  • Migrates Toolbar and TabbedPane to the new schema
  • inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel):

  • inspector/front-end/TabbedPane.js:

(WebInspector.TabbedPane.prototype.appendTab):
(WebInspector.TabbedPane.prototype._updateTabElements):
(WebInspector.TabbedPane.prototype._innerUpdateTabElements):
(WebInspector.TabbedPane.prototype._updateWidths):
(WebInspector.TabbedPane.prototype._measureWidths):
(WebInspector.TabbedPaneTab):
(WebInspector.TabbedPaneTab.prototype.width):
(WebInspector.TabbedPaneTab.prototype.setWidth):

  • inspector/front-end/Toolbar.js:

(WebInspector.Toolbar):
(WebInspector.Toolbar.prototype._updateDropdownButtonAndHideDropdown):
(WebInspector.Toolbar.prototype._innerUpdateDropdownButtonAndHideDropdown):

  • inspector/front-end/UIUtils.js:

(WebInspector.startBatchUpdate):
(WebInspector.invokeOnceAfterBatchUpdate.get if):
(WebInspector.invokeOnceAfterBatchUpdate):

  • inspector/front-end/inspector.js:
  • inspector/front-end/utilities.js:

LayoutTests:

  • inspector/start-end-batch-update-expected.txt: Added.
  • inspector/start-end-batch-update.html: Added.
  • inspector/tabbed-pane-tabs-to-show.html:
Location:
trunk
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r126266 r126268  
     12012-08-21  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: TabbedPane: measure tab widths in batches.
     4        https://bugs.webkit.org/show_bug.cgi?id=94484
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        * inspector/start-end-batch-update-expected.txt: Added.
     9        * inspector/start-end-batch-update.html: Added.
     10        * inspector/tabbed-pane-tabs-to-show.html:
     11
    1122012-08-21  Dominic Cooney  <dominicc@chromium.org>
    213

  • trunk/LayoutTests/inspector/tabbed-pane-tabs-to-show.html

    r103555 r126268  
    1111            return title;
    1212        }
    13         return { width: width, title: title, toString: toString };
     13        return { width: function() { return width; }, title: title, toString: toString };
    1414    }
    1515

  • trunk/Source/WebCore/ChangeLog

    r126262 r126268  
     12012-08-21  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: TabbedPane: measure tab widths in batches.
     4        https://bugs.webkit.org/show_bug.cgi?id=94484
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        - Introduces global batch update schema
     9        - Migrates Toolbar and TabbedPane to the new schema
     10
     11        * inspector/front-end/ScriptsPanel.js:
     12        (WebInspector.ScriptsPanel):
     13        * inspector/front-end/TabbedPane.js:
     14        (WebInspector.TabbedPane.prototype.appendTab):
     15        (WebInspector.TabbedPane.prototype._updateTabElements):
     16        (WebInspector.TabbedPane.prototype._innerUpdateTabElements):
     17        (WebInspector.TabbedPane.prototype._updateWidths):
     18        (WebInspector.TabbedPane.prototype._measureWidths):
     19        (WebInspector.TabbedPaneTab):
     20        (WebInspector.TabbedPaneTab.prototype.width):
     21        (WebInspector.TabbedPaneTab.prototype.setWidth):
     22        * inspector/front-end/Toolbar.js:
     23        (WebInspector.Toolbar):
     24        (WebInspector.Toolbar.prototype._updateDropdownButtonAndHideDropdown):
     25        (WebInspector.Toolbar.prototype._innerUpdateDropdownButtonAndHideDropdown):
     26        * inspector/front-end/UIUtils.js:
     27        (WebInspector.startBatchUpdate):
     28        (WebInspector.invokeOnceAfterBatchUpdate.get if):
     29        (WebInspector.invokeOnceAfterBatchUpdate):
     30        * inspector/front-end/inspector.js:
     31        * inspector/front-end/utilities.js:
     32
    1332012-08-21  Kentaro Hara  <haraken@chromium.org>
    234

  • trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js

    r126162 r126268  
    186186    WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.BreakpointsActiveStateChanged, this._breakpointsActiveStateChanged, this);
    187187
     188    WebInspector.startBatchUpdate();
    188189    var uiSourceCodes = this._workspace.uiSourceCodes();
    189190    for (var i = 0; i < uiSourceCodes.length; ++i)
    190191        this._addUISourceCode(uiSourceCodes[i]);
     192    WebInspector.endBatchUpdate();
    191193
    192194    this._workspace.addEventListener(WebInspector.UISourceCodeProvider.Events.UISourceCodeAdded, this._uiSourceCodeAdded, this);

  • trunk/Source/WebCore/inspector/front-end/TabbedPane.js

    r125005 r126268  
    102102    appendTab: function(id, tabTitle, view, tabTooltip, userGesture)
    103103    {
    104         var tab = new WebInspector.TabbedPaneTab(this, this._tabsElement, id, tabTitle, this._closeableTabs, view, tabTooltip);
     104        var tab = new WebInspector.TabbedPaneTab(this, id, tabTitle, this._closeableTabs, view, tabTooltip);
    105105        this._tabsById[id] = tab;
    106106
    … …  
    255255    _updateTabElements: function()
    256256    {
     257        WebInspector.invokeOnceAfterBatchUpdate(this, this._innerUpdateTabElements);
     258    },
     259
     260    _innerUpdateTabElements: function()
     261    {
    257262        if (!this.isShowing())
    258263            return;
    … …  
    266271            this._measureDropDownButton();
    267272
    268         if (this._shrinkableTabs)
    269             this._updateWidths();
    270        
     273        this._updateWidths();
    271274        this._updateTabsDropDown();
    272275    },
    … …  
    375378    _updateWidths: function()
    376379    {
     380        var measuredWidths = this._measureWidths();
     381        var maxWidth = this._shrinkableTabs ? this._calculateMaxWidth(measuredWidths.slice(), this._totalWidth()) : Number.MAX_VALUE;
     382
     383        var i = 0;
     384        for (var tabId in this._tabs) {
     385            var tab = this._tabs[tabId];
     386            tab.setWidth(Math.min(maxWidth, measuredWidths[i++]));
     387        }
     388    },
     389
     390    _measureWidths: function()
     391    {
     392        // Add all elements to measure into this._tabsElement
     393        var measuringTabElements = [];
     394        for (var tabId in this._tabs) {
     395            var tab = this._tabs[tabId];
     396            if (typeof tab._measuredWidth === "number")
     397                continue;
     398            var measuringTabElement = tab._createTabElement(true);
     399            measuringTabElement.__tab = tab;
     400            measuringTabElements.push(measuringTabElement);
     401            this._tabsElement.appendChild(measuringTabElement);
     402        }
     403
     404        // Perform measurement
     405        for (var i = 0; i < measuringTabElements.length; ++i)
     406            measuringTabElements[i].__tab._measuredWidth = measuringTabElements[i].getBoundingClientRect().width;
     407
     408        // Nuke elements from the UI
     409        for (var i = 0; i < measuringTabElements.length; ++i)
     410            measuringTabElements[i].parentElement.removeChild(measuringTabElements[i]);
     411
     412        // Combine the results.
    377413        var measuredWidths = [];
    378414        for (var tabId in this._tabs)
    379             measuredWidths.push(this._tabs[tabId].measuredWidth);
    380        
    381         var maxWidth = this._calculateMaxWidth(measuredWidths, this._totalWidth());
    382        
    383         for (var tabId in this._tabs) {
    384             var tab = this._tabs[tabId];
    385             tab.width = Math.min(tab.measuredWidth, maxWidth);
    386         }
     415            measuredWidths.push(this._tabs[tabId]._measuredWidth);
     416
     417        return measuredWidths;
    387418    },
    388419
    … …  
    430461        var totalTabsWidth = 0;
    431462        for (var i = 0; i < tabsHistory.length; ++i) {
    432             totalTabsWidth += tabsHistory[i].width;
     463            totalTabsWidth += tabsHistory[i].width();
    433464            var minimalRequiredWidth = totalTabsWidth;
    434465            if (i !== tabsHistory.length - 1)
    … …  
    511542 * @constructor
    512543 * @param {WebInspector.TabbedPane} tabbedPane
    513  * @param {Element} measureElement
    514544 * @param {string} id
    515545 * @param {string} title
    … …  
    518548 * @param {string=} tooltip
    519549 */
    520 WebInspector.TabbedPaneTab = function(tabbedPane, measureElement, id, title, closeable, view, tooltip)
     550WebInspector.TabbedPaneTab = function(tabbedPane, id, title, closeable, view, tooltip)
    521551{
    522552    this._closeable = closeable;
    523553    this._tabbedPane = tabbedPane;
    524     this._measureElement = measureElement;
    525554    this._id = id;
    526555    this._title = title;
    … …  
    600629     * @return {number}
    601630     */
    602     get measuredWidth()
    603     {
    604         if (typeof(this._measuredWidth) !== "undefined")
    605             return this._measuredWidth;
    606        
    607         this._measure();
    608         return this._measuredWidth;
    609     },
    610 
    611     /**
    612      * @return {number}
    613      */
    614     get width()
    615     {
    616         return this._width || this.measuredWidth;
    617     },
    618 
    619     set width(width)
     631    width: function()
     632    {
     633        return this._width;
     634    },
     635
     636    /**
     637     * @param {number} width
     638     */
     639    setWidth: function(width)
    620640    {
    621641        this.tabElement.style.width = width + "px";
    … …  
    658678    },
    659679
    660     _measure: function()
    661     {
    662         var measuringTabElement = this._createTabElement(true);
    663         this._measureElement.appendChild(measuringTabElement);
    664         this._measuredWidth = measuringTabElement.getBoundingClientRect().width;
    665         this._measureElement.removeChild(measuringTabElement);
    666     },
    667 
    668680    /**
    669681     * @param {Event} event

  • trunk/Source/WebCore/inspector/front-end/Toolbar.js

    r126001 r126268  
    4343    document.getElementById("close-button-left").addEventListener("click", this._onClose, true);
    4444    document.getElementById("close-button-right").addEventListener("click", this._onClose, true);
    45     this._coalescingLevel = 0;
    4645}
    4746
    4847WebInspector.Toolbar.prototype = {
    49     /**
    50      * @param {boolean} enabled
    51      */
    52     setCoalescingUpdate: function(enabled)
    53     {
    54         this._coalescingLevel += enabled ? 1 : -1;
    55         if (!this._coalescingLevel)
    56             this._updateDropdownButtonAndHideDropdown();
    57     },
    58 
    5948    resize: function()
    6049    {
    … …  
    180169    _updateDropdownButtonAndHideDropdown: function()
    181170    {
    182         if (this._coalescingLevel)
    183             return;
     171        WebInspector.invokeOnceAfterBatchUpdate(this, this._innerUpdateDropdownButtonAndHideDropdown);
     172    },
     173
     174    _innerUpdateDropdownButtonAndHideDropdown: function()
     175    {
    184176        this._setDropdownVisible(false);
    185177

  • trunk/Source/WebCore/inspector/front-end/UIUtils.js

    r125882 r126268  
    11101110}
    11111111
     1112WebInspector._coalescingLevel = 0;
     1113
     1114WebInspector.startBatchUpdate = function()
     1115{
     1116    if (!WebInspector._coalescingLevel)
     1117        WebInspector._postUpdateHandlers = new Map();
     1118    WebInspector._coalescingLevel++;
     1119}
     1120
     1121WebInspector.endBatchUpdate = function()
     1122{
     1123    if (--WebInspector._coalescingLevel)
     1124        return;
     1125
     1126    var handlers = WebInspector._postUpdateHandlers;
     1127    delete WebInspector._postUpdateHandlers;
     1128
     1129    var keys = handlers.keys();
     1130    for (var i = 0; i < keys.length; ++i) {
     1131        var object = keys[i];
     1132        var methods = handlers.get(object).keys();
     1133        for (var j = 0; j < methods.length; ++j)
     1134            methods[j].call(object);
     1135    }
     1136}
     1137
     1138/**
     1139 * @param {Object} object
     1140 * @param {function()} method
     1141 */
     1142WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
     1143{
     1144    if (!WebInspector._coalescingLevel) {
     1145        method.call(object);
     1146        return;
     1147    }
     1148   
     1149    var methods = WebInspector._postUpdateHandlers.get(object);
     1150    if (!methods) {
     1151        methods = new Map();
     1152        WebInspector._postUpdateHandlers.put(object, methods);
     1153    }
     1154    methods.put(method);
     1155}
     1156
    11121157;(function() {
    11131158

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r126215 r126268  
    528528
    529529    this.toolbar = new WebInspector.Toolbar();
    530     this.toolbar.setCoalescingUpdate(true);
     530    WebInspector.startBatchUpdate();
    531531    var panelDescriptors = this._panelDescriptors();
    532532    for (var i = 0; i < panelDescriptors.length; ++i)
    533533        WebInspector.inspectorView.addPanel(panelDescriptors[i]);
    534     this.toolbar.setCoalescingUpdate(false);
     534    WebInspector.endBatchUpdate();
    535535
    536536    this.addMainEventListeners(document);

  • trunk/Source/WebCore/inspector/front-end/utilities.js

    r126215 r126268  
    691691            key.__identifier = objectIdentifier;
    692692        }
    693         this._map[objectIdentifier] = value;
     693        this._map[objectIdentifier] = [key, value];
    694694    },
    695695   
    696696    /**
    697697     * @param {Object} key
    698      * @return {Object} value
    699698     */
    700699    remove: function(key)
    … …  
    702701        var result = this._map[key.__identifier];
    703702        delete this._map[key.__identifier];
    704         return result;
    705     },
    706    
     703        return result ? result[1] : undefined;
     704    },
     705
     706    /**
     707     * @return {Array.<Object>}
     708     */
     709    keys: function()
     710    {
     711        return this._list(0);
     712    },
     713
    707714    values: function()
     715    {
     716        return this._list(1);
     717    },
     718
     719    /**
     720     * @param {number} index
     721     */
     722    _list: function(index)
    708723    {
    709724        var result = [];
    710725        for (var objectIdentifier in this._map)
    711             result.push(this._map[objectIdentifier]);
     726            result.push(this._map[objectIdentifier][index]);
    712727        return result;
    713728    },
    714    
     729
    715730    /**
    716731     * @param {Object} key
    … …  
    718733    get: function(key)
    719734    {
    720         return this._map[key.__identifier];
     735        var entry = this._map[key.__identifier];
     736        return entry ? entry[1] : undefined;
    721737    },
    722738   
    … …  
    725741        this._map = {};
    726742    }
    727 };
    728 
     743}
    729744/**
    730745 * @param {string} url
Note: See TracChangeset for help on using the changeset viewer.