[tor-bugs] #31170 [Circumvention/Snowflake]: Addon Icon looks horrible Firefox Dark Mode.

[Tor Bug Tracker & Wiki]

#31170: Addon Icon looks horrible Firefox Dark Mode.
-------------------------------------+------------------------
 Reporter:  knowguy                  |          Owner:  (none)
     Type:  defect                   |         Status:  new
 Priority:  Medium                   |      Milestone:
Component:  Circumvention/Snowflake  |        Version:
 Severity:  Normal                   |     Resolution:
 Keywords:  snowflake-webextension   |  Actual Points:
Parent ID:                           |         Points:
 Reviewer:                           |        Sponsor:
-------------------------------------+------------------------

Old description:

> The icon is near unseeable on Firefox built in Dark Mode.
>
> [[Image(https://imgur.com/DJJqOcx)]]

New description:

 The icon is near unseeable on Firefox built in Dark Mode.

 [[Image(DJJqOcx.png)]]

--

Comment (by dcf):

 One quick fix is to add a light-colored stroke behind the graphic, like
 this.

 || ||||= current =||||= with stroke =||
 ||= Default theme=||[[Image(webext-v0.0.5-off-
 default.png)]]||[[Image(webext-v0.0.5-on-
 default.png)]]||[[Image(webext-v0.0.5.stroke-off-
 default.png)]]||[[Image(webext-v0.0.5.stroke-on-default.png)]]
 ||=    Dark theme=||[[Image(webext-v0.0.5-off-
 dark.png)]]||[[Image(webext-v0.0.5-on-dark.png)]]||[[Image(webext-v0.0.5
 .stroke-off-dark.png)]]||[[Image(webext-v0.0.5.stroke-on-dark.png)]]

 {{{#!diff
 diff --git a/proxy/webext/icons/status-off.svg b/proxy/webext/icons
 /status-off.svg
 index f6605ea..996ea9b 100644
 --- a/proxy/webext/icons/status-off.svg
 +++ b/proxy/webext/icons/status-off.svg
 @@ -4,4 +4,9 @@
      <title>status-off</title>
      <desc>Created with Sketch.</desc>
 +    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none"
 fill-rule="evenodd">
 +        <g transform="translate(-1003.000000, -111.000000)" fill="none">
 +            <use xlink:href="#status-off"/>
 +        </g>
 +    </g>
      <g id="Snowflake-Extension" stroke="none" stroke-width="1"
 fill="none" fill-rule="evenodd">
          <g id="00" transform="translate(-1003.000000, -111.000000)"
 fill="#4A4A4F">
 diff --git a/proxy/webext/icons/status-on.svg b/proxy/webext/icons/status-
 on.svg
 index 6c7df00..663fd0b 100644
 --- a/proxy/webext/icons/status-on.svg
 +++ b/proxy/webext/icons/status-on.svg
 @@ -4,4 +4,9 @@
      <title>status-on</title>
      <desc>Created with Sketch.</desc>
 +    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none"
 fill-rule="evenodd">
 +        <g transform="translate(-1003.000000, -111.000000)" fill="none">
 +            <use xlink:href="#status-on"/>
 +        </g>
 +    </g>
      <g id="Snowflake-Extension" stroke="none" stroke-width="1"
 fill="none" fill-rule="evenodd">
          <g id="Artboard" transform="translate(-1003.000000, -111.000000)"
 fill="#8000D7">
 diff --git a/proxy/webext/icons/status-running.svg b/proxy/webext/icons
 /status-running.svg
 index 4cc9602..2c5107c 100644
 --- a/proxy/webext/icons/status-running.svg
 +++ b/proxy/webext/icons/status-running.svg
 @@ -4,4 +4,9 @@
      <title>status-on</title>
      <desc>Created with Sketch.</desc>
 +    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none"
 fill-rule="evenodd">
 +        <g transform="translate(-1003.000000, -111.000000)" fill="none">
 +            <use xlink:href="#status-on"/>
 +        </g>
 +    </g>
      <g id="Snowflake-Extension" stroke="none" stroke-width="1"
 fill="none" fill-rule="evenodd">
          <g id="Artboard" transform="translate(-1003.000000, -111.000000)"
 fill="#40E0D0">
 }}}

 I used the following Makefile to make pngs from svg.

 {{{#!makefile
 all: status-on.png status-on at 2x.png status-on at 3x.png \
         status-off.png status-off at 2x.png status-off at 3x.png \
         status-running.png

 %.png: DIMS=61x60
 %@2x.png: DIMS=122x120
 %@3x.png: DIMS=183x180

 %.png: %.svg
         convert -density 600 -background transparent "$<" -resize $(DIMS)
 "$@"
 %@2x.png: %.svg
         convert -density 600 -background transparent "$<" -resize $(DIMS)
 "$@"
 %@3x.png: %.svg
         convert -density 600 -background transparent "$<" -resize $(DIMS)
 "$@"
 }}}

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/31170#comment:2>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online