dom.input({
              id: inputId,
              type: "checkbox",
              checked: isTargetBrowser,
              onChange: this._onTargetBrowserChanged,
              "data-id": id,
              "data-status": status,
            }),
            dom.label(
              {
                className: "compatibility-settings__target-browsers-item-label",
                htmlFor: inputId,
              },
              BrowserIcon({ id, title: `${name} ${status}` }),
              `${name} ${status} (${version})`
            )
          );
        })
      )
    );
  }

  _renderHeader() {
    return dom.header(
      {
        className: "compatibility-settings__header",
      },
      Localized(
        { id: "compatibility-settings-header" },
        dom.label(
          {
            className: "compatibility-settings__header-label",
          },
          "compatibility-settings-header"
        )
      ),
      Localized(
        {
          id: "compatibility-close-settings-button",
          attrs: { title: true },
        },
        dom.button(
          {
            className: "compatibility-settings__header-button",
            title: "compatibility-close-settings-button",
            onClick: () => {
              const { defaultTargetBrowsers } = this.props;
              const { targetBrowsers } = this.state;

              // Sort by ordering of default browsers.
              const browsers = defaultTargetBrowsers.filter(b =>
                targetBrowsers.find(t => t.id === b.id && t.status === b.status)
              );

              if (
                this.props.targetBrowsers.toString() !== browsers.toString()
              ) {
                this.props.updateTargetBrowsers(browsers);
              }

              this.props.updateSettingsVisibility();
            },
          },
          dom.img({
            className: "compatibility-settings__header-icon",
            src: CLOSE_ICON,
          })
        )
      )
    );
  }

  render() {
    return dom.section(
      {
        className: "compatibility-settings",
      },
      this._renderHeader(),
      this._renderTargetBrowsers()
    );
  }
}

const mapStateToProps = state => {
  return {
    defaultTargetBrowsers: state.compatibility.defaultTargetBrowsers,
    targetBrowsers: state.compatibility.targetBrowsers,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    updateTargetBrowsers: browsers => dispatch(updateTargetBrowsers(browsers)),
    updateSettingsVisibility: () => dispatch(updateSettingsVisibility(false)),
  };
};

module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings);
PK