Changeset 227232 in webkit


Ignore:
Timestamp:
Jan 19, 2018 1:36:58 PM (6 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Styles Redesign: tabbing on commented out property throws exception
​https://bugs.webkit.org/show_bug.cgi?id=180676
<rdar://problem/35981058>

Reviewed by Joseph Pecoraro.

  • UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingFirstProperty):
Tabbing from the selector field should focus on the first editable property.
When no editable properties are present, a new blank property should be added after the commented out ones.

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingLastProperty):
Shift-tabbing from the selector field should focus on the last editable property of the previous CSS rule.
When no editable properties are present, a new blank property should be added after the commented out ones.

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetCSSStyleDeclarationEditorFocusMoved):
When navigating between properties skip the commented out ones.

(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._editablePropertyAfter):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._editablePropertyBefore):

  • UserInterface/Views/SpreadsheetStyleProperty.js:

(WI.SpreadsheetStyleProperty.prototype.get enabled):
(WI.SpreadsheetStyleProperty.prototype._update):

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r227228 r227232  
     12018-01-19  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Styles Redesign: tabbing on commented out property throws exception
     4        https://bugs.webkit.org/show_bug.cgi?id=180676
     5        <rdar://problem/35981058>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
     10        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingFirstProperty):
     11        Tabbing from the selector field should focus on the first editable property.
     12        When no editable properties are present, a new blank property should be added after the commented out ones.
     13
     14        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingLastProperty):
     15        Shift-tabbing from the selector field should focus on the last editable property of the previous CSS rule.
     16        When no editable properties are present, a new blank property should be added after the commented out ones.
     17
     18        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetCSSStyleDeclarationEditorFocusMoved):
     19        When navigating between properties skip the commented out ones.
     20
     21        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._editablePropertyAfter):
     22        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._editablePropertyBefore):
     23        * UserInterface/Views/SpreadsheetStyleProperty.js:
     24        (WI.SpreadsheetStyleProperty.prototype.get enabled):
     25        (WI.SpreadsheetStyleProperty.prototype._update):
     26
    1272018-01-19  Nikita Vasilyev  <nvasilyev@apple.com>
    228

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

    r226994 r227232  
    102102    startEditingFirstProperty()
    103103    {
    104         if (this._propertyViews.length)
    105             this._propertyViews[0].nameTextField.startEditing();
     104        let firstEditableProperty = this._editablePropertyAfter(-1);
     105        if (firstEditableProperty)
     106            firstEditableProperty.nameTextField.startEditing();
    106107        else {
    107             let index = 0;
    108             this.addBlankProperty(index);
     108            const appendAfterLast = -1;
     109            this.addBlankProperty(appendAfterLast);
    109110        }
    110111    }
    … …  
    112113    startEditingLastProperty()
    113114    {
    114         let lastProperty = this._propertyViews.lastValue;
    115         if (lastProperty)
    116             lastProperty.valueTextField.startEditing();
     115        let lastEditableProperty = this._editablePropertyBefore(this._propertyViews.length);
     116        if (lastEditableProperty)
     117            lastEditableProperty.valueTextField.startEditing();
    117118        else {
    118             let index = 0;
    119             this.addBlankProperty(index);
     119            const appendAfterLast = -1;
     120            this.addBlankProperty(appendAfterLast);
    120121        }
    121122    }
    … …  
    195196
    196197        if (direction === "forward") {
    197             // Move from the value to the next property's name.
    198             let index = movedFromIndex + 1;
    199             if (index < this._propertyViews.length)
    200                 this._propertyViews[index].nameTextField.startEditing();
     198            // Move from the value to the next enabled property's name.
     199            let propertyView = this._editablePropertyAfter(movedFromIndex);
     200            if (propertyView)
     201                propertyView.nameTextField.startEditing();
    201202            else {
    202203                if (willRemoveProperty) {
    … …  
    204205                    let reverse = false;
    205206                    this._delegate.cssStyleDeclarationEditorStartEditingAdjacentRule(reverse);
    206                 } else
    207                     this.addBlankProperty(index);
     207                } else {
     208                    const appendAfterLast = -1;
     209                    this.addBlankProperty(appendAfterLast);
     210                }
    208211            }
    209212        } else {
    210             let index = movedFromIndex - 1;
    211             if (index < 0) {
     213            let propertyView = this._editablePropertyBefore(movedFromIndex);
     214            if (propertyView) {
     215                // Move from the property's name to the previous enabled property's value.
     216                propertyView.valueTextField.startEditing()
     217            } else {
    212218                // Move from the first property's name to the rule's selector.
    213219                if (this._style.selectorEditable)
    214220                    this._delegate.cssStyleDeclarationTextEditorStartEditingRuleSelector();
    215             } else {
    216                 // Move from the property's name to the previous property's value.
    217                 let valueTextField = this._propertyViews[index].valueTextField;
    218                 if (valueTextField)
    219                     valueTextField.startEditing();
    220221            }
    221222        }
    … …  
    252253
    253254        return this._style.allProperties;
     255    }
     256
     257    _editablePropertyAfter(propertyIndex)
     258    {
     259        for (let index = propertyIndex + 1; index < this._propertyViews.length; index++) {
     260            let property = this._propertyViews[index];
     261            if (property.enabled)
     262                return property;
     263        }
     264
     265        return null;
     266    }
     267
     268    _editablePropertyBefore(propertyIndex)
     269    {
     270        for (let index = propertyIndex - 1; index >= 0; index--) {
     271            let property = this._propertyViews[index];
     272            if (property.enabled)
     273                return property;
     274        }
     275
     276        return null;
    254277    }
    255278

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

    r226939 r227232  
    5858    get nameTextField() { return this._nameTextField; }
    5959    get valueTextField() { return this._valueTextField; }
     60    get enabled() { return this._property.enabled; }
    6061
    6162    detached()
Note: See TracChangeset for help on using the changeset viewer.