Skip to content

[Brand design updates - Core App Components] Move brand update pictograms/icon into production resources - #9732

Open
mikescamell wants to merge 20 commits into
developfrom
feature/mikescamell/move-brand-update-pictograms-and-icons-to-prod
Open

[Brand design updates - Core App Components] Move brand update pictograms/icon into production resources#9732
mikescamell wants to merge 20 commits into
developfrom
feature/mikescamell/move-brand-update-pictograms-and-icons-to-prod

Conversation

@mikescamell

@mikescamell mikescamell commented Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Task/Issue URL: https://app.asana.com/1/137249556945/project/488551667048375/task/1216795442294569?focus=true
Tech Design URL (if applicable):
API Proposals URL(s) (if applicable):

Description

  • Move the 2026 pictograms and icons into production resources while retaining legacy fallback resources.
  • Rename resources to match the Icons repository, remove unused duplicates, and pin layouts where intrinsic dimensions differ.
  • Update artwork for Duck.ai, subscriptions, App Tracking Protection, Site Permissions, Fire, widgets, settings, browser errors, Autofill, bookmarks, sync, and VPN surfaces.
  • Scale wide remote-message artwork correctly and add wide artwork examples to the Android Design System preview.

Steps to test this PR

Use an internalRelease build (release preferable for subscription testing) build on a physical device. Do not use an emulator for these checks.
Start with a clean installation.
The appBrandDesignUpdate flags are now true by default; leave them unchanged for new-behaviour checks.

Changed behaviour

  • Open Settings → Other Settings → Permissions → Site Permissions.
  • Start with no allowed-site rows using a fresh test profile or the screen's Remove All action.
  • Verify only the empty state text is shown.
  • Open Settings → Other Settings → Internal Features → Feature Flag Inventory.
  • Set the pictograms child under appBrandDesignUpdate to false.
  • Force-stop the app.
  • Relaunch the app.
  • Reopen Site Permissions.
  • Verify the legacy Site Permissions empty-state illustration is shown.
  • Set the pictograms child under appBrandDesignUpdate to true in Feature Flag Inventory.
  • Force-stop the app.
  • Relaunch the app.
  • Create a DuckAiPlus test subscription in the supplied Internal release build.
  • Open Settings → Other Settings → AI Features.
  • Tap the enabled Duck.ai subscription row.
  • Verify the paid-settings header uses the updated Duck.ai artwork.
  • Open Settings → Protections → App Tracking Protection.
  • Complete App Tracking Protection onboarding.
  • Grant Android VPN permission.
  • Verify App Tracking Protection is running.
  • Open a regular New Tab page.
  • Verify the shield icon is the leading item before the dynamic summary text.
  • Open Settings → Protections → App Tracking Protection.
  • Turn off App Tracking Protection for All Apps
  • Go back to the New Tab page.
  • Verify the exclamation icon is the leading item before the dynamic summary text.
  • Ensure you have the app or device in light theme
  • Open the tab switcher.
  • Switch to Fire mode tabs.
  • If Fire tabs exist, use the overflow menu to select Close All Tabs and confirm Close.
  • Verify the Fire Tabs empty state uses the light Fire window artwork.
  • Select New Fire Tab.
  • Verify the Fire Tab new-tab empty state uses the light Fire window artwork.
  • Close that Fire tab.
  • Set the app theme to Dark through Settings → Other Settings → Appearance → Theme.
  • Open the tab switcher.
  • Switch to Fire mode tabs.
  • Verify zero Fire tabs; if any remain, use the overflow menu to select Close All Tabs and confirm Close.
  • Verify the Fire Tabs empty state uses the dark Fire window artwork.
  • Select New Fire Tab.
  • Verify the Fire Tab new-tab empty state uses the dark Fire window artwork.

Widgets and remote-message artwork

Some devices cache widget-picker previews. If a preview does not update after force-stopping and relaunching DuckDuckGo, restart the launcher or device before reopening the Widgets picker.

  • Launch the DuckDuckGo app once.
  • Long-press an empty area on the launcher.
  • Open the launcher's Widgets picker.
  • Open the DuckDuckGo provider group.
  • Select the Search Only provider entry.
  • Verify the Search Only preview uses the 2026 artwork.
  • Return to the DuckDuckGo provider list.
  • Select the Search and Favorites provider entry.
  • Verify the Search and Favorites preview uses the 2026 artwork.
  • Close the Widgets picker before changing an app flag.
  • Open Settings → Other Settings → Internal Features → Feature Flag Inventory.
  • Set the addressBar child under appBrandDesignUpdate to false.
  • Force-stop the app.
  • Relaunch the app.
  • Open the launcher's Widgets picker again.
  • Open the DuckDuckGo provider group again.
  • Select the Search Only provider entry again.
  • Verify the Search Only preview uses the legacy artwork.
  • Return to the DuckDuckGo provider list again.
  • Select the Search and Favorites provider entry again.
  • Verify the Search and Favorites preview uses the legacy artwork.
  • Close the launcher's Widgets picker after checking the legacy previews.
  • Open Settings → Other Settings → Internal Features → Feature Flag Inventory.
  • Restore the addressBar child under appBrandDesignUpdate to true.
  • Force-stop the app.
  • Relaunch the app.
  • Open Settings → Other Settings → Internal Features.
  • Open Android Design System Preview.
  • Enable Brand design update switch at in the screen toolbar
  • Select the Messaging tab.
  • Scroll to the Remote Messaging Framework section header.
  • Ensure Enable Dark Theme is off; tap the switch only if it is on.
  • Verify Medium Message shows the complete critical_update_96 illustration inside its card.
  • Verify Big Single Message shows the complete announcement_96 illustration inside its card.
  • Verify the Big Two Actions Message card with the DuckDuckGo illustration shows the complete duckduckgo_96 illustration inside its card.
  • Verify the Big Two Actions Message card whose subtitle mentions the app update shows the complete update_96 illustration inside its card.
  • Verify the DuckDuckGo on desktop card is present.
  • Verify the DuckDuckGo on desktop card shows desktop_promo_artwork without clipping.
  • Verify the A fresh new look card is present with the light theme selected.
  • Verify the A fresh new look card uses the light visual-design artwork.
  • Ensure Enable Dark Theme is on; tap the switch only if it is off.
  • Wait for the preview activity to relaunch.
  • Select the Messaging tab again.
  • Verify the A fresh new look card is present with the dark theme selected.
  • Verify the A fresh new look card uses the dark visual-design artwork.

Smoke test

Switch to playRelease build (just for sanity)

  • Open Settings → Other Settings → Appearance.
  • Verify Change app icon is the first setting.
  • On a device/profile where Passwords & Autofill is visible, open Settings → Other Settings → Passwords & Autofill.
  • Under Import Passwords, select Sync Desktop Passwords.
  • Verify the Import Passwords screen shows the updated desktop-sync artwork.
  • Tap Get Desktop Browser.
  • Verify the desktop-browser promotion shows the laptop_ddginstall_96 artwork.
  • Open Settings → Scroll to Protections section.
  • Verify each visible protection row's leading icon uses the updated icons.
  • From the browser menu, open Bookmarks at the root level using a clean profile with no bookmarks or folders.
  • Verify the root empty state (No bookmarks added yet) shows the updated bookmarks_import_128 artwork.
  • Open Settings → Other Settings → Sync & Backup.
  • Select Get Desktop Browser.
  • Verify the destination shows the updated ddg_app_download_96 download artwork.
  • Verify the displayed link is duckduckgo.com/app.
  • Open Subscription Settings from the DuckDuckGo Subscription section using an active PLUS subscription.
  • Verify the Upgrade to Pro row is visible with Unlock more powerful AI and the updated ai_chat_advanced_color_24 icon.
  • Open a new tab, navigate to https://invalid.invalid/.
  • Wait for the main-frame load to fail.
  • Verify the browser error page (not the offline/connection page) shows the current-theme Dax artwork at its 296dp maximum width.
  • Open ign.com check that the trackers animation plays
  • Turn of tracking protection
  • Check the unprotected shield shows

UI changes

See here for screenshots

Note

Low Risk
Changes are drawable renames and layout android:src updates with no business-logic impact; main risk is a missing or mismatched resource at runtime if not all assets landed in the same release.

Overview
This PR continues the 2026 brand asset migration by wiring ad-blocking and design-system surfaces to the renamed production drawables (dropping the ic_ prefix where applicable) and refreshing YouTube-related header/warning art.

Ad-blocking settings list rows now use shared CommonR icons (video_player_color_24, ads_blocked_color_24). Settings and Duck Player headers swap legacy vectors (ad_blocking_header_128, clean_tube_128) for youtube_clean_128, while disabled/contingency bottom sheets use youtube_warning_128 instead of the 96dp variant. youtube_warning_96 is retuned to a true 96×96 viewport; youtube_warning_128 is added. A TODO notes a future omnibar badge icon once addressBar toggles are removed.

Android Design System previews and the internal remote-message gallery point at the new names (announcement_96, duckduckgo_96, update_96, critical_update_96, laptop_ddginstall_96, subscription_128, etc.) and add showcase cards for wide desktop promo and visual design update messages. Lint baseline entries are updated to match renamed drawable files.

Reviewed by Cursor Bugbot for commit 2afd8f2. Bugbot is set up for automated code reviews on this repo. Configure here.

@mikescamell mikescamell changed the title Move rebrand pictograms into production resources [Brand design updates - Core App Components] Move brand update pictograms/icon into production resources Sep 7, 2026
@mikescamell
mikescamell force-pushed the feature/mikescamell/move-brand-update-pictograms-and-icons-to-prod branch 3 times, most recently from 04b7d01 to a531e11 Compare September 8, 2026 10:02
@mikescamell
Turn on all feature toggles by default
b64ca6f
@mikescamell
Move rebrand pictograms into production resources
233d921 
Promote rebrand overrides from the app internal source set into each owning module main resources. Keep module-local copies where modules intentionally share artwork, preserving explicit ownership and resource isolation. Preserve legacy ic_duck_ai while applying the new artwork only to ic_duckai, with size-tier corrections regenerated as needed.

Artwork in this import is regenerated from the current Icons-Main Color/24px sources with vd-tool; Video Player remains intentionally duplicated in the app and design-system owners.
@mikescamell
Deduplicate rebrand pictograms within their owning modules
94001c4 
Retain same-module alias cleanup while restoring intentional cross-module copies and module-local resource references. Preserve the theme-tinted AppTP warning in app and vpn-impl, keep distinct legacy and new Duck.ai resources, and replace older VPN artwork in network-protection and subscriptions. Identity remains in both owner modules; app onboarding resolves the design-system copy through CommonR for F-Droid while subscriptions stays local.

Both Identity Blocked PIR owner copies use the source-generated mapped artwork; subscriptions canonical bytes are sourced from its deleted alias.
@mikescamell
Rename rebrand pictograms to Icons repository names
8afea96 
Rename each retained module-local pictogram independently to its Icons repository name and update Kotlin, XML, tests, and lint baselines. Keep intentional cross-module duplication explicit, including the VPN artwork replacement in network-protection and subscriptions. Preserve cookie_color_24_1, the Duck.ai legacy/new split, and the YouTube 96/128 consumer split.

Identity Blocked PIR remains intentionally duplicated in design-system and subscriptions; C3 renames only the design-system alias and updates the app CommonR reference.

Also cut over the ungated Duck.ai settings icon and subscription VPN onboarding header to their canonical production resources, and retain the Cookie-Blocked artwork under its canonical cookie_blocked_color_24 name.

� Conflicts:
�	app/src/main/res/drawable/image_get_desktop_browser.xml
�	app/src/main/res/drawable/laptop_ddginstall_96.xml
�	autofill/autofill-impl/src/main/res/layout/activity_get_desktop_app.xml
�	desktop-app-promotion/desktop-app-promotion-impl/src/main/res/drawable/image_get_desktop_browser.xml
�	desktop-app-promotion/desktop-app-promotion-impl/src/main/res/layout/activity_desktop_app_promotion.xml
@mikescamell
Pin pictogram sizes where intrinsic dimensions changed
9a794c1 
Pin personal_information_remover_128 (base 320x240, new 128x96) at 320dp x 240dp, and ic_autofill_keychain (base 220x170, new 128x96) at 220dp x 170dp. These pins preserve current rendering pending design review.
@mikescamell
Remove unused rebrand pictograms
13325ff 
Not ALL unused pictograms, just based on what we've added and changed. The rest will get removed in a follow-up project.
@mikescamell
Add TODO
5bfbde6
@mikescamell
Remove site permissions image if brand update flag is on
e3a294b 
Hiding this was missed from the pictograms work
@mikescamell
Fix Duck.AI Subscription settings screen header image
9eb55b9
@mikescamell
Update and rename ai_chat_advanced_color_24
5d830de 
Was missed in previous Pictograms work
@mikescamell
Spotless
29b32a8
@mikescamell
Select the fire window pictogram by theme
cf16bde 
Igor's export ships light and dark variants but only the light one was
imported, so dark mode rendered the light artwork. Adds
fire_window_dark_phone_96 and a dedicated daxDrawableFireWindowPhone attr.

daxDrawableTabPlaceholderPreview could not be reused: outside fire mode it
resolves to the Dax icon for the tab-switcher placeholder.
@mikescamell
Scale remote message illustrations instead of cropping them
0ffc363 
The illustration slot was a fixed 64dp box with scaleType="center", which
centres at intrinsic size without scaling, so every 96dp pictogram lost its
outer 16dp band and the 256x144 assets showed only their middle quarter.

Placeholder.drawable() is shared by all message shapes, so desktop_promo_artwork
and ic_visual_design_update_artwork_* can reach this slot as well as the promo
layout. Capping height only keeps their aspect: 114x64 and 101x64.
layout_constrainedWidth guards against a server-supplied asset overflowing the
card. The 64dp dimen is unchanged and read by this view alone.
@mikescamell
Move widget picker previews into production resources
681074f 
SearchWidgetProviderInfoUpdater already selects between the default provider
metadata and legacy_provider_info on the addressBar toggle, but the 2026
previews were internal-flavour only and search_widget_preview_aliases.xml
redirected each 2026 name back to the legacy drawable, so both branches of the
switch rendered the same pre-rebrand preview on play and fdroid.

The four provider-info pairs differ only in previewImage, so promoting the six
drawables and dropping the alias file is enough to make the toggle work. The
*_legacy_* drawables and *_widget_info_legacy*.xml are the flag-off route and
are retained.
@mikescamell
Move the AppTP CTA shield to the leading edge
f14332e 
The 2026 shield is a 24dp glyph, so the 48dp trailing slot oversized it. Puts
it before the header text and moves the hardcoded margins onto keylines.
@mikescamell
mikescamell force-pushed the feature/mikescamell/move-brand-update-pictograms-and-icons-to-prod branch from a531e11 to f14332e Compare September 8, 2026 10:28
@mikescamell
mikescamell force-pushed the feature/mikescamell/move-brand-update-pictograms-and-icons-to-prod branch from 75957bd to 2afd8f2 Compare September 9, 2026 13:55
mikescamell
mikescamell commented Sep 9, 2026
View reviewed changes
Comment thread ...ync-impl/src/main/java/com/duckduckgo/sync/impl/promotion/SyncDesktopAppPromotionLauncher.kt
title = context.getString(R.string.syncGetAppsOnOtherPlatformsTitle),
body = context.getString(R.string.syncGetAppsOnOtherPlatformInstruction),
illustration = CommonR.drawable.ddg_app_download_128,
illustration = CommonR.drawable.ddg_app_download_96,

@mikescamell mikescamell Sep 9, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@catalinradoiu I updated the artwork here to 96 as we discussed 👍

@mikescamell
mikescamell marked this pull request as ready for review September 9, 2026 14:14
@mikescamell mikescamell closed this Sep 9, 2026
@mikescamell mikescamell reopened this Sep 9, 2026
@mikescamell

mikescamell commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author

@LukasPaczos this is ready for review 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@malmstein malmstein Awaiting requested review from malmstein malmstein is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@LukasPaczos LukasPaczos

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mikescamell @LukasPaczos