Commit a6b6d7f5 authored by Gabriel Luong's avatar Gabriel Luong
Browse files

Bug 1521243 - Show a warning for invalid declarations and filter icon for... 

Bug 1521243 - Show a warning for invalid declarations and filter icon for overridden declarations in the new rules view. r=mtigley
parent aaa41182

devtools/client/inspector/rules/components/Declaration.js

+16 −3
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ const { PureComponent } = require("devtools/client/shared/vendor/react"); 
const dom = require("devtools/client/shared/vendor/react-dom-factories");

const PropTypes = require("devtools/client/shared/vendor/react-prop-types");



const { getStr } = require("../utils/l10n");

const Types = require("../types");



class Declaration extends PureComponent {
@@ -118,15 +119,16 @@ class Declaration extends PureComponent { 
  }



  render() {

    const { declaration } = this.props;

    const {

      computedProperties,

      isDeclarationValid,

      isEnabled,

      isKnownProperty,

      isNameValid,

      isOverridden,

      name,

      value,

    } = declaration;

    } = this.props.declaration;



    return (

      dom.li(
@@ -155,7 +157,18 @@ class Declaration extends PureComponent { 
          dom.span({ className: "ruleview-propertyvaluecontainer" },

            dom.span({ className: "ruleview-propertyvalue theme-fg-color1" }, value),

            ";"

          )

          ),

          dom.div({

            className: "ruleview-warning" +

                       (isDeclarationValid ? " hidden" : ""),

            title: isNameValid ?

                   getStr("rule.warningName.title") : getStr("rule.warning.title"),

          }),

          dom.div({

            className: "ruleview-overridden-rule-filter" +

                       (!isDeclarationValid || !isOverridden ? " hidden" : ""),

            title: getStr("rule.filterProperty.title"),

          })

        ),

        this.renderComputedPropertyList(),

        this.renderShorthandOverriddenList()

devtools/client/inspector/rules/reducers/rules.js

+5 −0
Original line number Diff line number Diff line
@@ -32,10 +32,15 @@ function getDeclarationState(declaration, ruleId) { 
    computedProperties: declaration.computedProperties,

    // An unique CSS declaration id.

    id: declaration.id,

    // Whether or not the declaration is valid. (Does it make sense for this value

    // to be assigned to this property name?)

    isDeclarationValid: declaration.isValid(),

    // Whether or not the declaration is enabled.

    isEnabled: declaration.enabled,

    // Whether or not the declaration's property name is known.

    isKnownProperty: declaration.isKnownProperty,

    // Whether or not the property name is valid.

    isNameValid: declaration.isNameValid(),

    // Whether or not the the declaration is overridden.

    isOverridden: !!declaration.overridden,

    // The declaration's property name.

devtools/client/inspector/rules/types.js

+7 −0
Original line number Diff line number Diff line
@@ -25,12 +25,19 @@ const declaration = exports.declaration = { 
  // An unique CSS declaration id.

  id: PropTypes.string,



  // Whether or not the declaration is valid. (Does it make sense for this value

  // to be assigned to this property name?)

  isDeclarationValid: PropTypes.bool,



  // Whether or not the declaration is enabled.

  isEnabled: PropTypes.bool,



  // Whether or not the declaration's property name is known.

  isKnownProperty: PropTypes.bool,



  // Whether or not the property name is valid.

  isNameValid: PropTypes.bool,



  // Whether or not the the declaration is overridden.

  isOverridden: PropTypes.bool,

devtools/client/themes/rules.css

+2 −0
Original line number Diff line number Diff line
@@ -172,7 +172,9 @@ 
.ruleview-computedlist,

.ruleview-expandable-container[hidden],

.ruleview-overridden-items[hidden],

.ruleview-overridden-rule-filter.hidden,

.ruleview-overridden-rule-filter[hidden],

.ruleview-warning.hidden,

.ruleview-warning[hidden],

.ruleview-overridden .ruleview-grid {

  display: none;