Browser-laptop: do not allow emojis for page title in titlemode

[cezaraugusto]

Test plan

1. have title mode enabled
2. go to http://xn--https-5w14d.cf/paypal.com/
3. titlebar should NOT have emoji in it (should NOT look like picture below)

Original issue description

1. have title mode enabled
2. go to http://xn--https-5w14d.cf/paypal.com/

result:

cc @diracdeltas

[bsclifton]

We are showing punycode (ex: the domain still has the xn-- in it)... however, the page title is showing emoji (which is tricky). We may consider filtering certain emoji?

[diracdeltas]

i'm a fan of erring on the safe side and not allowing emoji to show up in titleMode. @bradleyrichter thoughts?

[bradleyrichter]

I agree. Sounds messy and problematic.

[cezaraugusto]

how-to steps

for the person interested: we render the title for titleMode in urlBar component, most precisely in this line. A safe way to solve this is to install the emoji-regex module, which is a small package made just for emojis:

npm i emoji-regex --save

you can check our package.json to ensure we have it. Once confirmed, include it on top of urlBar.js as a dependency:

const emojiRegex = require('emoji-regex')

Then still in urlBar.js, search for the titleValue getter. That's where our hero is waiting for a fix. At the moment of this writing the method looks like this:

  get titleValue () {
    // For about:newtab we don't want the top of the browser saying New Tab
    // Instead just show "Brave"
    return ['about:blank', 'about:newtab'].includes(this.props.urlbarLocation)
      ? '' : this.props.title // HERE'S OUR HERO!!
  }

See that the else condition in the above ternary? this.props.title is the code for the title you want to strip out the emojis.

You can make use of the emoji-regex module we just installed, and just replace() all emoji occurrences with an empty string:

  get titleValue () {
    // For about:newtab we don't want the top of the browser saying New Tab
    // Instead just show "Brave"
    const title = 
    return ['about:blank', 'about:newtab'].includes(this.props.urlbarLocation)
-      ? '' : this.props.title
+      ? '' : this.props.title.replace(emojiRegex(), '')
  }

ensure to run our app again and test http://xn--https-5w14d.cf/paypal.com/ to see if you still see that golden evil lock emoji. Don't you? We're waiting for your PR!

[prasanthp96]

I am interested to fix this bug.

[prasanthp96]

hy @cezaraugusto how to enable the title mode in brave??

[cezaraugusto]

if you're running Windows you'll need to disable "always show the URL bar" in preferences->advanced->URL Bar Options:

we call titleMode the additional layer which hides the urlbar form until you mouse over the chrome bar. It looks like the screenshot I added in the first comment.

[prasanthp96]

hello @cezaraugusto , I have sent a PR . Kindly have a look at it.

[prasanthp96]

hy @cezaraugusto , my pr does not pass the travis test cases.. can you help me to fix the issue ?

[luixxiul]

@prasanthp96 currently there are some travis tests which consistently fail (we are trying to fix them all). If you see that your change does not break another test, then please leave the change as it is. If you cannot tell, please ping @cezaraugusto for audit :-)

[srirambv]

Still happens on Windows.

[srirambv]

Works as expected