Replace incognito marker svg file

[simonhong]

Fix brave/brave-browser#5368

This should be merged together with brave/brave-browser#5671

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. For instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protection-Mode
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-compatibility-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

Test Plan:

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[rossmoody]

Cleaned up the SVG code a bit and removed the id attr. This one is worth a shot:

<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <path d="M8 0C3.578 0 0 3.578 0 8c0 4.422 3.578 8 8 8 4.422 0 8-3.578 8-8 0-4.422-3.578-8-8-8z" fill="#5F6368" fill-rule="nonzero"/>
    <path d="M2.212 7.54c.092.299.276 2.029.827 2.528.568.514 2.713.506 3.123.283.92-.498 1.292-2.107 1.454-2.812C7.708 7.14 8 7.14 8 7.14s.308 0 .4.4c.163.704.519 2.318 1.437 2.815.41.223 2.555.231 3.125-.282.55-.5.734-2.235.826-2.534.091-.299.551-.598.643-.698.092-.1.092-.498 0-.598-.184-.2-2.352-.377-4.686-.1-.466.055-.643.2-1.746.2-1.102 0-1.28-.145-1.745-.2-2.333-.277-4.501-.1-4.685.1-.092.1-.092.499 0 .599.092.1.551.399.643.698z" fill="#FFFFFF" fill-rule="nonzero"/>
  </g>
</svg>

[simonhong]

hmm, still got same result with latest one...

[bsclifton]

Removing milestone as this is not reviewed/approved/merged 👍

[simonhong]

I think I found why this new svg doesn't work.
this svg file is used as a mask image not for background image.
So, only circle is drawn captured at description.

@rebron, I think proper mask svg image is needed to show like below.
who can help this?

[rebron]

@karenkliu @bradleyrichter Need some help here with the right svg image. We're getting a circle it looks like and not the whole icon.

[karenkliu]

@simonhong Is the circle part of the icon or do you only need the sunglasses part?

[simonhong]

@karenkliu I need both (circle part and sunglass)
Below is the css code where our mask svg file will be used.

I think I have to say some background why new file is needed.
If I use current file in this PR with background-image, it will work well.
However, below code is chromium's original code and svg is used as a marker.
and I'm trying to replace it w/o upstream code change (we also do a huge effort for it :) )
So, I asked new marker svg file.
If you want to show only sunglass w/o circle, current svg file work (by deleting circle path)
If not, I think I need new marker svg file.

  #incognito {
    -webkit-mask-image: url(images/incognito_marker.svg);
    background-color: var(--cr-secondary-text-color);
    bottom: 20px;
    height: 16px;
    position: absolute;
    right: 16px;
    width: 16px;
  }

[karenkliu]

@simonhong Okay, not sure exactly what you needed but here is the sunglasses SVG both with and without the circle background. I have minimized the SVG file and removed all masks; hopefully it will work now.
sunglasses.zip

[simonhong]

CI all passed :)

[bsclifton]

Works great! ++