Update logo

ci/dev/gen_icons.sh

@@ -1,44 +1,40 @@
 #!/bin/sh
 set -eu
 
+# Generate icons from a single favicon.svg.  favicon.svg should have no fill
+# colors set.
 main() {
   cd src/browser/media
 
-  # We need .ico for backwards compatibility.
+  # We need .ico for backwards compatibility.  The other two are the only icon
-  # The other two are the only icon sizes required by Chrome and
+  # sizes required by Chrome and we use them for stuff like apple-touch-icon as
-  # we use them for stuff like apple-touch-icon as well.
+  # well.  https://web.dev/add-manifest/
-  # https://web.dev/add-manifest/
   #
   # This should be enough and we can always add more if there are problems.
-
+  #
+  # -quiet to avoid https://github.com/ImageMagick/ImageMagick/issues/884
   # -background defaults to white but we want it transparent.
+  # -density somehow makes the image both sharper and smaller in file size.
+  #
   # https://imagemagick.org/script/command-line-options.php#background
-  convert -quiet -background transparent -resize 256x256 favicon.svg favicon.ico
+  convert -quiet -background transparent \
-  # We do not generate the pwa-icon from the favicon as they are slightly different
+          -resize 256x256 -density 256x256 \
-  # designs and sizes.
+          favicon.svg favicon.ico
-  # See favicon.afdesign and #2401 for details on the differences.
-  convert -quiet -background transparent -resize 192x192 pwa-icon.png pwa-icon-192.png
-  convert -quiet -background transparent -resize 512x512 pwa-icon.png pwa-icon-512.png
 
-  # We use -quiet above to avoid https://github.com/ImageMagick/ImageMagick/issues/884
+  # Generate PWA icons.  There should be enough padding to support masking.
+  convert -quiet -border 60x60 -bordercolor white -background white \
+          -resize 192x192 -density 192x192 \
+          favicon.svg pwa-icon-192.png
+  convert -quiet -border 160x160 -bordercolor white -background white \
+          -resize 512x512 -density 512x512 \
+          favicon.svg pwa-icon-512.png
 
-  # The following adds dark mode support for the favicon as favicon-dark-support.svg
+  # The following adds dark mode support for the favicon as
-  # There is no similar capability for pwas or .ico so we can only add support to the svg.
+  # favicon-dark-support.svg There is no similar capability for pwas or .ico so
-  favicon_dark_style="<style>
+  # we can only add support to the svg.
-@media (prefers-color-scheme: dark) {
+  favicon_dark_style="<style>@media (prefers-color-scheme: dark) {* { fill: white; }}</style>"
-  * {
+  cp favicon.svg favicon-dark-support.svg
-    fill: white;
+  sed "s%<path%$favicon_dark_style\n  <path%" favicon.svg > favicon-dark-support.svg
-  }
-}
-</style>"
-  # See https://stackoverflow.com/a/22901380/4283659
-  # This escapes all newlines so that sed will accept them.
-  favicon_dark_style="$(printf "%s\n" "$favicon_dark_style" | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/\\n/g')"
-  sed "$(
-    cat -n << EOF
-s%<rect id="favicon"%$favicon_dark_style<rect id="favicon"%
-EOF
-  )" favicon.svg > favicon-dark-support.svg
 }
 
 main "$@"

flake.nix

@@ -14,6 +14,7 @@
         in {
           devShells.default = pkgs.mkShell {
             nativeBuildInputs = with pkgs; [
+              imagemagick
               nodejs
               python3
               pkg-config

src/browser/media/favicon-dark-support.svg

@@ -1,7 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2250 2250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><style>
+<svg width="100%" height="100%" viewBox="0 0 147 147" xmlns="http://www.w3.org/2000/svg">
-@media (prefers-color-scheme: dark) {
+  <style>@media (prefers-color-scheme: dark) {* { fill: white; }}</style>
-  * {
+  <path d="m42.4214,39.655c-24.4057,0 -42.1554,13.1721 -42.1554,33.845c0,20.5814 18.4892,33.845 42.1554,33.845c23.6662,0 38.1803,-11.6171 38.7349,-28.7225l-21.0777,-0.4574c-0.9244,9.3303 -9.1059,15.1845 -17.6572,15.1845c-11.7406,0 -20.4306,-7.5922 -20.4306,-19.8496c0,-12.2574 8.69,-19.9868 20.4306,-20.2155c8.5513,-0.183 16.9177,5.9457 17.4723,15.276l21.0777,-0.6403c-0.4622,-16.8311 -14.1442,-28.2652 -38.55,-28.2652zm48.8446,2l55.468,0l0,64.0311l-55.468,0l0,-64.0311z" clip-rule="evenodd" fill-rule="evenodd"/>
-    fill: white;
+</svg>
-  }
-}
-</style><rect id="favicon" x="0" y="0" width="2250" height="2250" style="fill:none;"/><g id="favicon1" serif:id="favicon"><path d="M1991.66,1034.72c-38.493,0 -64.144,-22.57 -64.144,-68.897l-0,-266.084c-0,-169.867 -69.982,-263.709 -250.762,-263.709l-83.976,0l-0,179.368l25.661,0c71.144,0 104.967,39.201 104.967,109.285l0,235.201c0,102.156 30.324,143.733 96.806,165.114c-66.482,20.196 -96.806,62.958 -96.806,165.114l0,174.621c0,48.7 0,96.216 -12.829,144.917c-12.829,45.141 -33.823,87.903 -62.98,124.726c-16.329,21.386 -34.991,39.202 -55.981,55.835l-0,23.755l83.971,-0c180.781,-0 250.763,-93.843 250.763,-263.709l-0,-266.084c-0,-47.516 24.485,-68.897 64.144,-68.897l47.822,-0l-0,-179.37l-46.656,-0l0,-1.186Z" style="fill-rule:nonzero;"/><path d="M1420.16,706.904l-258.923,0c-5.833,0 -10.495,-4.752 -10.495,-10.691l-0,-20.192c-0,-5.941 4.662,-10.692 10.495,-10.692l260.089,0c5.83,0 10.495,4.751 10.495,10.692l0,20.192c0,5.939 -5.833,10.691 -11.661,10.691Z" style="fill-rule:nonzero;"/><path d="M1464.48,963.474l-188.942,0c-5.833,0 -10.501,-4.754 -10.501,-10.693l0,-20.192c0,-5.938 4.668,-10.691 10.501,-10.691l188.942,-0c5.833,-0 10.495,4.753 10.495,10.691l-0,20.192c-0,4.754 -4.662,10.693 -10.495,10.693Z" style="fill-rule:nonzero;"/><path d="M1539.12,835.188l-377.885,0c-5.833,0 -10.495,-4.75 -10.495,-10.689l-0,-20.196c-0,-5.939 4.662,-10.69 10.495,-10.69l376.719,0c5.833,0 10.499,4.751 10.499,10.69l-0,20.196c-0,4.75 -3.5,10.689 -9.333,10.689Z" style="fill-rule:nonzero;"/><path d="M861.493,765.074c25.658,0 51.319,2.376 75.811,8.316l0,-48.705c0,-68.897 34.989,-109.285 104.971,-109.285l25.658,0l-0,-179.368l-83.977,0c-180.781,0 -250.758,93.842 -250.758,263.709l0,87.901c40.819,-14.252 83.977,-22.568 128.295,-22.568Z" style="fill-rule:nonzero;"/><path d="M1618.44,1411.25c-18.662,-150.861 -132.962,-276.776 -279.919,-305.285c-40.818,-8.314 -81.642,-9.504 -121.295,-2.376c-1.166,-0 -1.166,-1.189 -2.332,-1.189c-64.148,-136.605 -201.772,-226.884 -351.063,-226.884c-149.289,-0 -285.747,87.905 -351.062,224.51c-1.166,-0 -1.166,1.188 -2.332,1.188c-41.987,-4.753 -83.975,-2.379 -125.963,8.314c-144.623,35.634 -254.257,159.175 -274.085,308.847c-2.332,15.441 -3.499,30.883 -3.499,45.141c0,45.136 30.325,86.713 74.645,92.652c54.817,8.317 102.636,-34.448 101.469,-89.089c0,-8.317 0,-17.821 1.167,-26.134c9.331,-76.025 66.48,-140.168 141.123,-157.99c23.328,-5.939 46.654,-7.124 68.814,-3.559c71.146,9.502 141.124,-27.324 171.449,-91.467c22.162,-47.516 57.151,-89.094 103.804,-111.664c51.314,-24.946 109.633,-28.506 163.286,-9.499c55.979,20.192 97.966,62.954 123.627,116.409c26.824,52.27 39.653,89.093 96.805,96.221c23.325,3.559 88.639,2.374 113.132,1.185c47.82,0 95.64,16.631 129.463,51.079c22.156,23.757 38.485,53.455 45.486,86.715c10.495,53.455 -2.334,106.908 -33.825,147.296c-22.162,28.509 -52.485,49.89 -86.308,59.394c-16.329,4.754 -32.657,5.939 -48.986,5.939l-257.757,0c-51.314,0 -92.138,-41.573 -92.138,-93.842l0,-348.049c0,-14.251 -11.661,-26.13 -25.658,-26.13l-36.156,0c-71.148,1.185 -128.295,81.964 -128.295,167.488l-0,312.415c-0,92.652 73.476,167.488 164.451,167.488c0,0 404.714,-1.19 410.544,-1.19c93.304,-9.503 179.614,-58.204 237.927,-133.04c58.319,-72.46 85.142,-167.492 73.481,-264.894Z" style="fill-rule:nonzero;"/></g></svg>

src/browser/media/favicon.svg

@@ -1 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2250 2250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="favicon" x="0" y="0" width="2250" height="2250" style="fill:none;"/><g id="favicon1" serif:id="favicon"><path d="M1991.66,1034.72c-38.493,0 -64.144,-22.57 -64.144,-68.897l-0,-266.084c-0,-169.867 -69.982,-263.709 -250.762,-263.709l-83.976,0l-0,179.368l25.661,0c71.144,0 104.967,39.201 104.967,109.285l0,235.201c0,102.156 30.324,143.733 96.806,165.114c-66.482,20.196 -96.806,62.958 -96.806,165.114l0,174.621c0,48.7 0,96.216 -12.829,144.917c-12.829,45.141 -33.823,87.903 -62.98,124.726c-16.329,21.386 -34.991,39.202 -55.981,55.835l-0,23.755l83.971,-0c180.781,-0 250.763,-93.843 250.763,-263.709l-0,-266.084c-0,-47.516 24.485,-68.897 64.144,-68.897l47.822,-0l-0,-179.37l-46.656,-0l0,-1.186Z" style="fill-rule:nonzero;"/><path d="M1420.16,706.904l-258.923,0c-5.833,0 -10.495,-4.752 -10.495,-10.691l-0,-20.192c-0,-5.941 4.662,-10.692 10.495,-10.692l260.089,0c5.83,0 10.495,4.751 10.495,10.692l0,20.192c0,5.939 -5.833,10.691 -11.661,10.691Z" style="fill-rule:nonzero;"/><path d="M1464.48,963.474l-188.942,0c-5.833,0 -10.501,-4.754 -10.501,-10.693l0,-20.192c0,-5.938 4.668,-10.691 10.501,-10.691l188.942,-0c5.833,-0 10.495,4.753 10.495,10.691l-0,20.192c-0,4.754 -4.662,10.693 -10.495,10.693Z" style="fill-rule:nonzero;"/><path d="M1539.12,835.188l-377.885,0c-5.833,0 -10.495,-4.75 -10.495,-10.689l-0,-20.196c-0,-5.939 4.662,-10.69 10.495,-10.69l376.719,0c5.833,0 10.499,4.751 10.499,10.69l-0,20.196c-0,4.75 -3.5,10.689 -9.333,10.689Z" style="fill-rule:nonzero;"/><path d="M861.493,765.074c25.658,0 51.319,2.376 75.811,8.316l0,-48.705c0,-68.897 34.989,-109.285 104.971,-109.285l25.658,0l-0,-179.368l-83.977,0c-180.781,0 -250.758,93.842 -250.758,263.709l0,87.901c40.819,-14.252 83.977,-22.568 128.295,-22.568Z" style="fill-rule:nonzero;"/><path d="M1618.44,1411.25c-18.662,-150.861 -132.962,-276.776 -279.919,-305.285c-40.818,-8.314 -81.642,-9.504 -121.295,-2.376c-1.166,-0 -1.166,-1.189 -2.332,-1.189c-64.148,-136.605 -201.772,-226.884 -351.063,-226.884c-149.289,-0 -285.747,87.905 -351.062,224.51c-1.166,-0 -1.166,1.188 -2.332,1.188c-41.987,-4.753 -83.975,-2.379 -125.963,8.314c-144.623,35.634 -254.257,159.175 -274.085,308.847c-2.332,15.441 -3.499,30.883 -3.499,45.141c0,45.136 30.325,86.713 74.645,92.652c54.817,8.317 102.636,-34.448 101.469,-89.089c0,-8.317 0,-17.821 1.167,-26.134c9.331,-76.025 66.48,-140.168 141.123,-157.99c23.328,-5.939 46.654,-7.124 68.814,-3.559c71.146,9.502 141.124,-27.324 171.449,-91.467c22.162,-47.516 57.151,-89.094 103.804,-111.664c51.314,-24.946 109.633,-28.506 163.286,-9.499c55.979,20.192 97.966,62.954 123.627,116.409c26.824,52.27 39.653,89.093 96.805,96.221c23.325,3.559 88.639,2.374 113.132,1.185c47.82,0 95.64,16.631 129.463,51.079c22.156,23.757 38.485,53.455 45.486,86.715c10.495,53.455 -2.334,106.908 -33.825,147.296c-22.162,28.509 -52.485,49.89 -86.308,59.394c-16.329,4.754 -32.657,5.939 -48.986,5.939l-257.757,0c-51.314,0 -92.138,-41.573 -92.138,-93.842l0,-348.049c0,-14.251 -11.661,-26.13 -25.658,-26.13l-36.156,0c-71.148,1.185 -128.295,81.964 -128.295,167.488l-0,312.415c-0,92.652 73.476,167.488 164.451,167.488c0,0 404.714,-1.19 410.544,-1.19c93.304,-9.503 179.614,-58.204 237.927,-133.04c58.319,-72.46 85.142,-167.492 73.481,-264.894Z" style="fill-rule:nonzero;"/></g></svg>
+<svg width="100%" height="100%" viewBox="0 0 147 147" xmlns="http://www.w3.org/2000/svg">
+  <path d="m42.4214,39.655c-24.4057,0 -42.1554,13.1721 -42.1554,33.845c0,20.5814 18.4892,33.845 42.1554,33.845c23.6662,0 38.1803,-11.6171 38.7349,-28.7225l-21.0777,-0.4574c-0.9244,9.3303 -9.1059,15.1845 -17.6572,15.1845c-11.7406,0 -20.4306,-7.5922 -20.4306,-19.8496c0,-12.2574 8.69,-19.9868 20.4306,-20.2155c8.5513,-0.183 16.9177,5.9457 17.4723,15.276l21.0777,-0.6403c-0.4622,-16.8311 -14.1442,-28.2652 -38.55,-28.2652zm48.8446,2l55.468,0l0,64.0311l-55.468,0l0,-64.0311z" clip-rule="evenodd" fill-rule="evenodd"/>
+</svg>

src/node/routes/vscode.ts

@@ -190,6 +190,7 @@ router.get("/manifest.json", async (req, res) => {
             src: `{{BASE}}/_static/src/browser/media/pwa-icon-${size}.png`,
             type: "image/png",
             sizes: `${size}x${size}`,
+            purpose: "maskable",
           })),
         },
         null,