WebUI Dark Mode: update history sync illustration

Screenshot: https://imgur.com/a/k0Y3J7N

R=hcarmona@chromium.org
BUG=923597

Change-Id: Ib2d782d084cf02eacf68f5296a884a09d0b2be70
Reviewed-on: https://chromium-review.googlesource.com/c/1487882
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#635858}

chrome/browser/browser_resources.grd

@@ -347,6 +347,7 @@
         <include name="IDR_HISTORY_HISTORY_JS" file="resources\history\history.js" type="BINDATA" />
         <include name="IDR_HISTORY_IMAGES_100_SIGN_IN_PROMO_JPG" file="resources\history\images\100\sign_in_promo.jpg" type="BINDATA" />
         <include name="IDR_HISTORY_IMAGES_200_SIGN_IN_PROMO_JPG" file="resources\history\images\200\sign_in_promo.jpg" type="BINDATA" />
+        <include name="IDR_HISTORY_IMAGES_SIGN_IN_PROMO_DARK_SVG" file="resources\history\images\sign_in_promo_dark.svg" type="BINDATA" />
         <include name="IDR_HISTORY_STRINGS_HTML" file="resources\history\strings.html" type="BINDATA" />
         <if expr="optimize_webui">
           <then>

chrome/browser/resources/history/images/sign_in_promo_dark.svg

+<svg width="1189" height="444" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M0 256h403V16H0z"/><filter x="-2.6%" y="-3.1%" width="105.2%" height="108.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"/></filter><path id="c" d="M0 215h388V0H0z"/><path id="f" d="M.01.896h115v172H.01z"/><filter x="-9.6%" y="-4.1%" width="119.1%" height="112.8%" filterUnits="objectBoundingBox" id="e"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.241649683 0" in="shadowBlurOuter1"/></filter><path id="g" d="M0 1h103v153H0z"/></defs><g fill="none" fill-rule="evenodd"><path d="M225.253 296H305c0 88.164-47.14 127-47.14 127h-74.72S136 384.164 136 296h79.296c-.971-3.253-1.911-7.489-2.537-12.866-3.523-6.303-10.667-15.088-25.063-23.378-22.701 5.36-84.565 18.389-91.369 2.934-6.117-13.897 8.865-44.007 45.87-37.877 37.005 6.13 53.803 32.9 53.803 32.9l-.009.002c5.365 3.06 11.367 7.524 16.029 13.8-.131-7.842.377-17.297 1.942-28.6-11.8-.88-36.921-9.368-67.654-58.183C103.368 116.53 130.393 32 130.393 32c71.428 60.935 88.859 128.871 92.013 170.634a453.053 453.053 0 0 1 3.236-11.363c26.363-88.27 74.75-124.252 74.356-118.722-6.618 92.797-52.828 108.618-55.46 113.145-30.962 53.25-24.587 93.283-19.285 110.306zm25.024-47.237c-9.453 5.769-22.277 2.069-22.277 2.069s2.504-13.052 11.957-18.82c9.453-5.768 19.426-6.694 22.277-2.068 2.85 4.626-2.503 13.051-11.957 18.82z" fill-opacity=".351" fill="#F8F9FA" opacity=".199"/><path d="M180 32H79v211h101z"/><path fill="#4F5154" d="M298.164 0v389.346H243V422h662v-32.654h-55.192V0z"/><path fill="#C2D4F4" d="M312 388h520V24H312z"/><path fill="#4A4A4A" opacity=".113" d="M312 388h520v-31H312z"/><path fill="#FFF" opacity=".438" d="M557 203h245V57H557z"/><g transform="translate(354 78)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g><path fill="#FFF" d="M364 95h82l-9.787-17h-62.426z"/><path fill="#FFF" opacity=".78" d="M435 95h82l-9.787-17h-62.426z"/><g transform="translate(361 112)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><use fill="#F8F8F8" xlink:href="#c"/><ellipse fill="#FBE8B0" mask="url(#d)" cx="538" cy="289" rx="344" ry="276"/></g><g transform="translate(813 112)"><rect fill="#4F5154" x="59" width="164" height="310" rx="22.68"/><path fill="#C2D4F4" d="M71 15h139v270H71z"/><path fill="#4A4A4A" opacity=".113" d="M71 15h139v8H71zM71 269h139v16H71z"/><path fill="#FFF" opacity=".78" d="M91 65h104v127H91z"/><path fill="#B8CEF6" d="M95 74h94v115H95z"/><g transform="rotate(-6 574.13 21.522)"><use fill="#000" filter="url(#e)" xlink:href="#f"/><use fill="#FFF" xlink:href="#f"/></g><g transform="rotate(-6 688.693 -39.441)"><mask id="h" fill="#fff"><use xlink:href="#g"/></mask><use fill="#FBE8B0" xlink:href="#g"/><path fill="#FFF" opacity=".4" mask="url(#h)" d="M-7.106 59.039h117v116h-117z"/><circle fill="#FF9962" mask="url(#h)" cx="86.669" cy="58.868" r="7.5"/></g><path fill="#4A4A4A" opacity=".258" d="M79 32h8v8h-8z"/><rect fill="#4A4A4A" opacity=".258" x="183" y="32" width="8" height="8" rx="4"/><rect fill="#4A4A4A" opacity=".258" x="197" y="32" width="8" height="8" rx="4"/></g><path fill-opacity=".351" fill="#F8F9FA" opacity=".199" d="M0 423h1189v21H0z"/></g></svg>
\ No newline at end of file

chrome/browser/resources/history/synced_device_manager.html

@@ -30,6 +30,11 @@
         width: 574px;
       }
 
+      :host-context([dark]) #illustration {
+        background-image: url(images/sign_in_promo_dark.svg);
+        background-size: contain;
+      }
+
       #no-synced-tabs {
         height: 100%;
       }

chrome/browser/ui/webui/history_ui.cc

@@ -131,6 +131,8 @@ content::WebUIDataSource* CreateHistoryUIHTMLSource(Profile* profile) {
     {"history.js", IDR_HISTORY_HISTORY_JS},
     {"images/100/sign_in_promo.jpg", IDR_HISTORY_IMAGES_100_SIGN_IN_PROMO_JPG},
     {"images/200/sign_in_promo.jpg", IDR_HISTORY_IMAGES_200_SIGN_IN_PROMO_JPG},
+    {"images/sign_in_promo_dark.svg",
+     IDR_HISTORY_IMAGES_SIGN_IN_PROMO_DARK_SVG},
     {"strings.html", IDR_HISTORY_STRINGS_HTML},
 #if !BUILDFLAG(OPTIMIZE_WEBUI)
     {"app.html", IDR_HISTORY_APP_HTML},