Changeset 187519 in webkit


Ignore:
Timestamp:
Jul 28, 2015, 2:53:10 PM (10 years ago)
Author:
Brian Burg
Message:

Web Inspector: Convert NavigationItem subclasses to ES6
​https://bugs.webkit.org/show_bug.cgi?id=147364

Reviewed by Timothy Hatcher.

Convert remaining NavigationItem subclasses to use ES6 class.

Also promote the _additionalClassNames to be a protected getter,
and inline the style class names that are only used in one place.

Mechanical changes are elided from the changelog.

  • UserInterface/Views/ActivateButtonNavigationItem.js:

(WebInspector.ActivateButtonNavigationItem):
(WebInspector.ActivateButtonNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/ActivateButtonToolbarItem.js:

(WebInspector.ActivateButtonToolbarItem):

  • UserInterface/Views/ButtonNavigationItem.js:

(WebInspector.ButtonNavigationItem):
(WebInspector.ButtonNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/ButtonToolbarItem.js:

(WebInspector.ButtonToolbarItem):

  • UserInterface/Views/ControlToolbarItem.js:

(WebInspector.ControlToolbarItem):
(WebInspector.ControlToolbarItem.prototype.get additionalClassNames):

  • UserInterface/Views/DividerNavigationItem.js:

(WebInspector.DividerNavigationItem):
(WebInspector.DividerNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/FlexibleSpaceNavigationItem.js:

(WebInspector.FlexibleSpaceNavigationItem):
(WebInspector.FlexibleSpaceNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/HierarchicalPathNavigationItem.js:

(WebInspector.HierarchicalPathNavigationItem.prototype.get additionalClassNames):
(WebInspector.HierarchicalPathNavigationItem.prototype.get _additionalClassNames): Deleted.

  • UserInterface/Views/NavigationItem.js:

(WebInspector.NavigationItem):
(WebInspector.NavigationItem.prototype.get _classNames):

  • UserInterface/Views/RadioButtonNavigationItem.js:

(WebInspector.RadioButtonNavigationItem):
(WebInspector.RadioButtonNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/ToggleButtonNavigationItem.js:

(WebInspector.ToggleButtonNavigationItem):
(WebInspector.ToggleButtonNavigationItem.prototype.get additionalClassNames):

  • UserInterface/Views/ToggleControlToolbarItem.js:

(WebInspector.ToggleControlToolbarItem):
(WebInspector.ToggleControlToolbarItem.prototype.get additionalClassNames):

Location:
trunk/Source/WebInspectorUI
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r187507 r187519  
     12015-07-28  Brian J. Burg  <burg@cs.washington.edu>
     2
     3        Web Inspector: Convert NavigationItem subclasses to ES6
     4        https://bugs.webkit.org/show_bug.cgi?id=147364
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Convert remaining NavigationItem subclasses to use ES6 class.
     9
     10        Also promote the _additionalClassNames to be a protected getter,
     11        and inline the style class names that are only used in one place.
     12
     13        Mechanical changes are elided from the changelog.
     14
     15        * UserInterface/Views/ActivateButtonNavigationItem.js:
     16        (WebInspector.ActivateButtonNavigationItem):
     17        (WebInspector.ActivateButtonNavigationItem.prototype.get additionalClassNames):
     18        * UserInterface/Views/ActivateButtonToolbarItem.js:
     19        (WebInspector.ActivateButtonToolbarItem):
     20        * UserInterface/Views/ButtonNavigationItem.js:
     21        (WebInspector.ButtonNavigationItem):
     22        (WebInspector.ButtonNavigationItem.prototype.get additionalClassNames):
     23        * UserInterface/Views/ButtonToolbarItem.js:
     24        (WebInspector.ButtonToolbarItem):
     25        * UserInterface/Views/ControlToolbarItem.js:
     26        (WebInspector.ControlToolbarItem):
     27        (WebInspector.ControlToolbarItem.prototype.get additionalClassNames):
     28        * UserInterface/Views/DividerNavigationItem.js:
     29        (WebInspector.DividerNavigationItem):
     30        (WebInspector.DividerNavigationItem.prototype.get additionalClassNames):
     31        * UserInterface/Views/FlexibleSpaceNavigationItem.js:
     32        (WebInspector.FlexibleSpaceNavigationItem):
     33        (WebInspector.FlexibleSpaceNavigationItem.prototype.get additionalClassNames):
     34        * UserInterface/Views/HierarchicalPathNavigationItem.js:
     35        (WebInspector.HierarchicalPathNavigationItem.prototype.get additionalClassNames):
     36        (WebInspector.HierarchicalPathNavigationItem.prototype.get _additionalClassNames): Deleted.
     37        * UserInterface/Views/NavigationItem.js:
     38        (WebInspector.NavigationItem):
     39        (WebInspector.NavigationItem.prototype.get _classNames):
     40        * UserInterface/Views/RadioButtonNavigationItem.js:
     41        (WebInspector.RadioButtonNavigationItem):
     42        (WebInspector.RadioButtonNavigationItem.prototype.get additionalClassNames):
     43        * UserInterface/Views/ToggleButtonNavigationItem.js:
     44        (WebInspector.ToggleButtonNavigationItem):
     45        (WebInspector.ToggleButtonNavigationItem.prototype.get additionalClassNames):
     46        * UserInterface/Views/ToggleControlToolbarItem.js:
     47        (WebInspector.ToggleControlToolbarItem):
     48        (WebInspector.ToggleControlToolbarItem.prototype.get additionalClassNames):
     49
    1502015-07-28  Joseph Pecoraro  <pecoraro@apple.com>
    251

  • trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js

    r166041 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ActivateButtonNavigationItem = function(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
     26WebInspector.ActivateButtonNavigationItem = class ActivateButtonNavigationItem extends WebInspector.ButtonNavigationItem
    2727{
    28     WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
     28    constructor(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
     29    {
     30        super(identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
    2931
    30     this._defaultToolTip = defaultToolTip;
    31     this._activatedToolTip = activatedToolTip || defaultToolTip;
    32     this._role = role;
    33 };
    34 
    35 WebInspector.ActivateButtonNavigationItem.StyleClassName = "activate";
    36 WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName = "activated";
    37 
    38 WebInspector.ActivateButtonNavigationItem.prototype = {
    39     constructor: WebInspector.ActivateButtonNavigationItem,
     32        this._defaultToolTip = defaultToolTip;
     33        this._activatedToolTip = activatedToolTip || defaultToolTip;
     34        this._role = role;
     35    }
    4036
    4137    // Public
    … …  
    4440    {
    4541        return this._defaultToolTip;
    46     },
     42    }
    4743
    4844    get activatedToolTip()
    4945    {
    5046        return this._activatedToolTip;
    51     },
     47    }
    5248
    5349    get activated()
    5450    {
    5551        return this.element.classList.contains(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
    56     },
     52    }
    5753
    5854    set activated(flag)
    … …  
    6965                this.element.removeAttribute("aria-selected");
    7066        }
    71     },
     67    }
    7268
    73     generateStyleText: function(parentSelector)
     69    generateStyleText(parentSelector)
    7470    {
    7571        var classNames = this._classNames.join(".");
    … …  
    9490
    9591        return styleText;
    96     },
     92    }
    9793
    98     // Private
     94    // Protected
    9995
    100     _additionalClassNames: [WebInspector.ActivateButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName]
     96    get additionalClassNames()
     97    {
     98        return ["activate", "button"];
     99    }
    101100};
    102101
    103 WebInspector.ActivateButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
     102WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName = "activated";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js

    r183338 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ActivateButtonToolbarItem = function(identifier, defaultToolTip, activatedToolTip, label, image, suppressEmboss, role)
     26WebInspector.ActivateButtonToolbarItem = class ActivateButtonToolbarItem extends WebInspector.ActivateButtonNavigationItem
    2727{
    28     WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss, role);
     28    constructor(identifier, defaultToolTip, activatedToolTip, label, image, suppressEmboss, role)
     29    {
     30        super(identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss, role);
    2931
    30     if (typeof label === "string") {
    31         this._labelElement = document.createElement("div");
    32         this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
    33         this._element.appendChild(this._labelElement);
     32        if (typeof label === "string") {
     33            this._labelElement = document.createElement("div");
     34            this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
     35            this._element.appendChild(this._labelElement);
    3436
    35         this.label = label;
     37            this.label = label;
     38        }
    3639    }
    37 };
    38 
    39 WebInspector.ActivateButtonToolbarItem.prototype = {
    40     constructor: WebInspector.ActivateButtonToolbarItem,
    4140
    4241    // Public
    … …  
    4544    {
    4645        return this._labelElement.textContent;
    47     },
     46    }
    4847
    4948    set label(newLabel)
    … …  
    5655    }
    5756};
    58 
    59 WebInspector.ActivateButtonToolbarItem.prototype.__proto__ = WebInspector.ActivateButtonNavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js

    r173436 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
    27     WebInspector.NavigationItem.call(this, identifier);
    28 
    29     console.assert(identifier);
    30     console.assert(toolTipOrLabel);
    31 
    32     this.toolTip = toolTipOrLabel;
    33 
    34     this._element.addEventListener("click", this._mouseClicked.bind(this));
    35 
    36     this._element.setAttribute("role", role || "button");
    37 
    38     if (label)
    39         this._element.setAttribute("aria-label", label);
    40 
    41     this._imageWidth = imageWidth || 16;
    42     this._imageHeight = imageHeight || 16;
    43     this._suppressEmboss = suppressEmboss || false;
    44 
    45     if (suppressEmboss)
    46         this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
    47 
    48     if (image)
    49         this.image = image;
    50     else
    51         this.label = toolTipOrLabel;
    52 };
    53 
    54 WebInspector.ButtonNavigationItem.StyleClassName = "button";
     26WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspector.NavigationItem
     27{
     28    constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label)
     29    {
     30        super(identifier);
     31
     32        this._embossedImageStates = WebInspector.ButtonNavigationItem.States;
     33        this._imageCacheable = true;
     34
     35        console.assert(identifier);
     36        console.assert(toolTipOrLabel);
     37
     38        this.toolTip = toolTipOrLabel;
     39
     40        this._element.addEventListener("click", this._mouseClicked.bind(this));
     41
     42        this._element.setAttribute("role", role || "button");
     43
     44        if (label)
     45            this._element.setAttribute("aria-label", label);
     46
     47        this._imageWidth = imageWidth || 16;
     48        this._imageHeight = imageHeight || 16;
     49        this._suppressEmboss = suppressEmboss || false;
     50
     51        if (suppressEmboss)
     52            this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
     53
     54        if (image)
     55            this.image = image;
     56        else
     57            this.label = toolTipOrLabel;
     58    }
     59
     60    // Public
     61
     62    get toolTip()
     63    {
     64        return this._element.title;
     65    }
     66
     67    set toolTip(newToolTip)
     68    {
     69        console.assert(newToolTip);
     70        if (!newToolTip)
     71            return;
     72
     73        this._element.title = newToolTip;
     74    }
     75
     76    get label()
     77    {
     78        return this._element.textContent;
     79    }
     80
     81    set label(newLabel)
     82    {
     83        this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
     84        this._element.textContent = newLabel || "";
     85        if (this.parentNavigationBar)
     86            this.parentNavigationBar.updateLayout();
     87    }
     88
     89    get image()
     90    {
     91        return this._image;
     92    }
     93
     94    set image(newImage)
     95    {
     96        if (!newImage) {
     97            this._element.removeChildren();
     98            return;
     99        }
     100
     101        this._element.removeChildren();
     102        this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
     103
     104        this._image = newImage;
     105
     106        this._glyphElement = document.createElement("div");
     107        this._glyphElement.className = "glyph";
     108        this._element.appendChild(this._glyphElement);
     109
     110        this._updateImage();
     111    }
     112
     113    get enabled()
     114    {
     115        return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
     116    }
     117
     118    set enabled(flag)
     119    {
     120        if (flag)
     121            this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
     122        else
     123            this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
     124    }
     125
     126    get suppressBezel()
     127    {
     128        return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
     129    }
     130
     131    set suppressBezel(flag)
     132    {
     133        if (flag)
     134            this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
     135        else
     136            this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
     137    }
     138
     139    generateStyleText(parentSelector)
     140    {
     141        var classNames = this._classNames.join(".");
     142
     143        if (this._suppressEmboss)
     144            var styleText = parentSelector + " ." + classNames + " > .glyph { width: " +  this._imageWidth + "px; height: " + this._imageHeight + "px; }\n";
     145        else {
     146            // Default state.
     147            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
     148
     149            // Pressed state.
     150            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
     151
     152            // Focused state.
     153            styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
     154        }
     155
     156        return styleText;
     157    }
     158
     159    // Protected
     160
     161    get additionalClassNames()
     162    {
     163        return ["button"];
     164    }
     165
     166    // Private
     167
     168    _mouseClicked(event)
     169    {
     170        if (!this.enabled)
     171            return;
     172        this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
     173    }
     174
     175    _canvasIdentifier(state)
     176    {
     177        console.assert(!this._suppressEmboss);
     178        return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
     179    }
     180
     181    _updateImage()
     182    {
     183        if (this._suppressEmboss)
     184            this._glyphElement.style.webkitMask = "url(" + this._image + ")";
     185        else
     186            this._generateImages();
     187    }
     188
     189    _generateImages()
     190    {
     191        console.assert(!this._suppressEmboss);
     192        if (this._suppressEmboss)
     193            return;
     194        generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
     195    }
     196}
     197
    55198WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
    56199WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
    … …  
    67210    Clicked: "button-navigation-item-clicked"
    68211};
    69 
    70 WebInspector.ButtonNavigationItem.prototype = {
    71     constructor: WebInspector.ButtonNavigationItem,
    72 
    73     // Public
    74 
    75     get toolTip()
    76     {
    77         return this._element.title;
    78     },
    79 
    80     set toolTip(newToolTip)
    81     {
    82         console.assert(newToolTip);
    83         if (!newToolTip)
    84             return;
    85 
    86         this._element.title = newToolTip;
    87     },
    88 
    89     get label()
    90     {
    91         return this._element.textContent;
    92     },
    93 
    94     set label(newLabel)
    95     {
    96         this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
    97         this._element.textContent = newLabel || "";
    98         if (this.parentNavigationBar)
    99             this.parentNavigationBar.updateLayout();
    100     },
    101 
    102     get image()
    103     {
    104         return this._image;
    105     },
    106 
    107     set image(newImage)
    108     {
    109         if (!newImage) {
    110             this._element.removeChildren();
    111             return;
    112         }
    113 
    114         this._element.removeChildren();
    115         this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
    116 
    117         this._image = newImage;
    118 
    119         this._glyphElement = document.createElement("div");
    120         this._glyphElement.className = "glyph";
    121         this._element.appendChild(this._glyphElement);
    122 
    123         this._updateImage();
    124     },
    125 
    126     get enabled()
    127     {
    128         return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
    129     },
    130 
    131     set enabled(flag)
    132     {
    133         if (flag)
    134             this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
    135         else
    136             this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
    137     },
    138 
    139     get suppressBezel()
    140     {
    141         return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
    142     },
    143 
    144     set suppressBezel(flag)
    145     {
    146         if (flag)
    147             this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
    148         else
    149             this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
    150     },
    151 
    152     generateStyleText: function(parentSelector)
    153     {
    154         var classNames = this._classNames.join(".");
    155 
    156         if (this._suppressEmboss)
    157             var styleText = parentSelector + " ." + classNames + " > .glyph { width: " +  this._imageWidth + "px; height: " + this._imageHeight + "px; }\n";
    158         else {
    159             // Default state.
    160             var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
    161 
    162             // Pressed state.
    163             styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
    164 
    165             // Focused state.
    166             styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
    167         }
    168 
    169         return styleText;
    170     },
    171 
    172     // Private
    173 
    174     _additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
    175     _embossedImageStates: WebInspector.ButtonNavigationItem.States,
    176     _imageCacheable: true,
    177 
    178     _mouseClicked: function(event)
    179     {
    180         if (!this.enabled)
    181             return;
    182         this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
    183     },
    184 
    185     _canvasIdentifier: function(state)
    186     {
    187         console.assert(!this._suppressEmboss);
    188         return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
    189     },
    190 
    191     _updateImage: function()
    192     {
    193         if (this._suppressEmboss)
    194             this._glyphElement.style.webkitMask = "url(" + this._image + ")";
    195         else
    196             this._generateImages();
    197     },
    198 
    199     _generateImages: function()
    200     {
    201         console.assert(!this._suppressEmboss);
    202         if (this._suppressEmboss)
    203             return;
    204         generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
    205     }
    206 };
    207 
    208 WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js

    r183338 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ButtonToolbarItem = function(identifier, toolTip, label, image, suppressEmboss, role)
     26WebInspector.ButtonToolbarItem = class ButtonToolbarItem extends WebInspector.ButtonNavigationItem
    2727{
    28     WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 16, 16, suppressEmboss, role);
     28    constructor(identifier, toolTip, label, image, suppressEmboss, role)
     29    {
     30        super(identifier, toolTip, image, 16, 16, suppressEmboss, role);
    2931
    30     if (typeof label === "string") {
    31         this._labelElement = document.createElement("div");
    32         this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
    33         this._element.appendChild(this._labelElement);
     32        if (typeof label === "string") {
     33            this._labelElement = document.createElement("div");
     34            this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
     35            this._element.appendChild(this._labelElement);
    3436
    35         this.label = label;
     37            this.label = label;
     38        }
    3639    }
    37 };
    38 
    39 WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";
    40 
    41 WebInspector.ButtonToolbarItem.prototype = {
    42     constructor: WebInspector.ButtonToolbarItem,
    4340
    4441    // Public
    … …  
    4744    {
    4845        return this._labelElement.textContent;
    49     },
     46    }
    5047
    5148    set label(newLabel)
    … …  
    5956};
    6057
    61 WebInspector.ButtonToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
     58WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.js

    r164543 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ControlToolbarItem = function(identifier, toolTip, image, imageWidth, imageHeight)
     26WebInspector.ControlToolbarItem = class ControlToolbarItem extends WebInspector.ButtonNavigationItem
    2727{
    28     WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, false);
     28    constructor(identifier, toolTip, image, imageWidth, imageHeight)
     29    {
     30        super(identifier, toolTip, image, imageWidth, imageHeight, false);
     31    }
     32
     33    // Protected
     34
     35    get additionalClassNames()
     36    {
     37        return ["control"];
     38    }
    2939};
    30 
    31 WebInspector.ControlToolbarItem.StyleClassName = "control";
    32 
    33 WebInspector.ControlToolbarItem.prototype = {
    34     constructor: WebInspector.ControlToolbarItem,
    35 
    36     // Private
    37 
    38     _additionalClassNames: [WebInspector.ControlToolbarItem.StyleClassName],
    39 };
    40 
    41 WebInspector.ControlToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.js

    r164543 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.DividerNavigationItem = function(identifier) {
    27     WebInspector.NavigationItem.call(this, identifier);
     26WebInspector.DividerNavigationItem = class DividerNavigationItem extends WebInspector.NavigationItem
     27{
     28    constructor(identifier)
     29    {
     30        super(identifier);
     31    }
     32
     33    // Protected
     34
     35    get additionalClassNames()
     36    {
     37        return ["divider"];
     38    }
    2839};
    29 
    30 WebInspector.DividerNavigationItem.StyleClassName = "divider";
    31 
    32 WebInspector.DividerNavigationItem.prototype = {
    33     constructor: WebInspector.DividerNavigationItem,
    34 
    35     // Private
    36 
    37     _additionalClassNames: [WebInspector.DividerNavigationItem.StyleClassName],
    38 };
    39 
    40 WebInspector.DividerNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.js

    r164543 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.FlexibleSpaceNavigationItem = function(identifier) {
    27     WebInspector.NavigationItem.call(this, identifier);
     26WebInspector.FlexibleSpaceNavigationItem = class FlexibleSpaceNavigationItem extends WebInspector.NavigationItem
     27{
     28    constructor(identifier)
     29    {
     30        super(identifier);
     31    }
     32
     33    // Protected
     34
     35    get additionalClassNames()
     36    {
     37        return ["flexible-space"];
     38    }
    2839};
    29 
    30 WebInspector.FlexibleSpaceNavigationItem.StyleClassName = "flexible-space";
    31 
    32 WebInspector.FlexibleSpaceNavigationItem.prototype = {
    33     constructor: WebInspector.FlexibleSpaceNavigationItem,
    34 
    35     // Private
    36 
    37     _additionalClassNames: [WebInspector.FlexibleSpaceNavigationItem.StyleClassName],
    38 };
    39 
    40 WebInspector.FlexibleSpaceNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js

    r183565 r187519  
    220220    // Protected
    221221
    222     // FIXME: Should not be prefixed with an underscore.
    223     get _additionalClassNames()
     222    get additionalClassNames()
    224223    {
    225224        return ["hierarchical-path"];

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js

    r182990 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.NavigationItem = function(identifier, role, label) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.NavigationItem = class NavigationItem extends WebInspector.Object
     27{
     28    constructor(identifier, role, label)
     29    {
     30        super();
    2931
    30     this._identifier = identifier || null;
     32        this._identifier = identifier || null;
    3133
    32     this._element = document.createElement("div");
    33     this._hidden = false;
     34        this._element = document.createElement("div");
     35        this._hidden = false;
    3436
    35     if (role)
    36         this._element.setAttribute("role", role);
    37     if (label)
    38         this._element.setAttribute("aria-label", label);
     37        if (role)
     38            this._element.setAttribute("role", role);
     39        if (label)
     40            this._element.setAttribute("aria-label", label);
    3941
    40     this._element.classList.add(...this._classNames);
    41     this._element.navigationItem = this;
    42 };
    43 
    44 WebInspector.NavigationItem.StyleClassName = "item";
    45 WebInspector.NavigationItem.HiddenStyleClassName = "hidden";
    46 
    47 
    48 WebInspector.NavigationItem.prototype = {
    49     constructor: WebInspector.NavigationItem,
     42        this._element.classList.add(...this._classNames);
     43        this._element.navigationItem = this;
     44    }
    5045
    5146    // Public
    … …  
    5449    {
    5550        return this._identifier;
    56     },
     51    }
    5752
    5853    get element()
    5954    {
    6055        return this._element;
    61     },
     56    }
    6257
    6358    get parentNavigationBar()
    6459    {
    6560        return this._parentNavigationBar;
    66     },
     61    }
    6762
    68     updateLayout: function(expandOnly)
     63    updateLayout(expandOnly)
    6964    {
    7065        // Implemented by subclasses.
    71     },
     66    }
    7267
    7368    get hidden()
    7469    {
    7570        return this._hidden;
    76     },
     71    }
    7772
    7873    set hidden(flag)
    … …  
    8378        this._hidden = flag;
    8479
    85         if (flag)
    86             this._element.classList.add(WebInspector.NavigationItem.HiddenStyleClassName);
    87         else
    88             this._element.classList.remove(WebInspector.NavigationItem.HiddenStyleClassName);
     80        this._element.classList.toggle("hidden", flag);
    8981
    9082        if (this._parentNavigationBar)
    9183            this._parentNavigationBar.updateLayoutSoon();
    92     },
     84    }
    9385
    9486    // Private
    … …  
    9688    get _classNames()
    9789    {
    98         var classNames = [WebInspector.NavigationItem.StyleClassName];
     90        var classNames = ["item"];
    9991        if (this._identifier)
    10092            classNames.push(this._identifier);
    101         if (this._additionalClassNames instanceof Array)
    102             classNames = classNames.concat(this._additionalClassNames);
     93        if (this.additionalClassNames instanceof Array)
     94            classNames = classNames.concat(this.additionalClassNames);
    10395        return classNames;
    10496    }
    10597};
    106 
    107 WebInspector.NavigationItem.prototype.__proto__ = WebInspector.Object.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js

    r182142 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.RadioButtonNavigationItem = function(identifier, toolTip, image, imageWidth, imageHeight) {
    27     WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
    28 };
    29 
    30 WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
    31 WebInspector.RadioButtonNavigationItem.ActiveStyleClassName = "active";
    32 WebInspector.RadioButtonNavigationItem.SelectedStyleClassName = "selected";
    33 
    34 WebInspector.RadioButtonNavigationItem.prototype = {
    35     constructor: WebInspector.RadioButtonNavigationItem,
     26WebInspector.RadioButtonNavigationItem = class RadioButtonNavigationItem extends WebInspector.ButtonNavigationItem
     27{
     28    constructor(identifier, toolTip, image, imageWidth, imageHeight)
     29    {
     30        super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
     31    }
    3632
    3733    // Public
    … …  
    4036    {
    4137        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
    42     },
     38    }
    4339
    4440    set selected(flag)
    … …  
    5147            this.element.setAttribute("aria-selected", "false");
    5248        }
    53     },
     49    }
    5450
    5551    get active()
    5652    {
    5753        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
    58     },
     54    }
    5955
    6056    set active(flag)
    … …  
    6460        else
    6561            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
    66     },
     62    }
    6763
    68     generateStyleText: function(parentSelector)
     64    generateStyleText(parentSelector)
    6965    {
    7066        var classNames = this._classNames.join(".");
    … …  
    8076
    8177        return styleText;
    82     },
     78    }
    8379
    84     updateLayout: function(expandOnly)
     80    updateLayout(expandOnly)
    8581    {
    8682        if (expandOnly)
    … …  
    10298            this.element.setAttribute("aria-selected", "false");
    10399        }
    104     },
     100    }
    105101
    106     // Private
     102    // Protected
    107103
    108     _additionalClassNames: [WebInspector.RadioButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
     104    get additionalClassNames()
     105    {
     106        return ["radio", "button"];
     107    }
    109108};
    110109
    111 WebInspector.RadioButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
     110WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
     111WebInspector.RadioButtonNavigationItem.ActiveStyleClassName = "active";
     112WebInspector.RadioButtonNavigationItem.SelectedStyleClassName = "selected";

  • trunk/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js

    r164543 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ToggleButtonNavigationItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, suppressEmboss) {
    27     WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, defaultImage, imageWidth, imageHeight, suppressEmboss);
     26WebInspector.ToggleButtonNavigationItem = class ToggleButtonNavigationItem extends WebInspector.ButtonNavigationItem
     27{
     28    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, suppressEmboss)
     29    {
     30        super(identifier, defaultToolTip, defaultImage, imageWidth, imageHeight, suppressEmboss);
    2831
    29     this._toggled = false;
    30     this._defaultImage = defaultImage;
    31     this._alternateImage = alternateImage;
    32     this._defaultToolTip = defaultToolTip;
    33     this._alternateToolTip = alternateToolTip || defaultToolTip;
    34 };
     32        // The image isn't cacheable because it dynamically changes and the same canvas identifier is reused.
     33        // FIXME: We could try overriding _canvasIdentifier() to return different identifiers. If we did that
     34        // we would also need to override generateStyleText() to use the different identifiers.
     35        this._imageCacheable = false;
    3536
    36 WebInspector.ToggleButtonNavigationItem.StyleClassName = "toggle";
    37 
    38 WebInspector.ToggleButtonNavigationItem.prototype = {
    39     constructor: WebInspector.ToggleButtonNavigationItem,
     37        this._toggled = false;
     38        this._defaultImage = defaultImage;
     39        this._alternateImage = alternateImage;
     40        this._defaultToolTip = defaultToolTip;
     41        this._alternateToolTip = alternateToolTip || defaultToolTip;
     42    }
    4043
    4144    // Public
    … …  
    4447    {
    4548        return this._defaultToolTip;
    46     },
     49    }
    4750
    4851    get alternateToolTip()
    4952    {
    5053        return this._alternateToolTip;
    51     },
     54    }
    5255
    5356    set alternateToolTip(toolTip)
    … …  
    5760        if (this._toggled)
    5861            this.toolTip = this._alternateToolTip;
    59     },
     62    }
    6063
    6164    get defaultImage()
    6265    {
    6366        return this._defaultImage;
    64     },
     67    }
    6568
    6669    get alternateImage()
    6770    {
    6871        return this._alternateImage;
    69     },
     72    }
    7073
    7174    set alternateImage(image)
    … …  
    7578        if (this._toggled)
    7679            this.image = this._alternateImage;
    77     },
     80    }
    7881
    7982    get toggled()
    8083    {
    8184        return this._toggled;
    82     },
     85    }
    8386
    8487    set toggled(flag)
    … …  
    98101            this.image = this._defaultImage;
    99102        }
    100     },
     103    }
    101104
    102     // Private
     105    // Protected
    103106
    104     _additionalClassNames: [WebInspector.ToggleButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
    105 
    106     // The image isn't cacheable because it dynamically changes and the same canvas identifier is reused.
    107     // FIXME: We could try overriding _canvasIdentifier() to return different identifiers. If we did that
    108     // we would also need to override generateStyleText() to use the different identifiers.
    109     _imageCacheable: false
     107    get additionalClassNames()
     108    {
     109        return ["toggle", "button"];
     110    }
    110111};
    111 
    112 WebInspector.ToggleButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ToggleControlToolbarItem.js

    r164543 r187519  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.ToggleControlToolbarItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight) {
    27     WebInspector.ToggleButtonNavigationItem.call(this, identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, false);
     26WebInspector.ToggleControlToolbarItem = class ToggleControlToolbarItem extends WebInspector.ToggleButtonNavigationItem
     27{
     28    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight)
     29    {
     30        super(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, false);
     31    }
     32
     33    // Protected
     34
     35    get additionalClassNames()
     36    {
     37        return ["toggle", "control"];
     38    }
    2839};
    29 
    30 WebInspector.ToggleControlToolbarItem.StyleClassName = "toggle";
    31 
    32 WebInspector.ToggleControlToolbarItem.prototype = {
    33     constructor: WebInspector.ToggleControlToolbarItem,
    34 
    35     // Private
    36 
    37     _additionalClassNames: [WebInspector.ToggleControlToolbarItem.StyleClassName, WebInspector.ControlToolbarItem.StyleClassName]
    38 };
    39 
    40 WebInspector.ToggleControlToolbarItem.prototype.__proto__ = WebInspector.ToggleButtonNavigationItem.prototype;
Note: See TracChangeset for help on using the changeset viewer.