WebExt: Prevent text selection of tabs + reorder CSS (darrinhenein#13)

DavidShepherdson · May 1, 2017 · 78b66cd · 78b66cd
1 parent 5f291d9
commit 78b66cd
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 72 deletions.
diff --git a/webextension/data/template/basic/index.css b/webextension/data/template/basic/index.css
@@ -1,14 +1,2 @@
 @import "tab.css";
 @import "tabbrowser.css";
-
-/* Tab toolbar styling */
-#TabsToolbar:not(:-moz-lwtheme)  {
-	height: var(--vtr-tabbar-height);
-	border-bottom-left-radius: 0px !important;
-	box-shadow: none !important;
-	appearance: none !important;
-	border-top: 1px solid rgb(160,160,160) !important;
-	-moz-border-right-colors: #fcfcfc rgb(154,154,154) !important;
-	background-color: var(--vtr-tabbar-background-color) !important;
-	background-image: none !important;
-}
diff --git a/webextension/data/template/basic/tab.css b/webextension/data/template/basic/tab.css
@@ -1,3 +1,58 @@
+.tabbrowser-tab {
+	-moz-box-pack: start;
+	-moz-box-flex: 0;
+	appearance: none !important;
+	background: var(--vtr-tab-background) !important;
+	margin: 0 !important;
+	padding: 1px 0 !important;
+	height: var(--vtr-tab-height) !important;
+	min-height: var(--vtr-tab-min-height) !important;
+	max-height: var(--vtr-tab-max-height) !important;
+	color: var(--vtr-tab-text-color) !important;
+	border: var(--vtr-tab-border) !important;
+	border-radius: var(--vtr-tab-border-radius) !important;
+	border-left: var(--vtr-tab-border-left) !important;
+	border-bottom: var(--vtr-tab-border-bottom) !important;
+}
+
+.tabbrowser-tab[pinned] {
+	margin: 0 !important;
+	padding: 1px 0 !important;
+	color: var(--vtr-tab-pinned-text-color) !important;
+	background: var(--vtr-tab-pinned-background) !important;
+	font-weight: var(--vtr-tab-pinned-font-weight);
+	text-shadow: var(--vtr-tab-pinned-text-shadow);
+	border-left: var(--vtr-tab-pinned-border-left) !important;
+	border-radius: var(--vtr-tab-pinned-border-radius) !important;
+}
+
+.tabbrowser-tab[selected="true"] {
+	margin: 0 !important;
+	padding: 1px 0 !important;
+	color: var(--vtr-tab-selected-text-color) !important;
+	background: var(--vtr-tab-selected-background) !important;
+	font-weight: var(--vtr-tab-selected-font-weight);
+	text-shadow: var(--vtr-tab-selected-text-shadow);
+	border-left: var(--vtr-tab-selected-border-left) !important;
+	border-radius: var(--vtr-tab-selected-border-radius) !important;
+}
+
+.tabbrowser-tab[selected="true"]:-moz-window-inactive {
+	background-color: InactiveCaption !important;
+	color: InactiveCaptionText !important;
+/* gnome/gtk/cleartype doesn't seem to have inactive states for selected items, lets try this */
+}
+
+.tabbrowser-tab:not([selected="true"]):hover {
+	margin: 0 !important;
+	padding: 1px 0 !important;
+	background: var(--vtr-tab-hover-background) !important;
+}
+
+.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button {
+	visibility: collapse !important;
+}
+
 /* Keep the close button at a safe distance from the tab label. */
 .tab-close-button {
 	position: absolute;

diff --git a/webextension/data/template/basic/tabbrowser.css b/webextension/data/template/basic/tabbrowser.css
@@ -5,59 +5,16 @@ body {
 	background-color: var(--vtr-tabbrowser-background-color) !important;
 }
 
-.tabbrowser-tab {
-	-moz-box-pack: start;
-	-moz-box-flex: 0;
+/* Tab toolbar styling */
+#TabsToolbar:not(:-moz-lwtheme)  {
+	height: var(--vtr-tabbar-height);
+	border-bottom-left-radius: 0px !important;
+	box-shadow: none !important;
 	appearance: none !important;
-	background: var(--vtr-tab-background) !important;
-	margin: 0 !important;
-	padding: 1px 0 !important;
-	height: var(--vtr-tab-height) !important;
-	min-height: var(--vtr-tab-min-height) !important;
-	max-height: var(--vtr-tab-max-height) !important;
-	color: var(--vtr-tab-text-color) !important;
-	border: var(--vtr-tab-border) !important;
-	border-radius: var(--vtr-tab-border-radius) !important;
-	border-left: var(--vtr-tab-border-left) !important;
-	border-bottom: var(--vtr-tab-border-bottom) !important;
-}
-
-.tabbrowser-tab[pinned] {
-	margin: 0 !important;
-	padding: 1px 0 !important;
-	color: var(--vtr-tab-pinned-text-color) !important;
-	background: var(--vtr-tab-pinned-background) !important;
-	font-weight: var(--vtr-tab-pinned-font-weight);
-	text-shadow: var(--vtr-tab-pinned-text-shadow);
-	border-left: var(--vtr-tab-pinned-border-left) !important;
-	border-radius: var(--vtr-tab-pinned-border-radius) !important;
-}
-
-.tabbrowser-tab[selected="true"] {
-	margin: 0 !important;
-	padding: 1px 0 !important;
-	color: var(--vtr-tab-selected-text-color) !important;
-	background: var(--vtr-tab-selected-background) !important;
-	font-weight: var(--vtr-tab-selected-font-weight);
-	text-shadow: var(--vtr-tab-selected-text-shadow);
-	border-left: var(--vtr-tab-selected-border-left) !important;
-	border-radius: var(--vtr-tab-selected-border-radius) !important;
-}
-
-.tabbrowser-tab[selected="true"]:-moz-window-inactive {
-	background-color: InactiveCaption !important;
-	color: InactiveCaptionText !important;
-/* gnome/gtk/cleartype doesn't seem to have inactive states for selected items, lets try this */
-}
-
-.tabbrowser-tab:not([selected="true"]):hover {
-	margin: 0 !important;
-	padding: 1px 0 !important;
-	background: var(--vtr-tab-hover-background) !important;
-}
-
-.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button {
-	visibility: collapse !important;
+	border-top: 1px solid rgb(160,160,160) !important;
+	-moz-border-right-colors: #fcfcfc rgb(154,154,154) !important;
+	background-color: var(--vtr-tabbar-background-color) !important;
+	background-image: none !important;
 }
 
 /* Seperator between tabbar and website */

diff --git a/webextension/data/theme/base.css b/webextension/data/theme/base.css
@@ -5,6 +5,7 @@ body
     display: flex;
     flex-flow: column;
     overflow-y: hidden;
+    -moz-user-select: none;
 }
 
 #tabbrowser-tabs {
@@ -16,19 +17,25 @@ body
     flex: 0 1 auto;
 }
 
-/* FIXME: likely to be removed; Style the scrollbox for vertical arrangements. */
+/* FIXME: likely to be removed; Style the scrollbox for vertical arrangements.
 .tabbrowser-arrowscrollbox > scrollbox {
     overflow-x: hidden !important;
     overflow-y: auto !important;
 }
 
-/* FIXME: likely to be removed; Since we get an actual scrollbar in this vertical arrangement, we
-   don't need these extra scroll buttons. */
+FIXME: likely to be removed; Since we get an actual scrollbar in this vertical arrangement, we
+   don't need these extra scroll buttons.
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
     visibility: collapse !important;
 }
 
+ FIXME: likely to be removed
+.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
+    -moz-padding-end: 0px ! important;
+    -moz-padding-start: 0px ! important;
+} */
+
 /* Ensure the tab favicon doesn't stretch. */
 .tab-icon-image {
     max-width: 16px;
@@ -103,11 +110,6 @@ body
     text-overflow: ellipsis
 }
 
-/* FIXME: likely to be removed */
-.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
-    -moz-padding-end: 0px ! important;
-    -moz-padding-start: 0px ! important;
-}
 
 /* FIXME: likely to be removed; get rid of the tab separator from horizontal tabs */
 .tabbrowser-tab:after,