Changeset 182040 in webkit


Ignore:
Timestamp:
Mar 26, 2015, 4:37:45 PM (10 years ago)
Author:
timothy@apple.com
Message:

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

Reviewed by Joseph Pecoraro.

  • UserInterface/Protocol/InspectorBackend.js:
  • UserInterface/Protocol/InspectorFrontendAPI.js:

(InspectorFrontendAPI.contextMenuItemSelected): Updated to the right function path.

  • UserInterface/Views/BoxModelDetailsSectionRow.js:
  • UserInterface/Views/BreakpointActionView.js:
  • UserInterface/Views/CodeMirrorAdditions.js:
  • UserInterface/Views/ColorPicker.js:
  • UserInterface/Views/ColorWheel.js:
  • UserInterface/Views/ContextMenu.js:
  • UserInterface/Views/DOMTreeElementPathComponent.js:
  • UserInterface/Views/DetailsSection.js:
  • UserInterface/Views/DetailsSectionDataGridRow.js:
  • UserInterface/Views/DetailsSectionGroup.js:
  • UserInterface/Views/DetailsSectionPropertiesRow.js:
  • UserInterface/Views/DetailsSectionRow.js:
  • UserInterface/Views/DetailsSectionSimpleRow.js:
  • UserInterface/Views/DetailsSectionTextRow.js:
  • UserInterface/Views/EditingSupport.js:
  • UserInterface/Views/EventListenerSection.js:
  • UserInterface/Views/EventListenerSectionGroup.js:
  • UserInterface/Views/FilterBar.js:
  • UserInterface/Views/FindBanner.js:
  • UserInterface/Views/GeneralTreeElementPathComponent.js:
  • UserInterface/Views/GoToLineDialog.js:
  • UserInterface/Views/GradientSlider.js:
  • UserInterface/Views/HierarchicalPathComponent.js:
  • UserInterface/Views/HierarchicalPathNavigationItem.js:
  • UserInterface/Views/HoverMenu.js:
  • UserInterface/Views/Popover.js:
  • UserInterface/Views/ProbeSetDetailsSection.js:
  • UserInterface/Views/ResourceTimelineDataGridNodePathComponent.js:
  • UserInterface/Views/SearchBar.js:
  • UserInterface/Views/Slider.js:

Converted to ES6 ckasses.

Location:
trunk/Source/WebInspectorUI
Files:
37 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r182039 r182040  
     12015-03-26  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Convert some View classes to ES6 classes
     4        https://bugs.webkit.org/show_bug.cgi?id=143107
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Protocol/InspectorBackend.js:
     9        * UserInterface/Protocol/InspectorFrontendAPI.js:
     10        (InspectorFrontendAPI.contextMenuItemSelected): Updated to the right function path.
     11        * UserInterface/Views/BoxModelDetailsSectionRow.js:
     12        * UserInterface/Views/BreakpointActionView.js:
     13        * UserInterface/Views/CodeMirrorAdditions.js:
     14        * UserInterface/Views/ColorPicker.js:
     15        * UserInterface/Views/ColorWheel.js:
     16        * UserInterface/Views/ContextMenu.js:
     17        * UserInterface/Views/DOMTreeElementPathComponent.js:
     18        * UserInterface/Views/DetailsSection.js:
     19        * UserInterface/Views/DetailsSectionDataGridRow.js:
     20        * UserInterface/Views/DetailsSectionGroup.js:
     21        * UserInterface/Views/DetailsSectionPropertiesRow.js:
     22        * UserInterface/Views/DetailsSectionRow.js:
     23        * UserInterface/Views/DetailsSectionSimpleRow.js:
     24        * UserInterface/Views/DetailsSectionTextRow.js:
     25        * UserInterface/Views/EditingSupport.js:
     26        * UserInterface/Views/EventListenerSection.js:
     27        * UserInterface/Views/EventListenerSectionGroup.js:
     28        * UserInterface/Views/FilterBar.js:
     29        * UserInterface/Views/FindBanner.js:
     30        * UserInterface/Views/GeneralTreeElementPathComponent.js:
     31        * UserInterface/Views/GoToLineDialog.js:
     32        * UserInterface/Views/GradientSlider.js:
     33        * UserInterface/Views/HierarchicalPathComponent.js:
     34        * UserInterface/Views/HierarchicalPathNavigationItem.js:
     35        * UserInterface/Views/HoverMenu.js:
     36        * UserInterface/Views/Popover.js:
     37        * UserInterface/Views/ProbeSetDetailsSection.js:
     38        * UserInterface/Views/ResourceTimelineDataGridNodePathComponent.js:
     39        * UserInterface/Views/SearchBar.js:
     40        * UserInterface/Views/Slider.js:
     41        Converted to ES6 classes.
     42
    1432015-03-26  Timothy Hatcher  <timothy@apple.com>
    244

  • trunk/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js

    r182039 r182040  
    11/*
    22 * Copyright (C) 2011 Google Inc. All rights reserved.
    3  * Copyright (C) 2013 Apple Inc. All rights reserved.
     3 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    44 * Copyright (C) 2014 University of Washington.
    55 *
    … …  
    181181                callback.apply(null, callbackArguments);
    182182            } catch (e) {
    183                 console.error("Uncaught exception in inspector page while dispatching callback for command " + command.qualifiedName + ": ", e);
     183                console.error("Uncaught exception in inspector page while dispatching callback for command " + command.qualifiedName + ": ", e, e.stack);
    184184            }
    185185
    … …  
    233233            agent.dispatchEvent(eventName, eventArguments);
    234234        } catch (e) {
    235             console.error("Uncaught exception in inspector page while handling event " + qualifiedName + ": ", e);
     235            console.error("Uncaught exception in inspector page while handling event " + qualifiedName + ": ", e, e.stack);
    236236        }
    237237

  • trunk/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js

    r174630 r182040  
    9999    contextMenuItemSelected: function(id)
    100100    {
    101         WebInspector.contextMenuItemSelected(id);
     101        WebInspector.ContextMenu.contextMenuItemSelected(id);
    102102    },
    103103

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

    r181185 r182040  
    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.BoxModelDetailsSectionRow = function() {
    27     WebInspector.DetailsSectionRow.call(this, WebInspector.UIString("No Box Model Information"));
    28 
    29     this.element.classList.add(WebInspector.BoxModelDetailsSectionRow.StyleClassName);
    30 
    31     this._nodeStyles = null;
    32 };
    33 
    34 WebInspector.BoxModelDetailsSectionRow.StyleClassName = "box-model";
    35 WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
    36 WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
    37 
    38 WebInspector.BoxModelDetailsSectionRow.prototype = {
    39     constructor: WebInspector.BoxModelDetailsSectionRow,
     26WebInspector.BoxModelDetailsSectionRow = class BoxModelDetailsSectionRow extends WebInspector.DetailsSectionRow
     27{
     28    constructor()
     29    {
     30        super(WebInspector.UIString("No Box Model Information"));
     31
     32        this.element.classList.add(WebInspector.BoxModelDetailsSectionRow.StyleClassName);
     33
     34        this._nodeStyles = null;
     35    }
    4036
    4137    // Public
    … …  
    4440    {
    4541        return this._nodeStyles;
    46     },
     42    }
    4743
    4844    set nodeStyles(nodeStyles)
    … …  
    5147
    5248        this._refresh();
    53     },
     49    }
    5450
    5551    // Private
    5652
    57     _refresh: function()
     53    _refresh()
    5854    {
    5955        if (this._ignoreNextRefresh) {
    … …  
    6359
    6460        this._updateMetrics();
    65     },
    66 
    67     _getPropertyValueAsPx: function(style, propertyName)
     61    }
     62
     63    _getPropertyValueAsPx(style, propertyName)
    6864    {
    6965        return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
    70     },
    71 
    72     _getBox: function(computedStyle, componentName)
     66    }
     67
     68    _getBox(computedStyle, componentName)
    7369    {
    7470        var suffix = componentName === "border" ? "-width" : "";
    … …  
    7874        var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
    7975        return {left, top, right, bottom};
    80     },
    81 
    82     _highlightDOMNode: function(showHighlight, mode, event)
     76    }
     77
     78    _highlightDOMNode(showHighlight, mode, event)
    8379    {
    8480        event.stopPropagation();
    … …  
    10298                element.classList.remove("active");
    10399        }
    104     },
    105 
    106     _updateMetrics: function()
     100    }
     101
     102    _updateMetrics()
    107103    {
    108104        // Updating with computed style.
    … …  
    253249        this.hideEmptyMessage();
    254250        this.element.appendChild(metricsElement);
    255     },
    256 
    257     _startEditing: function(targetElement, box, styleProperty, computedStyle)
     251    }
     252
     253    _startEditing(targetElement, box, styleProperty, computedStyle)
    258254    {
    259255        if (WebInspector.isBeingEdited(targetElement))
    … …  
    276272
    277273        window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
    278     },
    279 
    280     _alteredFloatNumber: function(number, event)
     274    }
     275
     276    _alteredFloatNumber(number, event)
    281277    {
    282278        var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
    … …  
    302298
    303299        return result;
    304     },
    305 
    306     _handleKeyDown: function(context, styleProperty, event)
     300    }
     301
     302    _handleKeyDown(context, styleProperty, event)
    307303    {
    308304        if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
    … …  
    361357
    362358        this._applyUserInput(element, replacementString, originalValue, context, false);
    363     },
    364 
    365     _editingEnded: function(element, context)
     359    }
     360
     361    _editingEnded(element, context)
    366362    {
    367363        delete this.originalPropertyData;
    … …  
    369365        element.removeEventListener("keydown", context.keyDownHandler, false);
    370366        delete this._isEditingMetrics;
    371     },
    372 
    373     _editingCancelled: function(element, context)
     367    }
     368
     369    _editingCancelled(element, context)
    374370    {
    375371        this._editingEnded(element, context);
    376372        this._refresh();
    377     },
    378 
    379     _applyUserInput: function(element, userInput, previousContent, context, commitEditor)
     373    }
     374
     375    _applyUserInput(element, userInput, previousContent, context, commitEditor)
    380376    {
    381377        if (commitEditor && userInput === previousContent) {
    … …  
    420416        property.value = userInput;
    421417        property.add();
    422     },
    423 
    424     _editingCommitted: function(element, userInput, previousContent, context)
     418    }
     419
     420    _editingCommitted(element, userInput, previousContent, context)
    425421    {
    426422        this._editingEnded(element, context);
    … …  
    429425};
    430426
    431 WebInspector.BoxModelDetailsSectionRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
     427WebInspector.BoxModelDetailsSectionRow.StyleClassName = "box-model";
     428WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
     429WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;

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

    r181769 r182040  
    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.BreakpointActionView = function(action, delegate, omitFocus)
     26WebInspector.BreakpointActionView = class BreakpointActionView 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(action);
    32     console.assert(delegate);
    33     console.assert(DebuggerAgent.BreakpointActionType);
    34 
    35     this._action = action;
    36     this._delegate = delegate;
    37 
    38     this._element = document.createElement("div");
    39     this._element.className = "breakpoint-action-block";
    40 
    41     var header = this._element.appendChild(document.createElement("div"));
    42     header.className = "breakpoint-action-block-header";
    43 
    44     var picker = header.appendChild(document.createElement("select"));
    45     picker.addEventListener("change", this._pickerChanged.bind(this));
    46 
    47     for (var key in WebInspector.BreakpointAction.Type) {
    48         var type = WebInspector.BreakpointAction.Type[key];
    49         var option = document.createElement("option");
    50         option.textContent = WebInspector.BreakpointActionView.displayStringForType(type);
    51         option.selected = this._action.type === type;
    52         option.value = type;
    53         picker.add(option);
    54     }
    55 
    56     var appendActionButton = header.appendChild(document.createElement("button"));
    57     appendActionButton.className = "breakpoint-action-append-button";
    58     appendActionButton.addEventListener("click", this._appendActionButtonClicked.bind(this));
    59     appendActionButton.title = WebInspector.UIString("Add new breakpoint action after this action");
    60 
    61     var removeActionButton = header.appendChild(document.createElement("button"));
    62     removeActionButton.className = "breakpoint-action-remove-button";
    63     removeActionButton.addEventListener("click", this._removeAction.bind(this));
    64     removeActionButton.title = WebInspector.UIString("Remove this breakpoint action");
    65 
    66     this._bodyElement = this._element.appendChild(document.createElement("div"));
    67     this._bodyElement.className = "breakpoint-action-block-body";
    68 
    69     this._updateBody(omitFocus);
    70 };
    71 
    72 WebInspector.BreakpointActionView.displayStringForType = function(type)
    73 {
    74     switch (type) {
    75     case WebInspector.BreakpointAction.Type.Log:
    76         return WebInspector.UIString("Log Message");
    77     case WebInspector.BreakpointAction.Type.Evaluate:
    78         return WebInspector.UIString("Evaluate JavaScript");
    79     case WebInspector.BreakpointAction.Type.Sound:
    80         return WebInspector.UIString("Play Sound");
    81     case WebInspector.BreakpointAction.Type.Probe:
    82         return WebInspector.UIString("Probe Expression");
    83     default:
    84         console.assert(false);
    85         return "";
    86     }
    87 };
    88 
    89 WebInspector.BreakpointActionView.prototype = {
    90     constructor: WebInspector.BreakpointActionView,
     28    constructor(action, delegate, omitFocus)
     29    {
     30        super();
     31
     32        console.assert(action);
     33        console.assert(delegate);
     34        console.assert(DebuggerAgent.BreakpointActionType);
     35
     36        this._action = action;
     37        this._delegate = delegate;
     38
     39        this._element = document.createElement("div");
     40        this._element.className = "breakpoint-action-block";
     41
     42        var header = this._element.appendChild(document.createElement("div"));
     43        header.className = "breakpoint-action-block-header";
     44
     45        var picker = header.appendChild(document.createElement("select"));
     46        picker.addEventListener("change", this._pickerChanged.bind(this));
     47
     48        for (var key in WebInspector.BreakpointAction.Type) {
     49            var type = WebInspector.BreakpointAction.Type[key];
     50            var option = document.createElement("option");
     51            option.textContent = WebInspector.BreakpointActionView.displayStringForType(type);
     52            option.selected = this._action.type === type;
     53            option.value = type;
     54            picker.add(option);
     55        }
     56
     57        var appendActionButton = header.appendChild(document.createElement("button"));
     58        appendActionButton.className = "breakpoint-action-append-button";
     59        appendActionButton.addEventListener("click", this._appendActionButtonClicked.bind(this));
     60        appendActionButton.title = WebInspector.UIString("Add new breakpoint action after this action");
     61
     62        var removeActionButton = header.appendChild(document.createElement("button"));
     63        removeActionButton.className = "breakpoint-action-remove-button";
     64        removeActionButton.addEventListener("click", this._removeAction.bind(this));
     65        removeActionButton.title = WebInspector.UIString("Remove this breakpoint action");
     66
     67        this._bodyElement = this._element.appendChild(document.createElement("div"));
     68        this._bodyElement.className = "breakpoint-action-block-body";
     69
     70        this._updateBody(omitFocus);
     71    }
     72
     73    // Static
     74
     75    static displayStringForType(type)
     76    {
     77        switch (type) {
     78        case WebInspector.BreakpointAction.Type.Log:
     79            return WebInspector.UIString("Log Message");
     80        case WebInspector.BreakpointAction.Type.Evaluate:
     81            return WebInspector.UIString("Evaluate JavaScript");
     82        case WebInspector.BreakpointAction.Type.Sound:
     83            return WebInspector.UIString("Play Sound");
     84        case WebInspector.BreakpointAction.Type.Probe:
     85            return WebInspector.UIString("Probe Expression");
     86        default:
     87            console.assert(false);
     88            return "";
     89        }
     90    }
    9191
    9292    // Public
    … …  
    9595    {
    9696        return this._action;
    97     },
     97    }
    9898
    9999    get element()
    100100    {
    101101        return this._element;
    102     },
     102    }
    103103
    104104    // Private
    105105
    106     _pickerChanged: function(event)
     106    _pickerChanged(event)
    107107    {
    108108        var newType = event.target.value;
    … …  
    110110        this._updateBody();
    111111        this._delegate.breakpointActionViewResized(this);
    112     },
    113 
    114     _appendActionButtonClicked: function(event)
     112    }
     113
     114    _appendActionButtonClicked(event)
    115115    {
    116116        var newAction = this._action.breakpoint.createAction(WebInspector.Breakpoint.DefaultBreakpointActionType, this._action);
    117117        this._delegate.breakpointActionViewAppendActionView(this, newAction);
    118     },
    119 
    120     _removeAction: function()
     118    }
     119
     120    _removeAction()
    121121    {
    122122        this._action.breakpoint.removeAction(this._action);
    123123        this._delegate.breakpointActionViewRemoveActionView(this);
    124     },
    125 
    126     _updateBody: function(omitFocus)
     124    }
     125
     126    _updateBody(omitFocus)
    127127    {
    128128        this._bodyElement.removeChildren();
    … …  
    183183            break;
    184184        }
    185     },
    186 
    187     _logInputChanged: function(event)
     185    }
     186
     187    _logInputChanged(event)
    188188    {
    189189        this._action.data = event.target.value;
    190     },
    191 
    192     _codeMirrorBlurred: function(event)
     190    }
     191
     192    _codeMirrorBlurred(event)
    193193    {
    194194        // Throw away the expression if it's just whitespace.
    … …  
    199199        else
    200200            this._action.data = data;
    201     },
    202 
    203     _codeMirrorViewportChanged: function(event)
     201    }
     202
     203    _codeMirrorViewportChanged(event)
    204204    {
    205205        this._delegate.breakpointActionViewResized(this);
    206206    }
    207207};
    208 
    209 WebInspector.BreakpointActionView.prototype.__proto__ = WebInspector.Object.prototype;

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

    r181185 r182040  
    183183    function extendedCSSToken(stream, state)
    184184    {
    185         const hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
     185        var hexColorRegex = /#(?:[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
    186186
    187187        if (state._urlTokenize) {
    … …  
    504504
    505505        // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
    506         const colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
     506        var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
    507507
    508508        for (var lineNumber = start; lineNumber < end; ++lineNumber) {
    … …  
    569569        var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : this.lineCount();
    570570
    571         const gradientRegex = /(repeating-)?(linear|radial)-gradient\s*\(\s*/g;
     571        var gradientRegex = /(repeating-)?(linear|radial)-gradient\s*\(\s*/g;
    572572
    573573        for (var lineNumber = start; lineNumber < end; ++lineNumber) {
    … …  
    654654    // Register some extra MIME-types for CodeMirror. These are in addition to the
    655655    // ones CodeMirror already registers, like text/html, text/javascript, etc.
    656     const extraXMLTypes = ["text/xml", "text/xsl"];
     656    var extraXMLTypes = ["text/xml", "text/xsl"];
    657657    extraXMLTypes.forEach(function(type) {
    658658        CodeMirror.defineMIME(type, "xml");
    659659    });
    660660
    661     const extraHTMLTypes = ["application/xhtml+xml", "image/svg+xml"];
     661    var extraHTMLTypes = ["application/xhtml+xml", "image/svg+xml"];
    662662    extraHTMLTypes.forEach(function(type) {
    663663        CodeMirror.defineMIME(type, "htmlmixed");
    664664    });
    665665
    666     const extraJavaScriptTypes = ["text/ecmascript", "application/javascript", "application/ecmascript", "application/x-javascript",
     666    var extraJavaScriptTypes = ["text/ecmascript", "application/javascript", "application/ecmascript", "application/x-javascript",
    667667        "text/x-javascript", "text/javascript1.1", "text/javascript1.2", "text/javascript1.3", "text/jscript", "text/livescript"];
    668668    extraJavaScriptTypes.forEach(function(type) {
    … …  
    670670    });
    671671
    672     const extraJSONTypes = ["application/x-json", "text/x-json"];
     672    var extraJSONTypes = ["application/x-json", "text/x-json"];
    673673    extraJSONTypes.forEach(function(type) {
    674674        CodeMirror.defineMIME(type, {name: "javascript", json: true});

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

    r181769 r182040  
    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.ColorPicker = function()
     26WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
     28    constructor()
     29    {
     30        super();
    3031
    31     this._colorWheel = new WebInspector.ColorWheel();
    32     this._colorWheel.delegate = this;
    33     this._colorWheel.dimension = 200;
     32        this._colorWheel = new WebInspector.ColorWheel();
     33        this._colorWheel.delegate = this;
     34        this._colorWheel.dimension = 200;
    3435
    35     this._brightnessSlider = new WebInspector.Slider();
    36     this._brightnessSlider.delegate = this;
    37     this._brightnessSlider.element.classList.add("brightness");
     36        this._brightnessSlider = new WebInspector.Slider();
     37        this._brightnessSlider.delegate = this;
     38        this._brightnessSlider.element.classList.add("brightness");
    3839
    39     this._opacitySlider = new WebInspector.Slider();
    40     this._opacitySlider.delegate = this;
    41     this._opacitySlider.element.classList.add("opacity");
     40        this._opacitySlider = new WebInspector.Slider();
     41        this._opacitySlider.delegate = this;
     42        this._opacitySlider.element.classList.add("opacity");
    4243
    43     this._element = document.createElement("div");
    44     this._element.className = "color-picker";
     44        this._element = document.createElement("div");
     45        this._element.className = "color-picker";
    4546
    46     this._element.appendChild(this._colorWheel.element);
    47     this._element.appendChild(this._brightnessSlider.element);
    48     this._element.appendChild(this._opacitySlider.element);
     47        this._element.appendChild(this._colorWheel.element);
     48        this._element.appendChild(this._brightnessSlider.element);
     49        this._element.appendChild(this._opacitySlider.element);
    4950
    50     this._opacity = 0;
    51     this._opacityPattern = "url(Images/Checkers.svg)";
     51        this._opacity = 0;
     52        this._opacityPattern = "url(Images/Checkers.svg)";
    5253
    53     this._color = "white";
    54 };
    55 
    56 WebInspector.ColorPicker.Event = {
    57     ColorChanged: "css-color-picker-color-changed"
    58 };
    59 
    60 WebInspector.ColorPicker.prototype = {
    61     contructor: WebInspector.ColorPicker,
    62     __proto__: WebInspector.Object.prototype,
     54        this._color = "white";
     55    }
    6356
    6457    // Public
    … …  
    6760    {
    6861        return this._element;
    69     },
     62    }
    7063
    7164    set brightness(brightness)
    … …  
    7871        this._updateColor();
    7972        this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
    80     },
     73    }
    8174
    8275    set opacity(opacity)
    … …  
    8780        this._opacity = opacity;
    8881        this._updateColor();
    89     },
     82    }
    9083
    9184    get colorWheel()
    9285    {
    9386        return this._colorWheel;
    94     },
     87    }
    9588
    9689    get color()
    9790    {
    9891        return this._color;
    99     },
     92    }
    10093
    10194    set color(color)
    … …  
    112105
    113106        delete this._dontUpdateColor;
    114     },
     107    }
    115108
    116     colorWheelColorDidChange: function(colorWheel)
     109    colorWheelColorDidChange(colorWheel)
    117110    {
    118111        this._updateColor();
    119112        this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
    120     },
     113    }
    121114
    122     sliderValueDidChange: function(slider, value)
     115    sliderValueDidChange(slider, value)
    123116    {
    124117        if (slider === this._opacitySlider)
    … …  
    126119        else if (slider === this._brightnessSlider)
    127120            this.brightness = value;
    128     },
     121    }
    129122
    130123    // Private
    131124
    132     _updateColor: function()
     125    _updateColor()
    133126    {
    134127        if (this._dontUpdateColor)
    … …  
    145138        this._color = new WebInspector.Color(this._colorFormat, components);
    146139        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
    147     },
     140    }
    148141
    149     _updateSliders: function(rawColor, tintedColor)
     142    _updateSliders(rawColor, tintedColor)
    150143    {
    151144        var rgb = this._colorWheel.tintedColor.rgb;
    … …  
    157150    }
    158151};
     152
     153WebInspector.ColorPicker.Event = {
     154    ColorChanged: "css-color-picker-color-changed"
     155};

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

    r181769 r182040  
    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.ColorWheel = function()
     26WebInspector.ColorWheel = class ColorWheel extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
    30 
    31     this._rawCanvas = document.createElement("canvas");
    32     this._tintedCanvas = document.createElement("canvas");
    33     this._finalCanvas = document.createElement("canvas");
    34 
    35     this._crosshair = document.createElement("div");
    36     this._crosshair.className = "crosshair";
    37 
    38     this._element = document.createElement("div");
    39     this._element.className = "color-wheel";
    40 
    41     this._element.appendChild(this._finalCanvas);
    42     this._element.appendChild(this._crosshair);
    43 
    44     this._finalCanvas.addEventListener("mousedown", this);
    45 };
    46 
    47 WebInspector.ColorWheel.prototype = {
    48     contructor: WebInspector.ColorWheel,
    49     __proto__: WebInspector.Object.prototype,
     28    constructor()
     29    {
     30        super();
     31
     32        this._rawCanvas = document.createElement("canvas");
     33        this._tintedCanvas = document.createElement("canvas");
     34        this._finalCanvas = document.createElement("canvas");
     35
     36        this._crosshair = document.createElement("div");
     37        this._crosshair.className = "crosshair";
     38
     39        this._element = document.createElement("div");
     40        this._element.className = "color-wheel";
     41
     42        this._element.appendChild(this._finalCanvas);
     43        this._element.appendChild(this._crosshair);
     44
     45        this._finalCanvas.addEventListener("mousedown", this);
     46    }
    5047
    5148    // Public
    … …  
    6663        this._drawRawCanvas();
    6764        this._draw();
    68     },
     65    }
    6966
    7067    get element()
    7168    {
    7269        return this._element;
    73     },
     70    }
    7471
    7572    get brightness()
    7673    {
    7774        return this._brightness;
    78     },
     75    }
    7976
    8077    set brightness(brightness)
    … …  
    8279        this._brightness = brightness;
    8380        this._draw();
    84     },
     81    }
    8582
    8683    get tintedColor()
    … …  
    9087
    9188        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
    92     },
     89    }
    9390
    9491    set tintedColor(tintedColor)
    … …  
    9794        this._setCrosshairPosition(data.point);
    9895        this.brightness = data.brightness;
    99     },
     96    }
    10097
    10198    get rawColor()
    … …  
    105102
    106103        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
    107     },
     104    }
    108105
    109106    // Protected
    110107
    111     handleEvent: function(event)
     108    handleEvent(event)
    112109    {
    113110        switch (event.type) {
    … …  
    122119            break;
    123120        }
    124     },
     121    }
    125122
    126123    // Private
    127124
    128     _handleMousedown: function(event)
     125    _handleMousedown(event)
    129126    {
    130127        window.addEventListener("mousemove", this, true);
    … …  
    132129
    133130        this._updateColorForMouseEvent(event);
    134     },
    135 
    136     _handleMousemove: function(event)
     131    }
     132
     133    _handleMousemove(event)
    137134    {
    138135        this._updateColorForMouseEvent(event);
    139     },
    140 
    141     _handleMouseup: function(event)
     136    }
     137
     138    _handleMouseup(event)
    142139    {
    143140        window.removeEventListener("mousemove", this, true);
    144141        window.removeEventListener("mouseup", this, true);
    145     },
    146 
    147     _pointInCircleForEvent: function(event)
     142    }
     143
     144    _pointInCircleForEvent(event)
    148145    {
    149146        function distance(a, b)
    … …  
    170167        }
    171168        return point;
    172     },
    173 
    174     _updateColorForMouseEvent: function(event)
     169    }
     170
     171    _updateColorForMouseEvent(event)
    175172    {
    176173        var point = this._pointInCircleForEvent(event);
    … …  
    180177        if (this.delegate && typeof this.delegate.colorWheelColorDidChange === "function")
    181178            this.delegate.colorWheelColorDidChange(this);
    182     },
    183 
    184     _setCrosshairPosition: function(point)
     179    }
     180
     181    _setCrosshairPosition(point)
    185182    {
    186183        this._crosshairPosition = point;
    187184        this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
    188     },
    189 
    190     _tintedColorToPointAndBrightness: function(color)
     185    }
     186
     187    _tintedColorToPointAndBrightness(color)
    191188    {
    192189        var rgb = color.rgb;
    … …  
    201198            brightness: hsv[2]
    202199        };
    203     },
    204 
    205     _drawRawCanvas: function() {
     200    }
     201
     202    _drawRawCanvas() {
    206203        var ctx = this._rawCanvas.getContext("2d");
    207204
    … …  
    226223        }
    227224        ctx.putImageData(imageData, 0, 0);
    228     },
    229 
    230     _colorAtPointWithBrightness: function(x, y, brightness)
     225    }
     226
     227    _colorAtPointWithBrightness(x, y, brightness)
    231228    {
    232229        var center = this._dimension / 2 * window.devicePixelRatio;
    … …  
    250247            1
    251248        ]);
    252     },
    253 
    254     _drawTintedCanvas: function()
     249    }
     250
     251    _drawTintedCanvas()
    255252    {
    256253        var ctx = this._tintedCanvas.getContext("2d");
    … …  
    265262        }
    266263        ctx.restore();
    267     },
    268 
    269     _draw: function()
     264    }
     265
     266    _draw()
    270267    {
    271268        this._drawTintedCanvas();

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

    r173431 r182040  
    11/*
     2 * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
    23 * Copyright (C) 2009 Google Inc. All rights reserved.
    3  * Copyright (C) 2013 Apple Inc. All rights reserved.
    44 *
    55 * Redistribution and use in source and binary forms, with or without
    … …  
    3030 */
    3131
    32 WebInspector.ContextMenuItem = function(topLevelMenu, type, label, disabled, checked)
     32WebInspector.ContextMenuItem = class ContextMenuItem extends WebInspector.Object
    3333{
    34     this._type = type;
    35     this._label = label;
    36     this._disabled = disabled;
    37     this._checked = checked;
    38     this._contextMenu = topLevelMenu;
    39     if (type === "item" || type === "checkbox")
    40         this._id = topLevelMenu.nextId();
    41 };
    42 
    43 WebInspector.ContextMenuItem.prototype = {
    44     id: function()
     34    constructor(topLevelMenu, type, label, disabled, checked)
     35    {
     36        super();
     37
     38        this._type = type;
     39        this._label = label;
     40        this._disabled = disabled;
     41        this._checked = checked;
     42        this._contextMenu = topLevelMenu || this;
     43
     44        if (type === "item" || type === "checkbox")
     45            this._id = topLevelMenu.nextId();
     46    }
     47
     48    // Public
     49
     50    id()
    4551    {
    4652        return this._id;
    47     },
    48 
    49     type: function()
     53    }
     54
     55    type()
    5056    {
    5157        return this._type;
    52     },
    53 
    54     isEnabled: function()
     58    }
     59
     60    isEnabled()
    5561    {
    5662        return !this._disabled;
    57     },
    58 
    59     setEnabled: function(enabled)
     63    }
     64
     65    setEnabled(enabled)
    6066    {
    6167        this._disabled = !enabled;
    62     },
    63 
    64     _buildDescriptor: function()
     68    }
     69
     70    // Private
     71
     72    _buildDescriptor()
    6573    {
    6674        switch (this._type) {
    … …  
    7583};
    7684
    77 WebInspector.ContextSubMenuItem = function(topLevelMenu, label, disabled)
     85WebInspector.ContextSubMenuItem = class ContextSubMenuItem extends WebInspector.ContextMenuItem
    7886{
    79     WebInspector.ContextMenuItem.call(this, topLevelMenu, "subMenu", label, disabled);
    80     this._items = [];
    81 };
    82 
    83 WebInspector.ContextSubMenuItem.prototype = {
    84     appendItem: function(label, handler, disabled)
     87    constructor(topLevelMenu, label, disabled)
     88    {
     89        super(topLevelMenu, "subMenu", label, disabled);
     90
     91        this._items = [];
     92    }
     93
     94    // Public
     95
     96    appendItem(label, handler, disabled)
    8597    {
    8698        var item = new WebInspector.ContextMenuItem(this._contextMenu, "item", label, disabled);
    … …  
    88100        this._contextMenu._setHandler(item.id(), handler);
    89101        return item;
    90     },
    91 
    92     appendSubMenuItem: function(label, disabled)
     102    }
     103
     104    appendSubMenuItem(label, disabled)
    93105    {
    94106        var item = new WebInspector.ContextSubMenuItem(this._contextMenu, label, disabled);
    95107        this._pushItem(item);
    96108        return item;
    97     },
    98 
    99     appendCheckboxItem: function(label, handler, checked, disabled)
     109    }
     110
     111    appendCheckboxItem(label, handler, checked, disabled)
    100112    {
    101113        var item = new WebInspector.ContextMenuItem(this._contextMenu, "checkbox", label, disabled, checked);
    … …  
    103115        this._contextMenu._setHandler(item.id(), handler);
    104116        return item;
    105     },
    106 
    107     appendSeparator: function()
     117    }
     118
     119    appendSeparator()
    108120    {
    109121        if (this._items.length)
    110122            this._pendingSeparator = true;
    111     },
    112 
    113     _pushItem: function(item)
     123    }
     124
     125    _pushItem(item)
    114126    {
    115127        if (this._pendingSeparator) {
    … …  
    118130        }
    119131        this._items.push(item);
    120     },
    121 
    122     isEmpty: function()
     132    }
     133
     134    isEmpty()
    123135    {
    124136        return !this._items.length;
    125     },
    126 
    127     _buildDescriptor: function()
     137    }
     138
     139    _buildDescriptor()
    128140    {
    129141        var result = { type: "subMenu", label: this._label, enabled: !this._disabled, subItems: [] };
    … …  
    131143            result.subItems.push(this._items[i]._buildDescriptor());
    132144        return result;
    133     },
    134 
    135     __proto__: WebInspector.ContextMenuItem.prototype
     145    }
    136146};
    137147
    138 WebInspector.ContextMenu = function(event) {
    139     WebInspector.ContextSubMenuItem.call(this, this, "");
    140     this._event = event;
    141     this._handlers = {};
    142     this._id = 0;
    143 };
    144 
    145 WebInspector.ContextMenu.prototype = {
     148WebInspector.ContextMenu = class ContextMenu extends WebInspector.ContextSubMenuItem
     149{
     150    constructor(event)
     151    {
     152        super(null, "");
     153
     154        this._event = event;
     155        this._handlers = {};
     156        this._id = 0;
     157    }
     158
     159    // Static
     160
     161    static contextMenuItemSelected(id)
     162    {
     163        if (WebInspector.ContextMenu._lastContextMenu)
     164            WebInspector.ContextMenu._lastContextMenu._itemSelected(id);
     165    }
     166
     167    static contextMenuCleared()
     168    {
     169        // FIXME: Unfortunately, contextMenuCleared is invoked between show and item selected
     170        // so we can't delete last menu object from WebInspector. Fix the contract.
     171    }
    146172
    147173    // Public
    148174
    149     nextId: function()
     175    nextId()
    150176    {
    151177        return this._id++;
    152     },
    153 
    154     show: function()
     178    }
     179
     180    show()
    155181    {
    156182        console.assert(this._event instanceof MouseEvent);
    … …  
    159185
    160186        if (menuObject.length) {
    161             WebInspector._contextMenu = this;
     187            WebInspector.ContextMenu._lastContextMenu = this;
     188
    162189            if (this._event.type !== "contextmenu" && typeof InspectorFrontendHost.dispatchEventAsContextMenuEvent === "function") {
    163190                this._menuObject = menuObject;
    … …  
    167194                InspectorFrontendHost.showContextMenu(this._event, menuObject);
    168195        }
     196
    169197        if (this._event)
    170198            this._event.stopImmediatePropagation();
    171     },
     199    }
    172200
    173201    // Protected
    174202
    175     handleEvent: function(event)
     203    handleEvent(event)
    176204    {
    177205        this._event.target.removeEventListener("contextmenu", this, true);
    … …  
    180208
    181209        event.stopImmediatePropagation();
    182     },
     210    }
    183211
    184212    // Private
    185213
    186     _setHandler: function(id, handler)
     214    _setHandler(id, handler)
    187215    {
    188216        if (handler)
    189217            this._handlers[id] = handler;
    190     },
    191 
    192     _buildDescriptor: function()
     218    }
     219
     220    _buildDescriptor()
    193221    {
    194222        var result = [];
    … …  
    196224            result.push(this._items[i]._buildDescriptor());
    197225        return result;
    198     },
    199 
    200     _itemSelected: function(id)
     226    }
     227
     228    _itemSelected(id)
    201229    {
    202230        if (this._handlers[id])
    203231            this._handlers[id].call(this);
    204     },
    205 
    206     appendApplicableItems: function(target)
    207     {
    208         for (var i = 0; i < WebInspector.ContextMenu._providers.length; ++i) {
    209             var provider = WebInspector.ContextMenu._providers[i];
    210             this.appendSeparator();
    211             provider.appendApplicableItems(this._event, this, target);
    212             this.appendSeparator();
    213         }
    214     },
    215 
    216     __proto__: WebInspector.ContextSubMenuItem.prototype
     232    }
    217233};
    218 
    219 WebInspector.ContextMenu.Provider = function()
    220 {
    221 };
    222 
    223 WebInspector.ContextMenu.Provider.prototype = {
    224     appendApplicableItems: function(event, contextMenu, target) { }
    225 };
    226 
    227 WebInspector.ContextMenu.registerProvider = function(provider)
    228 {
    229     WebInspector.ContextMenu._providers.push(provider);
    230 };
    231 
    232 WebInspector.ContextMenu._providers = [];
    233 
    234 WebInspector.contextMenuItemSelected = function(id)
    235 {
    236     if (WebInspector._contextMenu)
    237         WebInspector._contextMenu._itemSelected(id);
    238 };
    239 
    240 WebInspector.contextMenuCleared = function()
    241 {
    242     // FIXME: Unfortunately, contextMenuCleared is invoked between show and item selected
    243     // so we can't delete last menu object from WebInspector. Fix the contract.
    244 };

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

    r174687 r182040  
    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.DOMTreeElementPathComponent = function(domTreeElement, representedObject) {
    27     var node = domTreeElement.representedObject;
     26WebInspector.DOMTreeElementPathComponent = class DOMTreeElementPathComponent extends WebInspector.HierarchicalPathComponent
     27{
     28    constructor(domTreeElement, representedObject)
     29    {
     30        var node = domTreeElement.representedObject;
    2831
    29     var title = null;
    30     var className = null;
     32        var title = null;
     33        var className = null;
    3134
    32     switch (node.nodeType()) {
    33     case Node.ELEMENT_NODE:
    34         className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
    35         title = WebInspector.displayNameForNode(node);
    36         break;
     35        switch (node.nodeType()) {
     36        case Node.ELEMENT_NODE:
     37            className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
     38            title = WebInspector.displayNameForNode(node);
     39            break;
    3740
    38     case Node.TEXT_NODE:
    39         className = WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
    40         title = "\"" + node.nodeValue().trimEnd(32) + "\"";
    41         break;
     41        case Node.TEXT_NODE:
     42            className = WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
     43            title = "\"" + node.nodeValue().trimEnd(32) + "\"";
     44            break;
    4245
    43     case Node.COMMENT_NODE:
    44         className = WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
    45         title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
    46         break;
     46        case Node.COMMENT_NODE:
     47            className = WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
     48            title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
     49            break;
    4750
    48     case Node.DOCUMENT_TYPE_NODE:
    49         className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
    50         title = "<!DOCTYPE>";
    51         break;
     51        case Node.DOCUMENT_TYPE_NODE:
     52            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
     53            title = "<!DOCTYPE>";
     54            break;
    5255
    53     case Node.DOCUMENT_NODE:
    54         className = WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName;
    55         title = node.nodeNameInCorrectCase();
    56         break;
     56        case Node.DOCUMENT_NODE:
     57            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName;
     58            title = node.nodeNameInCorrectCase();
     59            break;
    5760
    58     case Node.CDATA_SECTION_NODE:
    59         className = WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
    60         title = "<![CDATA[" + node.trimEnd(32) + "]]>";
    61         break;
     61        case Node.CDATA_SECTION_NODE:
     62            className = WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
     63            title = "<![CDATA[" + node.trimEnd(32) + "]]>";
     64            break;
    6265
    63     case Node.DOCUMENT_FRAGMENT_NODE:
    64         // FIXME: At some point we might want a different icon for this.
    65         // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
    66         className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
    67         if (node.isInShadowTree())
    68             title = WebInspector.UIString("Shadow Content");
    69         else
    70             title = WebInspector.displayNameForNode(node);
    71         break;
     66        case Node.DOCUMENT_FRAGMENT_NODE:
     67            // FIXME: At some point we might want a different icon for this.
     68            // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
     69            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
     70            if (node.isInShadowTree())
     71                title = WebInspector.UIString("Shadow Content");
     72            else
     73                title = WebInspector.displayNameForNode(node);
     74            break;
    7275
    73     case Node.PROCESSING_INSTRUCTION_NODE:
    74         // FIXME: At some point we might want a different icon for this.
    75         // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE.
    76         className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
    77         title = node.nodeNameInCorrectCase();
    78         break;
     76        case Node.PROCESSING_INSTRUCTION_NODE:
     77            // FIXME: At some point we might want a different icon for this.
     78            // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE.
     79            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
     80            title = node.nodeNameInCorrectCase();
     81            break;
    7982
    80     default:
    81         console.error("Unknown DOM node type: ", node.nodeType());
    82         className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
    83         title = node.nodeNameInCorrectCase();
     83        default:
     84            console.error("Unknown DOM node type: ", node.nodeType());
     85            className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
     86            title = node.nodeNameInCorrectCase();
     87        }
     88
     89        super(title, className, representedObject || domTreeElement.representedObject);
     90
     91        this._domTreeElement = domTreeElement;
    8492    }
    8593
    86     WebInspector.HierarchicalPathComponent.call(this, title, className, representedObject || domTreeElement.representedObject);
     94    // Public
    8795
    88     this._domTreeElement = domTreeElement;
     96    get domTreeElement()
     97    {
     98        return this._domTreeElement;
     99    }
     100
     101    get previousSibling()
     102    {
     103        if (!this._domTreeElement.previousSibling)
     104            return null;
     105        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.previousSibling);
     106    }
     107
     108    get nextSibling()
     109    {
     110        if (!this._domTreeElement.nextSibling)
     111            return null;
     112        if (this._domTreeElement.nextSibling.isCloseTag())
     113            return null;
     114        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.nextSibling);
     115    }
     116
     117    // Protected
     118
     119    mouseOver()
     120    {
     121        var nodeId = this._domTreeElement.representedObject.id;
     122        WebInspector.domTreeManager.highlightDOMNode(nodeId);
     123    }
     124
     125    mouseOut()
     126    {
     127        WebInspector.domTreeManager.hideDOMNodeHighlight();
     128    }
    89129};
    90130
    … …  
    96136WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName = "dom-character-data-icon";
    97137WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName = "dom-node-icon";
    98 
    99 WebInspector.DOMTreeElementPathComponent.prototype = {
    100     constructor: WebInspector.DOMTreeElementPathComponent,
    101 
    102     // Public
    103 
    104     get domTreeElement()
    105     {
    106         return this._domTreeElement;
    107     },
    108 
    109     get previousSibling()
    110     {
    111         if (!this._domTreeElement.previousSibling)
    112             return null;
    113         return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.previousSibling);
    114     },
    115 
    116     get nextSibling()
    117     {
    118         if (!this._domTreeElement.nextSibling)
    119             return null;
    120         if (this._domTreeElement.nextSibling.isCloseTag())
    121             return null;
    122         return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.nextSibling);
    123     },
    124 
    125     // Protected
    126 
    127     mouseOver: function()
    128     {
    129         var nodeId = this._domTreeElement.representedObject.id;
    130         WebInspector.domTreeManager.highlightDOMNode(nodeId);
    131     },
    132 
    133     mouseOut: function()
    134     {
    135         WebInspector.domTreeManager.hideDOMNodeHighlight();
    136     }
    137 };
    138 
    139 WebInspector.DOMTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;

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

    r181769 r182040  
    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.DetailsSection = function(identifier, title, groups, optionsElement, defaultCollapsedSettingValue) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.DetailsSection = class DetailsSection extends WebInspector.Object
     27{
     28    constructor(identifier, title, groups, optionsElement, defaultCollapsedSettingValue)
     29    {
     30        super();
    2931
    30     console.assert(identifier);
     32        console.assert(identifier);
    3133
    32     this._element = document.createElement("div");
    33     this._element.className = WebInspector.DetailsSection.StyleClassName;
    34     this._element.classList.add(identifier);
     34        this._element = document.createElement("div");
     35        this._element.className = WebInspector.DetailsSection.StyleClassName;
     36        this._element.classList.add(identifier);
    3537
    36     this._headerElement = document.createElement("div");
    37     this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
    38     this._headerElement.className = WebInspector.DetailsSection.HeaderElementStyleClassName;
    39     this._element.appendChild(this._headerElement);
     38        this._headerElement = document.createElement("div");
     39        this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
     40        this._headerElement.className = WebInspector.DetailsSection.HeaderElementStyleClassName;
     41        this._element.appendChild(this._headerElement);
    4042
    41     if (optionsElement instanceof HTMLElement) {
    42         this._optionsElement = optionsElement;
    43         this._optionsElement.addEventListener("mousedown", this._optionsElementMouseDown.bind(this));
    44         this._optionsElement.addEventListener("mouseup", this._optionsElementMouseUp.bind(this));
    45         this._headerElement.appendChild(this._optionsElement);
     43        if (optionsElement instanceof HTMLElement) {
     44            this._optionsElement = optionsElement;
     45            this._optionsElement.addEventListener("mousedown", this._optionsElementMouseDown.bind(this));
     46            this._optionsElement.addEventListener("mouseup", this._optionsElementMouseUp.bind(this));
     47            this._headerElement.appendChild(this._optionsElement);
     48        }
     49
     50        this._titleElement = document.createElement("span");
     51        this._headerElement.appendChild(this._titleElement);
     52
     53        this._contentElement = document.createElement("div");
     54        this._contentElement.className = WebInspector.DetailsSection.ContentElementStyleClassName;
     55        this._element.appendChild(this._contentElement);
     56
     57        this._generateDisclosureTrianglesIfNeeded();
     58
     59        this._identifier = identifier;
     60        this.title = title;
     61        this.groups = groups || [new WebInspector.DetailsSectionGroup];
     62
     63        this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
     64        this.collapsed = this._collapsedSetting.value;
    4665    }
    47 
    48     this._titleElement = document.createElement("span");
    49     this._headerElement.appendChild(this._titleElement);
    50 
    51     this._contentElement = document.createElement("div");
    52     this._contentElement.className = WebInspector.DetailsSection.ContentElementStyleClassName;
    53     this._element.appendChild(this._contentElement);
    54 
    55     this._generateDisclosureTrianglesIfNeeded();
    56 
    57     this._identifier = identifier;
    58     this.title = title;
    59     this.groups = groups || [new WebInspector.DetailsSectionGroup];
    60 
    61     this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
    62     this.collapsed = this._collapsedSetting.value;
    63 };
    64 
    65 WebInspector.DetailsSection.StyleClassName = "details-section";
    66 WebInspector.DetailsSection.HeaderElementStyleClassName = "header";
    67 WebInspector.DetailsSection.TitleElementStyleClassName = "title";
    68 WebInspector.DetailsSection.ContentElementStyleClassName = "content";
    69 WebInspector.DetailsSection.CollapsedStyleClassName = "collapsed";
    70 WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName = "mouse-over-options-element";
    71 WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier = "details-section-disclosure-triangle-open";
    72 WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier = "details-section-disclosure-triangle-closed";
    73 WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
    74 WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix = "-active";
    75 
    76 WebInspector.DetailsSection.prototype = {
    77     constructor: WebInspector.DetailsSection,
    7866
    7967    // Public
    … …  
    8270    {
    8371        return this._element;
    84     },
     72    }
    8573
    8674    get identifier()
    8775    {
    8876        return this._identifier;
    89     },
     77    }
    9078
    9179    get title()
    9280    {
    9381        return this._titleElement.textContent;
    94     },
     82    }
    9583
    9684    set title(title)
    9785    {
    9886        this._titleElement.textContent = title;
    99     },
     87    }
    10088
    10189    get collapsed()
    10290    {
    10391        return this._element.classList.contains(WebInspector.DetailsSection.CollapsedStyleClassName);
    104     },
     92    }
    10593
    10694    set collapsed(flag)
    … …  
    112100
    113101        this._collapsedSetting.value = flag || false;
    114     },
     102    }
    115103
    116104    get groups()
    117105    {
    118106        return this._groups;
    119     },
     107    }
    120108
    121109    set groups(groups)
    … …  
    127115        for (var i = 0; i < this._groups.length; ++i)
    128116            this._contentElement.appendChild(this._groups[i].element);
    129     },
     117    }
    130118
    131119    // Private
    132120
    133     _headerElementClicked: function(event)
     121    _headerElementClicked(event)
    134122    {
    135123        if (event.target.isSelfOrDescendant(this._optionsElement))
    … …  
    139127
    140128        this._element.scrollIntoViewIfNeeded(false);
    141     },
     129    }
    142130
    143     _optionsElementMouseDown: function(event)
     131    _optionsElementMouseDown(event)
    144132    {
    145133        this._headerElement.classList.add(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
    146     },
     134    }
    147135
    148     _optionsElementMouseUp: function(event)
     136    _optionsElementMouseUp(event)
    149137    {
    150138        this._headerElement.classList.remove(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
    151     },
     139    }
    152140
    153     _generateDisclosureTrianglesIfNeeded: function()
     141    _generateDisclosureTrianglesIfNeeded()
    154142    {
    155143        if (WebInspector.DetailsSection._generatedDisclosureTriangles)
    … …  
    174162};
    175163
    176 WebInspector.DetailsSection.prototype.__proto__ = WebInspector.Object.prototype;
     164WebInspector.DetailsSection.StyleClassName = "details-section";
     165WebInspector.DetailsSection.HeaderElementStyleClassName = "header";
     166WebInspector.DetailsSection.TitleElementStyleClassName = "title";
     167WebInspector.DetailsSection.ContentElementStyleClassName = "content";
     168WebInspector.DetailsSection.CollapsedStyleClassName = "collapsed";
     169WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName = "mouse-over-options-element";
     170WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier = "details-section-disclosure-triangle-open";
     171WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier = "details-section-disclosure-triangle-closed";
     172WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
     173WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix = "-active";

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

    r164543 r182040  
    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.DetailsSectionDataGridRow = function(dataGrid, emptyMessage) {
    27     WebInspector.DetailsSectionRow.call(this, emptyMessage);
     26WebInspector.DetailsSectionDataGridRow = class DetailsSectionDataGridRow extends WebInspector.DetailsSectionRow
     27{
     28    constructor(dataGrid, emptyMessage)
     29    {
     30        super(emptyMessage);
    2831
    29     this.element.classList.add(WebInspector.DetailsSectionDataGridRow.StyleClassName);
     32        this.element.classList.add("data-grid");
    3033
    31     this.dataGrid = dataGrid;
    32 };
    33 
    34 WebInspector.DetailsSectionDataGridRow.StyleClassName = "data-grid";
    35 
    36 WebInspector.DetailsSectionDataGridRow.prototype = {
    37     constructor: WebInspector.DetailsSectionDataGridRow,
     34        this.dataGrid = dataGrid;
     35    }
    3836
    3937    // Public
    … …  
    4240    {
    4341        return this._dataGrid;
    44     },
     42    }
    4543
    4644    set dataGrid(dataGrid)
    … …  
    6058    }
    6159};
    62 
    63 WebInspector.DetailsSectionDataGridRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;

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

    r181769 r182040  
    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.DetailsSectionGroup = function(rows) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.DetailsSectionGroup = class DetailsSectionGroup extends WebInspector.Object
     27{
     28    constructor(rows)
     29    {
     30        super();
    2931
    30     this._element = document.createElement("div");
    31     this._element.className = WebInspector.DetailsSectionGroup.StyleClassName;
     32        this._element = document.createElement("div");
     33        this._element.className = "group";
    3234
    33     this.rows = rows;
    34 };
    35 
    36 WebInspector.DetailsSectionGroup.StyleClassName = "group";
    37 
    38 WebInspector.DetailsSectionGroup.prototype = {
    39     constructor: WebInspector.DetailsSectionGroup,
     35        this.rows = rows || [];
     36    }
    4037
    4138    // Public
    … …  
    4441    {
    4542        return this._element;
    46     },
     43    }
    4744
    4845    get rows()
    4946    {
    5047        return this._rows;
    51     },
     48    }
    5249
    5350    set rows(rows)
    … …  
    6158    }
    6259};
    63 
    64 WebInspector.DetailsSectionGroup.prototype.__proto__ = WebInspector.Object.prototype;

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

    r164543 r182040  
    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.DetailsSectionPropertiesRow = function(propertiesSection, emptyMessage) {
    27     WebInspector.DetailsSectionRow.call(this, emptyMessage);
     26WebInspector.DetailsSectionPropertiesRow = class DetailsSectionPropertiesRow extends WebInspector.DetailsSectionRow
     27{
     28    constructor(propertiesSection, emptyMessage)
     29    {
     30        super(emptyMessage);
    2831
    29     this.element.classList.add(WebInspector.DetailsSectionPropertiesRow.StyleClassName);
    30     this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
     32        this.element.classList.add("properties");
     33        this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
    3134
    32     this.propertiesSection = propertiesSection;
    33 };
    34 
    35 WebInspector.DetailsSectionPropertiesRow.StyleClassName = "properties";
    36 
    37 WebInspector.DetailsSectionPropertiesRow.prototype = {
    38     constructor: WebInspector.DetailsSectionPropertiesRow,
     35        this.propertiesSection = propertiesSection;
     36    }
    3937
    4038    // Public
    … …  
    4341    {
    4442        return this._propertiesSection;
    45     },
     43    }
    4644
    4745    set propertiesSection(propertiesSection)
    … …  
    5957    }
    6058};
    61 
    62 WebInspector.DetailsSectionPropertiesRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;

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

    r181769 r182040  
    2424 */
    2525
    26 WebInspector.DetailsSectionRow = function(emptyMessage) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.DetailsSectionRow = class DetailsSectionRow extends WebInspector.Object
     27{
     28    constructor(emptyMessage)
     29    {
     30        super();
    2931
    30     this._element = document.createElement("div");
    31     this._element.className = WebInspector.DetailsSectionRow.StyleClassName;
     32        this._element = document.createElement("div");
     33        this._element.className = "row";
    3234
    33     this._emptyMessage = emptyMessage || "";
    34 };
    35 
    36 WebInspector.DetailsSectionRow.StyleClassName = "row";
    37 WebInspector.DetailsSectionRow.EmptyStyleClassName = "empty";
    38 
    39 WebInspector.DetailsSectionRow.prototype = {
    40     constructor: WebInspector.DetailsSectionRow,
     35        this._emptyMessage = emptyMessage || "";
     36    }
    4137
    4238    // Public
    … …  
    4541    {
    4642        return this._element;
    47     },
     43    }
    4844
    4945    get emptyMessage()
    5046    {
    5147        return this._emptyMessage;
    52     },
     48    }
    5349
    5450    set emptyMessage(emptyMessage)
    … …  
    5854        if (!this._element.childNodes.length)
    5955            this.showEmptyMessage();
    60     },
     56    }
    6157
    62     showEmptyMessage: function()
     58    showEmptyMessage()
    6359    {
    6460        this.element.classList.add(WebInspector.DetailsSectionRow.EmptyStyleClassName);
    … …  
    6965        } else
    7066            this.element.textContent = this._emptyMessage;
    71     },
     67    }
    7268
    73     hideEmptyMessage: function()
     69    hideEmptyMessage()
    7470    {
    7571        this.element.classList.remove(WebInspector.DetailsSectionRow.EmptyStyleClassName);
    … …  
    7874};
    7975
    80 WebInspector.DetailsSectionRow.prototype.__proto__ = WebInspector.Object.prototype;
     76WebInspector.DetailsSectionRow.EmptyStyleClassName = "empty";

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

    r173433 r182040  
    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.DetailsSectionSimpleRow = function(label, value) {
    27     WebInspector.DetailsSectionRow.call(this);
     26WebInspector.DetailsSectionSimpleRow = class DetailsSectionSimpleRow extends WebInspector.DetailsSectionRow
     27{
     28    constructor(label, value)
     29    {
     30        super();
    2831
    29     this.element.classList.add(WebInspector.DetailsSectionSimpleRow.StyleClassName);
     32        this.element.classList.add("simple");
    3033
    31     this._labelElement = document.createElement("div");
    32     this._labelElement.className = WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName;
    33     this.element.appendChild(this._labelElement);
     34        this._labelElement = document.createElement("div");
     35        this._labelElement.className = WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName;
     36        this.element.appendChild(this._labelElement);
    3437
    35     this._valueElement = document.createElement("div");
    36     this._valueElement.className = WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName;
    37     this.element.appendChild(this._valueElement);
     38        this._valueElement = document.createElement("div");
     39        this._valueElement.className = WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName;
     40        this.element.appendChild(this._valueElement);
    3841
    39     // Workaround for <rdar://problem/12668870> Triple-clicking text within a
    40     // <div> set to "display: table-cell" selects text outside the cell.
    41     //
    42     // On triple-click, adjust the selection range to include only the value
    43     // element if the selection extends beyond it.
    44     var valueElementClicked = function(event) {
    45         event.stopPropagation();
     42        // Workaround for <rdar://problem/12668870> Triple-clicking text within a
     43        // <div> set to "display: table-cell" selects text outside the cell.
     44        //
     45        // On triple-click, adjust the selection range to include only the value
     46        // element if the selection extends WebInspector.beyond it.
     47        var valueElementClicked = function(event) {
     48            event.stopPropagation();
    4649
    47         if (event.detail < 3)
    48             return;
     50            if (event.detail < 3)
     51                return;
    4952
    50         var currentSelection = window.getSelection();
    51         if (!currentSelection)
    52             return;
     53            var currentSelection = window.getSelection();
     54            if (!currentSelection)
     55                return;
    5356
    54         var currentRange = currentSelection.getRangeAt(0);
    55         if (!currentRange || currentRange.startContainer === currentRange.endContainer)
    56             return;
     57            var currentRange = currentSelection.getRangeAt(0);
     58            if (!currentRange || currentRange.startContainer === currentRange.endContainer)
     59                return;
    5760
    58         var correctedRange = document.createRange();
    59         correctedRange.selectNodeContents(event.currentTarget);
    60         currentSelection.removeAllRanges();
    61         currentSelection.addRange(correctedRange);
    62     };
    63     this._valueElement.addEventListener("click", valueElementClicked);
     61            var correctedRange = document.createRange();
     62            correctedRange.selectNodeContents(event.currentTarget);
     63            currentSelection.removeAllRanges();
     64            currentSelection.addRange(correctedRange);
     65        };
     66        this._valueElement.addEventListener("click", valueElementClicked);
    6467
    65     this.label = label;
    66     this.value = value;
    67 };
    68 
    69 WebInspector.DetailsSectionSimpleRow.StyleClassName = "simple";
    70 WebInspector.DetailsSectionSimpleRow.DataStyleClassName = "data";
    71 WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName = "empty";
    72 WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName = "label";
    73 WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName = "value";
    74 
    75 WebInspector.DetailsSectionSimpleRow.prototype = {
    76     constructor: WebInspector.DetailsSectionSimpleRow,
     68        this.label = label;
     69        this.value = value;
     70    }
    7771
    7872    // Public
    … …  
    8175    {
    8276        return this._labelElement.textContent;
    83     },
     77    }
    8478
    8579    set label(label)
    8680    {
    8781        this._labelElement.textContent = label;
    88     },
     82    }
    8983
    9084    get value()
    9185    {
    9286        return this._value;
    93     },
     87    }
    9488
    9589    set value(value)
    … …  
    118112};
    119113
    120 WebInspector.DetailsSectionSimpleRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
     114WebInspector.DetailsSectionSimpleRow.DataStyleClassName = "data";
     115WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName = "empty";
     116WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName = "label";
     117WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName = "value";

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

    r175588 r182040  
    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.DetailsSectionTextRow = function(text)
     26WebInspector.DetailsSectionTextRow = class DetailsSectionTextRow extends WebInspector.DetailsSectionRow
    2727{
    28     WebInspector.DetailsSectionRow.call(this);
     28    constructor(text)
     29    {
     30        super();
    2931
    30     this.element.classList.add(WebInspector.DetailsSectionTextRow.StyleClassName);
     32        this.element.classList.add("text");
    3133
    32     this.element.textContent = text;
    33 };
    34 
    35 WebInspector.DetailsSectionTextRow.StyleClassName = "text";
    36 
    37 WebInspector.DetailsSectionTextRow.prototype = {
    38     constructor: WebInspector.DetailsSectionTextRow,
    39     __proto__: WebInspector.DetailsSectionRow.prototype,
     34        this.element.textContent = text;
     35    }
    4036
    4137    // Public
    … …  
    4440    {
    4541        return this.element.textContent;
    46     },
     42    }
    4743
    4844    set text(text)

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

    r173492 r182040  
    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
    … …  
    5858WebInspector.isEventTargetAnEditableField = function(event)
    5959{
    60     const textInputTypes = {"text": true, "search": true, "tel": true, "url": true, "email": true, "password": true};
     60    var textInputTypes = {"text": true, "search": true, "tel": true, "url": true, "email": true, "password": true};
    6161    if (event.target instanceof HTMLInputElement)
    6262        return event.target.type in textInputTypes;
    … …  
    7575};
    7676
    77 WebInspector.EditingConfig = function(commitHandler, cancelHandler, context)
    78 {
    79     this.commitHandler = commitHandler;
    80     this.cancelHandler = cancelHandler;
    81     this.context = context;
    82     this.spellcheck = false;
    83 };
    84 
    85 WebInspector.EditingConfig.prototype = {
    86     setPasteHandler: function(pasteHandler)
     77WebInspector.EditingConfig = class EditingConfig
     78{
     79    constructor(commitHandler, cancelHandler, context)
     80    {
     81        this.commitHandler = commitHandler;
     82        this.cancelHandler = cancelHandler;
     83        this.context = context;
     84        this.spellcheck = false;
     85    }
     86
     87    setPasteHandler(pasteHandler)
    8788    {
    8889        this.pasteHandler = pasteHandler;
    89     },
    90 
    91     setMultiline: function(multiline)
     90    }
     91
     92    setMultiline(multiline)
    9293    {
    9394        this.multiline = multiline;
    94     },
    95 
    96     setCustomFinishHandler: function(customFinishHandler)
     95    }
     96
     97    setCustomFinishHandler(customFinishHandler)
    9798    {
    9899        this.customFinishHandler = customFinishHandler;

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

    r173431 r182040  
    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.EventListenerSection = function(type, nodeId)
     26WebInspector.EventListenerSection = class EventListenerSection extends WebInspector.DetailsSection
    2727{
    28     WebInspector.DetailsSection.call(this, type + "-event-listener-section", type, [], null, true);
     28    constructor(type, nodeId)
     29    {
     30        super(type + "-event-listener-section", type, [], null, true);
    2931
    30     this.element.classList.add("event-listener-section");
     32        this.element.classList.add("event-listener-section");
    3133
    32     this._nodeId = nodeId;
    33 };
     34        this._nodeId = nodeId;
     35    }
    3436
    35 WebInspector.EventListenerSection.prototype = {
    36     constructor: WebInspector.EventListenerSection,
     37    // Public
    3738
    38     addListener: function(eventListener)
     39    addListener(eventListener)
    3940    {
    4041        var groups = this.groups;
    … …  
    4344    }
    4445};
    45 
    46 WebInspector.EventListenerSection.prototype.__proto__ = WebInspector.DetailsSection.prototype;

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

    r173477 r182040  
    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.EventListenerSectionGroup = function(eventListener, nodeId)
     26WebInspector.EventListenerSectionGroup = class EventListenerSectionGroup extends WebInspector.DetailsSectionGroup
    2727{
    28     this._eventListener = eventListener;
    29     this._nodeId = nodeId;
     28    constructor(eventListener, nodeId)
     29    {
     30        super();
    3031
    31     var rows = [];
    32     rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Node"), this._nodeTextOrLink()));
    33     rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Function"), this._functionTextOrLink()));
    34     rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"), this._type()));
     32        this._eventListener = eventListener;
     33        this._nodeId = nodeId;
    3534
    36     WebInspector.DetailsSectionGroup.call(this, rows);
    37 };
     35        var rows = [];
     36        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Node"), this._nodeTextOrLink()));
     37        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Function"), this._functionTextOrLink()));
     38        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"), this._type()));
     39        this.rows = rows;
     40    }
    3841
    39 WebInspector.EventListenerSectionGroup.prototype = {
    40     constructor: WebInspector.EventListenerSectionGroup,
     42    // Private
    4143
    42     _nodeTextOrLink: function()
     44    _nodeTextOrLink()
    4345    {
    4446        var node = this._eventListener.node;
    … …  
    5153
    5254        return WebInspector.linkifyNodeReference(node);
    53     },
     55    }
    5456
    55     _type: function()
     57    _type()
    5658    {
    5759        if (this._eventListener.useCapture)
    … …  
    6264
    6365        return WebInspector.UIString("Bubbling");
    64     },
     66    }
    6567
    66     _functionTextOrLink: function()
     68    _functionTextOrLink()
    6769    {
    6870        var match = this._eventListener.handlerBody.match(/function ([^\(]+?)\(/);
    … …  
    99101    }
    100102};
    101 
    102 WebInspector.EventListenerSectionGroup.prototype.__proto__ = WebInspector.DetailsSectionGroup.prototype;

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

    r181872 r182040  
    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.FilterBar = function(element) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.FilterBar = class FilterBar extends WebInspector.Object
     27{
     28    constructor(element)
     29    {
     30        super();
    2931
    30     this._element = element || document.createElement("div");
    31     this._element.classList.add(WebInspector.FilterBar.StyleClassName);
     32        this._element = element || document.createElement("div");
     33        this._element.classList.add("filter-bar");
    3234
    33     this._filtersNavigationBar = new WebInspector.NavigationBar;
    34     this._element.appendChild(this._filtersNavigationBar.element);
     35        this._filtersNavigationBar = new WebInspector.NavigationBar;
     36        this._element.appendChild(this._filtersNavigationBar.element);
    3537
    36     this._filterFunctionsMap = new Map;
     38        this._filterFunctionsMap = new Map;
    3739
    38     this._inputField = document.createElement("input");
    39     this._inputField.type = "search";
    40     this._inputField.spellcheck = false;
    41     this._inputField.incremental = true;
    42     this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
    43     this._element.appendChild(this._inputField);
    44 };
    45 
    46 // FIXME: Move to a WebInspector.Object subclass and we can remove this.
    47 WebInspector.Object.deprecatedAddConstructorFunctions(WebInspector.FilterBar);
    48 
    49 WebInspector.FilterBar.StyleClassName = "filter-bar";
    50 
    51 WebInspector.FilterBar.Event = {
    52     FilterDidChange: "filter-bar-text-filter-did-change"
    53 };
    54 
    55 WebInspector.FilterBar.prototype = {
    56     constructor: WebInspector.FilterBar,
    57     __proto__: WebInspector.Object.prototype,
     40        this._inputField = document.createElement("input");
     41        this._inputField.type = "search";
     42        this._inputField.spellcheck = false;
     43        this._inputField.incremental = true;
     44        this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
     45        this._element.appendChild(this._inputField);
     46    }
    5847
    5948    // Public
    … …  
    6251    {
    6352        return this._element;
    64     },
     53    }
    6554
    6655    get placeholder()
    6756    {
    6857        return this._inputField.getAttribute("placeholder");
    69     },
     58    }
    7059
    7160    set placeholder(text)
    7261    {
    7362        this._inputField.setAttribute("placeholder", text);
    74     },
     63    }
    7564
    7665    get inputField()
    7766    {
    7867        return this._inputField;
    79     },
     68    }
    8069
    8170    get filters()
    8271    {
    8372        return {text: this._inputField.value, functions: [...this._filterFunctionsMap.values()]};
    84     },
     73    }
    8574
    8675    set filters(filters)
    … …  
    9281        if (oldTextValue !== this._inputField.value)
    9382            this._handleFilterChanged();
    94     },
     83    }
    9584
    96     addFilterBarButton: function(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
     85    addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
    9786    {
    9887        var filterBarButton = new WebInspector.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss);
    … …  
    10493            this._handleFilterChanged();
    10594        }
    106     },
     95    }
    10796
    108     hasActiveFilters: function()
     97    hasActiveFilters()
    10998    {
    11099        return !!this._inputField.value || !!this._filterFunctionsMap.size;
    111     },
     100    }
    112101
    113102    // Private
    … …  
    117106        var filterBarButton = event.target;
    118107        filterBarButton.toggle();
    119     },
     108    }
    120109
    121     _handleFilterButtonToggled: function(event)
     110    _handleFilterButtonToggled(event)
    122111    {
    123112        var filterBarButton = event.target;
    … …  
    127116            this._filterFunctionsMap.delete(filterBarButton.identifier);
    128117        this._handleFilterChanged();
    129     },
     118    }
    130119
    131     _handleFilterChanged: function()
     120    _handleFilterChanged()
    132121    {
    133122        this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
    134123    }
    135124};
     125
     126WebInspector.FilterBar.Event = {
     127    FilterDidChange: "filter-bar-text-filter-did-change"
     128};

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

    r181769 r182040  
    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.FindBanner = function(delegate, element) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
    29 
    30     this._delegate = delegate || null;
    31 
    32     this._element = element || document.createElement("div");
    33     this._element.classList.add(WebInspector.FindBanner.StyleClassName);
    34 
    35     this._resultCountLabel = document.createElement("label");
    36     this._element.appendChild(this._resultCountLabel);
    37 
    38     this._previousResultButton = document.createElement("button");
    39     this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
    40     this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
    41     this._previousResultButton.disabled = true;
    42     this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
    43     this._element.appendChild(this._previousResultButton);
    44 
    45     var previousResultButtonGlyphElement = document.createElement("div");
    46     previousResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
    47     this._previousResultButton.appendChild(previousResultButtonGlyphElement);
    48 
    49     this._nextResultButton = document.createElement("button");
    50     this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
    51     this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
    52     this._nextResultButton.disabled = true;
    53     this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
    54     this._element.appendChild(this._nextResultButton);
    55 
    56     var nextResultButtonGlyphElement = document.createElement("div");
    57     nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
    58     this._nextResultButton.appendChild(nextResultButtonGlyphElement);
    59 
    60     this._inputField = document.createElement("input");
    61     this._inputField.type = "search";
    62     this._inputField.spellcheck = false;
    63     this._inputField.incremental = true;
    64     this._inputField.setAttribute("results", 5);
    65     this._inputField.setAttribute("autosave", "inspector-search");
    66     this._inputField.addEventListener("keydown", this._inputFieldKeyDown.bind(this), false);
    67     this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
    68     this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
    69     this._element.appendChild(this._inputField);
    70 
    71     this._doneButton = document.createElement("button");
    72     this._doneButton.textContent = WebInspector.UIString("Done");
    73     this._doneButton.addEventListener("click", this._doneButtonClicked.bind(this));
    74     this._element.appendChild(this._doneButton);
    75 
    76     this._numberOfResults = null;
    77     this._searchBackwards = false;
    78     this._searchKeyPressed = false;
    79     this._previousSearchValue = "";
    80 
    81     this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this._element);
    82     this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "E", this._populateSearchQueryFromSelection.bind(this));
    83     this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
    84     this._findNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._nextResultButtonClicked.bind(this));
    85     this._findPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._previousResultButtonClicked.bind(this));
    86 
    87     this._generateButtonsGlyphsIfNeeded();
    88 };
    89 
    90 // FIXME: Move to a WebInspector.Object subclass and we can remove this.
    91 WebInspector.Object.deprecatedAddConstructorFunctions(WebInspector.FindBanner);
    92 
    93 WebInspector.FindBanner.StyleClassName = "find-banner";
    94 WebInspector.FindBanner.SupportsFindBannerStyleClassName = "supports-find-banner";
    95 WebInspector.FindBanner.ShowingFindBannerStyleClassName = "showing-find-banner";
    96 WebInspector.FindBanner.NoTransitionStyleClassName = "no-find-banner-transition";
    97 WebInspector.FindBanner.ShowingStyleClassName = "showing";
    98 WebInspector.FindBanner.SegmentedButtonStyleClassName = "segmented";
    99 WebInspector.FindBanner.LeftSegmentButtonStyleClassName = "left";
    100 WebInspector.FindBanner.RightSegmentButtonStyleClassName = "right";
    101 WebInspector.FindBanner.SegmentGlyphStyleClassName = "glyph";
    102 
    103 WebInspector.FindBanner.Event = {
    104     DidShow: "find-banner-did-show",
    105     DidHide: "find-banner-did-hide"
    106 };
    107 
    108 WebInspector.FindBanner.prototype = {
    109     constructor: WebInspector.FindBanner,
     26WebInspector.FindBanner = class FindBanner extends WebInspector.Object
     27{
     28    constructor(delegate, element)
     29    {
     30        super();
     31
     32        this._delegate = delegate || null;
     33
     34        this._element = element || document.createElement("div");
     35        this._element.classList.add("find-banner");
     36
     37        this._resultCountLabel = document.createElement("label");
     38        this._element.appendChild(this._resultCountLabel);
     39
     40        this._previousResultButton = document.createElement("button");
     41        this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
     42        this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
     43        this._previousResultButton.disabled = true;
     44        this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
     45        this._element.appendChild(this._previousResultButton);
     46
     47        var previousResultButtonGlyphElement = document.createElement("div");
     48        previousResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
     49        this._previousResultButton.appendChild(previousResultButtonGlyphElement);
     50
     51        this._nextResultButton = document.createElement("button");
     52        this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
     53        this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
     54        this._nextResultButton.disabled = true;
     55        this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
     56        this._element.appendChild(this._nextResultButton);
     57
     58        var nextResultButtonGlyphElement = document.createElement("div");
     59        nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
     60        this._nextResultButton.appendChild(nextResultButtonGlyphElement);
     61
     62        this._inputField = document.createElement("input");
     63        this._inputField.type = "search";
     64        this._inputField.spellcheck = false;
     65        this._inputField.incremental = true;
     66        this._inputField.setAttribute("results", 5);
     67        this._inputField.setAttribute("autosave", "inspector-search");
     68        this._inputField.addEventListener("keydown", this._inputFieldKeyDown.bind(this), false);
     69        this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
     70        this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
     71        this._element.appendChild(this._inputField);
     72
     73        this._doneButton = document.createElement("button");
     74        this._doneButton.textContent = WebInspector.UIString("Done");
     75        this._doneButton.addEventListener("click", this._doneButtonClicked.bind(this));
     76        this._element.appendChild(this._doneButton);
     77
     78        this._numberOfResults = null;
     79        this._searchBackwards = false;
     80        this._searchKeyPressed = false;
     81        this._previousSearchValue = "";
     82
     83        this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this._element);
     84        this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "E", this._populateSearchQueryFromSelection.bind(this));
     85        this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
     86        this._findNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._nextResultButtonClicked.bind(this));
     87        this._findPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._previousResultButtonClicked.bind(this));
     88
     89        this._generateButtonsGlyphsIfNeeded();
     90    }
    11091
    11192    // Public
    … …  
    11495    {
    11596        return this._delegate;
    116     },
     97    }
    11798
    11899    set delegate(newDelegate)
    119100    {
    120101        this._delegate = newDelegate || null;
    121     },
     102    }
    122103
    123104    get element()
    124105    {
    125106        return this._element;
    126     },
     107    }
    127108
    128109    get inputField()
    129110    {
    130111        return this._inputField;
    131     },
     112    }
    132113
    133114    get searchQuery()
    134115    {
    135116        return this._inputField.value || "";
    136     },
     117    }
    137118
    138119    set searchQuery(query)
    139120    {
    140121        this._inputField.value = query || "";
    141     },
     122    }
    142123
    143124    get numberOfResults()
    144125    {
    145126        return this._numberOfResults;
    146     },
     127    }
    147128
    148129    set numberOfResults(numberOfResults)
    … …  
    163144        else if (numberOfResults > 1)
    164145            this._resultCountLabel.textContent = WebInspector.UIString("%d matches").format(numberOfResults);
    165     },
     146    }
    166147
    167148    get targetElement()
    168149    {
    169150        return this._targetElement;
    170     },
     151    }
    171152
    172153    set targetElement(element)
    173154    {
     155        function delayedWork()
     156        {
     157            oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
     158            this._element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
     159        }
     160
    174161        if (this._targetElement) {
    175162            var oldTargetElement = this._targetElement;
    … …  
    182169            this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
    183170
    184             function delayedWork()
    185             {
    186                 oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
    187                 this._element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
    188             }
    189 
    190171            // Delay so we can remove the no transition style class after the other style changes are committed.
    191172            setTimeout(delayedWork.bind(this), 0);
    … …  
    196177        if (this._targetElement)
    197178            this._targetElement.classList.add(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
    198     },
     179    }
    199180
    200181    get showing()
    201182    {
    202183        return this._element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
    203     },
    204 
    205     show: function()
     184    }
     185
     186    show()
    206187    {
    207188        console.assert(this._targetElement);
    … …  
    229210
    230211        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidShow);
    231     },
    232 
    233     hide: function()
     212    }
     213
     214    hide()
    234215    {
    235216        console.assert(this._targetElement);
    … …  
    243224
    244225        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidHide);
    245     },
     226    }
    246227
    247228    // Private
    248229
    249     _inputFieldKeyDown: function(event)
     230    _inputFieldKeyDown(event)
    250231    {
    251232        if (event.keyIdentifier === "Shift")
    … …  
    253234        else if (event.keyIdentifier === "Enter")
    254235            this._searchKeyPressed = true;
    255     },
    256 
    257     _inputFieldKeyUp: function(event)
     236    }
     237
     238    _inputFieldKeyUp(event)
    258239    {
    259240        if (event.keyIdentifier === "Shift")
    … …  
    261242        else if (event.keyIdentifier === "Enter")
    262243            this._searchKeyPressed = false;
    263     },
    264 
    265     _inputFieldSearch: function(event)
     244    }
     245
     246    _inputFieldSearch(event)
    266247    {
    267248        if (this._inputField.value) {
    … …  
    286267
    287268        this._previousSearchValue = this.searchQuery;
    288     },
    289 
    290     _populateSearchQueryFromSelection: function(event)
     269    }
     270
     271    _populateSearchQueryFromSelection(event)
    291272    {
    292273        if (this._delegate && typeof this._delegate.findBannerSearchQueryForSelection === "function") {
    … …  
    299280            }
    300281        }
    301     },
    302 
    303     _previousResultButtonClicked: function(event)
     282    }
     283
     284    _previousResultButtonClicked(event)
    304285    {
    305286        if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
    306287            this._delegate.findBannerRevealPreviousResult(this);
    307     },
    308 
    309     _nextResultButtonClicked: function(event)
     288    }
     289
     290    _nextResultButtonClicked(event)
    310291    {
    311292        if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
    312293            this._delegate.findBannerRevealNextResult(this);
    313     },
    314 
    315     _doneButtonClicked: function(event)
     294    }
     295
     296    _doneButtonClicked(event)
    316297    {
    317298        this.hide();
    318     },
    319 
    320     _generateButtonsGlyphsIfNeeded: function()
     299    }
     300
     301    _generateButtonsGlyphsIfNeeded()
    321302    {
    322303        if (WebInspector.FindBanner._generatedButtonsGlyphs)
    … …  
    343324};
    344325
    345 WebInspector.FindBanner.prototype.__proto__ = WebInspector.Object.prototype;
     326WebInspector.FindBanner.SupportsFindBannerStyleClassName = "supports-find-banner";
     327WebInspector.FindBanner.ShowingFindBannerStyleClassName = "showing-find-banner";
     328WebInspector.FindBanner.NoTransitionStyleClassName = "no-find-banner-transition";
     329WebInspector.FindBanner.ShowingStyleClassName = "showing";
     330WebInspector.FindBanner.SegmentedButtonStyleClassName = "segmented";
     331WebInspector.FindBanner.LeftSegmentButtonStyleClassName = "left";
     332WebInspector.FindBanner.RightSegmentButtonStyleClassName = "right";
     333WebInspector.FindBanner.SegmentGlyphStyleClassName = "glyph";
     334
     335WebInspector.FindBanner.Event = {
     336    DidShow: "find-banner-did-show",
     337    DidHide: "find-banner-did-hide"
     338};

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

    r173436 r182040  
    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.GeneralTreeElementPathComponent = function(generalTreeElement, representedObject) {
    27     WebInspector.HierarchicalPathComponent.call(this, generalTreeElement.mainTitle, generalTreeElement.classNames, representedObject || generalTreeElement.representedObject);
     26WebInspector.GeneralTreeElementPathComponent = class GeneralTreeElementPathComponent extends WebInspector.HierarchicalPathComponent
     27{
     28    constructor(generalTreeElement, representedObject)
     29    {
     30        super(generalTreeElement.mainTitle, generalTreeElement.classNames, representedObject || generalTreeElement.representedObject);
    2831
    29     this._generalTreeElement = generalTreeElement;
    30     generalTreeElement.addEventListener(WebInspector.GeneralTreeElement.Event.MainTitleDidChange, this._mainTitleDidChange, this);
    31 };
    32 
    33 WebInspector.GeneralTreeElementPathComponent.prototype = {
    34     constructor: WebInspector.GeneralTreeElementPathComponent,
     32        this._generalTreeElement = generalTreeElement;
     33        generalTreeElement.addEventListener(WebInspector.GeneralTreeElement.Event.MainTitleDidChange, this._mainTitleDidChange, this);
     34    }
    3535
    3636    // Public
    … …  
    3939    {
    4040        return this._generalTreeElement;
    41     },
     41    }
    4242
    4343    get previousSibling()
    … …  
    5151
    5252        return new WebInspector.GeneralTreeElementPathComponent(previousSibling);
    53     },
     53    }
    5454
    5555    get nextSibling()
    … …  
    6363
    6464        return new WebInspector.GeneralTreeElementPathComponent(nextSibling);
    65     },
     65    }
    6666
    6767    // Private
    6868
    69     _mainTitleDidChange: function(event)
     69    _mainTitleDidChange(event)
    7070    {
    7171        this.displayName = this._generalTreeElement.mainTitle;
    7272    }
    7373};
    74 
    75 WebInspector.GeneralTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;

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

    r181769 r182040  
    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.GoToLineDialog = function()
     26WebInspector.GoToLineDialog = class GoToLineDialog extends WebInspector.Object
    2727{
    28     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    29     // WebInspector.Object.call(this);
     28    constructor()
     29    {
     30        super();
    3031
    31     this._element = document.createElement("div");
    32     this._element.className = WebInspector.GoToLineDialog.StyleClassName;
     32        this._element = document.createElement("div");
     33        this._element.className = "go-to-line-dialog";
    3334
    34     var field = this._element.appendChild(document.createElement("div"));
     35        var field = this._element.appendChild(document.createElement("div"));
    3536
    36     this._input = field.appendChild(document.createElement("input"));
    37     this._input.type = "text";
    38     this._input.placeholder = WebInspector.UIString("Line Number");
    39     this._input.spellcheck = false;
     37        this._input = field.appendChild(document.createElement("input"));
     38        this._input.type = "text";
     39        this._input.placeholder = WebInspector.UIString("Line Number");
     40        this._input.spellcheck = false;
    4041
    41     this._clearIcon = field.appendChild(document.createElement("img"));
     42        this._clearIcon = field.appendChild(document.createElement("img"));
    4243
    43     this._input.addEventListener("input", this);
    44     this._input.addEventListener("keydown", this);
    45     this._input.addEventListener("blur", this);
    46     this._clearIcon.addEventListener("mousedown", this);
    47     this._clearIcon.addEventListener("click", this);
     44        this._input.addEventListener("input", this);
     45        this._input.addEventListener("keydown", this);
     46        this._input.addEventListener("blur", this);
     47        this._clearIcon.addEventListener("mousedown", this);
     48        this._clearIcon.addEventListener("click", this);
    4849
    49     this._dismissing = false;
    50 };
    51 
    52 WebInspector.GoToLineDialog.StyleClassName = "go-to-line-dialog";
    53 WebInspector.GoToLineDialog.NonEmptyClassName = "non-empty";
    54 
    55 WebInspector.GoToLineDialog.prototype = {
    56     constructor: WebInspector.GoToLineDialog,
    57 
    58     __proto__: WebInspector.Object.prototype,
     50        this._dismissing = false;
     51    }
    5952
    6053    // Public
    6154
    62     present: function(parent)
     55    present(parent)
    6356    {
    6457        parent.appendChild(this._element);
    6558        this._input.focus();
    6659        this._clear();
    67     },
     60    }
    6861
    69     dismiss: function()
     62    dismiss()
    7063    {
    7164        if (this._dismissing)
    … …  
    8477
    8578        this._dismissing = false;
    86     },
     79    }
    8780
    8881    // Protected
    8982
    90     handleEvent: function(event)
     83    handleEvent(event)
    9184    {
    9285        switch (event.type) {
    … …  
    107100            break;
    108101        }
    109     },
     102    }
    110103
    111104    // Private
    112105
    113     _handleInputEvent: function(event)
     106    _handleInputEvent(event)
    114107    {
    115108        if (this._input.value === "")
    … …  
    117110        else
    118111            this._element.classList.add(WebInspector.GoToLineDialog.NonEmptyClassName);
    119     },
     112    }
    120113
    121     _handleKeydownEvent: function(event)
     114    _handleKeydownEvent(event)
    122115    {
    123116        if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode) {
    … …  
    126119            else
    127120                this._clear();
     121
     122            event.preventDefault();
    128123        } else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
    129124            var value = parseInt(this._input.value, 10);
    … …  
    140135
    141136            this._input.select();
     137
    142138            InspectorFrontendHost.beep();
    143139        }
    144     },
     140    }
    145141
    146     _handleBlurEvent: function(event)
     142    _handleBlurEvent(event)
    147143    {
    148144        this.dismiss();
    149     },
     145    }
    150146
    151     _handleMousedownEvent: function(event)
     147    _handleMousedownEvent(event)
    152148    {
    153149        this._input.select();
    … …  
    155151        // which would end up dimissing the dialog, which is not the intent.
    156152        event.preventDefault();
    157     },
     153    }
    158154
    159     _handleClickEvent: function(event)
     155    _handleClickEvent(event)
    160156    {
    161157        this._clear();
    162     },
     158    }
    163159
    164     _clear: function()
     160    _clear()
    165161    {
    166162        this._input.value = "";
    … …  
    168164    }
    169165};
     166
     167WebInspector.GoToLineDialog.NonEmptyClassName = "non-empty";

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

    r181929 r182040  
    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
    … …  
    2727 */
    2828
    29 WebInspector.GradientSlider = function(delegate)
     29WebInspector.GradientSlider = class GradientSlider extends WebInspector.Object
    3030{
    31     this.delegate = delegate;
    32    
    33     this._element = null;
    34     this._stops = [];
    35     this._knobs = [];
    36    
    37     this._selectedKnob = null;
    38     this._canvas = document.createElement("canvas");
    39 
    40     this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
    41 }
    42 
    43 WebInspector.GradientSlider.Width = 238;
    44 WebInspector.GradientSlider.Height = 19;
    45 
    46 WebInspector.GradientSlider.StyleClassName = "gradient-slider";
    47 WebInspector.GradientSlider.AddAreaClassName = "add-area";
    48 WebInspector.GradientSlider.DetachingClassName = "detaching";
    49 WebInspector.GradientSlider.ShadowClassName = "shadow";
    50 
    51 WebInspector.GradientSlider.prototype = {
    52     constructor: WebInspector.GradientSlider,
     31    constructor(delegate)
     32    {
     33        super();
     34
     35        this.delegate = delegate;
     36
     37        this._element = null;
     38        this._stops = [];
     39        this._knobs = [];
     40
     41        this._selectedKnob = null;
     42        this._canvas = document.createElement("canvas");
     43
     44        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
     45    }
    5346
    5447    // Public
    … …  
    5851        if (!this._element) {
    5952            this._element = document.createElement("div");
    60             this._element.className = WebInspector.GradientSlider.StyleClassName;
     53            this._element.className = "gradient-slider";
    6154            this._element.appendChild(this._canvas);
    62            
     55
    6356            this._addArea = this._element.appendChild(document.createElement("div"));
    6457            this._addArea.addEventListener("mouseover", this);
    … …  
    6962        }
    7063        return this._element;
    71     },
     64    }
    7265
    7366    get stops()
    7467    {
    7568        return this._stops;
    76     },
     69    }
    7770
    7871    set stops(stops)
    … …  
    8174
    8275        this._updateStops();
    83     },
     76    }
    8477
    8578    get selectedStop()
    8679    {
    8780        return this._selectedKnob ? this._selectedKnob.stop : null;
    88     },
     81    }
    8982
    9083    // Protected
    9184
    92     handleEvent: function(event)
     85    handleEvent(event)
    9386    {
    9487        switch (event.type) {
    … …  
    10699            break;
    107100        }
    108     },
    109 
    110     handleKeydownEvent: function(event)
     101    }
     102
     103    handleKeydownEvent(event)
    111104    {
    112105        if (!this._keyboardShortcutEsc.matchesEvent(event) || !this._selectedKnob || !this._selectedKnob.selected)
    … …  
    116109
    117110        return true;
    118     },
    119 
    120     knobXDidChange: function(knob)
     111    }
     112
     113    knobXDidChange(knob)
    121114    {
    122115        knob.stop.offset = knob.x / WebInspector.GradientSlider.Width;
    123116        this._sortStops();
    124117        this._updateCanvas();
    125     },
    126 
    127     knobCanDetach: function(knob)
     118    }
     119
     120    knobCanDetach(knob)
    128121    {
    129122        return this._knobs.length > 2;
    130     },
    131 
    132     knobWillDetach: function(knob)
     123    }
     124
     125    knobWillDetach(knob)
    133126    {
    134127        knob.element.classList.add(WebInspector.GradientSlider.DetachingClassName);
    … …  
    138131        this._sortStops();
    139132        this._updateCanvas();
    140     },
    141 
    142     knobSelectionChanged: function(knob)
     133    }
     134
     135    knobSelectionChanged(knob)
    143136    {
    144137        if (this._selectedKnob && this._selectedKnob !== knob && knob.selected)
    … …  
    154147        else
    155148            WebInspector.removeWindowKeydownListener(this);
    156     },
     149    }
    157150
    158151    // Private
    159152
    160     _handleMouseover: function(event)
     153    _handleMouseover(event)
    161154    {
    162155        this._updateShadowKnob(event);
    163     },
    164 
    165     _handleMousemove: function(event)
     156    }
     157
     158    _handleMousemove(event)
    166159    {
    167160        this._updateShadowKnob(event);
    168     },
    169 
    170     _handleMouseout: function(event)
     161    }
     162
     163    _handleMouseout(event)
    171164    {
    172165        if (!this._shadowKnob)
    … …  
    175168        this._shadowKnob.element.remove();
    176169        delete this._shadowKnob;
    177     },
    178 
    179     _handleClick: function(event)
     170    }
     171
     172    _handleClick(event)
    180173    {
    181174        this._updateShadowKnob(event);
    … …  
    193186
    194187        delete this._shadowKnob;
    195     },
    196 
    197     _updateShadowKnob: function(event)
     188    }
     189
     190    _updateShadowKnob(event)
    198191    {
    199192        if (!this._shadowKnob) {
    … …  
    207200        var colorData = this._canvas.getContext("2d").getImageData(this._shadowKnob.x - 1, 0, 1, 1).data;
    208201        this._shadowKnob.wellColor = new WebInspector.Color(WebInspector.Color.Format.RGB, [colorData[0], colorData[1], colorData[2], colorData[3] / 255]);
    209     },
    210 
    211     _sortStops: function()
     202    }
     203
     204    _sortStops()
    212205    {
    213206        this._stops.sort(function(a, b) {
    214207            return a.offset - b.offset;
    215208        });
    216     },
    217 
    218     _updateStops: function()
     209    }
     210
     211    _updateStops()
    219212    {
    220213        this._updateCanvas();
    221214        this._updateKnobs();
    222     },
    223 
    224     _updateCanvas: function()
     215    }
     216
     217    _updateCanvas()
    225218    {
    226219        var w = WebInspector.GradientSlider.Width;
    … …  
    241234        if (this.delegate && typeof this.delegate.gradientSliderStopsDidChange === "function")
    242235            this.delegate.gradientSliderStopsDidChange(this);
    243     },
    244 
    245     _updateKnobs: function()
     236    }
     237
     238    _updateKnobs()
    246239    {
    247240        var selectedStop = this._selectedKnob ? this._selectedKnob.stop : null;
    … …  
    265258        }
    266259    }
    267 }
    268 
    269 WebInspector.GradientSliderKnob = function(delegate)
     260};
     261
     262WebInspector.GradientSlider.Width = 238;
     263WebInspector.GradientSlider.Height = 19;
     264
     265WebInspector.GradientSlider.AddAreaClassName = "add-area";
     266WebInspector.GradientSlider.DetachingClassName = "detaching";
     267WebInspector.GradientSlider.ShadowClassName = "shadow";
     268
     269WebInspector.GradientSliderKnob = class GradientSliderKnob extends WebInspector.Object
    270270{
    271     this._x = 0;
    272     this._y = 0;
    273     this._stop = null;
    274    
    275     this.delegate = delegate;
    276    
    277     this._element = document.createElement("div");
    278     this._element.className = WebInspector.GradientSliderKnob.StyleClassName;
    279 
    280     // Checkers pattern.
    281     this._element.appendChild(document.createElement("img"));
    282 
    283     this._well = this._element.appendChild(document.createElement("div"));
    284 
    285     this._element.addEventListener("mousedown", this);
    286 };
    287 
    288 WebInspector.GradientSliderKnob.StyleClassName = "gradient-slider-knob";
    289 WebInspector.GradientSliderKnob.SelectedClassName = "selected";
    290 WebInspector.GradientSliderKnob.FadeOutClassName = "fade-out";
    291 
    292 WebInspector.GradientSliderKnob.prototype = {
    293     constructor: WebInspector.GradientSliderKnob,
     271    constructor(delegate)
     272    {
     273        super();
     274
     275        this._x = 0;
     276        this._y = 0;
     277        this._stop = null;
     278
     279        this.delegate = delegate;
     280
     281        this._element = document.createElement("div");
     282        this._element.className = "gradient-slider-knob";
     283
     284        // Checkers pattern.
     285        this._element.appendChild(document.createElement("img"));
     286
     287        this._well = this._element.appendChild(document.createElement("div"));
     288
     289        this._element.addEventListener("mousedown", this);
     290    }
    294291
    295292    // Public
    … …  
    298295    {
    299296        return this._element;
    300     },
     297    }
    301298
    302299    get stop()
    303300    {
    304301        return this._stop;
    305     },
     302    }
    306303
    307304    set stop(stop)
    … …  
    309306        this.wellColor = stop.color;
    310307        this._stop = stop;
    311     },
     308    }
    312309
    313310    get x()
    314311    {
    315312        return this._x;
    316     },
     313    }
    317314   
    318315    set x(x) {
    319316        this._x = x;
    320317        this._updateTransform();
    321     },
     318    }
    322319
    323320    get y()
    324321    {
    325322        return this._x;
    326     },
     323    }
    327324   
    328325    set y(y) {
    329326        this._y = y;
    330327        this._updateTransform();
    331     },
     328    }
    332329
    333330    get wellColor()
    334331    {
    335332        return this._wellColor;
    336     },
     333    }
    337334
    338335    set wellColor(color)
    … …  
    340337        this._wellColor = color;
    341338        this._well.style.backgroundColor = color;
    342     },
     339    }
    343340
    344341    get selected()
    345342    {
    346343        return this._element.classList.contains(WebInspector.GradientSliderKnob.SelectedClassName);
    347     },
     344    }
    348345
    349346    set selected(selected)
    … …  
    356353        if (this.delegate && typeof this.delegate.knobSelectionChanged === "function")
    357354            this.delegate.knobSelectionChanged(this);
    358     },
     355    }
    359356
    360357    // Protected
    361358
    362     handleEvent: function(event)
     359    handleEvent(event)
    363360    {
    364361        event.preventDefault();
    … …  
    379376            break;
    380377        }
    381     },
     378    }
    382379
    383380    // Private
    384381
    385     _handleMousedown: function(event)
     382    _handleMousedown(event)
    386383    {
    387384        this._moved = false;
    … …  
    394391        this._startMouseX = event.pageX;
    395392        this._startMouseY = event.pageY;
    396     },
    397 
    398     _handleMousemove: function(event)
     393    }
     394
     395    _handleMousemove(event)
    399396    {
    400397        var w = WebInspector.GradientSlider.Width;
    … …  
    422419        else if (this.delegate && typeof this.delegate.knobXDidChange === "function")
    423420            this.delegate.knobXDidChange(this);
    424     },
    425 
    426     _handleMouseup: function(event)
     421    }
     422
     423    _handleMouseup(event)
    427424    {
    428425        window.removeEventListener("mousemove", this, true);
    … …  
    435432        } else if (!this._moved)
    436433            this.selected = !this.selected;
    437     },
    438 
    439     _handleTransitionEnd: function(event)
     434    }
     435
     436    _handleTransitionEnd(event)
    440437    {
    441438        this.element.removeEventListener("transitionend", this);
    442439        this.element.classList.remove(WebInspector.GradientSliderKnob.FadeOutClassName);
    443440        this.element.remove();
    444     },
    445 
    446     _updateTransform: function()
     441    }
     442
     443    _updateTransform()
    447444    {
    448445        this.element.style.webkitTransform = "translate3d(" + this._x + "px, " + this._y + "px, 0)";
    449446    }
    450 }
     447};
     448
     449WebInspector.GradientSliderKnob.SelectedClassName = "selected";
     450WebInspector.GradientSliderKnob.FadeOutClassName = "fade-out";

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

    r181769 r182040  
    2424 */
    2525
    26 WebInspector.HierarchicalPathComponent = function(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows)
     26WebInspector.HierarchicalPathComponent = class HierarchicalPathComponent 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(displayName);
    32     console.assert(styleClassNames);
    33 
    34     this._representedObject = representedObject || null;
    35 
    36     this._element = document.createElement("div");
    37     this._element.className = WebInspector.HierarchicalPathComponent.StyleClassName;
    38 
    39     if (!(styleClassNames instanceof Array))
    40         styleClassNames = [styleClassNames];
    41 
    42     for (var i = 0; i < styleClassNames.length; ++i) {
    43         if (!styleClassNames[i])
    44             continue;
    45         this._element.classList.add(styleClassNames[i]);
    46     }
    47 
    48     if (!textOnly) {
    49         this._iconElement = document.createElement("img");
    50         this._iconElement.className = WebInspector.HierarchicalPathComponent.IconElementStyleClassName;
    51         this._element.appendChild(this._iconElement);
    52     } else
    53         this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
    54 
    55     this._titleElement = document.createElement("div");
    56     this._titleElement.className = WebInspector.HierarchicalPathComponent.TitleElementStyleClassName;
    57     this._element.appendChild(this._titleElement);
    58 
    59     this._titleContentElement = document.createElement("div");
    60     this._titleContentElement.className = WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName;
    61     this._titleElement.appendChild(this._titleContentElement);
    62 
    63     this._separatorElement = document.createElement("div");
    64     this._separatorElement.className = WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName;
    65     this._element.appendChild(this._separatorElement);
    66 
    67     this._selectElement = document.createElement("select");
    68     this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this));
    69     this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this));
    70     this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this));
    71     this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this));
    72     this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
    73     this._element.appendChild(this._selectElement);
    74 
    75     this._previousSibling = null;
    76     this._nextSibling = null;
    77 
    78     this._truncatedDisplayNameLength = 0;
    79 
    80     this.selectorArrows = showSelectorArrows;
    81     this.displayName = displayName;
    82 };
    83 
    84 WebInspector.HierarchicalPathComponent.StyleClassName = "hierarchical-path-component";
    85 WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
    86 WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
    87 WebInspector.HierarchicalPathComponent.IconElementStyleClassName = "icon";
    88 WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
    89 WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
    90 WebInspector.HierarchicalPathComponent.TitleElementStyleClassName = "title";
    91 WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName = "content";
    92 WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName = "selector-arrows";
    93 WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName = "separator";
    94 
    95 WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
    96 WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
    97 WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54;
    98 WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12;
    99 
    100 WebInspector.HierarchicalPathComponent.Event = {
    101     SiblingWasSelected: "hierarchical-path-component-sibling-was-selected",
    102     Clicked: "hierarchical-path-component-clicked"
    103 };
    104 
    105 WebInspector.HierarchicalPathComponent.prototype = {
    106     constructor: WebInspector.HierarchicalPathComponent,
     28    constructor(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows)
     29    {
     30        super();
     31
     32        console.assert(displayName);
     33        console.assert(styleClassNames);
     34
     35        this._representedObject = representedObject || null;
     36
     37        this._element = document.createElement("div");
     38        this._element.className = "hierarchical-path-component";
     39
     40        if (!(styleClassNames instanceof Array))
     41            styleClassNames = [styleClassNames];
     42
     43        for (var i = 0; i < styleClassNames.length; ++i) {
     44            if (!styleClassNames[i])
     45                continue;
     46            this._element.classList.add(styleClassNames[i]);
     47        }
     48
     49        if (!textOnly) {
     50            this._iconElement = document.createElement("img");
     51            this._iconElement.className = WebInspector.HierarchicalPathComponent.IconElementStyleClassName;
     52            this._element.appendChild(this._iconElement);
     53        } else
     54            this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
     55
     56        this._titleElement = document.createElement("div");
     57        this._titleElement.className = WebInspector.HierarchicalPathComponent.TitleElementStyleClassName;
     58        this._element.appendChild(this._titleElement);
     59
     60        this._titleContentElement = document.createElement("div");
     61        this._titleContentElement.className = WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName;
     62        this._titleElement.appendChild(this._titleContentElement);
     63
     64        this._separatorElement = document.createElement("div");
     65        this._separatorElement.className = WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName;
     66        this._element.appendChild(this._separatorElement);
     67
     68        this._selectElement = document.createElement("select");
     69        this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this));
     70        this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this));
     71        this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this));
     72        this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this));
     73        this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
     74        this._element.appendChild(this._selectElement);
     75
     76        this._previousSibling = null;
     77        this._nextSibling = null;
     78
     79        this._truncatedDisplayNameLength = 0;
     80
     81        this.selectorArrows = showSelectorArrows;
     82        this.displayName = displayName;
     83    }
    10784
    10885    // Public
    … …  
    11188    {
    11289        return this._element;
    113     },
     90    }
    11491
    11592    get representedObject()
    11693    {
    11794        return this._representedObject;
    118     },
     95    }
    11996
    12097    get displayName()
    12198    {
    12299        return this._displayName;
    123     },
     100    }
    124101
    125102    set displayName(newDisplayName)
    … …  
    132109
    133110        this._updateElementTitleAndText();
    134     },
     111    }
    135112
    136113    get truncatedDisplayNameLength()
    137114    {
    138115        return this._truncatedDisplayNameLength;
    139     },
     116    }
    140117
    141118    set truncatedDisplayNameLength(truncatedDisplayNameLength)
    … …  
    149126
    150127        this._updateElementTitleAndText();
    151     },
     128    }
    152129
    153130    get minimumWidth()
    … …  
    158135            return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
    159136        return WebInspector.HierarchicalPathComponent.MinimumWidth;
    160     },
     137    }
    161138
    162139    get forcedWidth()
    … …  
    166143            return parseInt(maxWidth);
    167144        return null;
    168     },
     145    }
    169146
    170147    set forcedWidth(width)
    … …  
    185162        } else
    186163            this._element.style.removeProperty("width");
    187     },
     164    }
    188165
    189166    get hidden()
    190167    {
    191168        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
    192     },
     169    }
    193170
    194171    set hidden(flag)
    … …  
    198175        else
    199176            this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
    200     },
     177    }
    201178
    202179    get collapsed()
    203180    {
    204181        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
    205     },
     182    }
    206183
    207184    set collapsed(flag)
    … …  
    211188        else
    212189            this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
    213     },
     190    }
    214191
    215192    get selectorArrows()
    216193    {
    217194        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
    218     },
     195    }
    219196
    220197    set selectorArrows(flag)
    … …  
    234211            this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
    235212        }
    236     },
     213    }
    237214
    238215    get previousSibling()
    239216    {
    240217        return this._previousSibling;
    241     },
     218    }
    242219
    243220    set previousSibling(newSlibling)
    244221    {
    245222        this._previousSibling = newSlibling || null;
    246     },
     223    }
    247224
    248225    get nextSibling()
    249226    {
    250227        return this._nextSibling;
    251     },
     228    }
    252229
    253230    set nextSibling(newSlibling)
    254231    {
    255232        this._nextSibling = newSlibling || null;
    256     },
     233    }
    257234
    258235    // Private
    259236
    260     _updateElementTitleAndText: function()
     237    _updateElementTitleAndText()
    261238    {
    262239        var truncatedDisplayName = this._displayName;
    … …  
    266243        this._element.title = this._displayName;
    267244        this._titleContentElement.textContent = truncatedDisplayName;
    268     },
    269 
    270     _updateSelectElement: function()
     245    }
     246
     247    _updateSelectElement()
    271248    {
    272249        this._selectElement.removeChildren();
    … …  
    275252        {
    276253            var optionElement = document.createElement("option");
    277             const maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
     254            var maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
    278255            optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + "\u2026";
    279256            optionElement._pathComponent = component;
    … …  
    308285        else
    309286            this._selectElement.selectedIndex = previousSiblingCount;
    310     },
    311 
    312     _selectElementMouseOver: function(event)
     287    }
     288
     289    _selectElementMouseOver(event)
    313290    {
    314291        if (typeof this.mouseOver === "function")
    315292            this.mouseOver();
    316     },
    317 
    318     _selectElementMouseOut: function(event)
     293    }
     294
     295    _selectElementMouseOut(event)
    319296    {
    320297        if (typeof this.mouseOut === "function")
    321298            this.mouseOut();
    322     },
    323 
    324     _selectElementMouseDown: function(event)
     299    }
     300
     301    _selectElementMouseDown(event)
    325302    {
    326303        this._updateSelectElement();
    327     },
    328 
    329     _selectElementMouseUp: function(event)
     304    }
     305
     306    _selectElementMouseUp(event)
    330307    {
    331308        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.Clicked);
    332     },
    333 
    334     _selectElementSelectionChanged: function(event)
     309    }
     310
     311    _selectElementSelectionChanged(event)
    335312    {
    336313        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, {pathComponent: this._selectElement[this._selectElement.selectedIndex]._pathComponent});
    … …  
    338315};
    339316
    340 WebInspector.HierarchicalPathComponent.prototype.__proto__ = WebInspector.Object.prototype;
     317WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
     318WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
     319WebInspector.HierarchicalPathComponent.IconElementStyleClassName = "icon";
     320WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
     321WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
     322WebInspector.HierarchicalPathComponent.TitleElementStyleClassName = "title";
     323WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName = "content";
     324WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName = "selector-arrows";
     325WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName = "separator";
     326
     327WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
     328WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
     329WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54;
     330WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12;
     331
     332WebInspector.HierarchicalPathComponent.Event = {
     333    SiblingWasSelected: "hierarchical-path-component-sibling-was-selected",
     334    Clicked: "hierarchical-path-component-clicked"
     335};

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

    r164543 r182040  
    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.HierarchicalPathNavigationItem = function(identifier, components) {
    27     WebInspector.NavigationItem.call(this, identifier);
    28 
    29     this.components = components;
    30 };
    31 
    32 WebInspector.HierarchicalPathNavigationItem.StyleClassName = "hierarchical-path";
    33 WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
    34 
    35 WebInspector.HierarchicalPathNavigationItem.Event = {
    36     PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
    37 };
    38 
    39 WebInspector.HierarchicalPathNavigationItem.prototype = {
    40     constructor: WebInspector.HierarchicalPathNavigationItem,
     26WebInspector.HierarchicalPathNavigationItem = class HierarchicalPathNavigationItem extends WebInspector.NavigationItem
     27{
     28    constructor(identifier, components)
     29    {
     30        super(identifier);
     31
     32        this.components = components;
     33    }
    4134
    4235    // Public
    … …  
    4538    {
    4639        return this._components;
    47     },
     40    }
    4841
    4942    set components(newComponents)
    … …  
    7063        if (this.parentNavigationBar)
    7164            this.parentNavigationBar.updateLayoutSoon();
    72     },
     65    }
    7366
    7467    get lastComponent()
    7568    {
    7669        return this._components.lastValue || null;
    77     },
     70    }
    7871
    7972    get alwaysShowLastPathComponentSeparator()
    8073    {
    8174        return this.element.classList.contains(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
    82     },
     75    }
    8376
    8477    set alwaysShowLastPathComponentSeparator(flag)
    … …  
    8881        else
    8982            this.element.classList.remove(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
    90     },
    91 
    92     updateLayout: function(expandOnly)
     83    }
     84
     85    updateLayout(expandOnly)
    9386    {
    9487        var navigationBar = this.parentNavigationBar;
    … …  
    223216        // Set the tool tip of the collapsed component.
    224217        this._collapsedComponent.element.title = hiddenDisplayNames.join("\n");
    225     },
     218    }
     219
     220    // Protected
     221
     222    get additionalClassNames()
     223    {
     224        return ["hierarchical-path"];
     225    }
    226226
    227227    // Private
    228228
    229     _additionalClassNames: [WebInspector.HierarchicalPathNavigationItem.StyleClassName],
    230 
    231     _siblingPathComponentWasSelected: function(event)
     229    _siblingPathComponentWasSelected(event)
    232230    {
    233231        this.dispatchEventToListeners(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, event.data);
    … …  
    235233};
    236234
    237 WebInspector.HierarchicalPathNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
     235WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
     236
     237WebInspector.HierarchicalPathNavigationItem.Event = {
     238    PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
     239};

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

    r181769 r182040  
    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.HoverMenu = function(delegate)
     26WebInspector.HoverMenu = class HoverMenu 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;
    32 
    33     this._element = document.createElement("div");
    34     this._element.className = WebInspector.HoverMenu.StyleClassName;
    35     this._element.addEventListener("transitionend", this, true);
    36 
    37     this._outlineElement = this._element.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
    38 
    39     this._button = this._element.appendChild(document.createElement("img"));
    40     this._button.addEventListener("click", this);
    41 }
    42 
    43 WebInspector.HoverMenu.StyleClassName = "hover-menu";
    44 WebInspector.HoverMenu.VisibleClassName = "visible";
    45 
    46 WebInspector.HoverMenu.prototype = {
    47     constructor: WebInspector.HoverMenu,
    48     __proto__: WebInspector.Object.prototype,
     28    constructor(delegate)
     29    {
     30        super();
     31
     32        this.delegate = delegate;
     33
     34        this._element = document.createElement("div");
     35        this._element.className = "hover-menu";
     36        this._element.addEventListener("transitionend", this, true);
     37
     38        this._outlineElement = this._element.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
     39
     40        this._button = this._element.appendChild(document.createElement("img"));
     41        this._button.addEventListener("click", this);
     42    }
    4943
    5044    // Public
    … …  
    5347    {
    5448        return this._element;
    55     },
    56 
    57     present: function(rects)
     49    }
     50
     51    present(rects)
    5852    {
    5953        this._outlineElement.textContent = "";
    … …  
    6458
    6559        window.addEventListener("scroll", this, true);
    66     },
    67 
    68     dismiss: function(discrete)
     60    }
     61
     62    dismiss(discrete)
    6963    {
    7064        if (this._element.parentNode !== document.body)
    … …  
    7771
    7872        window.removeEventListener("scroll", this, true);
    79     },
     73    }
    8074
    8175    // Protected
    8276
    83     handleEvent: function(event)
     77    handleEvent(event)
    8478    {
    8579        switch (event.type) {
    … …  
    9690            break;
    9791        }
    98     },
     92    }
    9993
    10094    // Private
    10195
    102     _handleClickEvent: function(event)
     96    _handleClickEvent(event)
    10397    {
    10498        if (this.delegate && typeof this.delegate.hoverMenuButtonWasPressed === "function")
    10599            this.delegate.hoverMenuButtonWasPressed(this);
    106     },
    107 
    108     _drawOutline: function(rects)
     100    }
     101
     102    _drawOutline(rects)
    109103    {
    110104        var buttonWidth = this._button.width;
    … …  
    136130        this._button.style.left = (lastRect.maxX() - bounds.minX() - buttonWidth) + "px";
    137131        this._button.style.top = (lastRect.maxY() - bounds.minY() - buttonHeight) + "px";
    138     },
    139 
    140     _addRect: function(rect)
    141     {
    142         const r = 4;
     132    }
     133
     134    _addRect(rect)
     135    {
     136        var r = 4;
    143137
    144138        var svgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    … …  
    150144        svgRect.setAttribute("ry", r);
    151145        return this._outlineElement.appendChild(svgRect);
    152     },
    153 
    154     _addPath: function(commands, tx, ty)
     146    }
     147
     148    _addPath(commands, tx, ty)
    155149    {
    156150        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    … …  
    158152        path.setAttribute("transform", "translate(" + (tx + 1) + "," + (ty + 1) + ")");
    159153        return this._outlineElement.appendChild(path);
    160     },
    161 
    162     _drawSingleLine: function(rect)
     154    }
     155
     156    _drawSingleLine(rect)
    163157    {
    164158        this._addRect(rect.pad(2));
    165     },
    166 
    167     _drawTwoNonOverlappingLines: function(rects)
    168     {
    169         const r = 4;
     159    }
     160
     161    _drawTwoNonOverlappingLines(rects)
     162    {
     163        var r = 4;
    170164
    171165        var firstRect = rects[0].pad(2);
    … …  
    194188            "H", rect.minX()
    195189        ], tx, ty);
    196     },
     190    }
    197191   
    198     _drawOverlappingLines: function(rects)
    199     {
    200         const PADDING = 2;
    201         const r = 4;
     192    _drawOverlappingLines(rects)
     193    {
     194        var PADDING = 2;
     195        var r = 4;
    202196
    203197        var minX = Number.MAX_VALUE;
    … …  
    220214       
    221215        var lastLineMinY = rects.lastValue.minY() + PADDING;
    222         if (rects[0].minX() === minX + PADDING)
     216        if (rects[0].minX() === minX + PADDING) {
    223217            return this._addPath([
    224218                "M", minX + r, minY,
    … …  
    236230                "q", 0, -r, r, -r
    237231            ], -minX, -minY);
    238        
     232        }
     233
    239234        var firstLineMaxY = rects[0].maxY() - PADDING;
    240         if (rects.lastValue.maxX() === maxX - PADDING)
     235        if (rects.lastValue.maxX() === maxX - PADDING) {
    241236            return this._addPath([
    242237                "M", firstLineMinX + r, minY,
    … …  
    254249                "q", 0, -r, r, -r
    255250            ], -minX, -minY);
    256        
     251        }
     252
    257253        return this._addPath([
    258254            "M", firstLineMinX + r, minY,
    … …  
    275271        ], -minX, -minY);
    276272    }
    277 }
     273};
     274
     275WebInspector.HoverMenu.VisibleClassName = "visible";

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

    r181769 r182040  
    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.Popover = function(delegate) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
    29 
    30     this.delegate = delegate;
    31     this._edge = null;
    32     this._frame = new WebInspector.Rect;
    33     this._content = null;
    34     this._targetFrame = new WebInspector.Rect;
    35     this._anchorPoint = new WebInspector.Point;
    36     this._preferredEdges = null;
    37 
    38     this._contentNeedsUpdate = false;
    39 
    40     this._element = document.createElement("div");
    41     this._element.className = WebInspector.Popover.StyleClassName;
    42     this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
    43     this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
    44     this._element.addEventListener("transitionend", this, true);
    45 
    46     this._container = this._element.appendChild(document.createElement("div"));
    47     this._container.className = "container";
    48 };
    49 
    50 WebInspector.Popover.StyleClassName = "popover";
    51 WebInspector.Popover.FadeOutClassName = "fade-out";
    52 WebInspector.Popover.canvasId = 0;
    53 WebInspector.Popover.CornerRadius = 5;
    54 WebInspector.Popover.MinWidth = 40;
    55 WebInspector.Popover.MinHeight = 40;
    56 WebInspector.Popover.ShadowPadding = 5;
    57 WebInspector.Popover.ContentPadding = 5;
    58 WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
    59 WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);
    60 
    61 WebInspector.Popover.prototype = {
    62     constructor: WebInspector.Popover,
     26WebInspector.Popover = class Popover extends WebInspector.Object
     27{
     28    constructor(delegate)
     29    {
     30        super();
     31
     32        this.delegate = delegate;
     33        this._edge = null;
     34        this._frame = new WebInspector.Rect;
     35        this._content = null;
     36        this._targetFrame = new WebInspector.Rect;
     37        this._anchorPoint = new WebInspector.Point;
     38        this._preferredEdges = null;
     39
     40        this._contentNeedsUpdate = false;
     41
     42        this._element = document.createElement("div");
     43        this._element.className = "popover";
     44        this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
     45        this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
     46        this._element.addEventListener("transitionend", this, true);
     47
     48        this._container = this._element.appendChild(document.createElement("div"));
     49        this._container.className = "container";
     50    }
    6351
    6452    // Public
    … …  
    6755    {
    6856        return this._element;
    69     },
     57    }
    7058
    7159    get frame()
    7260    {
    7361        return this._frame;
    74     },
     62    }
    7563
    7664    get visible()
    7765    {
    7866        return this._element.parentNode === document.body && !this._element.classList.contains(WebInspector.Popover.FadeOutClassName);
    79     },
     67    }
    8068
    8169    set frame(frame)
    … …  
    8775        this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
    8876        this._frame = frame;
    89     },
     77    }
    9078
    9179    set content(content)
    … …  
    10088        if (this.visible)
    10189            this._update(true);
    102     },
    103 
    104     update: function()
     90    }
     91
     92    update()
    10593    {
    10694        if (!this.visible)
    … …  
    114102        if (previouslyFocusedElement)
    115103            previouslyFocusedElement.focus();
    116     },
    117 
    118     present: function(targetFrame, preferredEdges)
     104    }
     105
     106    present(targetFrame, preferredEdges)
    119107    {
    120108        this._targetFrame = targetFrame;
    … …  
    127115
    128116        this._update();
    129     },
    130 
    131     presentNewContentWithFrame: function(content, targetFrame, preferredEdges)
     117    }
     118
     119    presentNewContentWithFrame(content, targetFrame, preferredEdges)
    132120    {
    133121        this._content = content;
    … …  
    141129        var shouldAnimate = this.visible;
    142130        this._update(shouldAnimate);
    143     },
    144 
    145     dismiss: function()
     131    }
     132
     133    dismiss()
    146134    {
    147135        if (this._element.parentNode !== document.body)
    … …  
    157145        if (this.delegate && typeof this.delegate.willDismissPopover === "function")
    158146            this.delegate.willDismissPopover(this);
    159     },
    160 
    161     handleEvent: function(event)
     147    }
     148
     149    handleEvent(event)
    162150    {
    163151        switch (event.type) {
    … …  
    177165            }
    178166        }
    179     },
     167    }
    180168
    181169    // Private
    182170
    183     _update: function(shouldAnimate)
     171    _update(shouldAnimate)
    184172    {
    185173        if (shouldAnimate)
    … …  
    213201        }
    214202
    215         const titleBarOffset = WebInspector.Platform.name === "mac" && !WebInspector.Platform.isLegacyMacOS ? 22 : 0;
     203        var titleBarOffset = WebInspector.Platform.name === "mac" && !WebInspector.Platform.isLegacyMacOS ? 22 : 0;
    216204        var containerFrame = new WebInspector.Rect(0, titleBarOffset, window.innerWidth, window.innerHeight - titleBarOffset);
    217205        // The frame of the window with a little inset to make sure we have room for shadows.
    … …  
    298286
    299287        this._contentNeedsUpdate = false;
    300     },
    301 
    302     _cssClassNameForEdge: function()
     288    }
     289
     290    _cssClassNameForEdge()
    303291    {
    304292        switch (this._edge) {
    … …  
    314302        console.error("Unknown edge.");
    315303        return "arrow-up";
    316     },
    317 
    318     _setAnchorPoint: function(anchorPoint) {
     304    }
     305
     306    _setAnchorPoint(anchorPoint) {
    319307        anchorPoint.x = Math.floor(anchorPoint.x);
    320308        anchorPoint.y = Math.floor(anchorPoint.y);
    321309        this._anchorPoint = anchorPoint;
    322     },
    323 
    324     _animateFrame: function(toFrame, toAnchor)
     310    }
     311
     312    _animateFrame(toFrame, toAnchor)
    325313    {
    326314        var startTime = Date.now();
    … …  
    360348
    361349        drawBackground.call(this);
    362     },
    363 
    364     _drawBackground: function()
     350    }
     351
     352    _drawBackground()
    365353    {
    366354        var scaleFactor = window.devicePixelRatio;
    … …  
    430418
    431419        finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
    432     },
    433 
    434     _bestMetricsForEdge: function(preferredSize, targetFrame, containerFrame, edge)
     420    }
     421
     422    _bestMetricsForEdge(preferredSize, targetFrame, containerFrame, edge)
    435423    {
    436424        var x, y;
    … …  
    495483            contentSize: new WebInspector.Size(width, height)
    496484        };
    497     },
    498 
    499     _drawFrame: function(ctx, bounds, anchorEdge)
     485    }
     486
     487    _drawFrame(ctx, bounds, anchorEdge)
    500488    {
    501489        var r = WebInspector.Popover.CornerRadius;
    … …  
    547535        }
    548536        ctx.closePath();
    549     },
    550 
    551     _addListenersIfNeeded: function()
     537    }
     538
     539    _addListenersIfNeeded()
    552540    {
    553541        if (!this._isListeningForPopoverEvents) {
    … …  
    559547};
    560548
    561 WebInspector.Popover.prototype.__proto__ = WebInspector.Object.prototype;
     549WebInspector.Popover.FadeOutClassName = "fade-out";
     550WebInspector.Popover.canvasId = 0;
     551WebInspector.Popover.CornerRadius = 5;
     552WebInspector.Popover.MinWidth = 40;
     553WebInspector.Popover.MinHeight = 40;
     554WebInspector.Popover.ShadowPadding = 5;
     555WebInspector.Popover.ContentPadding = 5;
     556WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
     557WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);

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

    r173431 r182040  
    11/*
     2 * Copyright (C) 2015 Apple Inc. All rights reserved.
    23 * Copyright (C) 2013 University of Washington. All rights reserved.
    34 *
    … …  
    2425 */
    2526
    26 WebInspector.ProbeSetDetailsSection = function(probeSet)
     27WebInspector.ProbeSetDetailsSection = class ProbeSetDetailsSection extends WebInspector.DetailsSection
    2728{
    28     console.assert(probeSet instanceof WebInspector.ProbeSet, "Invalid ProbeSet argument:", probeSet);
     29    constructor(probeSet)
     30    {
     31        console.assert(probeSet instanceof WebInspector.ProbeSet, "Invalid ProbeSet argument:", probeSet);
    2932
    30     this._listeners = new WebInspector.EventListenerSet(this, "ProbeSetDetailsSection UI listeners");
    31     this._probeSet = probeSet;
     33        var optionsElement = document.createElement("div");
     34        optionsElement.classList.add(WebInspector.ProbeSetDetailsSection.SectionOptionsStyleClassName);
    3235
    33     var optionsElement = this._optionsElement = document.createElement("div");
    34     optionsElement.classList.add(WebInspector.ProbeSetDetailsSection.SectionOptionsStyleClassName);
     36        var dataGrid = new WebInspector.ProbeSetDataGrid(probeSet);
    3537
    36     var removeProbeButton = optionsElement.createChild("img");
    37     removeProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeRemoveStyleClassName);
    38     removeProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName);
    39     this._listeners.register(removeProbeButton, "click", this._removeButtonClicked);
     38        var singletonRow = new WebInspector.DetailsSectionRow;
     39        singletonRow.element.appendChild(dataGrid.element);
    4040
    41     var clearSamplesButton = optionsElement.createChild("img");
    42     clearSamplesButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeClearSamplesStyleClassName);
    43     clearSamplesButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName);
    44     this._listeners.register(clearSamplesButton, "click", this._clearSamplesButtonClicked);
     41        var probeSectionGroup = new WebInspector.DetailsSectionGroup([singletonRow]);
    4542
    46     var addProbeButton = optionsElement.createChild("img");
    47     addProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.AddProbeValueStyleClassName);
    48     this._listeners.register(addProbeButton, "click", this._addProbeButtonClicked);
     43        super("probe", "", [probeSectionGroup], optionsElement);
    4944
    50     // Update the source link when the breakpoint's resolved state changes,
    51     // so that it can become a live location link when possible.
    52     this._updateLinkElement();
    53     this._listeners.register(this._probeSet.breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateLinkElement);
     45        this.element.classList.add("probe-set");
    5446
    55     this._dataGrid = new WebInspector.ProbeSetDataGrid(probeSet);
    56     var singletonRow = new WebInspector.DetailsSectionRow;
    57     singletonRow.element.appendChild(this._dataGrid.element);
    58     var probeSectionGroup = new WebInspector.DetailsSectionGroup([singletonRow]);
     47        this._optionsElement = optionsElement;
    5948
    60     var dummyTitle = "";
    61     WebInspector.DetailsSection.call(this, "probe", dummyTitle, [probeSectionGroup], optionsElement);
    62     this.element.classList.add(WebInspector.ProbeSetDetailsSection.StyleClassName);
     49        this._listeners = new WebInspector.EventListenerSet(this, "ProbeSetDetailsSection UI listeners");
     50        this._probeSet = probeSet;
     51        this._dataGrid = dataGrid;
    6352
    64     this._listeners.install();
    65 };
     53        var removeProbeButton = optionsElement.createChild("img");
     54        removeProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeRemoveStyleClassName);
     55        removeProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName);
     56        this._listeners.register(removeProbeButton, "click", this._removeButtonClicked);
    6657
    67 WebInspector.ProbeSetDetailsSection.AddProbeValueStyleClassName = "probe-add";
    68 WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName = "dont-float";
    69 WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName = "enabled";
    70 WebInspector.ProbeSetDetailsSection.ProbePopoverElementStyleClassName = "probe-popover";
    71 WebInspector.ProbeSetDetailsSection.ProbeClearSamplesStyleClassName = "probe-clear-samples";
    72 WebInspector.ProbeSetDetailsSection.ProbeRemoveStyleClassName = "probe-remove";
    73 WebInspector.ProbeSetDetailsSection.SectionOptionsStyleClassName = "options";
    74 WebInspector.ProbeSetDetailsSection.StyleClassName = "probe-set";
     58        var clearSamplesButton = optionsElement.createChild("img");
     59        clearSamplesButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeClearSamplesStyleClassName);
     60        clearSamplesButton.classList.add(WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName);
     61        this._listeners.register(clearSamplesButton, "click", this._clearSamplesButtonClicked);
    7562
    76 WebInspector.ProbeSetDetailsSection.prototype = {
    77     __proto__: WebInspector.DetailsSection.prototype,
    78     constructor: WebInspector.ProbeSetDetailsSection,
     63        var addProbeButton = optionsElement.createChild("img");
     64        addProbeButton.classList.add(WebInspector.ProbeSetDetailsSection.AddProbeValueStyleClassName);
     65        this._listeners.register(addProbeButton, "click", this._addProbeButtonClicked);
     66
     67        // Update the source link when the breakpoint's resolved state changes,
     68        // so that it can become a live location link when possible.
     69        this._updateLinkElement();
     70        this._listeners.register(this._probeSet.breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateLinkElement);
     71
     72        this._listeners.install();
     73    }
    7974
    8075    // Public
    8176
    82     closed: function()
     77    closed()
    8378    {
    8479        this._listeners.uninstall(true);
    8580        this.element.remove();
    86     },
     81    }
    8782
    8883    // Private
    8984
    90     _updateLinkElement: function()
     85    _updateLinkElement()
    9186    {
    9287        var breakpoint = this._probeSet.breakpoint;
    … …  
    109104        this._linkElement = titleElement;
    110105        this._optionsElement.appendChild(this._linkElement);
    111     },
     106    }
    112107
    113     _addProbeButtonClicked: function(event)
     108    _addProbeButtonClicked(event)
    114109    {
    115110        function createProbeFromEnteredExpression(visiblePopover, event)
    … …  
    135130        popover.present(target, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
    136131        textBox.select();
    137     },
     132    }
    138133
    139     _removeButtonClicked: function(event)
     134    _removeButtonClicked(event)
    140135    {
    141136        this._probeSet.clear();
    142     },
     137    }
    143138
    144     _clearSamplesButtonClicked: function(event)
     139    _clearSamplesButtonClicked(event)
    145140    {
    146141        this._probeSet.clearSamples();
    147142    }
    148143};
     144
     145WebInspector.ProbeSetDetailsSection.AddProbeValueStyleClassName = "probe-add";
     146WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName = "dont-float";
     147WebInspector.ProbeSetDetailsSection.ProbeButtonEnabledStyleClassName = "enabled";
     148WebInspector.ProbeSetDetailsSection.ProbePopoverElementStyleClassName = "probe-popover";
     149WebInspector.ProbeSetDetailsSection.ProbeClearSamplesStyleClassName = "probe-clear-samples";
     150WebInspector.ProbeSetDetailsSection.ProbeRemoveStyleClassName = "probe-remove";
     151WebInspector.ProbeSetDetailsSection.SectionOptionsStyleClassName = "options";
     152WebInspector.ProbeSetDetailsSection.StyleClassName = "probe-set";

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

    r181903 r182040  
    11/*
     2 * Copyright (C) 2015 Apple Inc. All rights reserved.
    23 * Copyright (C) 2015 University of Washington.
    34 *
    … …  
    2425 */
    2526
    26 WebInspector.Resizer = function(ruleOrientation, delegate) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     27WebInspector.Resizer = class Resizer extends WebInspector.Object
     28{
     29    constructor(ruleOrientation, delegate)
     30    {
     31        console.assert(delegate);
    2932
    30     console.assert(delegate);
     33        super();
    3134
    32     this._delegate = delegate;
    33     this._orientation = ruleOrientation;
    34     this._element = document.createElement("div");
    35     this._element.classList.add(WebInspector.Resizer.StyleClassName);
     35        this._delegate = delegate;
     36        this._orientation = ruleOrientation;
     37        this._element = document.createElement("div");
     38        this._element.classList.add("resizer");
    3639
    37     if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
    38         this._element.classList.add(WebInspector.Resizer.HorizontalRuleStyleClassName);
    39     else if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
    40         this._element.classList.add(WebInspector.Resizer.VerticalRuleStyleClassName);
     40        if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
     41            this._element.classList.add("horizontal-rule");
     42        else if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
     43            this._element.classList.add("vertical-rule");
    4144
    42     this._element.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
    43     this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
    44     this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
    45 };
    46 
    47 WebInspector.Resizer.RuleOrientation = {
    48     Horizontal: Symbol("resizer-rule-orientation-horizontal"),
    49     Vertical: Symbol("resizer-rule-orientation-vertical"),
    50 };
    51 
    52 WebInspector.Resizer.StyleClassName = "resizer";
    53 WebInspector.Resizer.HorizontalRuleStyleClassName = "horizontal-rule";
    54 WebInspector.Resizer.VerticalRuleStyleClassName = "vertical-rule";
    55 WebInspector.Resizer.GlassPaneStyleClassName = "glass-pane-for-drag";
    56 
    57 WebInspector.Resizer.prototype = {
    58     constructor: WebInspector.Resizer,
    59     __proto__: WebInspector.Object.prototype,
     45        this._element.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
     46        this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
     47        this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
     48    }
    6049
    6150    // Public
    … …  
    6453    {
    6554        return this._element;
    66     },
     55    }
    6756
    6857    get orientation()
    6958    {
    7059        return this._orientation;
    71     },
     60    }
    7261
    7362    get initialPosition()
    7463    {
    7564        return this._resizerMouseDownPosition || NaN;
    76     },
     65    }
    7766
    7867    // Private
    7968
    80     _currentPosition: function()
     69    _currentPosition()
    8170    {
    8271        if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
    … …  
    8675
    8776        console.assert(false, "Should not be reached!");
    88     },
     77    }
    8978
    90     _resizerMouseDown: function(event)
     79    _resizerMouseDown(event)
    9180    {
    9281        if (event.button !== 0 || event.ctrlKey)
    … …  
    125114
    126115        var glassPaneElement = document.createElement("div");
    127         glassPaneElement.className = WebInspector.Resizer.GlassPaneStyleClassName;
     116        glassPaneElement.className = "glass-pane-for-drag";
    128117        document.body.appendChild(glassPaneElement);
    129118        WebInspector._elementDraggingGlassPane = glassPaneElement;
    130     },
     119    }
    131120
    132     _resizerMouseMoved: function(event)
     121    _resizerMouseMoved(event)
    133122    {
    134123        event.preventDefault();
    … …  
    137126        if (typeof this._delegate.resizerDragging === "function")
    138127            this._delegate.resizerDragging(this, this._resizerMouseDownPosition - this._currentPosition());
    139     },
     128    }
    140129
    141     _resizerMouseUp: function(event)
     130    _resizerMouseUp(event)
    142131    {
    143132        if (event.button !== 0 || event.ctrlKey)
    … …  
    163152    }
    164153};
     154
     155WebInspector.Resizer.RuleOrientation = {
     156    Horizontal: Symbol("resizer-rule-orientation-horizontal"),
     157    Vertical: Symbol("resizer-rule-orientation-vertical"),
     158};

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

    r164543 r182040  
    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.ResourceTimelineDataGridNodePathComponent = function(resourceTimelineDataGridNode) {
    27     var resource = resourceTimelineDataGridNode.record.resource;
    28     var classNames = [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type];
     26WebInspector.ResourceTimelineDataGridNodePathComponent = class ResourceTimelineDataGridNodePathComponent extends WebInspector.HierarchicalPathComponent
     27{
     28    constructor(resourceTimelineDataGridNode)
     29    {
     30        var resource = resourceTimelineDataGridNode.record.resource;
     31        var classNames = [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type];
    2932
    30     WebInspector.HierarchicalPathComponent.call(this, resourceTimelineDataGridNode.data.name, classNames, resource);
     33        super(resourceTimelineDataGridNode.data.name, classNames, resource);
    3134
    32     this._resourceTimelineDataGridNode = resourceTimelineDataGridNode;
    33 };
    34 
    35 WebInspector.ResourceTimelineDataGridNodePathComponent.prototype = {
    36     constructor: WebInspector.ResourceTimelineDataGridNodePathComponent,
     35        this._resourceTimelineDataGridNode = resourceTimelineDataGridNode;
     36    }
    3737
    3838    // Public
    … …  
    4141    {
    4242        return this._resourceTimelineDataGridNode;
    43     },
     43    }
    4444
    4545    get previousSibling()
    … …  
    4848            return null;
    4949        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.previousSibling);
    50     },
     50    }
    5151
    5252    get nextSibling()
    … …  
    5757    }
    5858};
    59 
    60 WebInspector.ResourceTimelineDataGridNodePathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;

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

    r173436 r182040  
    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.ScopeBar = function(identifier, items, defaultItem) {
    27     WebInspector.NavigationItem.call(this, identifier);
     26WebInspector.ScopeBar = class ScopeBar extends WebInspector.NavigationItem
     27{
     28    constructor(identifier, items, defaultItem)
     29    {
     30        super(identifier);
    2831
    29     this._element.classList.add(WebInspector.ScopeBar.StyleClassName);
     32        this._element.classList.add("scope-bar");
    3033
    31     this._items = items;
    32     this._defaultItem = defaultItem;
     34        this._items = items;
     35        this._defaultItem = defaultItem;
    3336
    34     this._itemsById = [];
    35     this._populate();
    36 };
    37 
    38 WebInspector.ScopeBar.StyleClassName = "scope-bar";
    39 WebInspector.ScopeBar.Event = {
    40     SelectionChanged: "scopebar-selection-did-change"
    41 };
    42 
    43 WebInspector.ScopeBar.prototype = {
    44     constructor: WebInspector.ScopeBar,
     37        this._itemsById = [];
     38        this._populate();
     39    }
    4540
    4641    // Public
    … …  
    4944    {
    5045        return this._defaultItem;
    51     },
     46    }
    5247
    53     item: function(id)
     48    item(id)
    5449    {
    5550        return this._itemsById[id];
    56     },
     51    }
    5752
    5853    get selectedItems()
    … …  
    6156            return item.selected;
    6257        });
    63     },
     58    }
    6459
    65     hasNonDefaultItemSelected: function()
     60    hasNonDefaultItemSelected()
    6661    {
    6762        return this._items.some(function(item) {
    6863            return item.selected && item !== this._defaultItem;
    6964        }, this);
    70     },
     65    }
    7166
    72     updateLayout: function(expandOnly)
     67    updateLayout(expandOnly)
    7368    {
    7469        if (expandOnly)
    … …  
    8984                item.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
    9085        }
    91     },
     86    }
    9287
    9388    // Private
    9489
    95     _populate: function()
     90    _populate()
    9691    {
    9792        var item;
    … …  
    106101        if (!this.selectedItems.length && this._defaultItem)
    107102            this._defaultItem.selected = true;
    108     },
     103    }
    109104
    110     _itemSelectionDidChange: function(event)
     105    _itemSelectionDidChange(event)
    111106    {
    112107        var sender = event.target;
    … …  
    139134};
    140135
    141 WebInspector.ScopeBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
     136WebInspector.ScopeBar.Event = {
     137    SelectionChanged: "scopebar-selection-did-change"
     138};

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

    r181769 r182040  
    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.ScopeBarItem = function(id, label, isExclusive) {
    27     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    28     // WebInspector.Object.call(this);
     26WebInspector.ScopeBarItem = class ScopeBarItem extends WebInspector.Object
     27{
     28    constructor(id, label, isExclusive)
     29    {
     30        super();
    2931
    30     this.id = id;
    31     this.label = label;
    32     this.isExclusive = isExclusive;
     32        this.id = id;
     33        this.label = label;
     34        this.isExclusive = isExclusive;
    3335
    34     this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
     36        this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
    3537
    36     this._markElementSelected(this._selectedSetting.value);
    37 };
    38 
    39 WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
    40 WebInspector.ScopeBarItem.Event = {
    41     SelectionChanged: "scope-bar-item-selection-did-change"
    42 };
    43 
    44 WebInspector.ScopeBarItem.prototype = {
    45     constructor: WebInspector.ScopeBarItem,
     38        this._markElementSelected(this._selectedSetting.value);
     39    }
    4640
    4741    // Public
    … …  
    5549        }
    5650        return this._element;
    57     },
     51    }
    5852
    5953    get selected()
    6054    {
    6155        return this._selectedSetting.value;
    62     },
     56    }
    6357
    6458    set selected(selected)
    6559    {
    6660        this.setSelected(selected, false);
    67     },
     61    }
    6862
    69     setSelected: function(selected, withModifier)
     63    setSelected(selected, withModifier)
    7064    {
    7165        if (this._selectedSetting.value === selected)
    … …  
    7771
    7872        this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier});
    79     },
     73    }
    8074
    8175    // Private
    8276
    83     _markElementSelected: function(selected)
     77    _markElementSelected(selected)
    8478    {
    8579        if (selected)
    … …  
    8781        else
    8882            this.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
    89     },
     83    }
    9084
    91     _clicked: function(event)
     85    _clicked(event)
    9286    {
    9387        var withModifier = (event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
    … …  
    9690};
    9791
    98 WebInspector.ScopeBarItem.prototype.__proto__ = WebInspector.Object.prototype;
     92WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
     93
     94WebInspector.ScopeBarItem.Event = {
     95    SelectionChanged: "scope-bar-item-selection-did-change"
     96};

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

    r173436 r182040  
    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.SearchBar = function(identifier, placeholder, delegate) {
    27     WebInspector.NavigationItem.call(this, identifier);
     26WebInspector.SearchBar = class SearchBar extends WebInspector.NavigationItem
     27{
     28    constructor(identifier, placeholder, delegate)
     29    {
     30        super(identifier);
    2831
    29     this.delegate = delegate;
     32        this.delegate = delegate;
    3033
    31     this._element.classList.add(WebInspector.SearchBar.StyleClassName);
     34        this._element.classList.add("search-bar");
    3235
    33     this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
    34     this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
     36        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
     37        this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
    3538
    36     this._searchInput = this._element.appendChild(document.createElement("input"));
    37     this._searchInput.type = "search";
    38     this._searchInput.spellcheck = false;
    39     this._searchInput.incremental = true;
    40     this._searchInput.setAttribute("results", 5);
    41     this._searchInput.setAttribute("autosave", identifier + "-autosave");
    42     this._searchInput.setAttribute("placeholder", placeholder);
    43     this._searchInput.addEventListener("search", this._handleSearchEvent.bind(this), false);
    44     this._searchInput.addEventListener("keydown", this._handleKeydownEvent.bind(this), false);
    45 };
    46 
    47 WebInspector.SearchBar.StyleClassName = "search-bar";
    48 WebInspector.SearchBar.Event = {
    49     TextChanged: "searchbar-text-did-change"
    50 };
    51 
    52 WebInspector.SearchBar.prototype = {
    53     constructor: WebInspector.SearchBar,
     39        this._searchInput = this._element.appendChild(document.createElement("input"));
     40        this._searchInput.type = "search";
     41        this._searchInput.spellcheck = false;
     42        this._searchInput.incremental = true;
     43        this._searchInput.setAttribute("results", 5);
     44        this._searchInput.setAttribute("autosave", identifier + "-autosave");
     45        this._searchInput.setAttribute("placeholder", placeholder);
     46        this._searchInput.addEventListener("search", this._handleSearchEvent.bind(this));
     47        this._searchInput.addEventListener("keydown", this._handleKeydownEvent.bind(this));
     48    }
    5449
    5550    // Public
    … …  
    5853    {
    5954        return this._searchInput.value;
    60     },
     55    }
    6156
    6257    set text(newText)
    6358    {
    6459        this._searchInput.value = newText;
    65     },
     60    }
    6661
    67     focus: function()
     62    focus()
    6863    {
    6964        this._searchInput.focus();
    7065        this._searchInput.select();
    71     },
     66    }
    7267
    7368    // Private
    7469
    75     _handleSearchEvent: function(event)
     70    _handleSearchEvent(event)
    7671    {
    7772        this.dispatchEventToListeners(WebInspector.SearchBar.Event.TextChanged);
    78     },
     73    }
    7974
    80     _handleKeydownEvent: function(event)
     75    _handleKeydownEvent(event)
    8176    {
    8277        if (this._keyboardShortcutEsc.matchesEvent(event)) {
    … …  
    9691};
    9792
    98 WebInspector.SearchBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
     93WebInspector.SearchBar.Event = {
     94    TextChanged: "searchbar-text-did-change"
     95};

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

    r173436 r182040  
    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.Slider = function()
     26WebInspector.Slider = class Slider extends WebInspector.Object
    2727{
    28     this._element = document.createElement("div");
    29     this._element.className = "slider";
     28    constructor()
     29    {
     30        super();
    3031
    31     this._knob = this._element.appendChild(document.createElement("img"));
     32        this._element = document.createElement("div");
     33        this._element.className = "slider";
    3234
    33     this._value = 0;
    34     this._knobX = 0;
    35     this.__maxX = 0;
     35        this._knob = this._element.appendChild(document.createElement("img"));
    3636
    37     this._element.addEventListener("mousedown", this);
    38 };
     37        this._value = 0;
     38        this._knobX = 0;
     39        this.__maxX = 0;
    3940
    40 WebInspector.Slider.KnobWidth = 13;
    41 
    42 WebInspector.Slider.prototype = {
    43     contructor: WebInspector.Slider,
    44     __proto__: WebInspector.Object.prototype,
     41        this._element.addEventListener("mousedown", this);
     42    }
    4543
    4644    // Public
    … …  
    4947    {
    5048        return this._element;
    51     },
     49    }
    5250
    5351    get value()
    5452    {
    5553        return this._value;
    56     },
     54    }
    5755
    5856    set value(value)
    … …  
    7068        if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
    7169            this.delegate.sliderValueDidChange(this, value);
    72     },
     70    }
    7371
    7472    // Protected
    7573
    76     handleEvent: function(event)
     74    handleEvent(event)
    7775    {
    7876        switch (event.type) {
    … …  
    8785            break;
    8886        }
    89     },
     87    }
    9088
    9189    // Private
    9290
    93     _handleMousedown: function(event)
     91    _handleMousedown(event)
    9492    {
    9593        if (event.target !== this._knob)
    … …  
    103101        window.addEventListener("mousemove", this, true);
    104102        window.addEventListener("mouseup", this, true);
    105     },
     103    }
    106104
    107     _handleMousemove: function(event)
     105    _handleMousemove(event)
    108106    {
    109107        var dx = this._localPointForEvent(event).x - this._startMouseX;
    … …  
    111109
    112110        this.value = x / this._maxX;
    113     },
     111    }
    114112
    115     _handleMouseup: function(event)
     113    _handleMouseup(event)
    116114    {
    117115        this._element.classList.remove("dragging");
    … …  
    119117        window.removeEventListener("mousemove", this, true);
    120118        window.removeEventListener("mouseup", this, true);
    121     },
     119    }
    122120
    123     _localPointForEvent: function(event)
     121    _localPointForEvent(event)
    124122    {
    125123        // We convert all event coordinates from page coordinates to local coordinates such that the slider
    126124        // may be transformed using CSS Transforms and interaction works as expected.
    127125        return window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
    128     },
     126    }
    129127
    130128    get _maxX()
    … …  
    136134    }
    137135};
     136
     137WebInspector.Slider.KnobWidth = 13;

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

    r181769 r182040  
    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.TypeTokenView = function(tokenAnnotator, shouldHaveRightMargin, shouldHaveLeftMargin, titleType, functionOrVariableName)
     26WebInspector.TypeTokenView = class TypeTokenView extends WebInspector.Object
    2727{
    28     console.assert(titleType === WebInspector.TypeTokenView.TitleType.Variable  || titleType === WebInspector.TypeTokenView.TitleType.ReturnStatement);
    29 
    30     // FIXME: Convert this to a WebInspector.Object subclass, and call super().
    31     // WebInspector.Object.call(this);
    32 
    33     var span = document.createElement("span");
    34     span.classList.add("type-token");
    35     if (shouldHaveRightMargin)
    36         span.classList.add("type-token-right-spacing");
    37     if (shouldHaveLeftMargin)
    38         span.classList.add("type-token-left-spacing");
    39 
    40     this.element = span;
    41     this._tokenAnnotator = tokenAnnotator;
    42     this._types = null;
    43     this._typeSet = null;
    44     this._colorClass = null;
    45 
    46     this._popoverTitle = WebInspector.TypeTokenView.titleForPopover(titleType, functionOrVariableName);
    47 
    48     this._setUpMouseoverHandlers();
    49 };
    50 
    51 WebInspector.TypeTokenView.titleForPopover = function(titleType, functionOrVariableName)
    52 {
    53     var titleString = null;
    54     if (titleType === WebInspector.TypeTokenView.TitleType.Variable)
    55         titleString = WebInspector.UIString("Type information for variable: %s").format(functionOrVariableName);
    56     else {
    57         if (functionOrVariableName)
    58             titleString = WebInspector.UIString("Return type for function: %s").format(functionOrVariableName);
    59         else
    60             titleString = WebInspector.UIString("Return type for anonymous function");
    61     }
    62 
    63     return titleString;
    64 };
    65 
    66 WebInspector.TypeTokenView.TitleType = {
    67     Variable: "title-type-variable",
    68     ReturnStatement: "title-type-return-statement"
    69 };
    70 
    71 WebInspector.TypeTokenView.ColorClassForType = {
    72     "String": "type-token-string",
    73     "Function": "type-token-function",
    74     "Number": "type-token-number",
    75     "Integer": "type-token-number",
    76     "Undefined": "type-token-empty",
    77     "Null": "type-token-empty",
    78     "(?)": "type-token-empty",
    79     "Boolean": "type-token-boolean",
    80     "(many)": "type-token-many"
    81 };
    82 
    83 WebInspector.TypeTokenView.DelayHoverTime = 350;
    84 
    85 WebInspector.TypeTokenView.prototype = {
    86     constructor: WebInspector.TypeTokenView,
    87     __proto__: WebInspector.Object.prototype,
     28    constructor(tokenAnnotator, shouldHaveRightMargin, shouldHaveLeftMargin, titleType, functionOrVariableName)
     29    {
     30        console.assert(titleType === WebInspector.TypeTokenView.TitleType.Variable  || titleType === WebInspector.TypeTokenView.TitleType.ReturnStatement);
     31
     32        super();
     33
     34        var span = document.createElement("span");
     35        span.classList.add("type-token");
     36        if (shouldHaveRightMargin)
     37            span.classList.add("type-token-right-spacing");
     38        if (shouldHaveLeftMargin)
     39            span.classList.add("type-token-left-spacing");
     40
     41        this.element = span;
     42        this._tokenAnnotator = tokenAnnotator;
     43        this._types = null;
     44        this._typeSet = null;
     45        this._colorClass = null;
     46
     47        this._popoverTitle = WebInspector.TypeTokenView.titleForPopover(titleType, functionOrVariableName);
     48
     49        this._setUpMouseoverHandlers();
     50    }
     51
     52    // Static
     53
     54    static titleForPopover(titleType, functionOrVariableName)
     55    {
     56        var titleString = null;
     57        if (titleType === WebInspector.TypeTokenView.TitleType.Variable)
     58            titleString = WebInspector.UIString("Type information for variable: %s").format(functionOrVariableName);
     59        else {
     60            if (functionOrVariableName)
     61                titleString = WebInspector.UIString("Return type for function: %s").format(functionOrVariableName);
     62            else
     63                titleString = WebInspector.UIString("Return type for anonymous function");
     64        }
     65
     66        return titleString;
     67    }
    8868
    8969    // Public
    9070
    91     update: function(types)
     71    update(types)
    9272    {
    9373        this._types = types;
    … …  
    10686        this._colorClass = WebInspector.TypeTokenView.ColorClassForType[hashString] || "type-token-default";
    10787        this.element.classList.add(this._colorClass);
    108     },
     88    }
    10989
    11090    // Private
    11191
    112     _setUpMouseoverHandlers: function()
     92    _setUpMouseoverHandlers()
    11393    {
    11494        var timeoutID = null;
    … …  
    132112                clearTimeout(timeoutID);
    133113        }.bind(this));
    134     },
    135 
    136     _shouldShowPopover: function()
     114    }
     115
     116    _shouldShowPopover()
    137117    {
    138118        if (!this._types.isValid)
    … …  
    146126
    147127        return false;
    148     },
    149 
    150     _displayTypeName: function()
     128    }
     129
     130    _displayTypeName()
    151131    {
    152132        if (!this._types.isValid)
    … …  
    204184    }
    205185};
     186
     187WebInspector.TypeTokenView.TitleType = {
     188    Variable: Symbol("title-type-variable"),
     189    ReturnStatement: Symbol("title-type-return-statement")
     190};
     191
     192WebInspector.TypeTokenView.ColorClassForType = {
     193    "String": "type-token-string",
     194    "Function": "type-token-function",
     195    "Number": "type-token-number",
     196    "Integer": "type-token-number",
     197    "Undefined": "type-token-empty",
     198    "Null": "type-token-empty",
     199    "(?)": "type-token-empty",
     200    "Boolean": "type-token-boolean",
     201    "(many)": "type-token-many"
     202};
     203
     204WebInspector.TypeTokenView.DelayHoverTime = 350;
Note: See TracChangeset for help on using the changeset viewer.