Only move the organization switcher if it exists (#605)

extension/content.css

@@ -132,23 +132,25 @@
 }
 
 /* Move the dashboard organization switcher to the right column */
-.page-dashboard .account-switcher {
+.page-dashboard .news.column.two-thirds .account-switcher {
-	position: absolute !important;
+	/* Hide switcher from the main column, but if JS fails show it */
-	right: 10px !important;
+	animation: temporarily-hide 5s steps(1, end);
-	margin-top: 0 !important;
+}
+@keyframes temporarily-hide {
+	from {
+		position: absolute;
+		top: -1000px;
+	}
 }
 .page-dashboard .account-switcher button {
-	width: 313px !important;
+	width: 100%;
-	z-index: 0 !important;
+	margin-bottom: 15px;
 }
 .page-dashboard .account-switcher .select-menu-button-gravatar {
 	float: none !important;
 	display: inline-block !important;
 	vertical-align: top !important;
 }
-.dashboard-sidebar {
-	padding-top: 50px;
-}
 /* Organization dashboard */
 .orgpage .underline-nav {
 	float: left !important;
@@ -257,8 +259,8 @@ forked a repo
 	padding: 0 0 0 45px !important;
 }
 
-.news .alert .body {
+:root .news .alert .body { /* Higher specificity, avoids !important */
-	padding: 1em 0 !important;
+	padding: 1em 0;
 }
 
 /*

src/content.js

@@ -25,7 +25,7 @@ import addOPLabels from './libs/op-labels';
 
 import * as icons from './libs/icons';
 import * as pageDetect from './libs/page-detect';
-import {getUsername, observeEl} from './libs/utils';
+import {getUsername, observeEl, safeElementReady} from './libs/utils';
 
 // Add globals for easier debugging
 window.$ = $;
@@ -488,6 +488,15 @@ function sortMilestonesByClosestDueDate() {
 	}
 }
 
+function moveAccountSwitcherToSidebar() {
+	safeElementReady('.dashboard-sidebar').then(sidebar => {
+		const switcher = select('.account-switcher');
+		if (switcher) {
+			sidebar.prepend(switcher);
+		}
+	});
+}
+
 function init() {
 	//
 	// const username = getUsername();
@@ -506,6 +515,10 @@ function init() {
 		addTrendingMenuItem();
 	}
 
+	if (pageDetect.isDashboard()) {
+		moveAccountSwitcherToSidebar();
+	}
+
 	// Support indent with tab key in comments
 	$(document).on('keydown', '.js-comment-field', event => {
 		if (event.which === 9 && !event.shiftKey) {

src/libs/utils.js

@@ -1,4 +1,6 @@
 import select from 'select-dom';
+import elementReady from 'element-ready';
+import domLoaded from 'dom-loaded';
 
 export const getUsername = () => select('meta[name="user-login"]').getAttribute('content');
 
@@ -16,6 +18,15 @@ export const emptyElement = element => {
 	}
 };
 
+/**
+ * Automatically stops checking for an element to appear once the DOM is ready.
+ */
+export const safeElementReady = selector => {
+	const waiting = elementReady(selector);
+	domLoaded.then(() => requestAnimationFrame(() => waiting.cancel()));
+	return waiting;
+};
+
 export const observeEl = (el, listener, options = {childList: true}) => {
 	if (typeof el === 'string') {
 		el = select(el);