Add icons to device labels (Dart-Code#3650)

* Add icons to device labels * add icons for starting and creating emulators
GoogolGroups · Nov 8, 2021 · 5f49df5 · 5f49df5
1 parent 2e36dd0
commit 5f49df5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/src/shared/vscode/device_manager.ts b/src/shared/vscode/device_manager.ts
@@ -278,9 +278,21 @@ export class FlutterDeviceManager implements vs.Disposable {
 	}
 
 	public labelForDevice(device: f.Device) {
-		return device.emulatorId && this.knownEmulatorNames[device.emulatorId] && device.platformType === "android"
+		let icon;
+		switch (device.category) {
+			case "mobile":
+				icon = "$(device-mobile) ";
+				break;
+			case "web":
+				icon = "$(browser) ";
+				break;
+			case "desktop":
+				icon = "$(device-desktop) ";
+		}
+		const name = device.emulatorId && this.knownEmulatorNames[device.emulatorId] && device.platformType === "android"
 			? this.knownEmulatorNames[device.emulatorId]
 			: device.name;
+		return `${icon}${name}`;
 	}
 
 	public deviceSortComparer(d1: f.Device, d2: f.Device): number {
@@ -431,7 +443,7 @@ export class FlutterDeviceManager implements vs.Disposable {
 				coldBoot: false,
 				description: showAsEmulators ? `${e.category || "mobile"} ${this.emulatorLabel(e.platformType)}` : e.platformType || undefined,
 				device: e,
-				label: showAsEmulators ? `Start ${e.name}` : e.name,
+				label: showAsEmulators ? "$(play) " + `Start ${e.name}` : e.name,
 			}));
 
 		// Add a cold boot option for each android based emulator
@@ -451,7 +463,7 @@ export class FlutterDeviceManager implements vs.Disposable {
 			emulators.push({
 				alwaysShow: true,
 				device: { type: "emulator-creator", platformType: "android", name: "Create Android emulator" } as EmulatorCreator,
-				label: "Create Android emulator",
+				label: "$(plus) " + "Create Android emulator",
 			});
 		}
 		return emulators;

diff --git a/src/test/flutter/device_manager.test.ts b/src/test/flutter/device_manager.test.ts
@@ -37,15 +37,31 @@ describe("device_manager", () => {
 		assert.deepStrictEqual(dm.currentDevice, emulatedAndroidMobile);
 	});
 
+	it("generates the correct label for desktop devices", async () => {
+		assert.equal(dm.currentDevice, undefined);
+
+		await daemon.connect(desktop, true);
+		assert.deepStrictEqual(dm.currentDevice, desktop);
+		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), "$(device-desktop) " + desktop.name);
+	});
+
+	it("generates the correct label for web devices", async () => {
+		assert.equal(dm.currentDevice, undefined);
+
+		await daemon.connect(webChrome, true);
+		assert.deepStrictEqual(dm.currentDevice, webChrome);
+		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), "$(browser) " + webChrome.name);
+	});
+
 	it("generates the correct label for Android emulator devices", async () => {
 		assert.equal(dm.currentDevice, undefined);
 
-		// connect a device that has an emaultor ID and ensure we correctly build
+		// connect a device that has an emulator ID and ensure we correctly build
 		// it's label (which happens by fetching the emulator list up-front and
 		// then looking it up).
 		await daemon.connect(emulatedAndroidMobile, true);
 		assert.deepStrictEqual(dm.currentDevice, emulatedAndroidMobile);
-		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), androidEmulator.name);
+		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), "$(device-mobile) " + androidEmulator.name);
 	});
 
 	it("uses the standard device name for iOS simulator devices", async () => {
@@ -55,7 +71,7 @@ describe("device_manager", () => {
 		// instead of "iPhone X" etc.
 		await daemon.connect(emulatediOSMobile, true);
 		assert.deepStrictEqual(dm.currentDevice, emulatediOSMobile);
-		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), emulatediOSMobile.name);
+		assert.deepStrictEqual(dm.labelForDevice(dm.currentDevice), "$(device-mobile) " + emulatediOSMobile.name);
 	});
 
 	it("includes custom emulators", async () => {
@@ -74,7 +90,7 @@ describe("device_manager", () => {
 		assert.deepEqual(em.device.args, ["args"]);
 		assert.equal(em.device.platformType, undefined);
 		assert.equal(em.device.type, "custom-emulator");
-		assert.equal(em.label, "Start My custom emulator");
+		assert.equal(em.label, "$(play) Start My custom emulator");
 	});
 
 	it("includes cold boot option for Android emulators only", async () => {
@@ -111,7 +127,7 @@ describe("device_manager", () => {
 		assert.deepEqual(em.device.args, ["args"]);
 		assert.equal(em.device.platformType, "android"); // Preserved from base
 		assert.equal(em.device.type, "custom-emulator");
-		assert.equal(em.label, "Start My emulator override");
+		assert.equal(em.label, "$(play) Start My emulator override");
 	});
 
 	it("auto-selects devices if supported platforms are not known", async () => {
@@ -300,6 +316,18 @@ const desktop: f.Device & { platformType: string } = {
 	type: "device",
 };
 
+const webChrome: f.Device & { platformType: string } = {
+	category: "web",
+	emulator: false,
+	emulatorId: undefined,
+	ephemeral: false,
+	id: "chrome",
+	name: "Chrome",
+	platform: "web-javascript",
+	platformType: "web",
+	type: "device",
+};
+
 const physicalAndroidMobile: f.Device = {
 	category: "mobile",
 	emulator: false,