Changeset 188572 in webkit


Ignore:
Timestamp:
Aug 17, 2015, 9:12:15 PM (10 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Style changes to Visual sidebar selector items
​https://bugs.webkit.org/show_bug.cgi?id=148114

Reviewed by Timothy Hatcher.

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Views/GeneralTreeElement.js:

(WebInspector.GeneralTreeElement.prototype._updateTitleElements):
(WebInspector.GeneralTreeElement.prototype._updateTitleTooltip):
Moved the code to update the item tooltip to its own function.

  • UserInterface/Views/VisualStyleDetailsPanel.js:

(WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.editorMouseover):
(WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.editorMouseout):
(WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners):
(WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
(WebInspector.VisualStyleDetailsPanel.prototype._populateMarginSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populatePaddingSection):
(WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseover): Deleted.
(WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseout): Deleted.
Added on-hover node/selector highlighting to margin and padding editor links.

  • UserInterface/Views/VisualStyleNumberInputBox.js:

(WebInspector.VisualStyleNumberInputBox):
Replaced "No Units" with "Number" for better clarity.

  • UserInterface/Views/VisualStyleSelectorTreeItem.css:

(body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-item.selected > input[type="checkbox"]:checked::before):
(.item.visual-style-selector-item.selected > input[type="checkbox"]::before): Deleted.
Removes the white border when the window is inactive and when the checkbox is unchecked.

  • UserInterface/Views/VisualStyleSelectorTreeItem.js:

(WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
Now updates the title of the item when the selector changes.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r188571 r188572  
     12015-08-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Style changes to Visual sidebar selector items
     4        https://bugs.webkit.org/show_bug.cgi?id=148114
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Views/GeneralTreeElement.js:
     10        (WebInspector.GeneralTreeElement.prototype._updateTitleElements):
     11        (WebInspector.GeneralTreeElement.prototype._updateTitleTooltip):
     12        Moved the code to update the item tooltip to its own function.
     13
     14        * UserInterface/Views/VisualStyleDetailsPanel.js:
     15        (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.editorMouseover):
     16        (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.editorMouseout):
     17        (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners):
     18        (WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
     19        (WebInspector.VisualStyleDetailsPanel.prototype._populateMarginSection):
     20        (WebInspector.VisualStyleDetailsPanel.prototype._populatePaddingSection):
     21        (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseover): Deleted.
     22        (WebInspector.VisualStyleDetailsPanel.prototype._addMetricsMouseListeners.onEditorMouseout): Deleted.
     23        Added on-hover node/selector highlighting to margin and padding editor links.
     24
     25        * UserInterface/Views/VisualStyleNumberInputBox.js:
     26        (WebInspector.VisualStyleNumberInputBox):
     27        Replaced "No Units" with "Number" for better clarity.
     28
     29        * UserInterface/Views/VisualStyleSelectorTreeItem.css:
     30        (body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-item.selected > input[type="checkbox"]:checked::before):
     31        (.item.visual-style-selector-item.selected > input[type="checkbox"]::before): Deleted.
     32        Removes the white border when the window is inactive and when the checkbox is unchecked.
     33
     34        * UserInterface/Views/VisualStyleSelectorTreeItem.js:
     35        (WebInspector.VisualStyleSelectorTreeItem.prototype._commitSelector):
     36        Now updates the title of the item when the selector changes.
     37
    1382015-08-17  Devin Rousso  <drousso@apple.com>
    239

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r188530 r188572  
    399399localizedStrings["No Results Found"] = "No Results Found";
    400400localizedStrings["No Search Results"] = "No Search Results";
    401 localizedStrings["No Units"] = "No Units";
    402401localizedStrings["No Watch Expressions"] = "No Watch Expressions";
    403402localizedStrings["No exact ARIA role match."] = "No exact ARIA role match.";
    … …  
    406405localizedStrings["Node"] = "Node";
    407406localizedStrings["Not found"] = "Not found";
     407localizedStrings["Number"] = "Number";
    408408localizedStrings["Offset"] = "Offset";
    409409localizedStrings["Online"] = "Online";

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

    r183821 r188572  
    343343
    344344        // Set a default tooltip if there isn't a custom one already assigned.
    345         if (!this.tooltip && !this._tooltipHandledSeparately) {
    346             console.assert(this._listItemNode);
    347 
    348             // Get the textContent for the elements since they can contain other nodes,
    349             // and the tool tip only cares about the text.
    350             var mainTitleText = this._mainTitleElement.textContent;
    351             var subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
    352 
    353             if (mainTitleText && subtitleText)
    354                 this._listItemNode.title = mainTitleText + (this._small && !this._twoLine ? " \u2014 " : "\n") + subtitleText;
    355             else if (mainTitleText)
    356                 this._listItemNode.title = mainTitleText;
    357             else
    358                 this._listItemNode.title = subtitleText;
    359         }
     345        if (!this.tooltip && !this._tooltipHandledSeparately)
     346            this._updateTitleTooltip();
     347    }
     348
     349    _updateTitleTooltip()
     350    {
     351        console.assert(this._listItemNode);
     352        if (!this._listItemNode)
     353            return;
     354
     355        // Get the textContent for the elements since they can contain other nodes,
     356        // and the tool tip only cares about the text.
     357        let mainTitleText = this._mainTitleElement.textContent;
     358        let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
     359        if (mainTitleText && subtitleText)
     360            this._listItemNode.title = mainTitleText + (this._small && !this._twoLine ? " \u2014 " : "\n") + subtitleText;
     361        else if (mainTitleText)
     362            this._listItemNode.title = mainTitleText;
     363        else
     364            this._listItemNode.title = subtitleText;
    360365    }
    361366

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

    r188503 r188572  
    329329    }
    330330
    331     _generateMetricSectionRows(group, prefix, allowNegatives)
     331    _addMetricsMouseListeners(editor, mode)
     332    {
     333        function editorMouseover() {
     334            if (!this._currentStyle)
     335                return;
     336
     337            if (!this._currentStyle.ownerRule) {
     338                WebInspector.domTreeManager.highlightDOMNode(this._currentStyle.node.id, mode);
     339                return;
     340            }
     341
     342            WebInspector.domTreeManager.highlightSelector(this._currentStyle.ownerRule.selectorText, this._currentStyle.node.ownerDocument.frameIdentifier, mode);
     343        }
     344
     345        function editorMouseout() {
     346            WebInspector.domTreeManager.hideDOMNodeHighlight();
     347        }
     348
     349        editor.element.addEventListener("mouseover", editorMouseover.bind(this));
     350        editor.element.addEventListener("mouseout", editorMouseout);
     351    }
     352
     353    _generateMetricSectionRows(group, prefix, allowNegatives, highlightOnHover)
    332354    {
    333355        let properties = group.properties;
    … …  
    364386        let allLink = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], "link-all", [verticalLink, horizontalLink]);
    365387        allLinkRow.element.appendChild(allLink.element);
     388
     389        if (highlightOnHover) {
     390            this._addMetricsMouseListeners(properties[top], prefix);
     391            this._addMetricsMouseListeners(verticalLink, prefix);
     392            this._addMetricsMouseListeners(properties[bottom], prefix);
     393            this._addMetricsMouseListeners(allLink, prefix);
     394            this._addMetricsMouseListeners(properties[left], prefix);
     395            this._addMetricsMouseListeners(horizontalLink, prefix);
     396            this._addMetricsMouseListeners(properties[right], prefix);
     397        }
    366398
    367399        return [vertical, allLinkRow, horizontal];
    … …  
    409441        let floatGroup = new WebInspector.DetailsSectionGroup([floatRow, clearRow]);
    410442        this._populateSection(group, [floatGroup]);
    411     }
    412 
    413     _addMetricsMouseListeners(editor, mode)
    414     {
    415         function onEditorMouseover() {
    416             if (!this._style)
    417                 return;
    418 
    419             if (!this._style.ownerRule) {
    420                 WebInspector.domTreeManager.highlightDOMNode(this._style.node.id, mode);
    421                 return;
    422             }
    423 
    424             WebInspector.domTreeManager.highlightSelector(this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier, mode);
    425         }
    426 
    427         function onEditorMouseout() {
    428             WebInspector.domTreeManager.hideDOMNodeHighlight();
    429         }
    430 
    431         editor.element.addEventListener("mouseover", onEditorMouseover.bind(editor));
    432         editor.element.addEventListener("mouseout", onEditorMouseout.bind(editor));
    433443    }
    434444
    … …  
    505515    {
    506516        let group = this._groups.margin;
    507         let rows = this._generateMetricSectionRows(group, "margin", true);
    508 
    509         let highlightMode = "margin";
    510         this._addMetricsMouseListeners(group.properties.marginTop, highlightMode);
    511         this._addMetricsMouseListeners(group.properties.marginBottom, highlightMode);
    512         this._addMetricsMouseListeners(group.properties.marginLeft, highlightMode);
    513         this._addMetricsMouseListeners(group.properties.marginRight, highlightMode);
    514 
     517        let rows = this._generateMetricSectionRows(group, "margin", true, true);
    515518        let marginGroup = new WebInspector.DetailsSectionGroup(rows);
    516519        this._populateSection(group, [marginGroup]);
    … …  
    520523    {
    521524        let group = this._groups.padding;
    522         let rows = this._generateMetricSectionRows(group, "padding");
    523 
    524         let highlightMode = "padding";
    525         this._addMetricsMouseListeners(group.properties.paddingTop, highlightMode);
    526         this._addMetricsMouseListeners(group.properties.paddingBottom, highlightMode);
    527         this._addMetricsMouseListeners(group.properties.paddingLeft, highlightMode);
    528         this._addMetricsMouseListeners(group.properties.paddingRight, highlightMode);
    529 
     525        let rows = this._generateMetricSectionRows(group, "padding", false, true);
    530526        let paddingGroup = new WebInspector.DetailsSectionGroup(rows);
    531527        this._populateSection(group, [paddingGroup]);

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

    r188238 r188572  
    2828    constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
    2929    {
    30         super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("No Units")], "number-input-box", layoutReversed);
     30        super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("Number")], "number-input-box", layoutReversed);
    3131
    3232        this._hasUnits = !!possibleUnits;

  • trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css

    r188490 r188572  
    4747}
    4848
    49 .item.visual-style-selector-item.selected > input[type="checkbox"]::before {
     49body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-item.selected > input[type="checkbox"]:checked::before {
    5050    position: absolute;
    5151    top: 0;

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

    r188490 r188572  
    192192        this._hideDOMNodeHighlight();
    193193        this._listItemNode.classList.remove("editable");
     194        this._updateTitleTooltip();
    194195
    195196        let value = this.selectorText;
Note: See TracChangeset for help on using the changeset viewer.