Changelog Entry

Added

• Added bubble nub and style options, by @compulim, in PR #2137 and PR #2487

Description

Emulator is using CSS variable for bubble background.

Today, bubble nub is rendered using SVG in Data URI as background image. This approach will not work with CSS variables.

Tomorrow, we are changing bubble nub to be rendered using pure SVG, thus, it can be styled using CSS properly, e.g. fill, stroke, and stroke-width.

Technical details

• We render bubble nub using SVG, save it as data URI, and then save it under background-image of a CSS
• In this approach, we are using a package called color to normalize the color
  • This is because some colors are not supported by SVG
  • I don't exactly remember which, but probably #F00 is not supported, so we need to normalize it to #FF0000
  • The color package cannot read CSS variables, that's why it's breaking
• The new approach, will use CSS for styling, but we can no longer use SVG serialized in background-image
  • We style fill, stroke, and strokeWidth
• The PR will render the SVG as a <svg>, instead of CSS style background-image: data:image/svg+xml;utf8,<svg xmlns="" ...>

Specific Changes

• Modify src/Activity/Bubble.js to use SVG to render the bubble nub
• Remove data URI-based SVG from src/Styles/StyleSet/Bubble.js
• Remove color package because it is no longer being used

• Testing Added