perf: Load workspace faster (#12364)

frappe/boot.py

@@ -21,7 +21,7 @@ from frappe.website.doctype.web_page_view.web_page_view import is_tracking_enabl
 from frappe.social.doctype.energy_point_log.energy_point_log import get_energy_points
 from frappe.model.base_document import get_controller
 from frappe.social.doctype.post.post import frequently_visited_links
-from frappe.core.doctype.navbar_settings.navbar_settings import get_navbar_settings
+from frappe.core.doctype.navbar_settings.navbar_settings import get_navbar_settings, get_app_logo
 
 def get_bootinfo():
 	"""build and return boot info"""
@@ -62,6 +62,7 @@ def get_bootinfo():
 	doclist.extend(get_meta_bundle("Page"))
 	bootinfo.home_folder = frappe.db.get_value("File", {"is_home_folder": 1})
 	bootinfo.navbar_settings = get_navbar_settings()
+	bootinfo.notification_settings = get_notification_settings()
 
 	# ipinfo
 	if frappe.session.data.get('ipinfo'):
@@ -90,6 +91,7 @@ def get_bootinfo():
 	bootinfo.link_preview_doctypes = get_link_preview_doctypes()
 	bootinfo.additional_filters_config = get_additional_filters_from_hooks()
 	bootinfo.desk_settings = get_desk_settings()
+	bootinfo.app_logo_url = get_app_logo()
 
 	return bootinfo
 
@@ -323,4 +325,7 @@ def get_desk_settings():
 		for key in desk_properties:
 			desk_settings[key] = desk_settings.get(key) or role.get(key)
 
-	return desk_settings
+	return desk_settings
+
+def get_notification_settings():
+	return frappe.get_cached_doc('Notification Settings', frappe.session.user)

frappe/core/doctype/navbar_settings/navbar_settings.py

@@ -25,7 +25,7 @@ class NavbarSettings(Document):
 
 @frappe.whitelist(allow_guest=True)
 def get_app_logo():
-	app_logo = frappe.db.get_single_value('Navbar Settings', 'app_logo')
+	app_logo = frappe.db.get_single_value('Navbar Settings', 'app_logo', cache=True)
 	if not app_logo:
 		app_logo = frappe.get_hooks('app_logo_url')[-1]
 

frappe/email/test_email_body.py

@@ -17,7 +17,7 @@ class TestEmailBody(unittest.TestCase):
 <div>
 	<h3>Hey John Doe!</h3>
 	<p>This is embedded image you asked for</p>
-	<img embed="assets/frappe/images/favicon.png" />
+	<img embed="assets/frappe/images/frappe-favicon.svg" />
 </div>
 '''
 		email_text = '''
@@ -25,7 +25,7 @@ Hey John Doe!
 This is the text version of this email
 '''
 
-		img_path = os.path.abspath('assets/frappe/images/favicon.png')
+		img_path = os.path.abspath('assets/frappe/images/frappe-favicon.svg')
 		with open(img_path, 'rb') as f:
 			img_content = f.read()
 			img_base64 = base64.b64encode(img_content).decode()
@@ -77,12 +77,11 @@ This is the text version of this email
 
 	def test_image(self):
 		img_signature = '''
-Content-Type: image/png
+Content-Type: image/svg+xml
 MIME-Version: 1.0
 Content-Transfer-Encoding: base64
-Content-Disposition: inline; filename="favicon.png"
+Content-Disposition: inline; filename="frappe-favicon.svg"
 '''
-
 		self.assertTrue(img_signature in self.email_string)
 		self.assertTrue(self.img_base64 in self.email_string)
 
@@ -117,7 +116,7 @@ w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 	def test_replace_filename_with_cid(self):
 		original_message = '''
 			<div>
-				<img embed="assets/frappe/images/favicon.png" alt="test" />
+				<img embed="assets/frappe/images/frappe-favicon.svg" alt="test" />
 				<img embed="notexists.jpg" />
 			</div>
 		'''

frappe/integrations/doctype/social_login_key/social_login_key.py

@@ -124,7 +124,7 @@ class SocialLoginKey(Document):
 			"provider_name": "Frappe",
 			"enable_social_login": 1,
 			"custom_base_url": 1,
-			"icon":"/assets/frappe/images/favicon.png",
+			"icon":"/assets/frappe/images/frappe-favicon.svg",
 			"redirect_url": "/api/method/frappe.www.login.login_via_frappe",
 			"api_endpoint": "/api/method/frappe.integrations.oauth2.openid_profile",
 			"api_endpoint_args":None,

frappe/public/build.json

@@ -27,8 +27,6 @@
 		"public/js/frappe/microtemplate.js",
 		"public/js/frappe/query_string.js",
 
-		"public/js/frappe/ui/dropzone.js",
-		"public/js/frappe/ui/upload.html",
 		"public/js/frappe/upload.js",
 
 		"public/js/frappe/model/meta.js",
@@ -150,7 +148,6 @@
 		"public/js/frappe/ui/dialog.js",
 		"public/js/frappe/ui/capture.js",
 		"public/js/frappe/ui/app_icon.js",
-		"public/js/frappe/ui/dropzone.js",
 		"public/js/frappe/ui/theme_switcher.js",
 
 		"public/js/frappe/model/model.js",
@@ -177,7 +174,6 @@
 		"public/js/frappe/utils/preview_email.js",
 		"public/js/frappe/utils/file_manager.js",
 
-		"public/js/frappe/ui/upload.html",
 		"public/js/frappe/upload.js",
 		"public/js/frappe/ui/tree.js",
 
@@ -207,6 +203,7 @@
 		"public/js/frappe/ui/sort_selector.js",
 
 		"public/js/frappe/change_log.html",
+		"public/js/frappe/ui/workspace_loading_skeleton.html",
 		"public/js/frappe/desk.js",
 		"public/js/frappe/query_string.js",
 

frappe/public/css/fonts/inter/inter.css

@@ -1,5 +1,6 @@
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 100;
 	src: url("/assets/frappe/css/fonts/inter/inter_thin.woff2") format("woff2"),
@@ -7,6 +8,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 100;
 	src: url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff2") format("woff2"),
@@ -15,6 +17,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralight.woff2") format("woff2"),
@@ -22,6 +25,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff2") format("woff2"),
@@ -30,6 +34,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_light.woff2") format("woff2"),
@@ -37,6 +42,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff2") format("woff2"),
@@ -45,6 +51,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_regular.woff2") format("woff2"),
@@ -52,6 +59,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_italic.woff2") format("woff2"),
@@ -60,6 +68,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_medium.woff2") format("woff2"),
@@ -67,6 +76,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff2") format("woff2"),
@@ -75,6 +85,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibold.woff2") format("woff2"),
@@ -82,6 +93,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff2") format("woff2"),
@@ -90,6 +102,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bold.woff2") format("woff2"),
@@ -97,6 +110,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff2") format("woff2"),
@@ -105,6 +119,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabold.woff2") format("woff2"),
@@ -112,6 +127,7 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff2") format("woff2"),
@@ -120,6 +136,7 @@
 
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  normal;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_black.woff2") format("woff2"),
@@ -127,8 +144,9 @@
 }
 @font-face {
 	font-family: 'Inter';
+	font-display: swap;
 	font-style:  italic;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff2") format("woff2"),
 			url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff") format("woff");
-}
+}

frappe/public/js/frappe/chat.js

@@ -2781,7 +2781,8 @@ frappe.chat.setup  = () => {
 	}
 }
 
-$(document).on('ready toolbar_setup', () =>
-{
-	frappe.chat.setup()
-})
+// TODO: Re-enable after re-designing chat
+// $(document).on('ready toolbar_setup', () =>
+// {
+// 	frappe.chat.setup()
+// })

frappe/public/js/frappe/desk.js

@@ -45,10 +45,7 @@ frappe.Application = Class.extend({
 		this.setup_frappe_vue();
 		this.load_bootinfo();
 		this.load_user_permissions();
-		this.set_app_logo_url()
-			.then(() => {
-				this.make_nav_bar();
-			});
+		this.make_nav_bar();
 		this.set_favicon();
 		this.setup_analytics();
 		this.set_fullwidth_if_enabled();
@@ -82,8 +79,11 @@ frappe.Application = Class.extend({
 		}
 
 		if (frappe.user_roles.includes('System Manager')) {
-			this.show_change_log();
-			this.show_update_available();
+			// delayed following requests to make boot faster
+			setTimeout(() => {
+				this.show_change_log();
+				this.show_update_available();
+			}, 1000);
 		}
 
 		if (!frappe.boot.developer_mode) {
@@ -470,19 +470,6 @@ frappe.Application = Class.extend({
 		$('<link rel="shortcut icon" href="' + link + '" type="image/x-icon">').appendTo("head");
 		$('<link rel="icon" href="' + link + '" type="image/x-icon">').appendTo("head");
 	},
-
-	set_app_logo_url: function() {
-		return frappe.call('frappe.core.doctype.navbar_settings.navbar_settings.get_app_logo')
-			.then(r => {
-				frappe.app.logo_url = r.message;
-				if (window.cordova) {
-					let host = frappe.request.url;
-					host = host.slice(0, host.length - 1);
-					frappe.app.logo_url = host + frappe.app.logo_url;
-				}
-			});
-	},
-
 	trigger_primary_action: function() {
 		if(window.cur_dialog && cur_dialog.display) {
 			// trigger primary

frappe/public/js/frappe/ui/dropzone.js

@@ -1,57 +0,0 @@
-// DropZone
-frappe.ui.DropZone = class 
-{
-	constructor (selector, options) {
-		this.options    = Object.assign({ }, frappe.ui.DropZone.OPTIONS, options);
-		this.$container = $(selector);
-		this.$wrapper   = $(frappe.ui.DropZone.TEMPLATE);
-
-		this.make();
-	}
-
-	make ( ) {
-		const me        = this;
-		const $dropzone = this.$wrapper.find('.panel-body');
-		const $title    = $dropzone.find('.dropzone-title');
-		$title.html(this.options.title);
-
-		$dropzone.on('dragover', function (e) {
-			e.preventDefault();
-
-			$title.html(__('Drop'));
-		});
-		$dropzone.on('dragleave', function (e) {
-			e.preventDefault();
-
-			$title.html(me.options.title);
-		});
-		$dropzone.on('drop', function (e) {
-			e.preventDefault();
-
-			const files = e.originalEvent.dataTransfer.files;
-			me.options.drop(files);
-
-			$title.html(me.options.title);
-		});
-
-		this.$container.html(this.$wrapper);
-	}
-};
-frappe.ui.DropZone.TEMPLATE =
-`
-<div class="panel panel-default"
-	style="
-		border: none !important;
-		box-shadow: none !important;
-		margin-bottom: 0 !important
-	">
-	<div class="panel-body">
-		<div class="dropzone-title text-muted text-center">
-		</div>
-	</div>
-</div>
-`;
-frappe.ui.DropZone.OPTIONS  = 
-{
-	title: __('Drop Here')
-};

frappe/public/js/frappe/ui/notifications/notifications.js

@@ -3,12 +3,8 @@ frappe.provide('frappe.search');
 frappe.ui.Notifications = class Notifications {
 	constructor() {
 		this.tabs = {};
-		frappe.model
-			.with_doc('Notification Settings', frappe.session.user)
-			.then(doc => {
-				this.notifications_settings = doc;
-				this.make();
-			});
+		this.notification_settings = frappe.boot.notification_settings;
+		this.make();
 	}
 
 	make() {
@@ -23,7 +19,6 @@ frappe.ui.Notifications = class Notifications {
 		this.user = frappe.session.user;
 
 		this.setup_headers();
-		let me = this;
 		this.setup_dropdown_events();
 	}
 
@@ -109,7 +104,7 @@ frappe.ui.Notifications = class Notifications {
 		let tabView = new item.view(
 			item.el,
 			this.dropdown,
-			this.notifications_settings
+			this.notification_settings
 		);
 		this.tabs[item.id] = tabView;
 	}
@@ -444,4 +439,4 @@ class EventsView extends BaseNotificationsView {
 
 		this.container.html(html);
 	}
-}
+}

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -1,7 +1,7 @@
 <header class="navbar navbar-expand sticky-top" role="navigation">
 	<div class="container">
 		<a class="navbar-brand navbar-home" href="/app">
-			<img class="app-logo" style="width: {{ navbar_settings.logo_width || 24 }}px" src="{{ frappe.app.logo_url }}">
+			<img class="app-logo" style="width: {{ navbar_settings.logo_width || 24 }}px" src="{{ frappe.boot.app_logo_url }}">
 		</a>
 		<ul class="nav navbar-nav d-none d-sm-flex" id="navbar-breadcrumbs"></ul>
 		<div class="collapse navbar-collapse justify-content-end">

frappe/public/js/frappe/ui/upload.html

@@ -1,27 +0,0 @@
-<div class="file-upload">
-	<div class="input-upload">
-		<input class="input-upload-file hidden" type="file" {{ opts.allow_multiple ? "multiple" : "" }} name="filedata" />
-		<button class="btn btn-primary btn-sm btn-browse">{%= __("Browse") %}</button>
-	</div>
-	<div class="uploaded-filename hidden" style="width: 100%; margin-top: 12px;"></div>
-	<div class="web-link-wrapper" style="width: calc(100% - 80px);">
-		<span class="text-muted file-upload-or">{%= __("or") %}</span>
-		<div class="input-link" style="width: calc(100% - 30px);">
-			<div class="input-group">
-				<div class="input-group-addon">
-					<span class="hidden-xs">{%= __("Web Link") %}</span>
-					<i class="fa fa-link visible-xs"></i>
-				</div>
-				<input class="form-control" type="text" name="file_url"
-					placeholder="{%= (opts.sample_url || "e.g. http://example.com/somefile.png") %}"/>
-			</div>
-		</div>
-	</div>
-	<div class="private-file hidden">
-		<div class="checkbox">
-		    <label>
-		      <input type="checkbox" checked> {{ __("Private") }}
-		    </label>
-		  </div>
-	</div>
-</div>

frappe/public/js/frappe/ui/workspace_loading_skeleton.html

@@ -0,0 +1,24 @@
+<div class="workspace-skeleton">
+	<div class="widget-group">
+		<div class="widget-group-head skeleton-header">
+			<div class="widget-group-title skeleton-card"></div>
+		</div>
+		<div class="widget-group-body grid-col-3">
+			<div class="widget shortcut-widget-box skeleton-card"></div>
+			<div class="widget shortcut-widget-box skeleton-card"></div>
+			<div class="widget shortcut-widget-box skeleton-card"></div>
+		</div>
+	</div>
+	<div class="widget-group skeleton-body">
+		<div class="widget-group-head skeleton-header">
+			<div class="widget-group-title skeleton-card"></div>
+		</div>
+		<div class="widget-group-body grid-col-3">
+			<div class="widget links-widget-box skeleton-card"></div>
+			<div class="widget links-widget-box skeleton-card"></div>
+			<div class="widget links-widget-box skeleton-card"></div>
+			<div class="widget links-widget-box skeleton-card"></div>
+			<div class="widget links-widget-box skeleton-card"></div>
+		</div>
+	</div>
+</div>

frappe/public/js/frappe/views/calendar/calendar.js

@@ -94,11 +94,15 @@ frappe.views.CalendarView = class CalendarView extends frappe.views.ListView {
 	}
 
 	get required_libs() {
-		return [
+		let assets = [
 			'assets/frappe/js/lib/fullcalendar/fullcalendar.min.css',
 			'assets/frappe/js/lib/fullcalendar/fullcalendar.min.js',
-			'assets/frappe/js/lib/fullcalendar/locale-all.js'
 		];
+		let user_language = frappe.boot.user.language;
+		if (user_language && user_language !== 'en') {
+			assets.push('assets/frappe/js/lib/fullcalendar/locale-all.js');
+		}
+		return assets;
 	}
 };
 

frappe/public/js/frappe/views/workspace/workspace.js

@@ -51,9 +51,11 @@ frappe.views.Workspace = class Workspace {
 	}
 
 	prepare_container() {
-		let list_sidebar = $(`<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm">
-			<div class="desk-sidebar list-unstyled sidebar-menu"></div>
-		</div>`).appendTo(this.wrapper.find(".layout-side-section"));
+		let list_sidebar = $(`
+			<div class="list-sidebar overlay-sidebar hidden-xs hidden-sm">
+				<div class="desk-sidebar list-unstyled sidebar-menu"></div>
+			</div>
+		`).appendTo(this.wrapper.find(".layout-side-section"));
 		this.sidebar = list_sidebar.find(".desk-sidebar");
 
 		this.body = this.wrapper.find(".layout-main-section");
@@ -240,18 +242,17 @@ class DesktopPage {
 
 	make() {
 		this.page = $(`<div class="desk-page" data-page-name=${this.page_name}></div>`);
+		this.page.append(frappe.render_template('workspace_loading_skeleton'));
 		this.page.appendTo(this.container);
 
-		this.get_data().then(res => {
-			this.data = res.message;
+		this.get_data().then(() => {
 			if (!this.data) {
 				delete localStorage.current_workspace;
-				frappe.set_route("space");
+				frappe.set_route("workspace");
 				return;
 			}
-
 			this.refresh();
-		});
+		}).finally(this.page.find('.workspace_loading_skeleton').remove);
 	}
 
 	refresh() {
@@ -263,15 +264,26 @@ class DesktopPage {
 		}
 
 		this.data.onboarding && this.data.onboarding.items.length && this.make_onboarding();
-		this.make_charts().then(() => {
-			this.make_shortcuts();
-			this.make_cards();
-		});
+		this.make_charts();
+		this.make_shortcuts();
+		this.make_cards();
 	}
 
 	get_data() {
-		return frappe.call("frappe.desk.desktop.get_desktop_page", {
+		return frappe.xcall("frappe.desk.desktop.get_desktop_page", {
 			page: this.page_name
+		}).then(data => {
+			this.data = data;
+			if (!this.data) return;
+
+			return frappe.dashboard_utils.get_dashboard_settings().then(settings => {
+				let chart_config = settings.chart_config ? JSON.parse(settings.chart_config) : {};
+				if (this.data.charts.items) {
+					this.data.charts.items.map(chart => {
+						chart.chart_settings = chart_config[chart.chart_name] || {};
+					});
+				}
+			});
 		});
 	}
 
@@ -310,7 +322,7 @@ class DesktopPage {
 				frappe.throw({ message: __("Something went wrong while saving customizations"), indicator: "red" });
 				this.reload();
 			}
-		})
+		});
 	}
 
 	reset_customization() {
@@ -344,30 +356,21 @@ class DesktopPage {
 	}
 
 	make_charts() {
-		return frappe.dashboard_utils.get_dashboard_settings().then(settings => {
-			let chart_config = settings.chart_config ? JSON.parse(settings.chart_config) : {};
-			if (this.data.charts.items) {
-				this.data.charts.items.map(chart => {
-					chart.chart_settings = chart_config[chart.chart_name] || {};
-				});
-			}
-
-			this.sections["charts"] = new frappe.widget.WidgetGroup({
-				container: this.page,
-				type: "chart",
-				columns: 1,
-				class_name: "widget-charts",
-				hidden: Boolean(this.onboarding_widget),
-				options: {
-					allow_sorting: this.allow_customization,
-					allow_create: this.allow_customization,
-					allow_delete: this.allow_customization,
-					allow_hiding: false,
-					allow_edit: true,
-					max_widget_count: 2,
-				},
-				widgets: this.data.charts.items
-			});
+		this.sections["charts"] = new frappe.widget.WidgetGroup({
+			container: this.page,
+			type: "chart",
+			columns: 1,
+			class_name: "widget-charts",
+			hidden: Boolean(this.onboarding_widget),
+			options: {
+				allow_sorting: this.allow_customization,
+				allow_create: this.allow_customization,
+				allow_delete: this.allow_customization,
+				allow_hiding: false,
+				allow_edit: true,
+				max_widget_count: 2,
+			},
+			widgets: this.data.charts.items
 		});
 	}
 
@@ -405,25 +408,5 @@ class DesktopPage {
 		});
 
 		this.sections["cards"] = cards;
-
-		// const legend = [
-		// 	{
-		// 		color: "blue",
-		// 		description: __("Important")
-		// 	},
-		// 	{
-		// 		color: "yellow",
-		// 		description: __("No Records Created")
-		// 	}
-		// ].map(item => {
-		// 	return `<div class="legend-item text-muted justify-flex-start">
-		// 		<span class="indicator-pill no-margin ${item.color}"></span>
-		// 		<span class="link-content ellipsis" draggable="false">${item.description}</span>
-		// 	</div>`;
-		// });
-
-		// $(`<div class="legend">
-		// 	${legend.join("\n")}
-		// </div>`).insertAfter(cards.body);
 	}
-}
+}

frappe/public/js/lib/beautify-html.js

@@ -1,617 +0,0 @@
-/*jshint curly:true, eqeqeq:true, laxbreak:true, noempty:false */
-/*
-
-  The MIT License (MIT)
-
-  Copyright (c) 2007-2013 Einar Lielmanis and contributors.
-
-  Permission is hereby granted, free of charge, to any person
-  obtaining a copy of this software and associated documentation files
-  (the "Software"), to deal in the Software without restriction,
-  including without limitation the rights to use, copy, modify, merge,
-  publish, distribute, sublicense, and/or sell copies of the Software,
-  and to permit persons to whom the Software is furnished to do so,
-  subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be
-  included in all copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
-  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
-  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  SOFTWARE.
-
-
- Style HTML
----------------
-
-  Written by Nochum Sossonko, (nsossonko@hotmail.com)
-
-  Based on code initially developed by: Einar Lielmanis, <elfz@laacz.lv>
-    http://jsbeautifier.org/
-
-  Usage:
-    style_html(html_source);
-
-    style_html(html_source, options);
-
-  The options are:
-    indent_size (default 4)          — indentation size,
-    indent_char (default space)      — character to indent with,
-    max_char (default 250)            -  maximum amount of characters per line (0 = disable)
-    brace_style (default "collapse") - "collapse" | "expand" | "end-expand"
-            put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line.
-    unformatted (defaults to inline tags) - list of tags, that shouldn't be reformatted
-    indent_scripts (default normal)  - "keep"|"separate"|"normal"
-
-    e.g.
-
-    style_html(html_source, {
-      'indent_size': 2,
-      'indent_char': ' ',
-      'max_char': 78,
-      'brace_style': 'expand',
-      'unformatted': ['a', 'sub', 'sup', 'b', 'i', 'u']
-    });
-*/
-
-(function() {
-
-    function style_html(html_source, options, js_beautify, css_beautify) {
-    //Wrapper function to invoke all the necessary constructors and deal with the output.
-
-      var multi_parser,
-          indent_size,
-          indent_character,
-          max_char,
-          brace_style,
-          unformatted;
-
-      options = options || {};
-      indent_size = options.indent_size || 4;
-      indent_character = options.indent_char || ' ';
-      brace_style = options.brace_style || 'collapse';
-      max_char = options.max_char === 0 ? Infinity : options.max_char || 250;
-      unformatted = options.unformatted || ['a', 'span', 'bdo', 'em', 'strong', 'dfn', 'code', 'samp', 'kbd', 'var', 'cite', 'abbr', 'acronym', 'q', 'sub', 'sup', 'tt', 'i', 'b', 'big', 'small', 'u', 's', 'strike', 'font', 'ins', 'del', 'pre', 'address', 'dt', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
-      function Parser() {
-
-        this.pos = 0; //Parser position
-        this.token = '';
-        this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT
-        this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values
-          parent: 'parent1',
-          parentcount: 1,
-          parent1: ''
-        };
-        this.tag_type = '';
-        this.token_text = this.last_token = this.last_text = this.token_type = '';
-
-        this.Utils = { //Uilities made available to the various functions
-          whitespace: "\n\r\t ".split(''),
-          single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed,?php,?,?='.split(','), //all the single tags for HTML
-          extra_liners: 'head,body,/html'.split(','), //for tags that need a line of whitespace before them
-          in_array: function (what, arr) {
-            for (var i=0; i<arr.length; i++) {
-              if (what === arr[i]) {
-                return true;
-              }
-            }
-            return false;
-          }
-        };
-
-        this.get_content = function () { //function to capture regular content between tags
-
-          var input_char = '',
-              content = [],
-              space = false; //if a space is needed
-
-          while (this.input.charAt(this.pos) !== '<') {
-            if (this.pos >= this.input.length) {
-              return content.length?content.join(''):['', 'TK_EOF'];
-            }
-
-            input_char = this.input.charAt(this.pos);
-            this.pos++;
-            this.line_char_count++;
-
-            if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
-              if (content.length) {
-                space = true;
-              }
-              this.line_char_count--;
-              continue; //don't want to insert unnecessary space
-            }
-            else if (space) {
-              if (this.line_char_count >= this.max_char) { //insert a line when the max_char is reached
-                content.push('\n');
-                for (var i=0; i<this.indent_level; i++) {
-                  content.push(this.indent_string);
-                }
-                this.line_char_count = 0;
-              }
-              else{
-                content.push(' ');
-                this.line_char_count++;
-              }
-              space = false;
-            }
-            content.push(input_char); //letter at-a-time (or string) inserted to an array
-          }
-          return content.length?content.join(''):'';
-        };
-
-        this.get_contents_to = function (name) { //get the full content of a script or style to pass to js_beautify
-          if (this.pos === this.input.length) {
-            return ['', 'TK_EOF'];
-          }
-          var input_char = '';
-          var content = '';
-          var reg_match = new RegExp('</' + name + '\\s*>', 'igm');
-          reg_match.lastIndex = this.pos;
-          var reg_array = reg_match.exec(this.input);
-          var end_script = reg_array?reg_array.index:this.input.length; //absolute end of script
-          if(this.pos < end_script) { //get everything in between the script tags
-            content = this.input.substring(this.pos, end_script);
-            this.pos = end_script;
-          }
-          return content;
-        };
-
-        this.record_tag = function (tag){ //function to record a tag and its parent in this.tags Object
-          if (this.tags[tag + 'count']) { //check for the existence of this tag type
-            this.tags[tag + 'count']++;
-            this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
-          }
-          else { //otherwise initialize this tag type
-            this.tags[tag + 'count'] = 1;
-            this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
-          }
-          this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent)
-          this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1')
-        };
-
-        this.retrieve_tag = function (tag) { //function to retrieve the opening tag to the corresponding closer
-          if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it
-            var temp_parent = this.tags.parent; //check to see if it's a closable tag.
-            while (temp_parent) { //till we reach '' (the initial value);
-              if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it
-                break;
-              }
-              temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree
-            }
-            if (temp_parent) { //if we caught something
-              this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly
-              this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent
-            }
-            delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference...
-            delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself
-            if (this.tags[tag + 'count'] === 1) {
-              delete this.tags[tag + 'count'];
-            }
-            else {
-              this.tags[tag + 'count']--;
-            }
-          }
-        };
-
-        this.get_tag = function (peek) { //function to get a full tag and parse its type
-          var input_char = '',
-              content = [],
-              comment = '',
-              space = false,
-              tag_start, tag_end,
-              orig_pos = this.pos,
-              orig_line_char_count = this.line_char_count;
-
-          peek = peek !== undefined ? peek : false;
-
-          do {
-            if (this.pos >= this.input.length) {
-              if (peek) {
-                this.pos = orig_pos;
-                this.line_char_count = orig_line_char_count;
-              }
-              return content.length?content.join(''):['', 'TK_EOF'];
-            }
-
-            input_char = this.input.charAt(this.pos);
-            this.pos++;
-            this.line_char_count++;
-
-            if (this.Utils.in_array(input_char, this.Utils.whitespace)) { //don't want to insert unnecessary space
-              space = true;
-              this.line_char_count--;
-              continue;
-            }
-
-            if (input_char === "'" || input_char === '"') {
-              if (!content[1] || content[1] !== '!') { //if we're in a comment strings don't get treated specially
-                input_char += this.get_unformatted(input_char);
-                space = true;
-              }
-            }
-
-            if (input_char === '=') { //no space before =
-              space = false;
-            }
-
-            if (content.length && content[content.length-1] !== '=' && input_char !== '>' && space) {
-                //no space after = or before >
-              if (this.line_char_count >= this.max_char) {
-                this.print_newline(false, content);
-                this.line_char_count = 0;
-              }
-              else {
-                content.push(' ');
-                this.line_char_count++;
-              }
-              space = false;
-            }
-            if (input_char === '<') {
-              tag_start = this.pos - 1;
-            }
-            content.push(input_char); //inserts character at-a-time (or string)
-          } while (input_char !== '>');
-
-          var tag_complete = content.join('');
-          var tag_index;
-          if (tag_complete.indexOf(' ') !== -1) { //if there's whitespace, thats where the tag name ends
-            tag_index = tag_complete.indexOf(' ');
-          }
-          else { //otherwise go with the tag ending
-            tag_index = tag_complete.indexOf('>');
-          }
-          var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
-          if (tag_complete.charAt(tag_complete.length-2) === '/' ||
-            this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /)
-            if ( ! peek) {
-              this.tag_type = 'SINGLE';
-            }
-          }
-          else if (tag_check === 'script') { //for later script handling
-            if ( ! peek) {
-              this.record_tag(tag_check);
-              this.tag_type = 'SCRIPT';
-            }
-          }
-          else if (tag_check === 'style') { //for future style handling (for now it justs uses get_content)
-            if ( ! peek) {
-              this.record_tag(tag_check);
-              this.tag_type = 'STYLE';
-            }
-          }
-          else if (this.is_unformatted(tag_check, unformatted)) { // do not reformat the "unformatted" tags
-            comment = this.get_unformatted('</'+tag_check+'>', tag_complete); //...delegate to get_unformatted function
-            content.push(comment);
-            // Preserve collapsed whitespace either before or after this tag.
-            if (tag_start > 0 && this.Utils.in_array(this.input.charAt(tag_start - 1), this.Utils.whitespace)){
-                content.splice(0, 0, this.input.charAt(tag_start - 1));
-            }
-            tag_end = this.pos - 1;
-            if (this.Utils.in_array(this.input.charAt(tag_end + 1), this.Utils.whitespace)){
-                content.push(this.input.charAt(tag_end + 1));
-            }
-            this.tag_type = 'SINGLE';
-          }
-          else if (tag_check.charAt(0) === '!') { //peek for <!-- comment
-            if (tag_check.indexOf('[if') !== -1) { //peek for <!--[if conditional comment
-              if (tag_complete.indexOf('!IE') !== -1) { //this type needs a closing --> so...
-                comment = this.get_unformatted('-->', tag_complete); //...delegate to get_unformatted
-                content.push(comment);
-              }
-              if ( ! peek) {
-                this.tag_type = 'START';
-              }
-            }
-            else if (tag_check.indexOf('[endif') !== -1) {//peek for <!--[endif end conditional comment
-              this.tag_type = 'END';
-              this.unindent();
-            }
-            else if (tag_check.indexOf('[cdata[') !== -1) { //if it's a <[cdata[ comment...
-              comment = this.get_unformatted(']]>', tag_complete); //...delegate to get_unformatted function
-              content.push(comment);
-              if ( ! peek) {
-                this.tag_type = 'SINGLE'; //<![CDATA[ comments are treated like single tags
-              }
-            }
-            else {
-              comment = this.get_unformatted('-->', tag_complete);
-              content.push(comment);
-              this.tag_type = 'SINGLE';
-            }
-          }
-          else if ( ! peek) {
-            if (tag_check.charAt(0) === '/') { //this tag is a double tag so check for tag-ending
-              this.retrieve_tag(tag_check.substring(1)); //remove it and all ancestors
-              this.tag_type = 'END';
-            }
-            else { //otherwise it's a start-tag
-              this.record_tag(tag_check); //push it on the tag stack
-              this.tag_type = 'START';
-            }
-            if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) { //check if this double needs an extra line
-              this.print_newline(true, this.output);
-            }
-          }
-
-          if (peek) {
-            this.pos = orig_pos;
-            this.line_char_count = orig_line_char_count;
-          }
-
-          return content.join(''); //returns fully formatted tag
-        };
-
-        this.get_unformatted = function (delimiter, orig_tag) { //function to return unformatted content in its entirety
-
-          if (orig_tag && orig_tag.toLowerCase().indexOf(delimiter) !== -1) {
-            return '';
-          }
-          var input_char = '';
-          var content = '';
-          var space = true;
-          do {
-
-            if (this.pos >= this.input.length) {
-              return content;
-            }
-
-            input_char = this.input.charAt(this.pos);
-            this.pos++;
-
-            if (this.Utils.in_array(input_char, this.Utils.whitespace)) {
-              if (!space) {
-                this.line_char_count--;
-                continue;
-              }
-              if (input_char === '\n' || input_char === '\r') {
-                content += '\n';
-                /*  Don't change tab indention for unformatted blocks.  If using code for html editing, this will greatly affect <pre> tags if they are specified in the 'unformatted array'
-                for (var i=0; i<this.indent_level; i++) {
-                  content += this.indent_string;
-                }
-                space = false; //...and make sure other indentation is erased
-                */
-                this.line_char_count = 0;
-                continue;
-              }
-            }
-            content += input_char;
-            this.line_char_count++;
-            space = true;
-
-
-          } while (content.toLowerCase().indexOf(delimiter) === -1);
-          return content;
-        };
-
-        this.get_token = function () { //initial handler for token-retrieval
-          var token;
-
-          if (this.last_token === 'TK_TAG_SCRIPT' || this.last_token === 'TK_TAG_STYLE') { //check if we need to format javascript
-           var type = this.last_token.substr(7);
-           token = this.get_contents_to(type);
-            if (typeof token !== 'string') {
-              return token;
-            }
-            return [token, 'TK_' + type];
-          }
-          if (this.current_mode === 'CONTENT') {
-            token = this.get_content();
-            if (typeof token !== 'string') {
-              return token;
-            }
-            else {
-              return [token, 'TK_CONTENT'];
-            }
-          }
-
-          if (this.current_mode === 'TAG') {
-            token = this.get_tag();
-            if (typeof token !== 'string') {
-              return token;
-            }
-            else {
-              var tag_name_type = 'TK_TAG_' + this.tag_type;
-              return [token, tag_name_type];
-            }
-          }
-        };
-
-        this.get_full_indent = function (level) {
-          level = this.indent_level + level || 0;
-          if (level < 1) {
-            return '';
-          }
-
-          return Array(level + 1).join(this.indent_string);
-        };
-
-        this.is_unformatted = function(tag_check, unformatted) {
-            //is this an HTML5 block-level link?
-            if (!this.Utils.in_array(tag_check, unformatted)){
-                return false;
-            }
-
-            if (tag_check.toLowerCase() !== 'a' || !this.Utils.in_array('a', unformatted)){
-                return true;
-            }
-
-            //at this point we have an  tag; is its first child something we want to remain
-            //unformatted?
-            var next_tag = this.get_tag(true /* peek. */);
-
-            // tets next_tag to see if it is just html tag (no external content)
-            var tag = (next_tag || "").match(/^\s*<\s*\/?([a-z]*)\s*[^>]*>\s*$/);
-
-            // if next_tag comes back but is not an isolated tag, then
-            // let's treat the 'a' tag as having content
-            // and respect the unformatted option
-            if (!tag || this.Utils.in_array(tag, unformatted)){
-                return true;
-            } else {
-                return false;
-            }
-        };
-
-        this.printer = function (js_source, indent_character, indent_size, max_char, brace_style) { //handles input/output and some other printing functions
-
-          this.input = js_source || ''; //gets the input for the Parser
-          this.output = [];
-          this.indent_character = indent_character;
-          this.indent_string = '';
-          this.indent_size = indent_size;
-          this.brace_style = brace_style;
-          this.indent_level = 0;
-          this.max_char = max_char;
-          this.line_char_count = 0; //count to see if max_char was exceeded
-
-          for (var i=0; i<this.indent_size; i++) {
-            this.indent_string += this.indent_character;
-          }
-
-          this.print_newline = function (ignore, arr) {
-            this.line_char_count = 0;
-            if (!arr || !arr.length) {
-              return;
-            }
-            if (!ignore) { //we might want the extra line
-              while (this.Utils.in_array(arr[arr.length-1], this.Utils.whitespace)) {
-                arr.pop();
-              }
-            }
-            arr.push('\n');
-            for (var i=0; i<this.indent_level; i++) {
-              arr.push(this.indent_string);
-            }
-          };
-
-          this.print_token = function (text) {
-            this.output.push(text);
-          };
-
-          this.indent = function () {
-            this.indent_level++;
-          };
-
-          this.unindent = function () {
-            if (this.indent_level > 0) {
-              this.indent_level--;
-            }
-          };
-        };
-        return this;
-      }
-
-      /*_____________________--------------------_____________________*/
-
-      multi_parser = new Parser(); //wrapping functions Parser
-      multi_parser.printer(html_source, indent_character, indent_size, max_char, brace_style); //initialize starting values
-
-      while (true) {
-          var t = multi_parser.get_token();
-          multi_parser.token_text = t[0];
-          multi_parser.token_type = t[1];
-
-        if (multi_parser.token_type === 'TK_EOF') {
-          break;
-        }
-
-        switch (multi_parser.token_type) {
-          case 'TK_TAG_START':
-            multi_parser.print_newline(false, multi_parser.output);
-            multi_parser.print_token(multi_parser.token_text);
-            multi_parser.indent();
-            multi_parser.current_mode = 'CONTENT';
-            break;
-          case 'TK_TAG_STYLE':
-          case 'TK_TAG_SCRIPT':
-            multi_parser.print_newline(false, multi_parser.output);
-            multi_parser.print_token(multi_parser.token_text);
-            multi_parser.current_mode = 'CONTENT';
-            break;
-          case 'TK_TAG_END':
-            //Print new line only if the tag has no content and has child
-            if (multi_parser.last_token === 'TK_CONTENT' && multi_parser.last_text === '') {
-                var tag_name = multi_parser.token_text.match(/\w+/)[0];
-                var tag_extracted_from_last_output = multi_parser.output[multi_parser.output.length -1].match(/<\s*(\w+)/);
-                if (tag_extracted_from_last_output === null || tag_extracted_from_last_output[1] !== tag_name) {
-                    multi_parser.print_newline(true, multi_parser.output);
-                }
-            }
-            multi_parser.print_token(multi_parser.token_text);
-            multi_parser.current_mode = 'CONTENT';
-            break;
-          case 'TK_TAG_SINGLE':
-            // Don't add a newline before elements that should remain unformatted.
-            var tag_check = multi_parser.token_text.match(/^\s*<([a-z]+)/i);
-            if (!tag_check || !multi_parser.Utils.in_array(tag_check[1], unformatted)){
-                multi_parser.print_newline(false, multi_parser.output);
-            }
-            multi_parser.print_token(multi_parser.token_text);
-            multi_parser.current_mode = 'CONTENT';
-            break;
-          case 'TK_CONTENT':
-            if (multi_parser.token_text !== '') {
-              multi_parser.print_token(multi_parser.token_text);
-            }
-            multi_parser.current_mode = 'TAG';
-            break;
-          case 'TK_STYLE':
-          case 'TK_SCRIPT':
-            if (multi_parser.token_text !== '') {
-              multi_parser.output.push('\n');
-              var text = multi_parser.token_text,
-                  _beautifier,
-                  script_indent_level = 1;
-              if (multi_parser.token_type === 'TK_SCRIPT') {
-                _beautifier = typeof js_beautify === 'function' && js_beautify;
-              } else if (multi_parser.token_type === 'TK_STYLE') {
-                _beautifier = typeof css_beautify === 'function' && css_beautify;
-              }
-
-              if (options.indent_scripts === "keep") {
-                script_indent_level = 0;
-              } else if (options.indent_scripts === "separate") {
-                script_indent_level = -multi_parser.indent_level;
-              }
-
-              var indentation = multi_parser.get_full_indent(script_indent_level);
-              if (_beautifier) {
-                // call the Beautifier if avaliable
-                text = _beautifier(text.replace(/^\s*/, indentation), options);
-              } else {
-                // simply indent the string otherwise
-                var white = text.match(/^\s*/)[0];
-                var _level = white.match(/[^\n\r]*$/)[0].split(multi_parser.indent_string).length - 1;
-                var reindent = multi_parser.get_full_indent(script_indent_level -_level);
-                text = text.replace(/^\s*/, indentation)
-                       .replace(/\r\n|\r|\n/g, '\n' + reindent)
-                       .replace(/\s*$/, '');
-              }
-              if (text) {
-                multi_parser.print_token(text);
-                multi_parser.print_newline(true, multi_parser.output);
-              }
-            }
-            multi_parser.current_mode = 'TAG';
-            break;
-        }
-        multi_parser.last_token = multi_parser.token_type;
-        multi_parser.last_text = multi_parser.token_text;
-      }
-      return multi_parser.output.join('');
-    }
-
-    // If we're running a web page and don't have either of the above, add our one global
-    window.html_beautify = function(html_source, options) {
-        return style_html(html_source, options, window.js_beautify, window.css_beautify);
-    };
-
-}());

frappe/public/js/lib/jscolor/demo.html

@@ -1,12 +0,0 @@
-<html>
-<head>
-	<title>jscolor demo</title>
-</head>
-<body>
-
-	<script type="text/javascript" src="jscolor.js"></script>
-
-	Click here: <input class="color" value="66ff00">
-
-</body>
-</html>

frappe/public/less/mobile.less

@@ -180,7 +180,6 @@ body {
 	body[data-route="desktop"] {
 		.navbar .navbar-home {
 			// display: none !important;
-			padding: 8px 12px;
 			&:before {
 				display: none;
 			}

frappe/public/scss/desk/css_variables.scss

@@ -57,4 +57,7 @@ $input-height: 28px !default;
 	--timeline-item-bottom-margin: var(--margin-sm);
 	--timeline-content-max-width: 700px;
 	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
+
+	// skeleton
+	--skeleton-bg: var(--gray-100);
 }

frappe/public/scss/desk/dark.scss

@@ -140,4 +140,6 @@
 		}
 	}
 
+	// skeleton
+	--skeleton-bg: var(--gray-800);
 }

frappe/public/scss/desk/desktop.scss

@@ -383,7 +383,7 @@ body {
 
 					&.active {
 						.step-index.step-pending {
-							background-color: var(--white);
+							background-color: var(--fg-color);
 						}
 					}
 				}
@@ -714,3 +714,22 @@ body {
 	animation-name: zoom-in;
 	animation-duration: 400ms;
 }
+
+.workspace-skeleton {
+	transition: ease;
+	.widget-group-title {
+		height: 15px;
+		width: 200px;
+	}
+	.skeleton-card {
+		background-color: var(--skeleton-bg);
+		box-shadow: none;
+		border-radius: var(--border-radius-lg);
+	}
+	.shortcut-widget-box {
+		height: 60px;
+	}
+	.links-widget-box {
+		height: 200px;
+	}
+}

frappe/www/app.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <head>
 	<!-- Chrome, Firefox OS and Opera -->
-	<meta name="theme-color" content="#7575ff">
+	<meta name="theme-color" content="#2490EF">
 	<!-- Windows Phone -->
-	<meta name="msapplication-navbutton-color" content="#7575ff">
+	<meta name="msapplication-navbutton-color" content="#2490EF">
 	<!-- iOS Safari -->
-	<meta name="apple-mobile-web-app-status-bar-style" content="#7575ff">	<meta charset="utf-8">
+	<meta name="apple-mobile-web-app-status-bar-style" content="#2490EF">
 	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 	<meta content="utf-8" http-equiv="encoding">
 	<meta name="author" content="">
@@ -14,11 +14,11 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="white">
 	<meta name="mobile-web-app-capable" content="yes">
-	<title>Frappe Desk</title>
+	<title>Frappe</title>
 	<link rel="shortcut icon"
-		href="{{ favicon or "/assets/frappe/images/favicon.png" }}" type="image/x-icon">
+		href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
 	<link rel="icon"
-		href="{{ favicon or "/assets/frappe/images/favicon.png" }}" type="image/x-icon">
+		href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
 	{% for include in include_css -%}
 	<link type="text/css" rel="stylesheet" href="{{ include }}?ver={{ build_version }}">
 	{%- endfor -%}
@@ -26,8 +26,9 @@
 <body data-theme="{{ desk_theme.lower() }}">
 	{% include "public/icons/timeless/symbol-defs.svg" %}
 	</svg>
-	<div class="centered splash" style="width: 100px; height: 100px;">
-		<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}">
+	<div class="centered splash">
+		<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}"
+			style="max-width: 100px; max-height: 100px;">
 	</div>
 	<div class="main-section">
 		<header></header>
@@ -54,8 +55,8 @@
 	{% for include in include_js %}
 	<script type="text/javascript" src="{{ include }}?ver={{ build_version }}"></script>
 	{% endfor %}
-    {% include "templates/includes/app_analytics/google_analytics.html" %}
-    {% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
+	{% include "templates/includes/app_analytics/google_analytics.html" %}
+	{% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
 
 	{% for sound in (sounds or []) %}
 	<audio preload="auto" id="sound-{{ sound.name }}" volume={{ sound.volume or 1 }}>