{"patch":"diff --git a\/src\/devtools\/views\/Components\/Badge.css b\/src\/devtools\/views\/Components\/Badge.css\nindex 370409aeb9..22f749cc5b 100644\n--- a\/src\/devtools\/views\/Components\/Badge.css\n+++ b\/src\/devtools\/views\/Components\/Badge.css\n@@ -9,3 +9,9 @@\n font-family: var(--font-family-monospace);\n font-size: var(--font-size-monospace-small);\n }\n+\n+.ExtraLabel {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+ color: var(--color-component-badge-count);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/Badge.js b\/src\/devtools\/views\/Components\/Badge.js\nindex 42ec2d180d..0956f71c03 100644\n--- a\/src\/devtools\/views\/Components\/Badge.js\n+++ b\/src\/devtools\/views\/Components\/Badge.js\n@@ -1,17 +1,47 @@\n \/\/ @flow\n \n-import React from 'react';\n+import React, { Fragment } from 'react';\n+import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n import styles from '.\/Badge.css';\n \n+import type { ElementType } from 'src\/types';\n+\n type Props = {|\n- children: string | null,\n className?: string,\n+ hocDisplayNames: Array | null,\n+ type: ElementType,\n |};\n \n-export default function Badge({ children, className }: Props) {\n- if (children === null) {\n+export default function Badge({ className, hocDisplayNames, type }: Props) {\n+ let hocDisplayName = null;\n+ let totalBadgeCount = 0;\n+ let typeLabel = null;\n+\n+ if (hocDisplayNames !== null) {\n+ hocDisplayName = hocDisplayNames[0];\n+ totalBadgeCount += hocDisplayNames.length;\n+ }\n+\n+ if (type === ElementTypeMemo) {\n+ typeLabel = 'Memo';\n+ totalBadgeCount++;\n+ } else if (type === ElementTypeForwardRef) {\n+ typeLabel = 'ForwardRef';\n+ totalBadgeCount++;\n+ }\n+\n+ if (hocDisplayNames === null && typeLabel === null) {\n return null;\n }\n \n- return

{children}<\/div>;\n+ return (\n+ \n+

\n+ {hocDisplayName || typeLabel}\n+ <\/div>\n+ {totalBadgeCount > 1 && (\n+

+{totalBadgeCount}<\/div>\n+ )}\n+ <\/Fragment>\n+ );\n }\ndiff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nindex 1c6bc2376f..dd4512be9a 100644\n--- a\/src\/devtools\/views\/Components\/Element.css\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -37,6 +37,7 @@\n --color-component-badge-background: var(\n --color-component-badge-background-inverted\n );\n+ --color-component-badge-count: var(--color-component-badge-count-inverted);\n --color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);\n --color-attribute-name: var(--color-attribute-name-inverted);\n --color-attribute-value: var(--color-attribute-value-inverted);\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex d0afe8d45c..c07392fb6e 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -7,7 +7,6 @@ import React, {\n useMemo,\n useState,\n } from 'react';\n-import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n import Store from 'src\/devtools\/store';\n import Badge from '.\/Badge';\n import ButtonIcon from '..\/ButtonIcon';\n@@ -89,16 +88,6 @@ export default function ElementView({ data, index, style }: Props) {\n type,\n } = ((element: any): Element);\n \n- \/\/ TODO Maybe factor this into a shared util method?\n- let badge = null;\n- if (hocDisplayNames !== null) {\n- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';\n- } else if (type === ElementTypeMemo) {\n- badge = 'Memo';\n- } else if (type === ElementTypeForwardRef) {\n- badge = 'ForwardRef';\n- }\n-\n let className = styles.Element;\n if (isSelected) {\n className = treeFocused\n@@ -139,7 +128,11 @@ export default function ElementView({ data, index, style }: Props) {\n <\/Fragment>\n )}\n ><\/span>\n- {badge}<\/Badge>\n+ \n \n <\/div>\n );\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.css b\/src\/devtools\/views\/Components\/HocBadges.css\nindex fb1944d8ef..fd44b6227c 100644\n--- a\/src\/devtools\/views\/Components\/HocBadges.css\n+++ b\/src\/devtools\/views\/Components\/HocBadges.css\n@@ -7,3 +7,15 @@\n );\n user-select: none;\n }\n+\n+.Badge {\n+ display: inline-block;\n+ background-color: var(--color-component-badge-background);\n+ color: var(--color-text);\n+ padding: 0.125rem 0.25rem;\n+ line-height: normal;\n+ border-radius: 0.125rem;\n+ margin-right: 0.25rem;\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-small);\n+}\ndiff --git a\/src\/devtools\/views\/Components\/HocBadges.js b\/src\/devtools\/views\/Components\/HocBadges.js\nindex c9e7daff98..5e21f8e27c 100644\n--- a\/src\/devtools\/views\/Components\/HocBadges.js\n+++ b\/src\/devtools\/views\/Components\/HocBadges.js\n@@ -27,10 +27,12 @@ export default function HocBadges({ element }: Props) {\n \n return (\n

\n- {typeBadge}<\/Badge>\n+ {typeBadge !== null &&

{typeBadge}<\/div>}\n {hocDisplayNames !== null &&\n hocDisplayNames.map(hocDisplayName => (\n- {hocDisplayName}<\/Badge>\n+

\n+ {hocDisplayName}\n+ <\/div>\n ))}\n <\/div>\n );\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nindex 8e6fc95c9f..5fed9e61d4 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.css\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -101,4 +101,4 @@\n \n .Badge {\n margin-left: 0.25rem;\n-}\n\\ No newline at end of file\n+}\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex f47c93c2cb..90195bb955 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -18,7 +18,6 @@ import { OwnersListContext } from '.\/OwnersListContext';\n import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n import { useIsOverflowing } from '..\/hooks';\n import { StoreContext } from '..\/context';\n-import { ElementTypeMemo, ElementTypeForwardRef } from 'src\/types';\n \n import type { Owner } from '.\/types';\n \n@@ -248,16 +247,6 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {\n }\n }, [isInStore, selectOwner, owner]);\n \n- \/\/ TODO Maybe factor this into a shared util method?\n- let badge = null;\n- if (hocDisplayNames !== null) {\n- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';\n- } else if (type === ElementTypeMemo) {\n- badge = 'Memo';\n- } else if (type === ElementTypeForwardRef) {\n- badge = 'ForwardRef';\n- }\n-\n return (\n \n {displayName}\n \n- {badge}<\/Badge>\n+ \n <\/Toggle>\n );\n }\ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex a819ecbb02..e4250fbe03 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -350,15 +350,6 @@ function OwnerView({\n [dispatch, id]\n );\n \n- let badge = null;\n- if (hocDisplayNames !== null) {\n- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';\n- } else if (type === ElementTypeMemo) {\n- badge = 'Memo';\n- } else if (type === ElementTypeForwardRef) {\n- badge = 'ForwardRef';\n- }\n-\n return (\n \n {displayName}\n <\/span>\n- {badge}<\/Badge>\n+ \n <\/Button>\n );\n }\ndiff --git a\/src\/devtools\/views\/Settings\/SettingsContext.js b\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex e4af216522..99f552d67f 100644\n--- a\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -259,6 +259,12 @@ function updateThemeVariables(\n 'color-component-badge-background-inverted',\n documentElements\n );\n+ updateStyleHelper(theme, 'color-component-badge-count', documentElements);\n+ updateStyleHelper(\n+ theme,\n+ 'color-component-badge-count-inverted',\n+ documentElements\n+ );\n updateStyleHelper(theme, 'color-dim', documentElements);\n updateStyleHelper(theme, 'color-dimmer', documentElements);\n updateStyleHelper(theme, 'color-dimmest', documentElements);\ndiff --git a\/src\/devtools\/views\/root.css b\/src\/devtools\/views\/root.css\nindex f6a187185b..cd9c3ce9eb 100644\n--- a\/src\/devtools\/views\/root.css\n+++ b\/src\/devtools\/views\/root.css\n@@ -40,6 +40,8 @@\n --light-color-component-name-inverted: #ffffff;\n --light-color-component-badge-background: rgba(0, 0, 0, 0.15);\n --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);\n+ --light-color-component-badge-count: #777d88;\n+ --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n --light-color-dim: #777d88;\n --light-color-dimmer: #cfd1d5;\n --light-color-dimmest: #eff0f1;\n@@ -98,9 +100,11 @@\n --dark-color-commit-gradient-9: #febc38;\n --dark-color-commit-gradient-text: #000000;\n --dark-color-component-name: #61dafb;\n- --dark-color-component-name-inverted: ##282828;\n+ --dark-color-component-name-inverted: #282828;\n --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);\n --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);\n+ --dark-color-component-badge-count: #8f949d;\n+ --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);\n --dark-color-dim: #8f949d;\n --dark-color-dimmer: #777d88;\n --dark-color-dimmest: #4f5766;\n","commit":{"shortRevision":"3f0606f3d9","authorEmail":"bvaughn@fb.com","authoredAt":"2019-06-01T18:48:24-07:00","authorName":"Brian Vaughn","subject":"Refactored badges to share code and show +count","revision":"3f0606f3d945a1952e1cbf97ff5b5879c51aee16"},"body":"","parents":["6a69a6e9918dfdcc63b41312ebe9982789953bae"],"files":[{"status":"M","path":"src\/devtools\/views\/Components\/Badge.css"},{"status":"M","path":"src\/devtools\/views\/Components\/Badge.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Element.css"},{"status":"M","path":"src\/devtools\/views\/Components\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Components\/HocBadges.css"},{"status":"M","path":"src\/devtools\/views\/Components\/HocBadges.js"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.css"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SelectedElement.js"},{"status":"M","path":"src\/devtools\/views\/Settings\/SettingsContext.js"},{"status":"M","path":"src\/devtools\/views\/root.css"}]}

dillon1000/react

Files changed