Changeset 182055 in webkit


Ignore:
Timestamp:
Mar 27, 2015 12:26:35 AM (9 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Convert more misc View classes to ES6
​https://bugs.webkit.org/show_bug.cgi?id=143128

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/CompletionSuggestionsView.js:
  • UserInterface/Views/ComputedStyleDetailsPanel.js:
  • UserInterface/Views/DashboardContainerView.js:
  • UserInterface/Views/DashboardView.js:
  • UserInterface/Views/DebuggerDashboardView.js:
  • UserInterface/Views/DefaultDashboardView.js:
  • UserInterface/Views/FilterBarButton.js:
  • UserInterface/Views/MetricsStyleDetailsPanel.js:
  • UserInterface/Views/ObjectPreviewView.js:
  • UserInterface/Views/ObjectTreeView.js:
  • UserInterface/Views/QuickConsole.js:
  • UserInterface/Views/ReplayDashboardView.js:
  • UserInterface/Views/RulesStyleDetailsPanel.js:
  • UserInterface/Views/StyleDetailsPanel.js:

Converted to ES6 classes.

Location:
trunk/Source/WebInspectorUI
Files:
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r182054 r182055  
     12015-03-26  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Convert more misc View classes to ES6
     4        https://bugs.webkit.org/show_bug.cgi?id=143128
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/CompletionSuggestionsView.js:
     9        * UserInterface/Views/ComputedStyleDetailsPanel.js:
     10        * UserInterface/Views/DashboardContainerView.js:
     11        * UserInterface/Views/DashboardView.js:
     12        * UserInterface/Views/DebuggerDashboardView.js:
     13        * UserInterface/Views/DefaultDashboardView.js:
     14        * UserInterface/Views/FilterBarButton.js:
     15        * UserInterface/Views/MetricsStyleDetailsPanel.js:
     16        * UserInterface/Views/ObjectPreviewView.js:
     17        * UserInterface/Views/ObjectTreeView.js:
     18        * UserInterface/Views/QuickConsole.js:
     19        * UserInterface/Views/ReplayDashboardView.js:
     20        * UserInterface/Views/RulesStyleDetailsPanel.js:
     21        * UserInterface/Views/StyleDetailsPanel.js:
     22        Converted to ES6 classes.
     23
    1242015-03-26  Timothy Hatcher  <timothy@apple.com>
    225

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

    r181769 r182055  
    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.CompletionSuggestionsView = function(delegate)
     26WebInspector.CompletionSuggestionsView = class CompletionSuggestionsView extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     this._delegate = delegate || null;
    32 
    33     this._selectedIndex = NaN;
    34 
    35     this._element = document.createElement("div");
    36     this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
    37 
    38     this._containerElement = document.createElement("div");
    39     this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
    40     this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
    41     this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
    42     this._containerElement.addEventListener("click", this._itemClicked.bind(this));
    43     this._element.appendChild(this._containerElement);
    44 };
    45 
    46 WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
    47 WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
    48 WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
    49 WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
    50 
    51 WebInspector.CompletionSuggestionsView.prototype = {
    52     constructor: WebInspector.CompletionSuggestionsView,
     28    constructor(delegate)
     29    {
     30        super();
     31
     32        this._delegate = delegate || null;
     33
     34        this._selectedIndex = NaN;
     35
     36        this._element = document.createElement("div");
     37        this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
     38
     39        this._containerElement = document.createElement("div");
     40        this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
     41        this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
     42        this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
     43        this._containerElement.addEventListener("click", this._itemClicked.bind(this));
     44        this._element.appendChild(this._containerElement);
     45    }
    5346
    5447    // Public
    … …  
    5750    {
    5851        return this._delegate;
    59     },
     52    }
    6053
    6154    get visible()
    6255    {
    6356        return !!this._element.parentNode;
    64     },
     57    }
    6558
    6659    get selectedIndex()
    6760    {
    6861        return this._selectedIndex;
    69     },
     62    }
    7063
    7164    set selectedIndex(index)
    … …  
    8376        selectedItemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
    8477        selectedItemElement.scrollIntoViewIfNeeded(false);
    85     },
    86 
    87     selectNext: function()
     78    }
     79
     80    selectNext()
    8881    {
    8982        var count = this._containerElement.children.length;
    … …  
    9790        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
    9891            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
    99     },
    100 
    101     selectPrevious: function()
     92    }
     93
     94    selectPrevious()
    10295    {
    10396        if (isNaN(this._selectedIndex) || this._selectedIndex === 0)
    … …  
    109102        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
    110103            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
    111     },
    112 
    113     isHandlingClickEvent: function()
     104    }
     105
     106    isHandlingClickEvent()
    114107    {
    115108        return this._mouseIsDown;
    116     },
    117 
    118     show: function(anchorBounds)
     109    }
     110
     111    show(anchorBounds)
    119112    {
    120113        // Measure the container so we can know the intrinsic size of the items.
    … …  
    129122
    130123        // Lay out the suggest-box relative to the anchorBounds.
    131         const margin = 10;
    132         const horizontalPadding = 22;
    133         const absoluteMaximumHeight = 160;
     124        var margin = 10;
     125        var horizontalPadding = 22;
     126        var absoluteMaximumHeight = 160;
    134127
    135128        var x = anchorBounds.origin.x;
    … …  
    162155
    163156        document.body.appendChild(this._element);
    164     },
    165 
    166     hide: function()
     157    }
     158
     159    hide()
    167160    {
    168161        this._element.remove();
    169     },
    170 
    171     update: function(completions, selectedIndex)
     162    }
     163
     164    update(completions, selectedIndex)
    172165    {
    173166        this._containerElement.removeChildren();
    … …  
    184177            this._containerElement.appendChild(itemElement);
    185178        }
    186     },
     179    }
    187180
    188181    // Private
    … …  
    196189        console.assert(element);
    197190        return element;
    198     },
    199 
    200     _mouseDown: function(event)
     191    }
     192
     193    _mouseDown(event)
    201194    {
    202195        if (event.button !== 0)
    203196            return;
    204197        this._mouseIsDown = true;
    205     },
    206 
    207     _mouseUp: function(event)
     198    }
     199
     200    _mouseUp(event)
    208201    {
    209202        if (event.button !== 0)
    210203            return;
    211204        this._mouseIsDown = false;
    212     },
    213 
    214     _itemClicked: function(event)
     205    }
     206
     207    _itemClicked(event)
    215208    {
    216209        if (event.button !== 0)
    … …  
    227220};
    228221
    229 WebInspector.CompletionSuggestionsView.prototype.__proto__ = WebInspector.Object.prototype;
     222WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
     223WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
     224WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
     225WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";

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

    r164543 r182055  
    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.ComputedStyleDetailsPanel = function()
     26WebInspector.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WebInspector.StyleDetailsPanel
    2727{
    28     WebInspector.StyleDetailsPanel.call(this, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
    29 
    30     this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
    31 
    32     var computedStyleShowAllLabel = document.createElement("label");
    33     computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
    34 
    35     this._computedStyleShowAllCheckbox = document.createElement("input");
    36     this._computedStyleShowAllCheckbox.type = "checkbox";
    37     this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
    38     this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
    39     computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
    40 
    41     this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
    42     this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
    43     this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
    44     this._propertiesTextEditor.sortProperties = true;
    45 
    46     var propertiesRow = new WebInspector.DetailsSectionRow;
    47     var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
    48     var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
    49 
    50     propertiesRow.element.appendChild(this._propertiesTextEditor.element);
    51 
    52     // Region flow name is used to display the "flow-from" property of the Region Containers.
    53     this._regionFlowFragment = document.createElement("span");
    54     this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
    55     this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
    56 
    57     var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
    58     goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
    59 
    60     this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
    61     this._regionFlowNameRow.element.classList.add("content-flow-link");
    62 
    63     // Content flow name is used to display the "flow-into" property of the Content nodes.
    64     this._contentFlowFragment = document.createElement("span");
    65     this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
    66     this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
    67 
    68     var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
    69     goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
    70 
    71     this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
    72     this._contentFlowNameRow.element.classList.add("content-flow-link");
    73 
    74     var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
    75     this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
    76 
    77     this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
    78     this._containerRegionsDataGrid.element.classList.add("no-header");
    79 
    80     var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
    81     var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
    82     this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
    83 
    84     this.element.appendChild(propertiesSection.element);
    85     this.element.appendChild(this._flowNamesSection.element);
    86     this.element.appendChild(this._containerRegionsFlowSection.element);
    87 
    88     this._resetFlowDetails();
    89 };
    90 
    91 WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
    92 
    93 WebInspector.ComputedStyleDetailsPanel.prototype = {
    94     constructor: WebInspector.ComputedStyleDetailsPanel,
     28    constructor()
     29    {
     30        super(WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
     31
     32        this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
     33
     34        var computedStyleShowAllLabel = document.createElement("label");
     35        computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
     36
     37        this._computedStyleShowAllCheckbox = document.createElement("input");
     38        this._computedStyleShowAllCheckbox.type = "checkbox";
     39        this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
     40        this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
     41        computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
     42
     43        this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
     44        this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
     45        this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
     46        this._propertiesTextEditor.sortProperties = true;
     47
     48        var propertiesRow = new WebInspector.DetailsSectionRow;
     49        var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
     50        var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
     51
     52        propertiesRow.element.appendChild(this._propertiesTextEditor.element);
     53
     54        // Region flow name is used to display the "flow-from" property of the Region Containers.
     55        this._regionFlowFragment = document.createElement("span");
     56        this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
     57        this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
     58
     59        var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
     60        goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
     61
     62        this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
     63        this._regionFlowNameRow.element.classList.add("content-flow-link");
     64
     65        // Content flow name is used to display the "flow-into" property of the Content nodes.
     66        this._contentFlowFragment = document.createElement("span");
     67        this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
     68        this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
     69
     70        var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
     71        goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
     72
     73        this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
     74        this._contentFlowNameRow.element.classList.add("content-flow-link");
     75
     76        var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
     77        this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
     78
     79        this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
     80        this._containerRegionsDataGrid.element.classList.add("no-header");
     81
     82        var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
     83        var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
     84        this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
     85
     86        this.element.appendChild(propertiesSection.element);
     87        this.element.appendChild(this._flowNamesSection.element);
     88        this.element.appendChild(this._containerRegionsFlowSection.element);
     89
     90        this._resetFlowDetails();
     91    }
    9592
    9693    // Public
    … …  
    9996    {
    10097        return this._regionFlow;
    101     },
     98    }
    10299
    103100    set regionFlow(regionFlow)
    … …  
    107104        this._regionFlowNameRow.value = regionFlow ? this._regionFlowFragment : null;
    108105        this._updateFlowNamesSectionVisibility();
    109     },
     106    }
    110107
    111108    get contentFlow()
    112109    {
    113110        return this._contentFlow;
    114     },
     111    }
    115112
    116113    set contentFlow(contentFlow)
    … …  
    120117        this._contentFlowNameRow.value = contentFlow ? this._contentFlowFragment : null;
    121118        this._updateFlowNamesSectionVisibility();
    122     },
     119    }
    123120
    124121    get containerRegions()
    125122    {
    126123        return this._containerRegions;
    127     },
     124    }
    128125
    129126    set containerRegions(regions)
    … …  
    141138
    142139        this._containerRegionsFlowSection.element.classList.remove("hidden");
    143     },
    144 
    145     refresh: function()
     140    }
     141
     142    refresh()
    146143    {
    147144        this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
    148145        this._refreshFlowDetails(this.nodeStyles.node);
    149     },
     146    }
    150147
    151148    // Protected
    152149
    153     shown: function()
     150    shown()
    154151    {
    155152        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
    156153
    157154        this._propertiesTextEditor.updateLayout();
    158     },
    159 
    160     widthDidChange: function()
     155    }
     156
     157    widthDidChange()
    161158    {
    162159        this._propertiesTextEditor.updateLayout();
    163     },
     160    }
    164161
    165162    // Private
    166163
    167     _computedStyleShowAllCheckboxValueChanged: function(event)
     164    _computedStyleShowAllCheckboxValueChanged(event)
    168165    {
    169166        var checked = this._computedStyleShowAllCheckbox.checked;
    170167        this._computedStyleShowAllSetting.value = checked;
    171168        this._propertiesTextEditor.showsImplicitProperties = checked;
    172     },
    173 
    174     _updateFlowNamesSectionVisibility: function()
     169    }
     170
     171    _updateFlowNamesSectionVisibility()
    175172    {
    176173        this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
    177     },
    178 
    179     _resetFlowDetails : function()
     174    }
     175
     176    _resetFlowDetails ()
    180177    {
    181178        this.regionFlow = null;
    182179        this.contentFlow = null;
    183180        this.containerRegions = null;
    184     },
    185 
    186     _refreshFlowDetails: function(domNode)
     181    }
     182
     183    _refreshFlowDetails(domNode)
    187184    {
    188185        this._resetFlowDetails();
    … …  
    204201
    205202        WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, contentFlowInfoReady.bind(this));
    206     },
    207 
    208     _goToRegionFlowArrowWasClicked: function()
     203    }
     204
     205    _goToRegionFlowArrowWasClicked()
    209206    {
    210207        WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._regionFlow);
    211     },
    212 
    213     _goToContentFlowArrowWasClicked: function()
     208    }
     209
     210    _goToContentFlowArrowWasClicked()
    214211    {
    215212        WebInspector.resourceSidebarPanel.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node, true);
    … …  
    217214};
    218215
    219 WebInspector.ComputedStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
     216WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";

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

    r181769 r182055  
    11/*
    2  * Copyright (C) 2013, 2014 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.DashboardContainerView = function() {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
    29 
    30     this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
    31 
    32     this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
    33     this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
    34     this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
    35     this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
    36 
    37     this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
    38     this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
    39 
    40     // Represents currently open dashboards, with the most recent entries appended to the end.
    41     this._dashboardStack = [];
    42     this._currentIndex = -1;
    43 
    44     this._updateAdvanceArrowVisibility();
    45 };
    46 
    47 WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
    48 WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
    49 
    50 WebInspector.DashboardContainerView.AdvanceDirection = {
    51     Forward: "dashboard-container-view-advance-direction-forward",
    52     Backward: "dashboard-container-view-advance-direction-backward",
    53     None: "dashboard-container-view-advance-direction-none"
    54 };
    55 
    56 WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName = "slide-in-down";
    57 WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName = "slide-in-up";
    58 WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName = "slide-out-down";
    59 WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName = "slide-out-up";
    60 
    61 WebInspector.DashboardContainerView.prototype = {
    62     constructor: WebInspector.DashboardContainerView,
    63     __proto__: WebInspector.Object.prototype,
     26WebInspector.DashboardContainerView = class DashboardContainerView extends WebInspector.Object
     27{
     28    constructor()
     29    {
     30        super();
     31
     32        this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
     33
     34        this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
     35        this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
     36        this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
     37        this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
     38
     39        this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
     40        this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
     41
     42        // Represents currently open dashboards, with the most recent entries appended to the end.
     43        this._dashboardStack = [];
     44        this._currentIndex = -1;
     45
     46        this._updateAdvanceArrowVisibility();
     47    }
    6448
    6549    // Public
    … …  
    6852    {
    6953        return this._toolbarItem;
    70     },
     54    }
    7155
    7256    get currentDashboardView()
    … …  
    7660
    7761        return this._dashboardStack[this._currentIndex];
    78     },
    79 
    80     showDashboardViewForRepresentedObject: function(representedObject)
     62    }
     63
     64    showDashboardViewForRepresentedObject(representedObject)
    8165    {
    8266        var dashboardView = this._dashboardViewForRepresentedObject(representedObject);
    … …  
    9074        this._showDashboardAtIndex(index);
    9175        return dashboardView;
    92     },
    93 
    94     hideDashboardViewForRepresentedObject: function(representedObject)
     76    }
     77
     78    hideDashboardViewForRepresentedObject(representedObject)
    9579    {
    9680        var onlyReturnExistingViews = true;
    … …  
    10286        console.assert(this._currentIndex > 0);
    10387        this._showDashboardAtIndex(this._currentIndex - 1);
    104     },
    105 
    106     closeDashboardViewForRepresentedObject: function(representedObject)
     88    }
     89
     90    closeDashboardViewForRepresentedObject(representedObject)
    10791    {
    10892        var onlyReturnExistingViews = true;
    … …  
    11296
    11397        this._closeDashboardView(dashboardView);
    114     },
     98    }
    11599
    116100    // Private
    117101
    118     _advanceForwardArrowClicked: function()
     102    _advanceForwardArrowClicked()
    119103    {
    120104        this._showDashboardAtIndex(this._currentIndex + 1);
    121     },
    122 
    123     _advanceBackwardArrowClicked: function()
     105    }
     106
     107    _advanceBackwardArrowClicked()
    124108    {
    125109        this._showDashboardAtIndex(this._currentIndex - 1);
    126     },
    127 
    128     _dismissAdvanceArrows: function()
     110    }
     111
     112    _dismissAdvanceArrows()
    129113    {
    130114        this._advanceForwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
    131115        this._advanceBackwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
    132     },
    133 
    134     _updateAdvanceArrowVisibility: function()
     116    }
     117
     118    _updateAdvanceArrowVisibility()
    135119    {
    136120        var canAdvanceForward = this._currentIndex < this._dashboardStack.length - 1;
    … …  
    138122        this._advanceForwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceForward);
    139123        this._advanceBackwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceBackward);
    140     },
    141 
    142     _dashboardViewForRepresentedObject: function(representedObject, onlyReturnExistingViews)
     124    }
     125
     126    _dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews)
    143127    {
    144128        console.assert(representedObject);
    … …  
    155139        try {
    156140            // No existing content view found, make a new one.
    157             dashboardView = new WebInspector.DashboardView(representedObject);
     141            dashboardView = WebInspector.DashboardView.create(representedObject);
    158142        } catch (e) {
    159             console.error(e);
     143            console.error(e, e.stack);
    160144            return null;
    161145        }
    … …  
    165149
    166150        return dashboardView;
    167     },
    168 
    169     _showDashboardAtIndex: function(index)
     151    }
     152
     153    _showDashboardAtIndex(index)
    170154    {
    171155        console.assert(index >= 0 && index <= this._dashboardStack.length - 1);
    … …  
    186170        this._currentIndex = index;
    187171        this._showDashboardView(this.currentDashboardView, isInitialDashboard ? initialDirection : advanceDirection);
    188     },
    189 
    190     _showDashboardView: function(dashboardView, advanceDirection)
     172    }
     173
     174    _showDashboardView(dashboardView, advanceDirection)
    191175    {
    192176        console.assert(dashboardView instanceof WebInspector.DashboardView);
    … …  
    204188        dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
    205189
     190        function animationEnded(event) {
     191            if (event.target !== dashboardView.element)
     192                return;
     193
     194            dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
     195            dashboardView.element.classList.remove(animationClass);
     196            container._updateAdvanceArrowVisibility();
     197        }
     198
    206199        if (animationClass) {
    207             function animationEnded(event) {
    208                 if (event.target !== dashboardView.element)
    209                     return;
    210 
    211                 dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
    212                 dashboardView.element.classList.remove(animationClass);
    213                 container._updateAdvanceArrowVisibility();
    214             }
    215200            dashboardView.element.classList.add(animationClass);
    216201            dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
    … …  
    218203
    219204        return dashboardView;
    220     },
    221 
    222     _hideDashboardView: function(dashboardView, advanceDirection, callback)
     205    }
     206
     207    _hideDashboardView(dashboardView, advanceDirection, callback)
    223208    {
    224209        console.assert(dashboardView instanceof WebInspector.DashboardView);
    … …  
    236221        var container = this;
    237222
     223        function animationEnded(event) {
     224            if (event.target !== dashboardView.element)
     225                return;
     226
     227            dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
     228            dashboardView.element.classList.remove(animationClass);
     229            dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
     230            container._updateAdvanceArrowVisibility();
     231
     232            if (typeof callback === "function")
     233                callback();
     234        }
     235
    238236        if (animationClass) {
    239             function animationEnded(event) {
    240                 if (event.target !== dashboardView.element)
    241                     return;
    242 
    243                 dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
    244                 dashboardView.element.classList.remove(animationClass);
    245                 dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
    246                 container._updateAdvanceArrowVisibility();
    247 
    248                 if (typeof callback === "function")
    249                     callback();
    250             }
    251237            dashboardView.element.classList.add(animationClass);
    252238            dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
    253239        } else
    254240            dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
    255     },
    256 
    257     _closeDashboardView: function(dashboardView)
     241    }
     242
     243    _closeDashboardView(dashboardView)
    258244    {
    259245        console.assert(dashboardView instanceof WebInspector.DashboardView);
    … …  
    283269    }
    284270};
     271
     272WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
     273WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
     274
     275WebInspector.DashboardContainerView.AdvanceDirection = {
     276    Forward: Symbol("dashboard-container-view-advance-direction-forward"),
     277    Backward: Symbol("dashboard-container-view-advance-direction-backward"),
     278    None: Symbol("dashboard-container-view-advance-direction-none")
     279};
     280
     281WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName = "slide-in-down";
     282WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName = "slide-in-up";
     283WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName = "slide-out-down";
     284WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName = "slide-out-up";

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

    r181769 r182055  
    11/*
    2  * Copyright (C) 2013, 2014 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.DashboardView = function(representedObject, identifier)
     26WebInspector.DashboardView = class DashboardView extends WebInspector.Object
    2727{
    28     // Creating a new DashboardView directly returns an instance of the proper subclass.
    29     if (this.constructor === WebInspector.DashboardView) {
     28    constructor(representedObject, identifier)
     29    {
     30        console.assert(identifier);
     31
     32        super();
     33
     34        this._representedObject = representedObject;
     35
     36        this._element = document.createElement("div");
     37        this._element.classList.add(WebInspector.DashboardView.StyleClassName);
     38        this._element.classList.add(identifier);
     39    }
     40
     41    // Static
     42
     43    static create(representedObject)
     44    {
    3045        console.assert(representedObject);
    3146
    … …  
    4257    }
    4358
    44     // Otherwise, a subclass is calling the base constructor.
    45     console.assert(this.constructor !== WebInspector.DashboardView && this instanceof WebInspector.DashboardView);
    46     console.assert(identifier);
    47 
    48     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    49     // WebInspector.Object.call(this);
    50 
    51     this._representedObject = representedObject;
    52 
    53     this._element = document.createElement("div");
    54     this._element.classList.add(WebInspector.DashboardView.StyleClassName);
    55     this._element.classList.add(identifier);
    56 };
    57 
    58 WebInspector.DashboardView.StyleClassName = "dashboard";
    59 
    60 WebInspector.DashboardView.prototype = {
    61     constructor: WebInspector.DashboardView,
    62     __proto__: WebInspector.Object.prototype,
    63 
    6459    // Public
    6560
    … …  
    6762    {
    6863        return this._element;
    69     },
     64    }
    7065
    7166    get representedObject()
    7267    {
    7368        return this._representedObject;
    74     },
     69    }
    7570
    76     shown: function()
     71    shown()
    7772    {
    7873        // Implemented by subclasses.
    79     },
     74    }
    8075
    81     hidden: function()
     76    hidden()
    8277    {
    8378        // Implemented by subclasses.
    84     },
     79    }
    8580
    86     closed: function()
     81    closed()
    8782    {
    8883        // Implemented by subclasses.
    8984    }
    9085};
     86
     87WebInspector.DashboardView.StyleClassName = "dashboard";

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

    r172379 r182055  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 WebInspector.DebuggerDashboardView = function(representedObject)
     26WebInspector.DebuggerDashboardView = class DebuggerDashboardView extends WebInspector.DashboardView
    2727{
    28     WebInspector.DashboardView.call(this, representedObject, "debugger");
     28    constructor(representedObject)
     29    {
     30        super(representedObject, "debugger");
    2931
    30     WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
     32        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
    3133
    32     this._navigationBar = new WebInspector.NavigationBar;
    33     this.element.appendChild(this._navigationBar.element);
     34        this._navigationBar = new WebInspector.NavigationBar;
     35        this.element.appendChild(this._navigationBar.element);
    3436
    35     var resumeImage;
    36     if (WebInspector.Platform.isLegacyMacOS)
    37         resumeImage = {src: "Images/Legacy/Resume.svg", width: 16, height: 16};
    38     else
    39         resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
     37        var resumeImage;
     38        if (WebInspector.Platform.isLegacyMacOS)
     39            resumeImage = {src: "Images/Legacy/Resume.svg", width: 16, height: 16};
     40        else
     41            resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
    4042
    41     var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.debuggerSidebarPanel.pauseOrResumeKeyboardShortcut.displayName, WebInspector.debuggerSidebarPanel.pauseOrResumeAlternateKeyboardShortcut.displayName);
    42     this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, resumeImage.src, resumeImage.width, resumeImage.height, true);
    43     this._debuggerResumeButtonItem.activated = true;
    44     this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
    45     this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
     43        var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.debuggerSidebarPanel.pauseOrResumeKeyboardShortcut.displayName, WebInspector.debuggerSidebarPanel.pauseOrResumeAlternateKeyboardShortcut.displayName);
     44        this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, resumeImage.src, resumeImage.width, resumeImage.height, true);
     45        this._debuggerResumeButtonItem.activated = true;
     46        this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
     47        this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
    4648
    47     var message = this._messageElement = document.createElement("div");
    48     message.classList.add(WebInspector.DebuggerDashboardView.MessageStyleClassName);
    49     message.title = message.textContent = WebInspector.UIString("Debugger Paused");
    50     this.element.appendChild(message);
     49        var message = this._messageElement = document.createElement("div");
     50        message.classList.add(WebInspector.DebuggerDashboardView.MessageStyleClassName);
     51        message.title = message.textContent = WebInspector.UIString("Debugger Paused");
     52        this.element.appendChild(message);
    5153
    52     var dividerElement = document.createElement("div");
    53     dividerElement.classList.add(WebInspector.DebuggerDashboardView.DividerStyleClassName);
    54     this.element.appendChild(dividerElement);
     54        var dividerElement = document.createElement("div");
     55        dividerElement.classList.add(WebInspector.DebuggerDashboardView.DividerStyleClassName);
     56        this.element.appendChild(dividerElement);
    5557
    56     var locationElement = this._locationElement = document.createElement("div");
    57     locationElement.classList.add(WebInspector.DebuggerDashboardView.LocationStyleClassName);
    58     this.element.appendChild(locationElement);
     58        var locationElement = this._locationElement = document.createElement("div");
     59        locationElement.classList.add(WebInspector.DebuggerDashboardView.LocationStyleClassName);
     60        this.element.appendChild(locationElement);
    5961
    60     this._rebuildLocation();
    61 };
     62        this._rebuildLocation();
     63    }
    6264
    63 WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
    64 WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     65    // Private
    6566
    66 WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";
    67 WebInspector.DebuggerDashboardView.MessageStyleClassName = "message";
    68 WebInspector.DebuggerDashboardView.DividerStyleClassName = "divider";
    69 WebInspector.DebuggerDashboardView.LocationStyleClassName = "location";
    70 WebInspector.DebuggerDashboardView.FunctionNameStyleClassName = "function-name";
    71 
    72 WebInspector.DebuggerDashboardView.prototype = {
    73     constructor: WebInspector.DebuggerDashboardView,
    74     __proto__: WebInspector.DashboardView.prototype,
    75 
    76     _rebuildLocation: function()
     67    _rebuildLocation()
    7768    {
    7869        if (!WebInspector.debuggerManager.activeCallFrame)
    … …  
    10899        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, shouldPreventLinkFloat);
    109100        this._locationElement.appendChild(linkElement);
    110     },
     101    }
    111102
    112     _resumeButtonClicked: function()
     103    _resumeButtonClicked()
    113104    {
    114105        WebInspector.debuggerManager.resume();
    115106    }
    116107};
     108
     109WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
     110WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
     111
     112WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";
     113WebInspector.DebuggerDashboardView.MessageStyleClassName = "message";
     114WebInspector.DebuggerDashboardView.DividerStyleClassName = "divider";
     115WebInspector.DebuggerDashboardView.LocationStyleClassName = "location";
     116WebInspector.DebuggerDashboardView.FunctionNameStyleClassName = "function-name";

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

    r165382 r182055  
    11/*
    2  * Copyright (C) 2013, 2014 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.DefaultDashboardView = function(representedObject)
     26WebInspector.DefaultDashboardView = class DefaultDashboardView extends WebInspector.DashboardView
    2727{
    28     WebInspector.DashboardView.call(this, representedObject, "default");
     28    constructor(representedObject)
     29    {
     30        super(representedObject, "default");
    2931
    30     representedObject.addEventListener(WebInspector.DefaultDashboard.Event.DataDidChange, window.requestAnimationFrame.bind(null, this._updateDisplay.bind(this)));
     32        representedObject.addEventListener(WebInspector.DefaultDashboard.Event.DataDidChange, window.requestAnimationFrame.bind(null, this._updateDisplay.bind(this)));
    3133
    32     this._items = {
    33         resourcesCount: {
    34             tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
    35             handler: this._resourcesWasClicked
    36         },
    37         resourcesSize: {
    38             tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
    39             handler: this._networkItemWasClicked
    40         },
    41         time: {
    42             tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
    43             handler: this._networkItemWasClicked
    44         },
    45         logs: {
    46             tooltip: WebInspector.UIString("Console logs, click to show the Console"),
    47             handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
    48         },
    49         errors: {
    50             tooltip: WebInspector.UIString("Console errors, click to show the Console"),
    51             handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
    52         },
    53         issues: {
    54             tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
    55             handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
    56         }
    57     };
     34        this._items = {
     35            resourcesCount: {
     36                tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
     37                handler: this._resourcesWasClicked
     38            },
     39            resourcesSize: {
     40                tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
     41                handler: this._networkItemWasClicked
     42            },
     43            time: {
     44                tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
     45                handler: this._networkItemWasClicked
     46            },
     47            logs: {
     48                tooltip: WebInspector.UIString("Console logs, click to show the Console"),
     49                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
     50            },
     51            errors: {
     52                tooltip: WebInspector.UIString("Console errors, click to show the Console"),
     53                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
     54            },
     55            issues: {
     56                tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
     57                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
     58            }
     59        };
    5860
    59     for (var name in this._items)
    60         this._appendElementForNamedItem(name);
    61 };
    62 
    63 WebInspector.DefaultDashboardView.EnabledItemStyleClassName = "enabled";
    64 
    65 WebInspector.DefaultDashboardView.prototype = {
    66     constructor: WebInspector.DefaultDashboardView,
    67     __proto__: WebInspector.DashboardView.prototype,
    68 
     61        for (var name in this._items)
     62            this._appendElementForNamedItem(name);
     63    }
     64   
    6965    // Private
    7066
    71     _updateDisplay: function()
     67    _updateDisplay()
    7268    {
    7369        var dashboard = this.representedObject;
    … …  
    8783        sizeItem.text = dashboard.resourcesSize ? Number.bytesToString(dashboard.resourcesSize, false) : "\u2014";
    8884        this._setItemEnabled(sizeItem, dashboard.resourcesSize > 0);
    89     },
     85    }
    9086
    91     _formatPossibleLargeNumber: function(number)
     87    _formatPossibleLargeNumber(number)
    9288    {
    9389        return number > 999 ? WebInspector.UIString("999+") : number;
    94     },
     90    }
    9591
    96     _appendElementForNamedItem: function(name)
     92    _appendElementForNamedItem(name)
    9793    {
    9894        var item = this._items[name];
    … …  
    106102        item.outlet = item.container.appendChild(document.createElement("div"));
    107103
    108         Object.defineProperty(item, "text",
    109         {
     104        Object.defineProperty(item, "text", {
    110105            set: function(newText)
    111106            {
    … …  
    119114            this._itemWasClicked(name);
    120115        }.bind(this));
    121     },
     116    }
    122117
    123     _itemWasClicked: function(name)
     118    _itemWasClicked(name)
    124119    {
    125120        var item = this._items[name];
    … …  
    129124        if (item.handler)
    130125            item.handler.call(this);
    131     },
     126    }
    132127
    133     _resourcesWasClicked: function()
     128    _resourcesWasClicked()
    134129    {
    135130        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
    136131        WebInspector.navigationSidebar.collapsed = false;
    137     },
     132    }
    138133
    139     _networkItemWasClicked: function()
     134    _networkItemWasClicked()
    140135    {
    141136        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.timelineSidebarPanel;
    142     },
     137    }
    143138
    144     _consoleItemWasClicked: function(scope)
     139    _consoleItemWasClicked(scope)
    145140    {
    146141        WebInspector.showConsoleView(scope);
    147     },
     142    }
    148143
    149     _setConsoleItemValue: function(itemName, newValue)
     144    _setConsoleItemValue(itemName, newValue)
    150145    {
    151146        var iVarName = "_" + itemName;
    … …  
    179174
    180175        container.classList.add("pulsing");
    181     },
     176    }
    182177
    183     _setItemEnabled: function(item, enabled)
     178    _setItemEnabled(item, enabled)
    184179    {
    185180        if (enabled)
    … …  
    189184    }
    190185};
     186
     187WebInspector.DefaultDashboardView.EnabledItemStyleClassName = "enabled";

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

    r181872 r182055  
    2424 */
    2525
    26 WebInspector.FilterBarButton = function(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
     26WebInspector.FilterBarButton = class FilterBarButton extends WebInspector.ActivateButtonNavigationItem
    2727{
    28     WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
     28    constructor(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role)
     29    {
     30        super(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss, role);
    2931
    30     this._filterFunction = filterFunction;
     32        this._filterFunction = filterFunction;
    3133
    32     this._activatedSetting = new WebInspector.Setting(identifier, activatedByDefault);
     34        this._activatedSetting = new WebInspector.Setting(identifier, activatedByDefault);
    3335
    34     this.activated = !!this._activatedSetting.value;
    35 };
    36 
    37 WebInspector.FilterBarButton.StyleClassName = "filter-bar-button";
    38 
    39 WebInspector.FilterBarButton.Event = {
    40     ActivatedStateToggled: "filter-bar-activated-state-toggled"
    41 };
    42 
    43 WebInspector.FilterBarButton.prototype = {
    44     constructor: WebInspector.FilterBarButton,
    45     __proto__: WebInspector.ActivateButtonNavigationItem.prototype,
     36        this.activated = !!this._activatedSetting.value;
     37    }
    4638
    4739    // Public
    … …  
    5042    {
    5143        return this._filterFunction;
    52     },
     44    }
    5345
    54     toggle: function()
     46    toggle()
    5547    {
    5648        this.activated = !this.activated;
    … …  
    5951    }
    6052};
     53
     54WebInspector.FilterBarButton.Event = {
     55    ActivatedStateToggled: "filter-bar-activated-state-toggled"
     56};

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

    r164543 r182055  
    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.MetricsStyleDetailsPanel = function()
     26WebInspector.MetricsStyleDetailsPanel = class MetricsStyleDetailsPanel extends WebInspector.StyleDetailsPanel
    2727{
    28     WebInspector.StyleDetailsPanel.call(this, WebInspector.MetricsStyleDetailsPanel.StyleClassName, "metrics", WebInspector.UIString("Metrics"));
     28    constructor()
     29    {
     30        super("metrics", "metrics", WebInspector.UIString("Metrics"));
    2931
    30     this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
     32        this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
    3133
    32     var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
    33     var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
     34        var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
     35        var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
    3436
    35     this.element.appendChild(boxModelSection.element);
    36 };
    37 
    38 WebInspector.MetricsStyleDetailsPanel.StyleClassName = "metrics";
    39 
    40 WebInspector.MetricsStyleDetailsPanel.prototype = {
    41     constructor: WebInspector.MetricsStyleDetailsPanel,
     37        this.element.appendChild(boxModelSection.element);
     38    }
    4239
    4340    // Public
    4441
    45     refresh: function()
     42    refresh()
    4643    {
    4744        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
    4845    }
    4946};
    50 
    51 WebInspector.MetricsStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;

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

    r181769 r182055  
    2424 */
    2525
    26 WebInspector.ObjectPreviewView = function(preview, mode)
     26WebInspector.ObjectPreviewView = class ObjectPreviewView extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     console.assert(preview instanceof WebInspector.ObjectPreview);
    32 
    33     this._preview = preview;
    34     this._mode = mode || WebInspector.ObjectPreviewView.Mode.Full;
    35 
    36     this._element = document.createElement("span");
    37     this._element.className = "object-preview";
    38 
    39     this._previewElement = this._element.appendChild(document.createElement("span"));
    40     this._previewElement.className = "preview";
    41     this._lossless = this._appendPreview(this._previewElement, this._preview);
    42 
    43     this._titleElement = this._element.appendChild(document.createElement("span"));
    44     this._titleElement.className = "title";
    45     this._titleElement.hidden = true;
    46     this._initTitleElement();
    47 
    48     if (this._preview.hasSize()) {
    49         var sizeElement = this._element.appendChild(document.createElement("span"));
    50         sizeElement.className = "size";
    51         sizeElement.textContent = " (" + this._preview.size + ")";
    52     }
    53 
    54     if (this._lossless)
    55         this._element.classList.add("lossless");
    56 };
    57 
    58 WebInspector.ObjectPreviewView.Mode = {
    59     Brief: Symbol("object-preview-brief"),
    60     Full: Symbol("object-preview-full"),
    61 };
    62 
    63 WebInspector.ObjectPreviewView.prototype = {
    64     constructor: WebInspector.ObjectPreviewView,
    65     __proto__: WebInspector.Object.prototype,
     28    constructor(preview, mode)
     29    {
     30        console.assert(preview instanceof WebInspector.ObjectPreview);
     31
     32        super();
     33
     34        this._preview = preview;
     35        this._mode = mode || WebInspector.ObjectPreviewView.Mode.Full;
     36
     37        this._element = document.createElement("span");
     38        this._element.className = "object-preview";
     39
     40        this._previewElement = this._element.appendChild(document.createElement("span"));
     41        this._previewElement.className = "preview";
     42        this._lossless = this._appendPreview(this._previewElement, this._preview);
     43
     44        this._titleElement = this._element.appendChild(document.createElement("span"));
     45        this._titleElement.className = "title";
     46        this._titleElement.hidden = true;
     47        this._initTitleElement();
     48
     49        if (this._preview.hasSize()) {
     50            var sizeElement = this._element.appendChild(document.createElement("span"));
     51            sizeElement.className = "size";
     52            sizeElement.textContent = " (" + this._preview.size + ")";
     53        }
     54
     55        if (this._lossless)
     56            this._element.classList.add("lossless");
     57    }
    6658
    6759    // Public
    … …  
    7062    {
    7163        return this._preview;
    72     },
     64    }
    7365
    7466    get element()
    7567    {
    7668        return this._element;
    77     },
     69    }
    7870
    7971    get mode()
    8072    {
    8173        return this._mode;
    82     },
     74    }
    8375
    8476    get lossless()
    8577    {
    8678        return this._lossless;
    87     },
     79    }
    8880
    8981    showTitle()
    … …  
    9183        this._titleElement.hidden = false;
    9284        this._previewElement.hidden = true;
    93     },
     85    }
    9486
    9587    showPreview()
    … …  
    9789        this._titleElement.hidden = true;
    9890        this._previewElement.hidden = false;
    99     },
     91    }
    10092
    10193    // Private
    … …  
    108100        else
    109101            this._titleElement.textContent = this._preview.description || "";
    110     },
     102    }
    111103
    112104    _numberOfPropertiesToShowInMode()
    113105    {
    114106        return this._mode === WebInspector.ObjectPreviewView.Mode.Brief ? 3 : Infinity;
    115     },
     107    }
    116108
    117109    _appendPreview(element, preview)
    … …  
    140132        }
    141133        return this._appendValuePreview(bodyElement, preview);
    142     },
     134    }
    143135
    144136    _appendEntryPreviews(element, preview)
    … …  
    173165
    174166        return lossless;
    175     },
     167    }
    176168
    177169    _appendPropertyPreviews(element, preview)
    … …  
    225217
    226218        return preview.lossless;
    227     },
     219    }
    228220
    229221    _appendValuePreview(element, preview)
    … …  
    233225    }
    234226};
     227
     228WebInspector.ObjectPreviewView.Mode = {
     229    Brief: Symbol("object-preview-brief"),
     230    Full: Symbol("object-preview-full"),
     231};

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

    r182047 r182055  
    2424 */
    2525
    26 WebInspector.ObjectTreeView = function(object, mode, propertyPath, forceExpanding)
     26WebInspector.ObjectTreeView = class ObjectTreeView extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     console.assert(object instanceof WebInspector.RemoteObject);
    32     console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
    33 
    34     this._object = object;
    35     this._mode = mode || WebInspector.ObjectTreeView.defaultModeForObject(object);
    36     this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
    37     this._expanded = false;
    38     this._hasLosslessPreview = false;
    39 
    40     // If ObjectTree is used outside of the console, we do not know when to release
    41     // WeakMap entries. Currently collapse would work. For the console, we can just
    42     // listen for console clear events. Currently all ObjectTrees are in the console.
    43     this._inConsole = true;
    44 
    45     // Always force expanding for classes.
    46     if (this._object.isClass())
    47         forceExpanding = true;
    48 
    49     this._element = document.createElement("div");
    50     this._element.className = "object-tree";
    51 
    52     if (this._object.preview) {
    53         this._previewView = new WebInspector.ObjectPreviewView(this._object.preview);
    54         this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
    55         this._element.appendChild(this._previewView.element);
    56 
    57         if (this._previewView.lossless && !this._propertyPath.parent && !forceExpanding) {
    58             this._hasLosslessPreview = true;
    59             this.element.classList.add("lossless-preview");
    60         }
    61     } else {
    62         this._titleElement = document.createElement("span");
    63         this._titleElement.className = "title";
    64         this._titleElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(this._object));
    65         this._titleElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
    66         this._element.appendChild(this._titleElement);
    67     }
    68 
    69     this._outlineElement = document.createElement("ol");
    70     this._outlineElement.className = "object-tree-outline";
    71     this._outline = new WebInspector.TreeOutline(this._outlineElement);
    72     this._element.appendChild(this._outlineElement);
    73 
    74     // FIXME: Support editable ObjectTrees.
    75 };
    76 
    77 WebInspector.ObjectTreeView.defaultModeForObject = function(object)
    78 {
    79     if (object.subtype === "class")
    80         return WebInspector.ObjectTreeView.Mode.ClassAPI;
    81 
    82     return WebInspector.ObjectTreeView.Mode.Properties;
    83 }
    84 
    85 WebInspector.ObjectTreeView.emptyMessageElement = function(message)
    86 {
    87     var emptyMessageElement = document.createElement("div");
    88     emptyMessageElement.className = "empty-message";
    89     emptyMessageElement.textContent = message;
    90     return emptyMessageElement;
    91 };
    92 
    93 WebInspector.ObjectTreeView.Mode = {
    94     Properties: Symbol("object-tree-properties"),      // Properties
    95     PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
    96     ClassAPI: Symbol("object-tree-class-api"),         // API view without an object instance, can not invoke getters.
    97 };
    98 
    99 WebInspector.ObjectTreeView.ComparePropertyDescriptors = function(propertyA, propertyB)
    100 {
    101     var a = propertyA.name;
    102     var b = propertyB.name;
    103 
    104     // Put __proto__ at the bottom.
    105     if (a === "__proto__")
    106         return 1;
    107     if (b === "__proto__")
    108         return -1;
    109 
    110     // Put internal properties at the top.
    111     if (a.isInternalProperty && !b.isInternalProperty)
    112         return -1;
    113     if (b.isInternalProperty && !a.isInternalProperty)
    114         return 1;
    115 
    116     // if used elsewhere make sure to
    117     //  - convert a and b to strings (not needed here, properties are all strings)
    118     //  - check if a == b (not needed here, no two properties can be the same)
    119 
    120     var diff = 0;
    121     var chunk = /^\d+|^\D+/;
    122     var chunka, chunkb, anum, bnum;
    123     while (diff === 0) {
    124         if (!a && b)
     28    constructor(object, mode, propertyPath, forceExpanding)
     29    {
     30        super();
     31
     32        console.assert(object instanceof WebInspector.RemoteObject);
     33        console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
     34
     35        this._object = object;
     36        this._mode = mode || WebInspector.ObjectTreeView.defaultModeForObject(object);
     37        this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
     38        this._expanded = false;
     39        this._hasLosslessPreview = false;
     40
     41        // If ObjectTree is used outside of the console, we do not know when to release
     42        // WeakMap entries. Currently collapse would work. For the console, we can just
     43        // listen for console clear events. Currently all ObjectTrees are in the console.
     44        this._inConsole = true;
     45
     46        // Always force expanding for classes.
     47        if (this._object.isClass())
     48            forceExpanding = true;
     49
     50        this._element = document.createElement("div");
     51        this._element.className = "object-tree";
     52
     53        if (this._object.preview) {
     54            this._previewView = new WebInspector.ObjectPreviewView(this._object.preview);
     55            this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
     56            this._element.appendChild(this._previewView.element);
     57
     58            if (this._previewView.lossless && !this._propertyPath.parent && !forceExpanding) {
     59                this._hasLosslessPreview = true;
     60                this.element.classList.add("lossless-preview");
     61            }
     62        } else {
     63            this._titleElement = document.createElement("span");
     64            this._titleElement.className = "title";
     65            this._titleElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(this._object));
     66            this._titleElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
     67            this._element.appendChild(this._titleElement);
     68        }
     69
     70        this._outlineElement = document.createElement("ol");
     71        this._outlineElement.className = "object-tree-outline";
     72        this._outline = new WebInspector.TreeOutline(this._outlineElement);
     73        this._element.appendChild(this._outlineElement);
     74
     75        // FIXME: Support editable ObjectTrees.
     76    }
     77
     78    // Static
     79
     80    static defaultModeForObject(object)
     81    {
     82        if (object.subtype === "class")
     83            return WebInspector.ObjectTreeView.Mode.ClassAPI;
     84
     85        return WebInspector.ObjectTreeView.Mode.Properties;
     86    }
     87
     88    static createEmptyMessageElement(message)
     89    {
     90        var emptyMessageElement = document.createElement("div");
     91        emptyMessageElement.className = "empty-message";
     92        emptyMessageElement.textContent = message;
     93        return emptyMessageElement;
     94    };
     95
     96    static comparePropertyDescriptors(propertyA, propertyB)
     97    {
     98        var a = propertyA.name;
     99        var b = propertyB.name;
     100
     101        // Put __proto__ at the bottom.
     102        if (a === "__proto__")
     103            return 1;
     104        if (b === "__proto__")
    125105            return -1;
    126         if (!b && a)
     106
     107        // Put internal properties at the top.
     108        if (a.isInternalProperty && !b.isInternalProperty)
     109            return -1;
     110        if (b.isInternalProperty && !a.isInternalProperty)
    127111            return 1;
    128         chunka = a.match(chunk)[0];
    129         chunkb = b.match(chunk)[0];
    130         anum = !isNaN(chunka);
    131         bnum = !isNaN(chunkb);
    132         if (anum && !bnum)
    133             return -1;
    134         if (bnum && !anum)
    135             return 1;
    136         if (anum && bnum) {
    137             diff = chunka - chunkb;
    138             if (diff === 0 && chunka.length !== chunkb.length) {
    139                 if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
    140                     return chunka.length - chunkb.length;
    141                 else
    142                     return chunkb.length - chunka.length;
    143             }
    144         } else if (chunka !== chunkb)
    145             return (chunka < chunkb) ? -1 : 1;
    146         a = a.substring(chunka.length);
    147         b = b.substring(chunkb.length);
    148     }
    149     return diff;
    150 };
    151 
    152 WebInspector.ObjectTreeView.prototype = {
    153     constructor: WebInspector.ObjectTreeView,
    154     __proto__: WebInspector.Object.prototype,
     112
     113        // if used elsewhere make sure to
     114        //  - convert a and b to strings (not needed here, properties are all strings)
     115        //  - check if a == b (not needed here, no two properties can be the same)
     116
     117        var diff = 0;
     118        var chunk = /^\d+|^\D+/;
     119        var chunka, chunkb, anum, bnum;
     120        while (diff === 0) {
     121            if (!a && b)
     122                return -1;
     123            if (!b && a)
     124                return 1;
     125            chunka = a.match(chunk)[0];
     126            chunkb = b.match(chunk)[0];
     127            anum = !isNaN(chunka);
     128            bnum = !isNaN(chunkb);
     129            if (anum && !bnum)
     130                return -1;
     131            if (bnum && !anum)
     132                return 1;
     133            if (anum && bnum) {
     134                diff = chunka - chunkb;
     135                if (diff === 0 && chunka.length !== chunkb.length) {
     136                    if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
     137                        return chunka.length - chunkb.length;
     138                    else
     139                        return chunkb.length - chunka.length;
     140                }
     141            } else if (chunka !== chunkb)
     142                return (chunka < chunkb) ? -1 : 1;
     143            a = a.substring(chunka.length);
     144            b = b.substring(chunkb.length);
     145        }
     146        return diff;
     147    };
    155148
    156149    // Public
    … …  
    159152    {
    160153        return this._object;
    161     },
     154    }
    162155
    163156    get element()
    164157    {
    165158        return this._element;
    166     },
     159    }
    167160
    168161    get treeOutline()
    169162    {
    170163        return this._outline;
    171     },
     164    }
    172165
    173166    get expanded()
    174167    {
    175168        return this._expanded;
    176     },
     169    }
    177170
    178171    expand()
    … …  
    190183
    191184        this.update();
    192     },
     185    }
    193186
    194187    collapse()
    … …  
    204197
    205198        this._untrackWeakEntries();
    206     },
     199    }
    207200
    208201    showOnlyProperties()
    … …  
    211204
    212205        this._element.classList.add("properties-only");
    213     },
     206    }
    214207
    215208    appendTitleSuffix(suffixElement)
    … …  
    219212        else
    220213            this._titleElement.appendChild(suffixElement);
    221     },
     214    }
    222215
    223216    appendExtraPropertyDescriptor(propertyDescriptor)
    … …  
    227220
    228221        this._extraProperties.push(propertyDescriptor);
    229     },
     222    }
    230223
    231224    // Protected
    … …  
    239232        else
    240233            this._object.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
    241     },
     234    }
    242235
    243236    // Private
    … …  
    248241
    249242        if (!list) {
    250             var errorMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
     243            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
    251244            this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
    252245            return;
    … …  
    254247
    255248        handler.call(this, list, this._propertyPath);
    256     },
     249    }
    257250
    258251    _updateEntries(entries, propertyPath)
    … …  
    267260
    268261        if (!this._outline.children.length) {
    269             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Entries."));
     262            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Entries."));
    270263            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    271264        }
    … …  
    276269                this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
    277270        }.bind(this));
    278     },
     271    }
    279272
    280273    _updateProperties(properties, propertyPath)
    … …  
    283276            properties = properties.concat(this._extraProperties);
    284277
    285         properties.sort(WebInspector.ObjectTreeView.ComparePropertyDescriptors);
     278        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
    286279
    287280        var isArray = this._object.isArray();
    … …  
    299292
    300293        if (!this._outline.children.length) {
    301             var emptyMessageElement = WebInspector.ObjectTreeView.emptyMessageElement(WebInspector.UIString("No Properties."));
     294            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Properties."));
    302295            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
    303296        }
    304     },
     297    }
    305298
    306299    _handlePreviewOrTitleElementClick(event)
    … …  
    315308
    316309        event.stopPropagation();
    317     },
     310    }
    318311
    319312    _trackWeakEntries()
    … …  
    332325            WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._untrackWeakEntries, this);
    333326        }
    334     },
     327    }
    335328
    336329    _untrackWeakEntries()
    … …  
    355348        // If there was a WeakMap expanded in a sub-object, we will never release those values.
    356349        // Should we attempt walking the entire tree and release weak collections?
    357     },
     350    }
    358351};
     352
     353WebInspector.ObjectTreeView.Mode = {
     354    Properties: Symbol("object-tree-properties"),      // Properties
     355    PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
     356    ClassAPI: Symbol("object-tree-class-api"),         // API view without an object instance, can not invoke getters.
     357};

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

    r181769 r182055  
    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.QuickConsole = function(element)
     26WebInspector.QuickConsole = class QuickConsole extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
    32 
    33     var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
    34     this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
    35     this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
    36 
    37     this._otherExecutionContextPathComponents = [];
    38     this._frameIdentifierToExecutionContextPathComponentMap = {};
    39 
    40     this._element = element || document.createElement("div");
    41     this._element.classList.add(WebInspector.QuickConsole.StyleClassName);
    42 
    43     this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
    44     this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
    45     this._element.appendChild(this.prompt.element);
    46 
    47     // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
    48     // Our keyboard shortcut above will respect the default prevented and ignore the event
    49     // and not toggle the console. Install our own Escape key handler that will trigger
    50     // when the ConsolePrompt is empty, to restore toggling behavior. A better solution
    51     // would be for CodeMirror's event handler to pass if it doesn't do anything.
    52     this.prompt.escapeKeyHandlerWhenEmpty = function() { WebInspector.toggleSplitConsole(); };
    53 
    54     this.prompt.shown();
    55 
    56     this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
    57     this._element.appendChild(this._navigationBar.element);
    58 
    59     this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
    60     this._executionContextSelectorItem.showSelectorArrows = true;
    61     this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
    62 
    63     this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
    64     this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
    65 
    66     this._rebuildExecutionContextPathComponents();
    67 
    68     // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
    69     if (WebInspector.ExecutionContext.supported()) {
    70         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
    71         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
    72     } else {
    73         WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
    74         WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
    75         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
    76     }
    77 
    78     WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
    79 };
    80 
    81 WebInspector.QuickConsole.StyleClassName = "quick-console";
    82 WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
    83 WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
    84 WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
    85 WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
    86 
    87 WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
    88 WebInspector.QuickConsole.ToolbarPromptPadding = 4;
    89 WebInspector.QuickConsole.ToolbarTopBorder = 1;
    90 
    91 WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
    92 
    93 WebInspector.QuickConsole.Event = {
    94     DidResize: "quick-console-did-resize"
    95 };
    96 
    97 WebInspector.QuickConsole.prototype = {
    98     constructor: WebInspector.QuickConsole,
     28    constructor(element)
     29    {
     30        super();
     31
     32        this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
     33
     34        var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
     35        this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
     36        this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
     37
     38        this._otherExecutionContextPathComponents = [];
     39        this._frameIdentifierToExecutionContextPathComponentMap = {};
     40
     41        this._element = element || document.createElement("div");
     42        this._element.classList.add("quick-console");
     43
     44        this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
     45        this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
     46        this._element.appendChild(this.prompt.element);
     47
     48        // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
     49        // Our keyboard shortcut above will respect the default prevented and ignore the event
     50        // and not toggle the console. Install our own Escape key handler that will trigger
     51        // when the ConsolePrompt is empty, to restore toggling behavior. A better solution
     52        // would be for CodeMirror's event handler to pass if it doesn't do anything.
     53        this.prompt.escapeKeyHandlerWhenEmpty = function() { WebInspector.toggleSplitConsole(); };
     54
     55        this.prompt.shown();
     56
     57        this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
     58        this._element.appendChild(this._navigationBar.element);
     59
     60        this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
     61        this._executionContextSelectorItem.showSelectorArrows = true;
     62        this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
     63
     64        this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
     65        this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
     66
     67        this._rebuildExecutionContextPathComponents();
     68
     69        // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
     70        if (WebInspector.ExecutionContext.supported()) {
     71            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
     72            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
     73        } else {
     74            WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
     75            WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
     76            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
     77        }
     78
     79        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
     80    }
    9981
    10082    // Public
    … …  
    10385    {
    10486        return this._element;
    105     },
     87    }
    10688
    10789    get navigationBar()
    10890    {
    10991        return this._navigationBar;
    110     },
     92    }
    11193
    11294    get executionContextIdentifier()
    11395    {
    11496        return this._selectedExecutionContextPathComponent._executionContextIdentifier;
    115     },
    116 
    117     updateLayout: function()
     97    }
     98
     99    updateLayout()
    118100    {
    119101        // A hard maximum size of 33% of the window.
    120         const maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
     102        var maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
    121103        this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
    122     },
    123 
    124     consoleLogVisibilityChanged: function(visible)
     104    }
     105
     106    consoleLogVisibilityChanged(visible)
    125107    {
    126108        if (visible)
    … …  
    130112
    131113        this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
    132     },
     114    }
    133115
    134116    // Private
    135117
    136     _executionContextPathComponentsToDisplay: function()
     118    _executionContextPathComponentsToDisplay()
    137119    {
    138120        // If we are in the debugger the console will use the active call frame, don't show the selector.
    … …  
    145127
    146128        return [this._selectedExecutionContextPathComponent];
    147     },
    148 
    149     _rebuildExecutionContextPathComponents: function()
     129    }
     130
     131    _rebuildExecutionContextPathComponents()
    150132    {
    151133        var components = this._executionContextPathComponentsToDisplay();
    … …  
    156138        this._executionContextSelectorItem.hidden = isEmpty;
    157139        this._executionContextSelectorDivider.hidden = isEmpty;
    158     },
    159 
    160     _framePageExecutionContextsChanged: function(event)
     140    }
     141
     142    _framePageExecutionContextsChanged(event)
    161143    {
    162144        var frame = event.target;
    … …  
    171153            this._rebuildExecutionContextPathComponents();
    172154        }
    173     },
    174 
    175     _frameExecutionContextsCleared: function(event)
     155    }
     156
     157    _frameExecutionContextsCleared(event)
    176158    {
    177159        var frame = event.target;
    … …  
    188170
    189171        this._removeExecutionContextPathComponentForFrame(frame);
    190     },
    191 
    192     _frameAdded: function(event)
     172    }
     173
     174    _frameAdded(event)
    193175    {
    194176        var frame = event.data.frame;
    195177        this._insertExecutionContextPathComponentForFrame(frame);
    196     },
    197 
    198     _frameRemoved: function(event)
     178    }
     179
     180    _frameRemoved(event)
    199181    {
    200182        var frame = event.data.frame;
    201183        this._removeExecutionContextPathComponentForFrame(frame);
    202     },
    203 
    204     _frameMainResourceChanged: function(event)
     184    }
     185
     186    _frameMainResourceChanged(event)
    205187    {
    206188        var frame = event.target;
    207189        this._updateExecutionContextPathComponentForFrame(frame);
    208     },
    209 
    210     _createExecutionContextPathComponent: function(name, identifier)
     190    }
     191
     192    _createExecutionContextPathComponent(name, identifier)
    211193    {
    212194        var pathComponent = new WebInspector.HierarchicalPathComponent(name, "execution-context", identifier, true, true);
    … …  
    216198        pathComponent._executionContextIdentifier = identifier;
    217199        return pathComponent;
    218     },
    219 
    220     _createExecutionContextPathComponentFromFrame: function(frame)
     200    }
     201
     202    _createExecutionContextPathComponentFromFrame(frame)
    221203    {
    222204        var name = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
    … …  
    227209
    228210        return pathComponent;
    229     },
    230 
    231     _compareExecutionContextPathComponents: function(a, b)
     211    }
     212
     213    _compareExecutionContextPathComponents(a, b)
    232214    {
    233215        // "Main Frame" always on top.
    … …  
    244226
    245227        return a.displayName.localeCompare(b.displayName);
    246     },
    247 
    248     _insertExecutionContextPathComponentForFrame: function(frame, skipRebuild)
     228    }
     229
     230    _insertExecutionContextPathComponentForFrame(frame, skipRebuild)
    249231    {
    250232        if (frame.isMainFrame())
    … …  
    277259
    278260        return executionContextPathComponent;
    279     },
    280 
    281     _removeExecutionContextPathComponentForFrame: function(frame, skipRebuild)
     261    }
     262
     263    _removeExecutionContextPathComponentForFrame(frame, skipRebuild)
    282264    {
    283265        if (frame.isMainFrame())
    … …  
    307289        if (!skipRebuild)
    308290            this._rebuildExecutionContextPathComponents();
    309     },
    310 
    311     _updateExecutionContextPathComponentForFrame: function(frame)
     291    }
     292
     293    _updateExecutionContextPathComponentForFrame(frame)
    312294    {
    313295        if (frame.isMainFrame())
    … …  
    327309
    328310        this._rebuildExecutionContextPathComponents();
    329     },
    330 
    331     _pathComponentSelected: function(event)
     311    }
     312
     313    _pathComponentSelected(event)
    332314    {
    333315        if (event.data.pathComponent === this._selectedExecutionContextPathComponent)
    … …  
    337319
    338320        this._rebuildExecutionContextPathComponents();
    339     },
    340 
    341     _pathComponentClicked: function(event)
     321    }
     322
     323    _pathComponentClicked(event)
    342324    {
    343325        this.prompt.focus();
    344     },
    345 
    346     _debuggerActiveCallFrameDidChange: function(event)
     326    }
     327
     328    _debuggerActiveCallFrameDidChange(event)
    347329    {
    348330        this._rebuildExecutionContextPathComponents();
    349     },
    350 
    351     _toggleOrFocus: function(event)
     331    }
     332
     333    _toggleOrFocus(event)
    352334    {
    353335        if (this.prompt.focused)
    … …  
    358340};
    359341
    360 WebInspector.QuickConsole.prototype.__proto__ = WebInspector.Object.prototype;
     342WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
     343WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
     344WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
     345WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
     346
     347WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
     348WebInspector.QuickConsole.ToolbarPromptPadding = 4;
     349WebInspector.QuickConsole.ToolbarTopBorder = 1;
     350
     351WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
     352
     353WebInspector.QuickConsole.Event = {
     354    DidResize: "quick-console-did-resize"
     355};

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

    r173466 r182055  
    11/*
     2 * Copyright (C) 2015 Apple Inc. All rights reserved.
    23 * Copyright (C) 2014 University of Washington. All rights reserved.
    34 *
    … …  
    2425 */
    2526
    26 WebInspector.ReplayDashboardView = function(representedObject)
     27WebInspector.ReplayDashboardView = class ReplayDashboardView extends WebInspector.DashboardView
    2728{
    28     WebInspector.DashboardView.call(this, representedObject, "replay");
     29    constructor(representedObject)
     30    {
     31        super(representedObject, "replay");
    2932
    30     this._navigationBar = new WebInspector.NavigationBar;
    31     this.element.appendChild(this._navigationBar.element);
     33        this._navigationBar = new WebInspector.NavigationBar;
     34        this.element.appendChild(this._navigationBar.element);
    3235
    33     this._captureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-dashboard-capture", WebInspector.UIString("Start Recording"), WebInspector.UIString("Stop Recording"), "Images/ReplayRecordingButton.svg", 16, 16);
    34     this._captureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._captureButtonItemClicked, this);
    35     this._captureButtonItem.hidden = true;
    36     this._navigationBar.addNavigationItem(this._captureButtonItem);
     36        this._captureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-dashboard-capture", WebInspector.UIString("Start Recording"), WebInspector.UIString("Stop Recording"), "Images/ReplayRecordingButton.svg", 16, 16);
     37        this._captureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._captureButtonItemClicked, this);
     38        this._captureButtonItem.hidden = true;
     39        this._navigationBar.addNavigationItem(this._captureButtonItem);
    3740
    38     this._replayButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-dashboard-replay", WebInspector.UIString("Start Playback"), WebInspector.UIString("Pause Playback"), "Images/ReplayPlayButton.svg", "Images/ReplayPauseButton.svg", 16, 16);
    39     this._replayButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayButtonItemClicked, this);
    40     this._replayButtonItem.hidden = true;
    41     this._navigationBar.addNavigationItem(this._replayButtonItem);
     41        this._replayButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-dashboard-replay", WebInspector.UIString("Start Playback"), WebInspector.UIString("Pause Playback"), "Images/ReplayPlayButton.svg", "Images/ReplayPauseButton.svg", 16, 16);
     42        this._replayButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayButtonItemClicked, this);
     43        this._replayButtonItem.hidden = true;
     44        this._navigationBar.addNavigationItem(this._replayButtonItem);
    4245
    43     // Add events required to track capture and replay state.
    44     WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
    45     WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
    46     WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackStarted, this._playbackStarted, this);
    47     WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackPaused, this._playbackPaused, this);
    48     WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackFinished, this._playbackFinished, this);
     46        // Add events required to track capture and replay state.
     47        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
     48        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
     49        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackStarted, this._playbackStarted, this);
     50        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackPaused, this._playbackPaused, this);
     51        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackFinished, this._playbackFinished, this);
    4952
    50     // Manually initialize style classes by querying current replay state.
    51     if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
    52         this._captureStarted();
    53     else if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
    54         this._captureStopped();
    55     // ReplayManager.sessionState must be Replaying.
    56     else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
    57         this._playbackStarted();
    58     // ReplayManager.sessionState must be Unloaded or Loaded, so execution is paused.
    59     else
    60         this._playbackPaused();
    61 };
    62 
    63 // Class names for top-level flex items within the replay dashboard.
    64 WebInspector.ReplayDashboardView.RecordingContainerStyleClassName = "recording-container";
    65 
    66 // Class names for single buttons.
    67 WebInspector.ReplayDashboardView.RecordButtonStyleClassName = "record-button";
    68 WebInspector.ReplayDashboardView.ReplayButtonStyleClassName = "replay-button";
    69 
    70 WebInspector.ReplayDashboardView.prototype = {
    71     constructor: WebInspector.ReplayDashboardView,
    72     __proto__: WebInspector.DashboardView.prototype,
    73 
     53        // Manually initialize style classes by querying current replay state.
     54        if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
     55            this._captureStarted();
     56        else if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
     57            this._captureStopped();
     58        // ReplayManager.sessionState must be Replaying.
     59        else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
     60            this._playbackStarted();
     61        // ReplayManager.sessionState must be Unloaded or Loaded, so execution is paused.
     62        else
     63            this._playbackPaused();
     64    }
     65   
    7466    // Private
    7567
    76     _captureButtonItemClicked: function()
     68    _captureButtonItemClicked()
    7769    {
    7870        if (WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing)
    … …  
    8072        else
    8173            WebInspector.replayManager.stopCapturing();
    82     },
     74    }
    8375
    84     _replayButtonItemClicked: function(event)
     76    _replayButtonItemClicked(event)
    8577    {
    8678        console.assert(WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing, "Tried to start replaying while SessionState is Capturing!");
    … …  
    9284        else
    9385            WebInspector.replayManager.replayToCompletion();
    94     },
     86    }
    9587
    96     _captureStarted: function()
     88    _captureStarted()
    9789    {
    9890        this._captureButtonItem.hidden = false;
    9991        this._captureButtonItem.activated = true;
    10092        this._replayButtonItem.hidden = true;
    101     },
     93    }
    10294
    103     _captureStopped: function()
     95    _captureStopped()
    10496    {
    10597        this._captureButtonItem.activated = false;
    10698        this._captureButtonItem.hidden = true;
    10799        this._replayButtonItem.hidden = false;
    108     },
     100    }
    109101
    110     _playbackStarted: function()
     102    _playbackStarted()
    111103    {
    112104        this._replayButtonItem.toggled = true;
    113     },
     105    }
    114106
    115     _playbackPaused: function()
     107    _playbackPaused()
    116108    {
    117109        this._replayButtonItem.toggled = false;
    118     },
     110    }
    119111
    120     _playbackFinished: function()
     112    _playbackFinished()
    121113    {
    122114        this._replayButtonItem.toggled = false;
    123115    }
    124116};
     117
     118WebInspector.ReplayDashboardView.RecordingContainerStyleClassName = "recording-container";
     119WebInspector.ReplayDashboardView.RecordButtonStyleClassName = "record-button";
     120WebInspector.ReplayDashboardView.ReplayButtonStyleClassName = "replay-button";

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

    r180343 r182055  
    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.RulesStyleDetailsPanel = function()
     26WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebInspector.StyleDetailsPanel
    2727{
    28     WebInspector.StyleDetailsPanel.call(this, WebInspector.RulesStyleDetailsPanel.StyleClassName, "rules", WebInspector.UIString("Rules"));
    29 
    30     this._sections = [];
    31 };
    32 
    33 WebInspector.RulesStyleDetailsPanel.StyleClassName = "rules";
    34 WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName = "label";
    35 WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName = "new-rule";
    36 
    37 WebInspector.RulesStyleDetailsPanel.prototype = {
    38     constructor: WebInspector.RulesStyleDetailsPanel,
     28    constructor()
     29    {
     30        super("rules", "rules", WebInspector.UIString("Rules"));
     31
     32        this._sections = [];
     33    }
    3934
    4035    // Public
    4136
    42     refresh: function(significantChange)
     37    refresh(significantChange)
    4338    {
    4439        // We only need to do a rebuild on significant changes. Other changes are handled
    … …  
    151146            if (!this.nodeStyles.node.isInShadowTree()) {
    152147                var newRuleButton = document.createElement("div");
    153                 newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
     148                newRuleButton.className = "new-rule";
    154149                newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
    155150
    … …  
    190185
    191186                var inheritedLabel = document.createElement("div");
    192                 inheritedLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
     187                inheritedLabel.className = "label";
    193188                inheritedLabel.appendChild(prefixElement);
    194189                inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
    … …  
    213208
    214209                    var mediaLabel = document.createElement("div");
    215                     mediaLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
     210                    mediaLabel.className = "label";
    216211                    mediaLabel.appendChild(prefixElement);
    217212                    mediaLabel.appendChild(document.createTextNode(media.text));
    … …  
    245240        if (previousFocusedSection)
    246241            previousFocusedSection.focus();
    247     },
     242    }
    248243
    249244    // Protected
    250245
    251     shown: function()
     246    shown()
    252247    {
    253248        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
    … …  
    260255            section.updateLayout();
    261256        }
    262     },
    263 
    264     hidden: function()
     257    }
     258
     259    hidden()
    265260    {
    266261        WebInspector.StyleDetailsPanel.prototype.hidden.call(this);
    … …  
    270265        for (var i = 0; i < this._sections.length; ++i)
    271266            delete this._sections[i].style.__rulesSection;
    272     },
    273 
    274     widthDidChange: function()
     267    }
     268
     269    widthDidChange()
    275270    {
    276271        for (var i = 0; i < this._sections.length; ++i)
    277272            this._sections[i].updateLayout();
    278     },
     273    }
    279274
    280275    // Private
    281276
    282     _newRuleClicked: function(event)
     277    _newRuleClicked(event)
    283278    {
    284279        this._focusNextNewInspectorRule = true;
    … …  
    286281    }
    287282};
    288 
    289 WebInspector.RulesStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;

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

    r164543 r182055  
    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.StyleDetailsPanel = function(className, identifier, label)
     26WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.Object
    2727{
    28     this._element = document.createElement("div");
    29     this._element.className = className;
     28    constructor(className, identifier, label)
     29    {
     30        super();
    3031
    31     // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
    32     this.element.classList.add(WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName);
     32        this._element = document.createElement("div");
     33        this._element.className = className;
    3334
    34     this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
     35        // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
     36        this.element.classList.add("offset-sections");
    3537
    36     this._nodeStyles = null;
    37     this._visible = false;
    38 };
     38        this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
    3939
    40 WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName = "offset-sections";
    41 
    42 WebInspector.StyleDetailsPanel.prototype = {
    43     constructor: WebInspector.StyleDetailsPanel,
     40        this._nodeStyles = null;
     41        this._visible = false;
     42    }
    4443
    4544    // Public
    … …  
    4847    {
    4948        return this._element;
    50     },
     49    }
    5150
    5251    get navigationItem()
    5352    {
    5453        return this._navigationItem;
    55     },
     54    }
    5655
    5756    get nodeStyles()
    5857    {
    5958        return this._nodeStyles;
    60     },
     59    }
    6160
    62     shown: function()
     61    shown()
    6362    {
    6463        if (this._visible)
    … …  
    6867
    6968        this._refreshNodeStyles();
    70     },
     69    }
    7170
    72     hidden: function()
     71    hidden()
    7372    {
    7473        this._visible = false;
    75     },
     74    }
    7675
    77     widthDidChange: function()
     76    widthDidChange()
    7877    {
    7978        // Implemented by subclasses.
    80     },
     79    }
    8180
    82     markAsNeedsRefresh: function(domNode)
     81    markAsNeedsRefresh(domNode)
    8382    {
    8483        console.assert(domNode);
    … …  
    106105        if (this._visible)
    107106            this._refreshNodeStyles();
    108     },
     107    }
    109108
    110     refresh: function(significantChange)
     109    refresh(significantChange)
    111110    {
    112111        // Implemented by subclasses.
    113     },
     112    }
    114113
    115114    // Private
    … …  
    120119            return 0;
    121120        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
    122     },
     121    }
    123122
    124     _refreshNodeStyles: function()
     123    _refreshNodeStyles()
    125124    {
    126125        if (!this._nodeStyles)
    127126            return;
    128127        this._nodeStyles.refresh();
    129     },
     128    }
    130129
    131     _refreshPreservingScrollPosition: function(significantChange)
     130    _refreshPreservingScrollPosition(significantChange)
    132131    {
    133132        significantChange = this._forceSignificantChange || significantChange || false;
    … …  
    146145        if (this.element.parentNode)
    147146            this.element.parentNode.scrollTop = previousScrollTop;
    148     },
     147    }
    149148
    150     _nodeStylesRefreshed: function(event)
     149    _nodeStylesRefreshed(event)
    151150    {
    152151        if (this._visible)
    153152            this._refreshPreservingScrollPosition(event.data.significantChange);
    154     },
     153    }
    155154
    156     _nodeStylesNeedsRefreshed: function(event)
     155    _nodeStylesNeedsRefreshed(event)
    157156    {
    158157        if (this._visible)
    … …  
    160159    }
    161160};
    162 
    163 WebInspector.StyleDetailsPanel.prototype.__proto__ = WebInspector.Object.prototype;
Note: See TracChangeset for help on using the changeset viewer.