Update panel so it can be opened in a seperate tab

app/panel/components/Header.jsx

@@ -213,9 +213,11 @@ class Header extends React.Component {
 		);
 
 		const tabs = (
-			<div className="header-tab-group flex-container align-bottom">
-				{simpleTab}
-				{detailedTab}
+			<div className="header-tab-group-container">
+				<div className="header-tab-group flex-container align-bottom align-center">
+					{simpleTab}
+					{detailedTab}
+				</div>
 			</div>
 		);
 

app/scss/partials/_header.scss

@@ -11,14 +11,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 #ghostery-header {
-	.header-tab-group {
+	.header-tab-group-container {
 		position: absolute;
 		height: 36px;
-		width: 280px;
-		left: calc(50% - 140px);
+		width: 580px;
+		pointer-events: none;
+	}
+	.header-tab-group {
+		height: 36px;
 	}
 	.header-tab {
 		cursor: pointer;
+		pointer-events: all;
 		height: 20px;
 		width: 140px;
 		text-align: center;

app/scss/partials/_subscribe.scss

@@ -12,9 +12,6 @@
  */
 
 .content-subscription {
-	position: absolute;
-	height: 479px;
-	width: 100%;
 	.badge {
 		display: block;
 		margin: 35px auto 35px auto;

app/scss/partials/_summary.scss

@@ -60,7 +60,7 @@
 .SummaryPageStat.page-load-time-fast .SummaryPageStat__value { color: #9ecc42; }
 
 .Summary--simple {
-	width: 100%;
+	width: 580px;
 
 	.Summary__pageHostContainer {
 		margin-bottom: 36px;

src/classes/PanelData.js

@@ -28,7 +28,12 @@ import account from './Account';
 import dispatcher from './Dispatcher';
 import promoModals from './PromoModals';
 import { getCliqzGhosteryBugs, sendCliqzModuleCounts } from '../utils/cliqzModulesData';
-import { getActiveTab, flushChromeMemoryCache, processUrl } from '../utils/utils';
+import {
+	getTab,
+	getActiveTab,
+	flushChromeMemoryCache,
+	processUrl
+} from '../utils/utils';
 import { log } from '../utils/common';
 
 const SYNC_SET = new Set(globals.SYNC_ARRAY);
@@ -71,7 +76,7 @@ class PanelData {
 		this._panelPort = port;
 		this._mountedComponents.panel = true;
 
-		getActiveTab((tab) => {
+		function tabCallback(tab) {
 			const { url } = tab;
 
 			this._activeTab = tab;
@@ -86,7 +91,15 @@ class PanelData {
 			account.getUserSettings()
 				.then(userSettings => this._postUserSettings(userSettings))
 				.catch(() => log('Failed getting remote user settings from PanelData#initPort. User not logged in.'));
-		});
+		}
+
+		const paramTabId = +(new URL(port.sender.url)).searchParams.get('tabId');
+
+		if (paramTabId) {
+			getTab(paramTabId, tabCallback.bind(this));
+		} else {
+			getActiveTab(tabCallback.bind(this));
+		}
 	}
 
 	/**