Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support to upload multiple custom images for NTP background #15311

Merged
merged 5 commits into from
Oct 4, 2022
Merged

Support to upload multiple custom images for NTP background #15311

merged 5 commits into from
Oct 4, 2022

Conversation

sangwoo108
Copy link
Contributor

@sangwoo108 sangwoo108 commented Oct 1, 2022 •
edited
Loading

Resolves brave/brave-browser#25761

This PR allows users to upload multiple images for NTP background.

  • The maximum number of images is 24
  • These images are stored in a dedicated directory.
  • Users can select one of these or toggle on "Random" button.
  • Users also can remove these images.

Demo

Screen.Recording.2022-10-02.at.12.57.05.PM.mov

Submitter Checklist:

  • I confirm that no security/privacy review is needed, or that I have requested one
  • There is a ticket for my issue
  • Used Github auto-closing keywords in the PR description above
  • Wrote a good PR/commit description
  • Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
  • Ran git rebase master (if needed)

Reviewer Checklist:

  • A security review is not needed, or a link to one is included in the PR description
  • New files have MPL-2.0 license header
  • Adequate test coverage exists to prevent regressions
  • Major classes, functions and non-trivial code blocks are well-commented
  • Changes in component dependencies are properly reflected in gn
  • Code follows the style guide
  • Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

Manual - things to check

  • Users should be able to upload multiple images
  • When user toggle on random button, one of these images should appear on NTP randomly.
  • Users should be able to remove these images
  • Even when a file name has other characters than alphabet, it should be uploaded.

@github-actions github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Oct 1, 2022
@sangwoo108 sangwoo108 marked this pull request as ready for review October 1, 2022 15:00
@sangwoo108
Support to upload multiple custom images for NTP background
cc236cf 
This PR allows users to upload multiple images for NTP background.

* The maximum number of images is 24
* These images are stored in a dedicated directory.
* Users can select one of these or toggle on "Random" button.
* Users also can remove these images.
@sangwoo108 sangwoo108 changed the title Support to upload multiple custom images for NTP backgrounds Support to upload multiple custom images for NTP background Oct 2, 2022
@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

fallaciousreasoning
fallaciousreasoning reviewed Oct 2, 2022
View reviewed changes
Copy link
Contributor

@fallaciousreasoning fallaciousreasoning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly LGTM, few comments 😄

browser/ntp_background/custom_background_file_manager.h Outdated Show resolved Hide resolved
browser/ntp_background/custom_background_file_manager.h Outdated Show resolved Hide resolved
browser/ntp_background/custom_background_file_manager.h Outdated
// remove leading slash
const auto path = value.path().substr(1);
DCHECK(!path.empty()) << "URL path is empty " << value;
url::RawCanonOutputT<char16_t> pref_value;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to confirm, this pref_value doesn't have anything to do with a value in PrefService, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this value should be the same with a value in PrefService, but at this point, no, Prefservice don't do anything.

browser/ntp_background/custom_background_file_manager.h
// be used as webui data url.
url::RawCanonOutputT<char> encoded;
url::EncodeURIComponent(value_.c_str(), value_.length(), &encoded);
return GURL(ntp_background_images::kCustomWallpaperURL +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the url looks something like

chrome://custom-wallpaper/background.jpgencoded-data?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually, it will be chrome://custom-wallpaper/my_background.jpg

when it has something like () then it'll be chrome://custom-wallpaper/%28%29.jpg

browser/ntp_background/custom_background_file_manager.h Outdated Show resolved Hide resolved
components/brave_new_tab_ui/components/default/settings/index.ts Outdated Show resolved Hide resolved
components/brave_new_tab_ui/containers/newTab/settings.tsx
useCustomBackgroundImage: () => void
chooseNewCustomImageBackground: () => void
setCustomImageBackground: (selectedBackground: string) => void
removeCustomImageBackground: (background: string) => void
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's so annoying how we have to drill all our props down :/

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, indeed. Using API directly from where it's needed could be better but not sure. Maybe it could bring more messes?

components/brave_new_tab_ui/containers/newTab/settings/backgroundChooser.tsx Outdated Show resolved Hide resolved
components/brave_new_tab_ui/reducers/new_tab_reducer.ts Outdated Show resolved Hide resolved
components/brave_new_tab_ui/reducers/new_tab_reducer.ts Outdated Show resolved Hide resolved
@simonhong
Copy link
Member

Nice work! One more suggestion - how about enabling multiple file select from file chooser dialog?

@sangwoo108
Copy link
Contributor Author

Nice work! One more suggestion - how about enabling multiple file select from file chooser dialog?

Good idea! It's done. Could you take a look again?

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

simonhong
simonhong approved these changes Oct 3, 2022
View reviewed changes
Copy link
Member

@simonhong simonhong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ 👍🏼 I don't have more :)

@sangwoo108
Copy link
Contributor Author

@fallaciousreasoning Could you take a look again?

@brave-builds
Copy link
Collaborator

A Storybook has been deployed to preview UI for the latest push

fallaciousreasoning
fallaciousreasoning approved these changes Oct 3, 2022
View reviewed changes
Copy link
Contributor

@fallaciousreasoning fallaciousreasoning left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM still 😄

@sangwoo108 sangwoo108 merged commit 66a2993 into master Oct 4, 2022
@sangwoo108 sangwoo108 deleted the sko/multiple-ci branch October 4, 2022 00:53
@sangwoo108
Copy link
Contributor Author

Thank you both!

@github-actions github-actions bot added this to the 1.46.x - Nightly milestone Oct 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@simonhong simonhong simonhong approved these changes

@fallaciousreasoning fallaciousreasoning fallaciousreasoning approved these changes

@cdesouza-chromium cdesouza-chromium Awaiting requested review from cdesouza-chromium

@aguscruiz aguscruiz Awaiting requested review from aguscruiz

Assignees

@sangwoo108 sangwoo108

Labels
CI/storybook-url Deploy storybook and provide a unique URL for each build
Projects
None yet
Milestone
1.46.x - Release
Development

Successfully merging this pull request may close these issues.

Add support for multiple custom images for NTP background images
4 participants
@sangwoo108 @brave-builds @simonhong @fallaciousreasoning