Changeset 126001 in webkit


Ignore:
Timestamp:
Aug 20, 2012 12:21:16 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: toolbar causes 8 reflows upon opening
https://bugs.webkit.org/show_bug.cgi?id=94422

Reviewed by Yury Semikhatsky.

Toolbar's overflow code causes inspector to do 8 reflows upon opening.
Fixing it via introducing batch toolbar update.

  • inspector/front-end/Toolbar.js:

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

  • inspector/front-end/inspector.css:

(body.compact .toolbar-icon):
(body.compact .toolbar-icon.custom-toolbar-icon):
(body.compact .toolbar-item:active .toolbar-icon):
(body.compact .toolbar-label):
(body.compact .toolbar-item.resources .toolbar-icon):
(body.compact .toolbar-item.network .toolbar-icon):
(body.compact .toolbar-item.scripts .toolbar-icon):
(body.compact .toolbar-item.timeline .toolbar-icon):
(body.compact .toolbar-item.profiles .toolbar-icon):
(body.compact .toolbar-item.audits .toolbar-icon):
(body.compact .toolbar-item.console .toolbar-icon):

  • inspector/front-end/inspector.js:

(WebInspector.get _setCompactMode):
(WebInspector.windowResize):

Location:
trunk/Source/WebCore
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r126000 r126001  
     12012-08-20  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: toolbar causes 8 reflows upon opening
     4        https://bugs.webkit.org/show_bug.cgi?id=94422
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        Toolbar's overflow code causes inspector to do 8 reflows upon opening.
     9        Fixing it via introducing batch toolbar update.
     10
     11        * inspector/front-end/Toolbar.js:
     12        (WebInspector.Toolbar):
     13        (WebInspector.Toolbar.prototype.setCoalescingUpdate):
     14        (WebInspector.Toolbar.prototype._updateDropdownButtonAndHideDropdown):
     15        * inspector/front-end/inspector.css:
     16        (body.compact .toolbar-icon):
     17        (body.compact .toolbar-icon.custom-toolbar-icon):
     18        (body.compact .toolbar-item:active .toolbar-icon):
     19        (body.compact .toolbar-label):
     20        (body.compact .toolbar-item.resources .toolbar-icon):
     21        (body.compact .toolbar-item.network .toolbar-icon):
     22        (body.compact .toolbar-item.scripts .toolbar-icon):
     23        (body.compact .toolbar-item.timeline .toolbar-icon):
     24        (body.compact .toolbar-item.profiles .toolbar-icon):
     25        (body.compact .toolbar-item.audits .toolbar-icon):
     26        (body.compact .toolbar-item.console .toolbar-icon):
     27        * inspector/front-end/inspector.js:
     28        (WebInspector.get _setCompactMode):
     29        (WebInspector.windowResize):
     30
    1312012-08-19  Kentaro Hara  <haraken@chromium.org>
    232
  • trunk/Source/WebCore/inspector/front-end/Toolbar.js

    r125871 r126001  
    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;
    4546}
    4647
    4748WebInspector.Toolbar.prototype = {
    48     set compact(compact)
    49     {
    50         if (compact)
    51             this.element.addStyleClass("toolbar-small");
    52         else
    53             this.element.removeStyleClass("toolbar-small");
    54         this._updateDropdownButtonAndHideDropdown();
     49    /**
     50     * @param {boolean} enabled
     51     */
     52    setCoalescingUpdate: function(enabled)
     53    {
     54        this._coalescingLevel += enabled ? 1 : -1;
     55        if (!this._coalescingLevel)
     56            this._updateDropdownButtonAndHideDropdown();
    5557    },
    5658
     
    178180    _updateDropdownButtonAndHideDropdown: function()
    179181    {
     182        if (this._coalescingLevel)
     183            return;
    180184        this._setDropdownVisible(false);
    181185
  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r125879 r126001  
    112112}
    113113
    114 .toolbar-small .toolbar-icon {
     114body.compact .toolbar-icon {
    115115    width: 24px;
    116116    height: 24px;
     
    119119}
    120120
    121 .toolbar-small .toolbar-icon.custom-toolbar-icon {
     121body.compact .toolbar-icon.custom-toolbar-icon {
    122122    background-position-x: -32px;
    123123}
     
    127127}
    128128
    129 .toolbar-small .toolbar-item:active .toolbar-icon {
     129body.compact .toolbar-item:active .toolbar-icon {
    130130    background-position-y: 24px;
    131131}
     
    141141}
    142142
    143 .toolbar-small .toolbar-label {
     143body.compact .toolbar-label {
    144144    display: inline-block;
    145145    margin-left: 3px;
     
    396396}
    397397
    398 .toolbar-small .toolbar-item.resources .toolbar-icon {
     398body.compact .toolbar-item.resources .toolbar-icon {
    399399    background-position-x: -24px;
    400400}
     
    404404}
    405405
    406 .toolbar-small .toolbar-item.network .toolbar-icon {
     406body.compact .toolbar-item.network .toolbar-icon {
    407407    background-position-x: -48px;
    408408}
     
    412412}
    413413
    414 .toolbar-small .toolbar-item.scripts .toolbar-icon {
     414body.compact .toolbar-item.scripts .toolbar-icon {
    415415    background-position-x: -72px;
    416416}
     
    420420}
    421421
    422 .toolbar-small .toolbar-item.timeline .toolbar-icon {
     422body.compact .toolbar-item.timeline .toolbar-icon {
    423423    background-position-x: -96px;
    424424}
     
    428428}
    429429
    430 .toolbar-small .toolbar-item.profiles .toolbar-icon {
     430body.compact .toolbar-item.profiles .toolbar-icon {
    431431    background-position-x: -120px;
    432432}
     
    436436}
    437437
    438 .toolbar-small .toolbar-item.audits .toolbar-icon {
     438body.compact .toolbar-item.audits .toolbar-icon {
    439439    background-position-x: -144px;
    440440}
     
    444444}
    445445
    446 .toolbar-small .toolbar-item.console .toolbar-icon {
     446body.compact .toolbar-item.console .toolbar-icon {
    447447    background-position-x: -168px;
    448448}
  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r125980 r126001  
    257257        else
    258258            body.removeStyleClass("compact");
    259 
    260         // This may be called before doLoadedDone, hence the bulk of inspector objects may
    261         // not be created yet.
    262         if (WebInspector.toolbar)
    263             WebInspector.toolbar.compact = x;
    264 
    265         if (WebInspector.drawer)
    266             WebInspector.drawer.resize();
     259        WebInspector.windowResize();
    267260    },
    268261
     
    521514    this._createGlobalStatusBarItems();
    522515
     516    WebInspector._installDockToRight();
     517
    523518    this.toolbar = new WebInspector.Toolbar();
    524     WebInspector._installDockToRight();
    525 
     519    this.toolbar.setCoalescingUpdate(true);
    526520    var panelDescriptors = this._panelDescriptors();
    527521    for (var i = 0; i < panelDescriptors.length; ++i)
    528522        WebInspector.inspectorView.addPanel(panelDescriptors[i]);
     523    this.toolbar.setCoalescingUpdate(false);
    529524
    530525    this.addMainEventListeners(document);
     
    641636WebInspector.windowResize = function(event)
    642637{
    643     WebInspector.inspectorView.doResize();
    644     WebInspector.drawer.resize();
    645     WebInspector.toolbar.resize();
    646     WebInspector.settingsController.resize();
     638    if (WebInspector.inspectorView)
     639        WebInspector.inspectorView.doResize();
     640    if (WebInspector.drawer)
     641        WebInspector.drawer.resize();
     642    if (WebInspector.toolbar)
     643        WebInspector.toolbar.resize();
     644    if (WebInspector.settingsController)
     645        WebInspector.settingsController.resize();
    647646}
    648647
Note: See TracChangeset for help on using the changeset viewer.