Fix HiDPI vs. set_cursor_icon for web (#1652)

PhysicalSize is recorded as canvas.size, whereas LogicalSize is stored
as canvas.style.size.

The previous cursor behavior on stdweb clobbered all style - thus losing
the LogicalSize.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - On Unix, X11 and Wayland are now optional features (enabled by default)
 - On X11, fix deadlock when calling `set_fullscreen_inner`.
 - On Web, prevent the webpage from scrolling when the user is focused on a winit canvas
+- On Web, calling `window.set_cursor_icon` no longer breaks HiDPI scaling
 - On Windows, drag and drop is now optional and must be enabled with `WindowBuilderExtWindows::with_drag_and_drop(true)`.
 - On Wayland, fix deadlock when calling to `set_inner_size` from a callback.
 - On macOS, add `hide__other_applications` to `EventLoopWindowTarget` via existing `EventLoopWindowTargetExtMacOS` trait. `hide_other_applications` will hide other applications by calling `-[NSApplication hideOtherApplications: nil]`.

src/platform_impl/web/event_loop/mod.rs

@@ -6,11 +6,10 @@ mod window_target;
 pub use self::proxy::Proxy;
 pub use self::window_target::WindowTarget;
 
-use super::{backend, device, monitor, window};
+use super::{backend, device, window};
 use crate::event::Event;
 use crate::event_loop as root;
 
-use std::collections::{vec_deque::IntoIter as VecDequeIter, VecDeque};
 use std::marker::PhantomData;
 
 pub struct EventLoop<T: 'static> {

src/platform_impl/web/stdweb/mod.rs

@@ -67,9 +67,13 @@ pub fn set_canvas_size(raw: &CanvasElement, size: Size) {
     raw.set_width(physical_size.width);
     raw.set_height(physical_size.height);
 
+    set_canvas_style_property(raw, "width", &format!("{}px", logical_size.width));
+    set_canvas_style_property(raw, "height", &format!("{}px", logical_size.height));
+}
+
+pub fn set_canvas_style_property(raw: &CanvasElement, style_attribute: &str, value: &str) {
     js! {
-        @{raw.as_ref()}.style.width = @{logical_size.width} + "px";
+        @{raw.as_ref()}.style[@{style_attribute}] = @{value};
-        @{raw.as_ref()}.style.height = @{logical_size.height} + "px";
     }
 }
 

src/platform_impl/web/web_sys/mod.rs

@@ -81,13 +81,15 @@ pub fn set_canvas_size(raw: &HtmlCanvasElement, size: Size) {
     raw.set_width(physical_size.width);
     raw.set_height(physical_size.height);
 
+    set_canvas_style_property(raw, "width", &format!("{}px", logical_size.width));
+    set_canvas_style_property(raw, "height", &format!("{}px", logical_size.height));
+}
+
+pub fn set_canvas_style_property(raw: &HtmlCanvasElement, property: &str, value: &str) {
     let style = raw.style();
     style
-        .set_property("width", &format!("{}px", logical_size.width))
+        .set_property(property, value)
-        .expect("Failed to set canvas width");
+        .expect(&format!("Failed to set {}", property));
-    style
-        .set_property("height", &format!("{}px", logical_size.height))
-        .expect("Failed to set canvas height");
 }
 
 pub fn is_fullscreen(canvas: &HtmlCanvasElement) -> bool {

src/platform_impl/web/window.rs

@@ -165,8 +165,7 @@ impl Window {
             CursorIcon::RowResize => "row-resize",
         };
         *self.previous_pointer.borrow_mut() = text;
-        self.canvas
+        backend::set_canvas_style_property(self.canvas.raw(), "cursor", text);
-            .set_attribute("style", &format!("cursor: {}", text));
     }
 
     #[inline]