Changeset 270637 in webkit


Ignore:
Timestamp:
Dec 10, 2020 11:09:00 AM (20 months ago)
Author:
Patrick Angle
Message:

Web Inspector: Show current properties for font in new Elements sidebar Font panel
​https://bugs.webkit.org/show_bug.cgi?id=218964

Reviewed by Devin Rousso.

Source/JavaScriptCore:

Adds objects and method for getting font data for a node to the CSS domain. A CSS.Font is meant to represent
a WebCore::Font and contain information about the underlying font as the system sees it. The source for this
information can be a system font or a web font. Each CSS.Font in turn can have some number of
CSS.FontVariationAxis for its available open-type variation axes. Fonts that don't support these features will
have an empty set of axes.

  • inspector/protocol/CSS.json:
  • Added objects and method for getting font data for a node.

Source/WebCore:

Test: inspector/css/getComputedPrimaryFontForNode.html

Adds support for retrieving the primary font computed for a node including the available variation axes of the
underlying Font.

  • inspector/agents/InspectorCSSAgent.cpp:

(WebCore::buildObjectForFont):
(WebCore::InspectorCSSAgent::getFontDataForNode):
(WebCore::InspectorCSSAgent::nodeForId):

  • inspector/agents/InspectorCSSAgent.h:
  • Added method for retrieving font data for a node.
  • platform/graphics/FontPlatformData.cpp:

(WebCore::FontPlatformData::variationAxes const):

  • Empty implementation for non-Cocoa platforms.
  • platform/graphics/FontPlatformData.h:

(WebCore::FontPlatformData::FontVariationAxis::FontVariationAxis):
(WebCore::FontPlatformData::FontVariationAxis::name const):
(WebCore::FontPlatformData::FontVariationAxis::tag const):
(WebCore::FontPlatformData::FontVariationAxis::defaultValue const):
(WebCore::FontPlatformData::FontVariationAxis::minimumValue const):
(WebCore::FontPlatformData::FontVariationAxis::maximumValue const):

  • Added struct type for font variation axis information.
  • platform/graphics/cocoa/FontCacheCoreText.cpp:

(WebCore::defaultVariationValues):

  • platform/graphics/cocoa/FontCacheCoreText.h:
  • Support getting the name of variation axes.
  • platform/graphics/cocoa/FontPlatformDataCocoa.mm:

(WebCore::FontPlatformData::variationAxes const):

  • Retrieve font variation axes from the underlying font.

Source/WebInspectorUI:

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Setting.js:
  • Added experimental setting for Font panel.
  • UserInterface/Main.html:
  • UserInterface/Models/DOMNodeStyles.js:

(WI.DOMNodeStyles):
(WI.DOMNodeStyles.prototype.get computedPrimaryFont):
(WI.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
(WI.DOMNodeStyles.prototype.refresh.fetchedFontData):
(WI.DOMNodeStyles.prototype.refresh):

  • Support getting the computed primary font.
  • UserInterface/Models/Font.js: Added.

(WI.Font):
(WI.Font.fromPayload):
(WI.Font.prototype.get name):
(WI.Font.prototype.get variationAxes):
(WI.Font.prototype.variationAxis):

  • Model object for CSS.Font.

(WI.Font.prototype.calculateFontProperties):

  • Build maps of font properties from the DOMNodeStyle and this Font.

(WI.Font.prototype._calculateProperties):
(WI.Font.prototype._calculateFontFeatureAxes):
(WI.Font.prototype._calculateFontVariationAxes):
(WI.Font.prototype._parseFontFeatureOrVariationSettings):

  • UserInterface/Models/FontVariationAxis.js: Added.

(WI.FontVariationAxis):
(WI.FontVariationAxis.fromPayload):
(WI.FontVariationAxis.prototype.get name):
(WI.FontVariationAxis.prototype.get tag):
(WI.FontVariationAxis.prototype.get minimumValue):
(WI.FontVariationAxis.prototype.get maximumValue):
(WI.FontVariationAxis.prototype.get defaultValue):

  • Model object for CSS.FontVariationAxis.
  • UserInterface/Test.html:
  • UserInterface/Views/ComputedStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow):
(.multi-sidebar.showing-multiple > .sidebar > .panel.details.style-computed > .content > .pseudo-classes,): Deleted.

  • Move multi-sidebar support to GeneralStyleDetailsSidebarPanel.css
  • UserInterface/Views/ElementsTabContentView.js:

(WI.ElementsTabContentView):

  • Add Font panel to detail panel set if enabled and supported.
  • UserInterface/Views/FontDetailsPanel.js: Added.

(WI.FontDetailsPanel):
(WI.FontDetailsPanel.prototype.get supportsToggleCSSClass):
(WI.FontDetailsPanel.prototype.refresh):
(WI.FontDetailsPanel.prototype.initialLayout):
(WI.FontDetailsPanel.prototype._formatSizeValue):
(WI.FontDetailsPanel.prototype._formatStyleValue):
(WI.FontDetailsPanel.prototype._formatSimpleSingleValue):

  • Format basic font properties.

(WI.FontDetailsPanel.prototype._formatVariationValue):

  • Format non-standard variation axes.

(WI.FontDetailsPanel.prototype._formatSimpleFeatureValues):

  • Common formatting for font-variant-xxx properties that map to font feature values.

(WI.FontDetailsPanel.prototype._formatLigatureValue):
(WI.FontDetailsPanel.prototype._formatPositionValue):
(WI.FontDetailsPanel.prototype._formatCapitalsValue):
(WI.FontDetailsPanel.prototype._formatNumericValue):
(WI.FontDetailsPanel.prototype._formatAlternatesValue):
(WI.FontDetailsPanel.prototype._formatEastAsianValue):
(WI.FontDetailsPanel.prototype._featureIsEnabled):
(WI.FontDetailsPanel.prototype._hasVariationValue):

  • UserInterface/Views/FontDetailsSidebarPanel.js: Added.

(WI.FontDetailsSidebarPanel):

  • UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,):
(.multi-sidebar.showing-multiple > .sidebar > .panel.details:not(.style-rules) > .content > .pseudo-classes,):

  • When showing the Styles panel alongside another style-based panel, hide the pseudo-class and filter options.
  • UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:

(WI.GeneralStyleDetailsSidebarPanel.prototype.styleDetailsPanelFocusFilterBar):
(WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
(WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
(WI.GeneralStyleDetailsSidebarPanel.prototype._handleNodeChanged):
(WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):

  • Support not showing the filter bar for style panels where filtering is not applicable.
  • UserInterface/Views/SettingsTabContentView.js:

(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

  • UserInterface/Views/StyleDetailsPanel.js:

(WI.StyleDetailsPanel.prototype.get supportsToggleCSSClass):
(WI.StyleDetailsPanel.prototype.filterDidChange): Deleted.

  • Remove empty implementation of filterDidChange as WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout

checks for an implmentation of this function to determine if a filter bar should be shown.

LayoutTests:

  • inspector/css/getComputedPrimaryFontForNode-expected.txt: Added.
  • inspector/css/getComputedPrimaryFontForNode.html: Added.
  • inspector/model/font-calculate-properties-expected.txt: Added.
  • inspector/model/font-calculate-properties.html: Added.
Location:
trunk
Files:
8 added
23 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r270635 r270637  
     12020-12-10  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Show current properties for font in new Elements sidebar Font panel
     4        https://bugs.webkit.org/show_bug.cgi?id=218964
     5
     6        Reviewed by Devin Rousso.
     7
     8        * inspector/css/getComputedPrimaryFontForNode-expected.txt: Added.
     9        * inspector/css/getComputedPrimaryFontForNode.html: Added.
     10        * inspector/model/font-calculate-properties-expected.txt: Added.
     11        * inspector/model/font-calculate-properties.html: Added.
     12
    1132020-12-10  Ryan Haddad  <ryanhaddad@apple.com>
    214

  • trunk/Source/JavaScriptCore/ChangeLog

    r270634 r270637  
     12020-12-10  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Show current properties for font in new Elements sidebar Font panel
     4        https://bugs.webkit.org/show_bug.cgi?id=218964
     5
     6        Reviewed by Devin Rousso.
     7
     8        Adds objects and method for getting font data for a node to the `CSS` domain. A `CSS.Font` is meant to represent
     9        a `WebCore::Font` and contain information about the underlying font as the system sees it. The source for this
     10        information can be a system font or a web font. Each `CSS.Font` in turn can have some number of
     11        `CSS.FontVariationAxis` for its available open-type variation axes. Fonts that don't support these features will
     12        have an empty set of axes.
     13
     14        * inspector/protocol/CSS.json:
     15        - Added objects and method for getting font data for a node.
     16
    1172020-12-10  Don Olmstead  <don.olmstead@sony.com>
    218

  • trunk/Source/JavaScriptCore/inspector/protocol/CSS.json

    r262302 r270637  
    232232                { "name": "sourceURL", "type": "string", "optional": true, "description": "URL of the document containing the CSS grouping." }
    233233            ]
     234        },
     235        {
     236            "id": "Font",
     237            "type": "object",
     238            "description": "A representation of WebCore::Font. Conceptually this is backed by either a font file on disk or from the network.",
     239            "properties": [
     240                { "name": "displayName", "type": "string", "description": "The display name defined by the font." },
     241                { "name": "variationAxes", "type": "array", "items": { "$ref": "FontVariationAxis" }, "description": "The variation axes defined by the font." }
     242            ]
     243        },
     244        {
     245            "id": "FontVariationAxis",
     246            "type": "object",
     247            "description": "A single variation axis associated with a Font.",
     248            "properties": [
     249                { "name": "name", "type": "string", "optional": true, "description": "The name, generally human-readable, of the variation axis. Some axes may not provide a human-readable name distiguishable from the tag. This field is ommited when there is no name, or the name matches the tag exactly." },
     250                { "name": "tag", "type": "string", "description": "The four character tag for the variation axis." },
     251                { "name": "minimumValue", "type": "number", "description": "The minimum value that will affect the axis." },
     252                { "name": "maximumValue", "type": "number", "description": "The maximum value that will affect the axis." },
     253                { "name": "defaultValue", "type": "number", "description": "The value that is used for the axis when it is not otherwise controlled." }
     254            ]
    234255        }
    235256    ],
    … …  
    279300        },
    280301        {
     302            "name": "getFontDataForNode",
     303            "description": "Returns the primary font of the computed font cascade for a DOM node identified by <code>nodeId</code>.",
     304            "parameters": [
     305                { "name": "nodeId", "$ref": "DOM.NodeId" }
     306            ],
     307            "returns": [
     308                { "name": "primaryFont", "$ref": "Font", "description": "Computed primary font for the specified DOM node." }
     309            ]
     310        },
     311        {
    281312            "name": "getAllStyleSheets",
    282313            "description": "Returns metainfo entries for all known stylesheets.",

  • trunk/Source/WebCore/ChangeLog

    r270636 r270637  
     12020-12-10  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Show current properties for font in new Elements sidebar Font panel
     4        https://bugs.webkit.org/show_bug.cgi?id=218964
     5
     6        Reviewed by Devin Rousso.
     7
     8        Test: inspector/css/getComputedPrimaryFontForNode.html
     9
     10        Adds support for retrieving the primary font computed for a node including the available variation axes of the
     11        underlying Font.
     12
     13        * inspector/agents/InspectorCSSAgent.cpp:
     14        (WebCore::buildObjectForFont):
     15        (WebCore::InspectorCSSAgent::getFontDataForNode):
     16        (WebCore::InspectorCSSAgent::nodeForId):
     17        * inspector/agents/InspectorCSSAgent.h:
     18        - Added method for retrieving font data for a node.
     19        * platform/graphics/FontPlatformData.cpp:
     20        (WebCore::FontPlatformData::variationAxes const):
     21        - Empty implementation for non-Cocoa platforms.
     22        * platform/graphics/FontPlatformData.h:
     23        (WebCore::FontPlatformData::FontVariationAxis::FontVariationAxis):
     24        (WebCore::FontPlatformData::FontVariationAxis::name const):
     25        (WebCore::FontPlatformData::FontVariationAxis::tag const):
     26        (WebCore::FontPlatformData::FontVariationAxis::defaultValue const):
     27        (WebCore::FontPlatformData::FontVariationAxis::minimumValue const):
     28        (WebCore::FontPlatformData::FontVariationAxis::maximumValue const):
     29        - Added struct type for font variation axis information.
     30        * platform/graphics/cocoa/FontCacheCoreText.cpp:
     31        (WebCore::defaultVariationValues):
     32        * platform/graphics/cocoa/FontCacheCoreText.h:
     33        - Support getting the name of variation axes.
     34        * platform/graphics/cocoa/FontPlatformDataCocoa.mm:
     35        (WebCore::FontPlatformData::variationAxes const):
     36        - Retrieve font variation axes from the underlying font.
     37
    1382020-12-10  Dean Jackson  <dino@apple.com>
    239

  • trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.cpp

    r266934 r270637  
    4141#include "DOMWindow.h"
    4242#include "ElementAncestorIterator.h"
     43#include "Font.h"
    4344#include "FontCache.h"
     45#include "FontCascade.h"
     46#include "FontPlatformData.h"
    4447#include "Frame.h"
    4548#include "HTMLHeadElement.h"
    … …  
    558561}
    559562
     563static Ref<Protocol::CSS::Font> buildObjectForFont(const Font& font)
     564{
     565    auto resultVariationAxes = JSON::ArrayOf<Protocol::CSS::FontVariationAxis>::create();
     566    for (auto& variationAxis : font.platformData().variationAxes()) {
     567        auto axis = Protocol::CSS::FontVariationAxis::create()
     568            .setTag(variationAxis.tag())
     569            .setMinimumValue(variationAxis.minimumValue())
     570            .setMaximumValue(variationAxis.maximumValue())
     571            .setDefaultValue(variationAxis.defaultValue())
     572            .release();
     573       
     574        if (variationAxis.name().length() && variationAxis.name() != variationAxis.tag())
     575            axis->setName(variationAxis.name());
     576       
     577        resultVariationAxes->addItem(WTFMove(axis));
     578    }
     579   
     580    return Protocol::CSS::Font::create()
     581        .setDisplayName(font.platformData().familyName())
     582        .setVariationAxes(WTFMove(resultVariationAxes))
     583        .release();
     584}
     585
     586Protocol::ErrorStringOr<Ref<Protocol::CSS::Font>> InspectorCSSAgent::getFontDataForNode(Protocol::DOM::NodeId nodeId)
     587{
     588    Protocol::ErrorString errorString;
     589    auto* node = nodeForId(errorString, nodeId);
     590    if (!node)
     591        return makeUnexpected(errorString);
     592   
     593    auto* computedStyle = node->computedStyle();
     594    if (!computedStyle)
     595        return makeUnexpected("No computed style for node.");
     596   
     597    return buildObjectForFont(computedStyle->fontCascade().primaryFont());
     598}
     599
    560600Protocol::ErrorStringOr<Ref<JSON::ArrayOf<Protocol::CSS::CSSStyleSheetHeader>>> InspectorCSSAgent::getAllStyleSheets()
    561601{
    … …  
    906946}
    907947
     948Node* InspectorCSSAgent::nodeForId(Protocol::ErrorString& errorString, Protocol::DOM::NodeId nodeId)
     949{
     950    auto* domAgent = m_instrumentingAgents.persistentDOMAgent();
     951    if (!domAgent) {
     952        errorString = "DOM domain must be enabled"_s;
     953        return nullptr;
     954    }
     955
     956    return domAgent->assertNode(errorString, nodeId);
     957}
     958
    908959String InspectorCSSAgent::unbindStyleSheet(InspectorStyleSheet* inspectorStyleSheet)
    909960{

  • trunk/Source/WebCore/inspector/agents/InspectorCSSAgent.h

    r266885 r270637  
    9191    Inspector::Protocol::ErrorStringOr<void> disable();
    9292    Inspector::Protocol::ErrorStringOr<Ref<JSON::ArrayOf<Inspector::Protocol::CSS::CSSComputedStyleProperty>>> getComputedStyleForNode(Inspector::Protocol::DOM::NodeId);
     93    Inspector::Protocol::ErrorStringOr<Ref<Inspector::Protocol::CSS::Font>> getFontDataForNode(Inspector::Protocol::DOM::NodeId);
    9394    Inspector::Protocol::ErrorStringOr<std::tuple<RefPtr<Inspector::Protocol::CSS::CSSStyle> /* inlineStyle */, RefPtr<Inspector::Protocol::CSS::CSSStyle> /* attributesStyle */>> getInlineStylesForNode(Inspector::Protocol::DOM::NodeId);
    9495    Inspector::Protocol::ErrorStringOr<std::tuple<RefPtr<JSON::ArrayOf<Inspector::Protocol::CSS::RuleMatch>>, RefPtr<JSON::ArrayOf<Inspector::Protocol::CSS::PseudoIdMatches>>, RefPtr<JSON::ArrayOf<Inspector::Protocol::CSS::InheritedStyleEntry>>>> getMatchedStylesForNode(Inspector::Protocol::DOM::NodeId, Optional<bool>&& includePseudo, Optional<bool>&& includeInherited);
    … …  
    134135    InspectorStyleSheetForInlineStyle& asInspectorStyleSheet(StyledElement&);
    135136    Element* elementForId(Inspector::Protocol::ErrorString&, Inspector::Protocol::DOM::NodeId);
     137    Node* nodeForId(Inspector::Protocol::ErrorString&, Inspector::Protocol::DOM::NodeId);
    136138
    137139    void collectAllStyleSheets(Vector<InspectorStyleSheet*>&);

  • trunk/Source/WebCore/platform/graphics/FontPlatformData.cpp

    r270175 r270637  
    8383
    8484#if !USE(CORE_TEXT) && !PLATFORM(WIN)
    85 
    8685String FontPlatformData::familyName() const
    8786{
    … …  
    8988    return { };
    9089}
     90#endif
    9191
     92#if !PLATFORM(COCOA)
     93Vector<FontPlatformData::FontVariationAxis> FontPlatformData::variationAxes() const
     94{
     95    // FIXME: <webkit.org/b/219614> Not implemented yet.
     96    return { };
     97}
    9298#endif
    9399

  • trunk/Source/WebCore/platform/graphics/FontPlatformData.h

    r267930 r270637  
    2929#include <wtf/Forward.h>
    3030#include <wtf/RetainPtr.h>
     31#include <wtf/Vector.h>
    3132
    3233#if PLATFORM(WIN)
    … …  
    7980public:
    8081    struct CreationData;
     82   
     83    struct FontVariationAxis {
     84        FontVariationAxis(const String& name, const String& tag, int defaultValue, int minimumValue, int maximumValue)
     85            : m_name(name)
     86            , m_tag(tag)
     87            , m_defaultValue(defaultValue)
     88            , m_minimumValue(minimumValue)
     89            , m_maximumValue(maximumValue)
     90        {
     91        }
     92       
     93        const String& name() const { return m_name; }
     94        const String& tag() const { return m_tag; }
     95        int defaultValue() const { return m_defaultValue; }
     96        int minimumValue() const { return m_minimumValue; }
     97        int maximumValue() const { return m_maximumValue; }
     98
     99    private:
     100        const String m_name;
     101        const String m_tag;
     102        int m_defaultValue;
     103        int m_minimumValue;
     104        int m_maximumValue;
     105    };
    81106
    82107    FontPlatformData(WTF::HashTableDeletedValueType);
    … …  
    154179
    155180    String familyName() const;
     181    Vector<FontVariationAxis> variationAxes() const;
    156182
    157183#if USE(CAIRO)

  • trunk/Source/WebCore/platform/graphics/cocoa/FontCacheCoreText.cpp

    r267141 r270637  
    297297}
    298298
    299 struct VariationDefaults {
    300     float defaultValue;
    301     float minimumValue;
    302     float maximumValue;
    303 };
    304 
    305 typedef HashMap<FontTag, VariationDefaults, FourCharacterTagHash, FourCharacterTagHashTraits> VariationDefaultsMap;
    306 
    307 static VariationDefaultsMap defaultVariationValues(CTFontRef font)
     299VariationDefaultsMap defaultVariationValues(CTFontRef font)
    308300{
    309301    VariationDefaultsMap result;
    … …  
    315307        CFDictionaryRef axis = static_cast<CFDictionaryRef>(CFArrayGetValueAtIndex(axes.get(), i));
    316308        CFNumberRef axisIdentifier = static_cast<CFNumberRef>(CFDictionaryGetValue(axis, kCTFontVariationAxisIdentifierKey));
     309        String axisName = static_cast<CFStringRef>(CFDictionaryGetValue(axis, kCTFontVariationAxisNameKey));
    317310        CFNumberRef defaultValue = static_cast<CFNumberRef>(CFDictionaryGetValue(axis, kCTFontVariationAxisDefaultValueKey));
    318311        CFNumberRef minimumValue = static_cast<CFNumberRef>(CFDictionaryGetValue(axis, kCTFontVariationAxisMinimumValueKey));
    … …  
    336329        auto b4 = rawAxisIdentifier & 0xFF;
    337330        FontTag resultKey = {{ static_cast<char>(b1), static_cast<char>(b2), static_cast<char>(b3), static_cast<char>(b4) }};
    338         VariationDefaults resultValues = { rawDefaultValue, rawMinimumValue, rawMaximumValue };
     331        VariationDefaults resultValues = { axisName, rawDefaultValue, rawMinimumValue, rawMaximumValue };
    339332        result.set(resultKey, resultValues);
    340333    }

  • trunk/Source/WebCore/platform/graphics/cocoa/FontCacheCoreText.h

    r266690 r270637  
    5151};
    5252
     53struct VariationDefaults {
     54    String axisName;
     55    float defaultValue;
     56    float minimumValue;
     57    float maximumValue;
     58};
     59
     60typedef HashMap<FontTag, VariationDefaults, FourCharacterTagHash, FourCharacterTagHashTraits> VariationDefaultsMap;
     61
    5362RetainPtr<CTFontRef> preparePlatformFont(CTFontRef, const FontDescription&, const FontFeatureSettings* fontFaceFeatures, FontSelectionSpecifiedCapabilities fontFaceCapabilities, bool applyWeightWidthSlopeVariations = true);
    5463enum class ShouldComputePhysicalTraits : bool { No, Yes };
    … …  
    6271RetainPtr<CFSetRef> installedFontMandatoryAttributes(AllowUserInstalledFonts);
    6372
     73VariationDefaultsMap defaultVariationValues(CTFontRef);
    6474}

  • trunk/Source/WebCore/platform/graphics/cocoa/FontPlatformDataCocoa.mm

    r267073 r270637  
    2525#import "FontPlatformData.h"
    2626
     27#import "FontCacheCoreText.h"
    2728#import "SharedBuffer.h"
    2829#import <pal/spi/cocoa/CoreTextSPI.h>
    … …  
    6263}
    6364
     65Vector<FontPlatformData::FontVariationAxis> FontPlatformData::variationAxes() const
     66{
     67    auto platformFont = ctFont();
     68    if (!platformFont)
     69        return { };
     70   
     71    Vector<FontVariationAxis> results;
     72    for (auto& [tag, values] : defaultVariationValues(platformFont))
     73        results.append(FontPlatformData::FontVariationAxis(values.axisName, String(tag.data(), tag.size()), values.defaultValue, values.minimumValue, values.maximumValue));
     74   
     75    return results;
     76}
     77
     78
    6479} // namespace WebCore

  • trunk/Source/WebInspectorUI/ChangeLog

    r270606 r270637  
     12020-12-10  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Show current properties for font in new Elements sidebar Font panel
     4        https://bugs.webkit.org/show_bug.cgi?id=218964
     5
     6        Reviewed by Devin Rousso.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Base/Setting.js:
     10        - Added experimental setting for Font panel.
     11        * UserInterface/Main.html:
     12        * UserInterface/Models/DOMNodeStyles.js:
     13        (WI.DOMNodeStyles):
     14        (WI.DOMNodeStyles.prototype.get computedPrimaryFont):
     15        (WI.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
     16        (WI.DOMNodeStyles.prototype.refresh.fetchedFontData):
     17        (WI.DOMNodeStyles.prototype.refresh):
     18        - Support getting the computed primary font.
     19        * UserInterface/Models/Font.js: Added.
     20        (WI.Font):
     21        (WI.Font.fromPayload):
     22        (WI.Font.prototype.get name):
     23        (WI.Font.prototype.get variationAxes):
     24        (WI.Font.prototype.variationAxis):
     25        - Model object for `CSS.Font`.
     26        (WI.Font.prototype.calculateFontProperties):
     27        - Build maps of font properties from the `DOMNodeStyle` and this Font.
     28        (WI.Font.prototype._calculateProperties):
     29        (WI.Font.prototype._calculateFontFeatureAxes):
     30        (WI.Font.prototype._calculateFontVariationAxes):
     31        (WI.Font.prototype._parseFontFeatureOrVariationSettings):
     32        * UserInterface/Models/FontVariationAxis.js: Added.
     33        (WI.FontVariationAxis):
     34        (WI.FontVariationAxis.fromPayload):
     35        (WI.FontVariationAxis.prototype.get name):
     36        (WI.FontVariationAxis.prototype.get tag):
     37        (WI.FontVariationAxis.prototype.get minimumValue):
     38        (WI.FontVariationAxis.prototype.get maximumValue):
     39        (WI.FontVariationAxis.prototype.get defaultValue):
     40        - Model object for `CSS.FontVariationAxis`.
     41        * UserInterface/Test.html:
     42        * UserInterface/Views/ComputedStyleDetailsPanel.css:
     43        (.sidebar > .panel.details.css-style > .content > .computed .property:not(:hover) .go-to-arrow):
     44        (.multi-sidebar.showing-multiple > .sidebar > .panel.details.style-computed > .content > .pseudo-classes,): Deleted.
     45        - Move multi-sidebar support to GeneralStyleDetailsSidebarPanel.css
     46        * UserInterface/Views/ElementsTabContentView.js:
     47        (WI.ElementsTabContentView):
     48        - Add Font panel to detail panel set if enabled and supported.
     49        * UserInterface/Views/FontDetailsPanel.js: Added.
     50        (WI.FontDetailsPanel):
     51        (WI.FontDetailsPanel.prototype.get supportsToggleCSSClass):
     52        (WI.FontDetailsPanel.prototype.refresh):
     53        (WI.FontDetailsPanel.prototype.initialLayout):
     54        (WI.FontDetailsPanel.prototype._formatSizeValue):
     55        (WI.FontDetailsPanel.prototype._formatStyleValue):
     56        (WI.FontDetailsPanel.prototype._formatSimpleSingleValue):
     57        - Format basic font properties.
     58        (WI.FontDetailsPanel.prototype._formatVariationValue):
     59        - Format non-standard variation axes.
     60        (WI.FontDetailsPanel.prototype._formatSimpleFeatureValues):
     61        - Common formatting for `font-variant-xxx` properties that map to font feature values.
     62        (WI.FontDetailsPanel.prototype._formatLigatureValue):
     63        (WI.FontDetailsPanel.prototype._formatPositionValue):
     64        (WI.FontDetailsPanel.prototype._formatCapitalsValue):
     65        (WI.FontDetailsPanel.prototype._formatNumericValue):
     66        (WI.FontDetailsPanel.prototype._formatAlternatesValue):
     67        (WI.FontDetailsPanel.prototype._formatEastAsianValue):
     68        (WI.FontDetailsPanel.prototype._featureIsEnabled):
     69        (WI.FontDetailsPanel.prototype._hasVariationValue):
     70        * UserInterface/Views/FontDetailsSidebarPanel.js: Added.
     71        (WI.FontDetailsSidebarPanel):
     72        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
     73        (.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,):
     74        (.multi-sidebar.showing-multiple > .sidebar > .panel.details:not(.style-rules) > .content > .pseudo-classes,):
     75        - When showing the Styles panel alongside another style-based panel, hide the pseudo-class and filter options.
     76        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.js:
     77        (WI.GeneralStyleDetailsSidebarPanel.prototype.styleDetailsPanelFocusFilterBar):
     78        (WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout):
     79        (WI.GeneralStyleDetailsSidebarPanel.prototype._showPanel):
     80        (WI.GeneralStyleDetailsSidebarPanel.prototype._handleNodeChanged):
     81        (WI.GeneralStyleDetailsSidebarPanel.prototype._filterDidChange):
     82        - Support not showing the filter bar for style panels where filtering is not applicable.
     83        * UserInterface/Views/SettingsTabContentView.js:
     84        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
     85        * UserInterface/Views/StyleDetailsPanel.js:
     86        (WI.StyleDetailsPanel.prototype.get supportsToggleCSSClass):
     87        (WI.StyleDetailsPanel.prototype.filterDidChange): Deleted.
     88        - Remove empty implementation of `filterDidChange` as `WI.GeneralStyleDetailsSidebarPanel.prototype.initialLayout`
     89        checks for an implmentation of this function to determine if a filter bar should be shown.
     90
    1912020-11-30  Brian Burg  <bburg@apple.com>
    292

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

    r270604 r270637  
    22
    33localizedStrings[" (Prototype)"] = " (Prototype)";
     4/* A range and default value for a single variation axis of a font. */
     5localizedStrings[" (Range: %d-%d, Default: %d) @ Font Details Sidebar"] = " (Range: %d-%d, Default: %d)";
    46localizedStrings[" (line %s)"] = " (line %s)";
    57localizedStrings["${expr} = expression"] = "${expr} = expression";
    … …  
    2325localizedStrings["%.2fs"] = "%.2fs";
    2426localizedStrings["%.3fms"] = "%.3fms";
     27/* A value, range, and default value for a single variation axis of a font. */
     28localizedStrings["%d (Range: %d-%d, Default: %d) @ Font Details Sidebar"] = "%d (Range: %d-%d, Default: %d)";
    2529localizedStrings["%d Error"] = "%d Error";
    2630localizedStrings["%d Errors"] = "%d Errors";
    … …  
    4953localizedStrings["%d resource"] = "%d resource";
    5054localizedStrings["%d resources"] = "%d resources";
     55localizedStrings["%d%%"] = "%d%%";
    5156localizedStrings["%dpx"] = "%dpx";
    5257localizedStrings["%dpx\u00B2"] = "%dpx\u00B2";
    … …  
    137142/* Break (pause) on all microtasks */
    138143localizedStrings["All Microtasks @ JavaScript Breakpoint"] = "All Microtasks";
     144/* Property value for `font-variant-capitals: all-petite-caps`. */
     145localizedStrings["All Petite Capitals @ Font Details Sidebar Property Value"] = "All Petite Capitals";
    139146/* A submenu item of 'Break on' that breaks (pauses) before all network requests */
    140147localizedStrings["All Requests"] = "All Requests";
     148/* Property value for `font-variant-capitals: all-small-caps`. */
     149localizedStrings["All Small Capitals @ Font Details Sidebar Property Value"] = "All Small Capitals";
    141150localizedStrings["All Storage"] = "All Storage";
    142151/* Break (pause) on all timeouts */
    … …  
    201210localizedStrings["Backtrace"] = "Backtrace";
    202211localizedStrings["Basic"] = "Basic";
     212/* Section title for basic font properties. */
     213localizedStrings["Basic Properties @ Font Details Sidebar Section"] = "Basic Properties";
    203214localizedStrings["Beacon"] = "Beacon";
    204215localizedStrings["Beacons"] = "Beacons";
    … …  
    254265localizedStrings["Canvas Element"] = "Canvas Element";
    255266localizedStrings["Canvases"] = "Canvases";
     267/* Property title for `font-variant-caps`. */
     268localizedStrings["Capitals @ Font Details Sidebar Property"] = "Capitals";
    256269/* Capture screenshot of the selected DOM node */
    257270localizedStrings["Capture Screenshot"] = "Capture Screenshot";
    … …  
    312325localizedStrings["Collect garbage"] = "Collect garbage";
    313326localizedStrings["Comment"] = "Comment";
     327/* Property value for `font-variant-ligatures: common-ligatures`. */
     328localizedStrings["Common @ Font Details Sidebar Property Value"] = "Common";
    314329localizedStrings["Compare snapshots"] = "Compare snapshots";
    315330localizedStrings["Comparison of total memory size at the end of the selected time range to the maximum memory size in this recording"] = "Comparison of total memory size at the end of the selected time range to the maximum memory size in this recording";
    … …  
    343358localizedStrings["Containing"] = "Containing";
    344359localizedStrings["Content Security Policy violation of directive: %s"] = "Content Security Policy violation of directive: %s";
     360/* Property value for `font-variant-ligatures: contextual`. */
     361localizedStrings["Contextual Alternates @ Font Details Sidebar Property Value"] = "Contextual Alternates";
    345362localizedStrings["Continuation Frame"] = "Continuation Frame";
    346363localizedStrings["Continue script execution (%s or %s)"] = "Continue script execution (%s or %s)";
    … …  
    427444localizedStrings["Device Settings"] = "Device Settings";
    428445localizedStrings["Diagnoses common accessibility problems affecting screen readers and other assistive technology."] = "Diagnoses common accessibility problems affecting screen readers and other assistive technology.";
     446/* Property value for `font-variant-numeric: diagonal-fractions`. */
     447localizedStrings["Diagonal Fractions @ Font Details Sidebar Property Value"] = "Diagonal Fractions";
    429448localizedStrings["Dimensions"] = "Dimensions";
    430449localizedStrings["Disable Audit"] = "Disable Audit";
    … …  
    444463localizedStrings["Disable:"] = "Disable:";
    445464localizedStrings["Disabled"] = "Disabled";
     465/* Property value for `font-variant-ligatures: no-common-ligatures`. */
     466localizedStrings["Disabled Common @ Font Details Sidebar Property Value"] = "Disabled Common";
     467/* Property value for `font-variant-ligatures: discretionary-ligatures`. */
     468localizedStrings["Discretionary @ Font Details Sidebar Property Value"] = "Discretionary";
    446469localizedStrings["Disk Cache"] = "Disk Cache";
    447470localizedStrings["Dismiss"] = "Dismiss";
    … …  
    472495localizedStrings["Dynamically calculated for the selected element"] = "Dynamically calculated for the selected element";
    473496localizedStrings["Dynamically calculated for the selected element and did not match"] = "Dynamically calculated for the selected element and did not match";
     497/* Property title for `font-variant-east-asian`. */
     498localizedStrings["East Asian @ Font Details Sidebar Property"] = "East Asian";
    474499/* Label for a guide within the color picker */
    475500localizedStrings["Edge of sRGB color space"] = "Edge of sRGB color space";
    … …  
    597622localizedStrings["Failed to upgrade"] = "Failed to upgrade";
    598623localizedStrings["Failure status code"] = "Failure status code";
     624/* Section title for font feature properties. */
     625localizedStrings["Feature Properties @ Font Details Sidebar Section"] = "Feature Properties";
    599626/* Resource loaded via 'fetch' method */
    600627localizedStrings["Fetch"] = "Fetch";
    … …  
    612639localizedStrings["Focused"] = "Focused";
    613640localizedStrings["Font"] = "Font";
     641/* Title for the Font details sidebar. */
     642localizedStrings["Font @ Font Details Sidebar Title"] = "Font";
    614643localizedStrings["Fonts"] = "Fonts";
    615644localizedStrings["Force Dark Appearance"] = "Force Dark Appearance";
    … …  
    644673localizedStrings["Full-Screen"] = "Full-Screen";
    645674localizedStrings["Full-Screen from \u201C%s\u201D"] = "Full-Screen from \u201C%s\u201D";
     675/* Property value for `font-variant-alternates: full-width`. */
     676localizedStrings["Full-Width Variants @ Font Details Sidebar Property Value"] = "Full-Width Variants";
    646677localizedStrings["Function"] = "Function";
    647678localizedStrings["Function Name Variable"] = "Function Name Variable";
    … …  
    698729localizedStrings["High @ Timeline Energy Impact"] = "High";
    699730localizedStrings["Highest: %s"] = "Highest: %s";
     731/* Property value for `font-variant-ligatures: historical-ligatures`. */
     732localizedStrings["Historical @ Font Details Sidebar Property Value"] = "Historical";
     733/* Property title for `font-variant-alternates`. */
     734localizedStrings["Historical Figures @ Font Details Sidebar Property"] = "Historical Figures";
     735/* Property value for `font-variant-alternates: historical-forms`. */
     736localizedStrings["Historical Forms @ Font Details Sidebar Property Value"] = "Historical Forms";
    700737localizedStrings["Host"] = "Host";
    701738localizedStrings["ICO"] = "ICO";
    … …  
    706743localizedStrings["Identifier"] = "Identifier";
    707744localizedStrings["Identity"] = "Identity";
     745/* Section title for font identity information. */
     746localizedStrings["Identity @ Font Details Sidebar Section"] = "Identity";
    708747localizedStrings["Idle"] = "Idle";
    709748localizedStrings["If the URL of any script matches one of the regular expression patterns below, any pauses that would have happened in that script will be deferred until execution has continued to outside of that script."] = "If the URL of any script matches one of the regular expression patterns below, any pauses that would have happened in that script will be deferred until execution has continued to outside of that script.";
    … …  
    749788localizedStrings["Invoke getter"] = "Invoke getter";
    750789localizedStrings["It is evaluated immediately after the global object is created, before any other content has loaded."] = "It is evaluated immediately after the global object is created, before any other content has loaded.";
     790/* Property value for oblique text. */
     791localizedStrings["Italic @ Font Details Sidebar Property Value"] = "Italic";
    751792/* Tooltip for a timestamp marker that represents when a CSS animation/transition iterates */
    752793localizedStrings["Iteration"] = "Iteration";
     794/* Property value for `font-variant-alternates: jis04`. */
     795localizedStrings["JIS2004 Forms @ Font Details Sidebar Property Value"] = "JIS2004 Forms";
     796/* Property value for `font-variant-alternates: jis78`. */
     797localizedStrings["JIS78 Forms @ Font Details Sidebar Property Value"] = "JIS78 Forms";
     798/* Property value for `font-variant-alternates: jis83`. */
     799localizedStrings["JIS83 Forms @ Font Details Sidebar Property Value"] = "JIS83 Forms";
     800/* Property value for `font-variant-alternates: jis90`. */
     801localizedStrings["JIS90 Forms @ Font Details Sidebar Property Value"] = "JIS90 Forms";
    753802localizedStrings["JP2"] = "JP2";
    754803localizedStrings["JPEG"] = "JPEG";
    … …  
    771820localizedStrings["Layout @ Timeline record"] = "Layout";
    772821localizedStrings["Layout Invalidated"] = "Layout Invalidated";
     822/* Property title for `font-variant-ligatures`. */
     823localizedStrings["Ligatures @ Font Details Sidebar Property"] = "Ligatures";
    773824/* Label of dropdown item used for forcing Web Inspector to be shown using a light theme */
    774825localizedStrings["Light @ Settings General Appearance"] = "Light";
    … …  
    778829localizedStrings["Line wrapping:"] = "Line wrapping:";
    779830localizedStrings["Linear Gradient"] = "Linear Gradient";
     831/* Property value for `font-variant-numeric: lining-nums`. */
     832localizedStrings["Lining Numerals @ Font Details Sidebar Property Value"] = "Lining Numerals";
    780833localizedStrings["Live"] = "Live";
    781834localizedStrings["Live Activity"] = "Live Activity";
    … …  
    852905localizedStrings["Multi-Entry"] = "Multi-Entry";
    853906localizedStrings["Name"] = "Name";
     907/* Property title for the family name of the font. */
     908localizedStrings["Name @ Font Details Sidebar Property"] = "Name";
    854909/* Label for the navigation sidebar. */
    855910localizedStrings["Navigation @ Sidebar"] = "Navigation";
    … …  
    892947localizedStrings["No Styles"] = "No Styles";
    893948localizedStrings["No Watch Expressions"] = "No Watch Expressions";
     949/* Message shown when there are no additional variation axes to show. */
     950localizedStrings["No additional variation axes. @ Font Details Sidebar"] = "No additional variation axes.";
    894951localizedStrings["No audit selected"] = "No audit selected";
    895952localizedStrings["No certificate security information."] = "No certificate security information.";
    … …  
    910967localizedStrings["Nodes"] = "Nodes";
    911968localizedStrings["None"] = "None";
     969/* Property value for any `normal` CSS value. */
     970localizedStrings["Normal @ Font Details Sidebar Property Value"] = "Normal";
    912971localizedStrings["Not found"] = "Not found";
    913972/* Title of icon indicating that the selected audit has not been run yet. */
    914973localizedStrings["Not yet run @ Audit Tab - Test Case"] = "Not yet run";
     974/* Property title for `font-variant-numeric`. */
     975localizedStrings["Numeric @ Font Details Sidebar Property"] = "Numeric";
    915976localizedStrings["Object Graph"] = "Object Graph";
    916977localizedStrings["Object Store"] = "Object Store";
     978/* Property value for oblique text. */
     979localizedStrings["Oblique %ddeg @ Font Details Sidebar Property Value"] = "Oblique %ddeg";
    917980localizedStrings["Observer Callback"] = "Observer Callback";
    918981localizedStrings["Observer Handlers:"] = "Observer Handlers:";
    … …  
    923986/* Input label for the y-axis of the offset of a CSS box shadow */
    924987localizedStrings["Offset Y @ Box Shadow Editor"] = "Offset Y";
     988/* Property value for `font-variant-numeric: oldstyle-nums`. */
     989localizedStrings["Old-Style Numerals @ Font Details Sidebar Property Value"] = "Old-Style Numerals";
    925990localizedStrings["Once"] = "Once";
    926991localizedStrings["Online"] = "Online";
    … …  
    931996localizedStrings["Option-click to show source"] = "Option-click to show source";
    932997localizedStrings["Options"] = "Options";
     998/* Property value for `font-variant-numeric: ordinal`. */
     999localizedStrings["Ordinal Letter Forms @ Font Details Sidebar Property Value"] = "Ordinal Letter Forms";
    9331000localizedStrings["Original formatting"] = "Original formatting";
    9341001localizedStrings["Originally %s"] = "Originally %s";
    … …  
    9701037localizedStrings["Percentage (of audits)"] = "%s%%";
    9711038localizedStrings["Periods of high CPU utilization will rapidly drain battery. Strive to keep idle pages under %s average CPU utilization."] = "Periods of high CPU utilization will rapidly drain battery. Strive to keep idle pages under %s average CPU utilization.";
     1039/* Property value for `font-variant-capitals: petite-caps`. */
     1040localizedStrings["Petite Capitals @ Font Details Sidebar Property Value"] = "Petite Capitals";
    9721041localizedStrings["Ping"] = "Ping";
    9731042localizedStrings["Ping Frame"] = "Ping Frame";
    … …  
    9791048localizedStrings["Pong Frame"] = "Pong Frame";
    9801049localizedStrings["Port"] = "Port";
     1050/* Property title for `font-variant-position`. */
     1051localizedStrings["Position @ Font Details Sidebar Property"] = "Position";
    9811052localizedStrings["Power Efficient Playback"] = "Power Efficient Playback";
    9821053localizedStrings["Prefer Shorthands"] = "Prefer Shorthands";
    … …  
    10081079localizedStrings["Properties"] = "Properties";
    10091080localizedStrings["Property"] = "Property";
     1081/* Property value for `font-variant-numeric: proportional-nums`. */
     1082localizedStrings["Proportional Numerals @ Font Details Sidebar Property Value"] = "Proportional Numerals";
     1083/* Property value for `font-variant-alternates: proportional-width`. */
     1084localizedStrings["Proportional-Width Variants @ Font Details Sidebar Property Value"] = "Proportional-Width Variants";
    10101085localizedStrings["Protocol"] = "Protocol";
    10111086localizedStrings["Pseudo-Element"] = "Pseudo-Element";
    … …  
    11231198localizedStrings["Reveal in Style Sheet"] = "Reveal in Style Sheet";
    11241199localizedStrings["Role"] = "Role";
     1200/* Property value for `font-variant-alternates: ruby`. */
     1201localizedStrings["Ruby Glyphs @ Font Details Sidebar Property Value"] = "Ruby Glyphs";
    11251202localizedStrings["Run %d"] = "Run %d";
    11261203localizedStrings["Run console commands as if inside a user gesture"] = "Run console commands as if inside a user gesture";
    … …  
    12111288localizedStrings["Show Console tab"] = "Show Console tab";
    12121289localizedStrings["Show Elements"] = "Show Elements";
     1290localizedStrings["Show Font details sidebar panel"] = "Show Font details sidebar panel";
    12131291localizedStrings["Show Path"] = "Show Path";
    12141292localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
    … …  
    12331311localizedStrings["Show type information"] = "Show type information";
    12341312localizedStrings["Show:"] = "Show:";
     1313/* Property value for `font-variant-alternates: simplified`. */
     1314localizedStrings["Simplified Forms @ Font Details Sidebar Property Value"] = "Simplified Forms";
    12351315localizedStrings["Site-specific Hacks"] = "Site-specific Hacks";
    12361316localizedStrings["Size"] = "Size";
     1317/* Property title for `font-size`. */
     1318localizedStrings["Size @ Font Details Sidebar Property"] = "Size";
    12371319localizedStrings["Size of current object plus all objects it keeps alive"] = "Size of current object plus all objects it keeps alive";
    12381320localizedStrings["Sizes"] = "Sizes";
    12391321/* Label for checkbox that controls whether the local override will actually perform a network request or skip it to immediately serve the response. */
    12401322localizedStrings["Skip Network @ Local Override Popover Options"] = "Skip Network";
     1323/* Property value for `font-variant-numeric: slashed-zero`. */
     1324localizedStrings["Slashed Zeros @ Font Details Sidebar Property Value"] = "Slashed Zeros";
     1325/* Property value for `font-variant-capitals: small-caps`. */
     1326localizedStrings["Small Capitals @ Font Details Sidebar Property Value"] = "Small Capitals";
    12411327localizedStrings["Snapshot %d"] = "Snapshot %d";
    12421328localizedStrings["Snapshot %d \u2014 %s"] = "Snapshot %d \u2014 %s";
    … …  
    12611347/* Input label for the spread radius of a CSS box shadow */
    12621348localizedStrings["Spread @ Box Shadow Editor"] = "Spread";
     1349/* Property value for `font-variant-numeric: stacked-fractions`. */
     1350localizedStrings["Stacked Fractions @ Font Details Sidebar Property Value"] = "Stacked Fractions";
    12631351localizedStrings["Staging:"] = "Staging:";
    12641352localizedStrings["Stalled"] = "Stalled";
    … …  
    12961384/* Name of Storage Tab */
    12971385localizedStrings["Storage Tab Name"] = "Storage";
     1386/* Property title for `font-stretch`. */
     1387localizedStrings["Stretch @ Font Details Sidebar Property"] = "Stretch";
     1388/* Property title for `font-style`. */
     1389localizedStrings["Style @ Font Details Sidebar Property"] = "Style";
    12981390/* CSS properties defined via HTML style attribute */
    12991391localizedStrings["Style Attribute"] = "Style Attribute";
    … …  
    13081400localizedStrings["Styles:"] = "Styles:";
    13091401localizedStrings["Subject"] = "Subject";
     1402/* Property value for `font-variant-position: sub`. */
     1403localizedStrings["Subscript @ Font Details Sidebar Property Value"] = "Subscript";
    13101404/* A submenu item of 'Break On' that breaks (pauses) before child DOM node is modified */
    13111405localizedStrings["Subtree Modified @ DOM Breakpoint"] = "Subtree Modified";
    13121406localizedStrings["Summary"] = "Summary";
     1407/* Property value for `font-variant-position: super`. */
     1408localizedStrings["Superscript @ Font Details Sidebar Property Value"] = "Superscript";
    13131409/* Label of dropdown item used for forcing Web Inspector to be shown using the system's theme */
    13141410localizedStrings["System @ Settings General Appearance"] = "System";
    … …  
    13171413localizedStrings["Tab width:"] = "Tab width:";
    13181414localizedStrings["Tabs"] = "Tabs";
     1415/* Property value for `font-variant-numeric: tabular-nums`. */
     1416localizedStrings["Tabular Numerals @ Font Details Sidebar Property Value"] = "Tabular Numerals";
    13191417/* A submenu item of 'Edit' to change DOM element's tag name */
    13201418localizedStrings["Tag"] = "Tag";
    … …  
    14011499localizedStrings["Timestamp \u2014 %s"] = "Timestamp \u2014 %s";
    14021500localizedStrings["Timing"] = "Timing";
     1501/* Property value for `font-variant-capitals: titling-caps`. */
     1502localizedStrings["Titling Capitals @ Font Details Sidebar Property Value"] = "Titling Capitals";
    14031503localizedStrings["To improve CPU utilization reduce or batch workloads when the page is not visible or during times when the page is not being interacted with."] = "To improve CPU utilization reduce or batch workloads when the page is not visible or during times when the page is not being interacted with.";
    14041504localizedStrings["Toggle Classes"] = "Toggle Classes";
    … …  
    14141514localizedStrings["Trace: %s"] = "Trace: %s";
    14151515localizedStrings["Traces:"] = "Traces:";
     1516/* Property value for `font-variant-alternates: traditional`. */
     1517localizedStrings["Traditional Forms @ Font Details Sidebar Property Value"] = "Traditional Forms";
    14161518/* Amount of data sent over the network for a single resource */
    14171519localizedStrings["Transfer Size"] = "Transfer Size";
    … …  
    14331535localizedStrings["Uncaught Exceptions @ JavaScript Breakpoint"] = "Uncaught Exceptions";
    14341536localizedStrings["Undefined custom element"] = "Undefined custom element";
     1537/* Property value for `font-variant-capitals: unicase`. */
     1538localizedStrings["Unicase @ Font Details Sidebar Property Value"] = "Unicase";
    14351539localizedStrings["Unique"] = "Unique";
    14361540localizedStrings["Unknown Location"] = "Unknown Location";
    … …  
    14581562localizedStrings["Value"] = "Value";
    14591563localizedStrings["Variables"] = "Variables";
     1564/* Section title for font variation properties. */
     1565localizedStrings["Variation Properties @ Font Details Sidebar Section"] = "Variation Properties";
    14601566localizedStrings["Verbose"] = "Verbose";
    14611567localizedStrings["Version"] = "Version";
    … …  
    15401646localizedStrings["WebRTC Logging:"] = "WebRTC Logging:";
    15411647localizedStrings["WebSocket Connection Established"] = "WebSocket Connection Established";
     1648/* Property title for `font-weight`. */
     1649localizedStrings["Weight @ Font Details Sidebar Property"] = "Weight";
    15421650localizedStrings["Whitespace characters"] = "Whitespace characters";
    15431651localizedStrings["Width"] = "Width";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

    r268929 r270637  
    224224    experimentalEnableStylesJumpToVariableDeclaration: new WI.Setting("experimental-styles-jump-to-variable-declaration", false),
    225225    experimentalEnableIndependentStylesPanel: new WI.Setting("experimental-independent-styles-panel", false),
     226    experimentalEnableFontDetailsPanel: new WI.Setting("experimental-font-details-panel", false),
    226227
    227228    // Protocol

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r270606 r270637  
    410410    <script src="Models/ExecutionContextList.js"></script>
    411411    <script src="Models/FPSInstrument.js"></script>
     412    <script src="Models/Font.js"></script>
     413    <script src="Models/FontVariationAxis.js"></script>
    412414    <script src="Models/Frame.js"></script>
    413415    <script src="Models/GarbageCollection.js"></script>
    … …  
    691693    <script src="Views/FindBanner.js"></script>
    692694    <script src="Views/FlexibleSpaceNavigationItem.js"></script>
     695    <script src="Views/FontDetailsPanel.js"></script>
     696    <script src="Views/FontDetailsSidebarPanel.js"></script>
    693697    <script src="Views/FontResourceContentView.js"></script>
    694698    <script src="Views/FormattedValue.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

    r269359 r270637  
    4444        this._orderedStyles = [];
    4545
     46        this._computedPrimaryFont = null;
     47
    4648        this._propertyNameToEffectivePropertyMap = {};
    4749
    … …  
    127129    get computedStyle() { return this._computedStyle; }
    128130    get orderedStyles() { return this._orderedStyles; }
     131    get computedPrimaryFont() { return this._computedPrimaryFont; }
    129132
    130133    get needsRefresh()
    … …  
    157160        let fetchedInlineStylesPromise = new WI.WrappedPromise;
    158161        let fetchedComputedStylesPromise = new WI.WrappedPromise;
     162        let fetchedFontDataPromise = new WI.WrappedPromise;
    159163
    160164        // Ensure we resolve these promises even in the case of an error.
    … …  
    311315            this._includeUserAgentRulesOnNextRefresh = false;
    312316
    313             this.dispatchEventToListeners(WI.DOMNodeStyles.Event.Refreshed, {significantChange});
    314 
    315             fetchedComputedStylesPromise.resolve();
     317            fetchedComputedStylesPromise.resolve({significantChange});
     318        }
     319
     320        function fetchedFontData(error, fontDataPayload)
     321        {
     322            if (fontDataPayload)
     323                this._computedPrimaryFont = WI.Font.fromPayload(fontDataPayload);
     324            else
     325                this._computedPrimaryFont = null;
     326
     327            fetchedFontDataPromise.resolve();
    316328        }
    317329
    … …  
    321333        target.CSSAgent.getComputedStyleForNode.invoke({nodeId: this._node.id}, wrap.call(this, fetchedComputedStyle, fetchedComputedStylesPromise));
    322334
    323         this._pendingRefreshTask = Promise.all([fetchedMatchedStylesPromise.promise, fetchedInlineStylesPromise.promise, fetchedComputedStylesPromise.promise])
    324         .then(() => {
     335        // COMPATIBILITY (iOS 14.0): `CSS.getFontDataForNode` did not exist yet.
     336        if (InspectorBackend.hasCommand("CSS.getFontDataForNode"))
     337            target.CSSAgent.getFontDataForNode.invoke({nodeId: this._node.id}, wrap.call(this, fetchedFontData, fetchedFontDataPromise));
     338        else
     339            fetchedFontDataPromise.resolve();
     340
     341        this._pendingRefreshTask = Promise.all([fetchedComputedStylesPromise.promise, fetchedMatchedStylesPromise.promise, fetchedInlineStylesPromise.promise, fetchedFontDataPromise.promise])
     342        .then(([fetchComputedStylesResult]) => {
    325343            this._pendingRefreshTask = null;
     344            this.dispatchEventToListeners(WI.DOMNodeStyles.Event.Refreshed, {
     345                significantChange: fetchComputedStylesResult.significantChange,
     346            });
    326347            return this;
    327348        });

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r270604 r270637  
    158158    <script src="Models/ExecutionContextList.js"></script>
    159159    <script src="Models/FPSInstrument.js"></script>
     160    <script src="Models/Font.js"></script>
     161    <script src="Models/FontVariationAxis.js"></script>
    160162    <script src="Models/Frame.js"></script>
    161163    <script src="Models/GarbageCollection.js"></script>

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

    r268691 r270637  
    6161    display: none;
    6262}
    63 
    64 .multi-sidebar.showing-multiple > .sidebar > .panel.details.style-computed > .content > .pseudo-classes,
    65 .multi-sidebar.showing-multiple > .sidebar > .panel.details.style-computed > .options-container > .toggle-class-toggle,
    66 .multi-sidebar.showing-multiple > .sidebar > .panel.details.style-computed > .class-list-container {
    67     display: none;
    68 }
    69 
    70 

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

    r270134 r270637  
    3131            WI.RulesStyleDetailsSidebarPanel,
    3232            WI.ComputedStyleDetailsSidebarPanel,
    33             WI.ChangesDetailsSidebarPanel,
    34             WI.DOMNodeDetailsSidebarPanel,
     33
    3534        ];
     35        // COMPATIBILITY (iOS 14.0): `CSS.getFontDataForNode` did not exist yet.
     36        if (WI.settings.experimentalEnableFontDetailsPanel.value && InspectorBackend.hasCommand("CSS.getFontDataForNode"))
     37            detailsSidebarPanelConstructors.push(WI.FontDetailsSidebarPanel);
     38        detailsSidebarPanelConstructors.push(WI.ChangesDetailsSidebarPanel, WI.DOMNodeDetailsSidebarPanel);
    3639        if (InspectorBackend.hasDomain("LayerTree"))
    3740            detailsSidebarPanelConstructors.push(WI.LayerTreeDetailsSidebarPanel);

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

    r269166 r270637  
    135135
    136136.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
    137 .sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
     137.sidebar > .panel.details.css-style > .content:not(.supports-toggle-css-class) ~ .options-container > .toggle-class-toggle,
     138.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar,
     139.sidebar > .panel.details.css-style > .content:not(.supports-new-rule):not(.supports-toggle-class):not(.has-filter-bar) ~ .options-container {
    138140    display: none;
    139141}
    … …  
    231233    overflow-y: auto;
    232234}
     235
     236.multi-sidebar.showing-multiple > .sidebar > .panel.details:not(.style-rules) > .content > .pseudo-classes,
     237.multi-sidebar.showing-multiple > .sidebar > .panel.details:not(.style-rules) > .options-container,
     238.multi-sidebar.showing-multiple > .sidebar > .panel.details:not(.style-rules) > .class-list-container {
     239    display: none;
     240}

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

    r270134 r270637  
    8585    styleDetailsPanelFocusFilterBar(styleDetailsPanel)
    8686    {
    87         this._filterBar.inputField.focus();
     87        if (this._filterBar)
     88            this._filterBar.inputField.focus();
    8889    }
    8990
    … …  
    185186        newRuleButton.addEventListener("contextmenu", this._newRuleButtonContextMenu.bind(this));
    186187
    187         this._filterBar = new WI.FilterBar;
    188         this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
    189         this._filterBar.inputField.addEventListener("keydown", this._handleFilterBarInputFieldKeyDown.bind(this));
    190         optionsContainer.appendChild(this._filterBar.element);
     188        if (typeof this._panel.filterDidChange === "function") {
     189            this._filterBar = new WI.FilterBar;
     190            this._filterBar.addEventListener(WI.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
     191            this._filterBar.inputField.addEventListener("keydown", this._handleFilterBarInputFieldKeyDown.bind(this));
     192            optionsContainer.appendChild(this._filterBar.element);
     193        }
    191194
    192195        if (this._classListContainer) {
    … …  
    202205        WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetAdded, this._styleSheetAddedOrRemoved, this);
    203206        WI.cssManager.addEventListener(WI.CSSManager.Event.StyleSheetRemoved, this._styleSheetAddedOrRemoved, this);
    204 
    205207    }
    206208
    … …  
    233235    {
    234236        this.contentView.addSubview(this._panel);
    235 
    236         let hasFilter = typeof this._panel.filterDidChange === "function";
    237         this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
     237        this.contentView.element.classList.toggle("has-filter-bar", this._filterBar);
    238238        if (this._filterBar)
    239             this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
     239            this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
    240240    }
    241241
    … …  
    243243    {
    244244        this.contentView.element.classList.toggle("supports-new-rule", this._panel.supportsNewRule);
     245        this.contentView.element.classList.toggle("supports-toggle-css-class", this._panel.supportsToggleCSSClass);
    245246    }
    246247
    … …  
    423424    _filterDidChange()
    424425    {
     426        if (!this._filterBar)
     427            return;
     428
    425429        this.contentView.element.classList.toggle(WI.GeneralStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
    426430

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

    r269359 r270637  
    400400        }
    401401
    402         experimentalSettingsView.addSetting(WI.UIString("Elements Tab:", "Elements Tab: @ Experimental Settings", "Category label for experimental settings pertaining to the Elements tab"), WI.settings.experimentalEnableIndependentStylesPanel, WI.UIString("Show independent Styles sidebar"));
     402        let elementsGroup = experimentalSettingsView.addGroup(WI.UIString("Elements Tab:", "Elements Tab: @ Experimental Settings", "Category label for experimental settings pertaining to the Elements tab"));
     403        elementsGroup.addSetting(WI.settings.experimentalEnableIndependentStylesPanel, WI.UIString("Show independent Styles sidebar"));
     404        elementsGroup.addSetting(WI.settings.experimentalEnableFontDetailsPanel, WI.UIString("Show Font details sidebar panel"));
    403405        experimentalSettingsView.addSeparator();
    404406
    … …  
    427429
    428430        listenForChange(WI.settings.experimentalEnableIndependentStylesPanel);
     431        listenForChange(WI.settings.experimentalEnableFontDetailsPanel);
    429432
    430433        this._createReferenceLink(experimentalSettingsView);

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

    r270134 r270637  
    5757    }
    5858
     59    get supportsToggleCSSClass()
     60    {
     61        // Overriden by subclasses if needed.
     62        return true;
     63    }
     64
    5965    attached()
    6066    {
    … …  
    107113    }
    108114
    109     filterDidChange(filterBar)
    110     {
    111         // Implemented by subclasses.
    112     }
    113 
    114115    // Private
    115116
Note: See TracChangeset for help on using the changeset viewer.