jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fall back to larger images if requested size is not available

Browse Source 
Summary: This diff follows up on the previous one, by trying a larger icon size if the original requested icon size was missing.

Reviewed By: lblasa

Differential Revision: D46556076

fbshipit-source-id: 4a078088aa27390f247e39afeda4b1df261d8b30
This commit is contained in:
Michel Weststrate
2023-06-08 07:31:34 -07:00
committed by Facebook GitHub Bot
parent a6dac1d8d9
commit 50f50fa46c
3 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/flipper-ui-core/src/ui/components/Glyph.tsx
View File

@@ -11,7 +11,7 @@ import React from 'react';
import styled from '@emotion/styled';
import {getIconURL} from '../../utils/icons';
export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32;
const ColoredIconBlack = styled.img<{size: number}>(({size}) => ({
height: size,

2
desktop/flipper-ui-core/src/utils/icons.tsx
View File

@@ -10,7 +10,7 @@
import {getRenderHostInstance} from 'flipper-frontend-core';
import {IconSize} from '../ui/components/Glyph';
const AVAILABLE_SIZES: IconSize[] = [8, 10, 12, 16, 18, 20, 24, 32];
const AVAILABLE_SIZES: IconSize[] = [8, 10, 12, 16, 18, 20, 24, 28, 32];
const DENSITIES = [1, 1.5, 2, 3, 4];
export type Icon = {

57
desktop/scripts/build-icons.tsx
View File

@@ -13,6 +13,8 @@ import fetch from '@adobe/node-fetch-retry';
// eslint-disable-next-line node/no-extraneous-import
import type {Icon} from 'flipper-ui-core';
const AVAILABLE_SIZES: Icon['size'][] = [8, 10, 12, 16, 18, 20, 24, 28, 32];
export type Icons = {
[key: string]: Icon['size'][];
};
@@ -50,30 +52,51 @@ export async function downloadIcons(buildFolder: string) {
await Promise.all(
iconURLs.map(async (icon) => {
const url = getPublicIconUrl(icon);
const res = await fetch(url);
if (res.status !== 200) {
console.warn(
// eslint-disable-next-line prettier/prettier
`Could not download the icon ${icon} from ${url}: got status ${res.status}`,
);
return;
const sizeIndex = AVAILABLE_SIZES.indexOf(icon.size);
if (sizeIndex === -1) {
throw new Error('Size unavailable: ' + icon.size);
}
return new Promise((resolve, reject) => {
const fileStream = fs.createWriteStream(
path.join(buildFolder, buildLocalIconPath(icon)),
);
res.body.pipe(fileStream);
res.body.on('error', reject);
fileStream.on('finish', resolve);
});
const sizesToTry = AVAILABLE_SIZES.slice(sizeIndex);
while (sizesToTry.length) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const size = sizesToTry.shift()!;
const url = getPublicIconUrl({...icon, size});
const res = await fetch(url);
if (res.status !== 200) {
// console.log(
// // eslint-disable-next-line prettier/prettier
// `Could not download the icon ${
// icon.name
// } at size ${size} from ${url}: got status ${
// res.status
// }. Will fallback to one of the sizes: ${sizesToTry.join(' or ')}`,
// );
// not available at this size, pick the next
continue;
}
return new Promise((resolve, reject) => {
const fileStream = fs.createWriteStream(
path.join(buildFolder, buildLocalIconPath(icon)),
);
res.body.pipe(fileStream);
res.body.on('error', reject);
fileStream.on('finish', resolve);
});
}
console.error(
`Could not download the icon ${JSON.stringify(
icon,
)} from ${getPublicIconUrl(icon)}, didn't find any matching size`,
);
}),
);
}
// should match flipper-ui-core/src/utils/icons.tsx
export function getPublicIconUrl({name, variant, size, density}: Icon) {
return `https://facebook.com/images/assets_DO_NOT_HARDCODE/facebook_icons/${name}_${variant}_${size}_primary-icon.png`;
return `https://facebook.com/images/assets_DO_NOT_HARDCODE/facebook_icons/${name}_${variant}_${size}.png`;
}
// should match app/src/utils/icons.tsx