0.7.2 Closed Beta

- Added a new flag: Be Chrome OS for Linux, which changes the system theme to be Chrome OS's grey theme with branding and titlebar buttons. Also you will see a Silverfox Chrome OS photo in about:Addons.

- All error pages containers have been fixed. No longer they cutoff if a small resolution.

- Added more scenario to error pages.

- Fixed the hompage being slightly too low for small resolutions/resizes.

Author: florinsdistortedvision

theme/chrome/JS/version.txt

@@ -1 +1 @@
-0.7.1
+0.7.2

theme/chrome/assets/images/pages/settings/native_linux_chromeOS.png

@@ -27,4 +27,13 @@
   border-bottom: none !important;
   margin-top: 0px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+#browser {
+  border-right: none !important;
+  border-left: none !important;
+  border-bottom: none !important;
+  margin-top: -1px !important;
+}  
+}
 }

theme/chrome/assets/images/topbar/chromeos/close.png

@@ -17,10 +17,18 @@
 /* Remove the borders for Linux if native titlebars are enabled */
 @media (-moz-platform: linux) {
 :root:not([tabsintitlebar="true"]) #nav-bar {
-border-right: none !important;
-border-left: none !important;
-border-radius: 0px !important;
-}
+  border-right: none !important;
+  border-left: none !important;
+  border-radius: 0px !important;
+}
+ 
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+ #nav-bar {
+  border-right: none !important;
+  border-left: none !important;
+  border-radius: 0px !important;
+} 
+} 
 }
 
 /* When in fullscreen, remove left and right borders and radius */
@@ -50,18 +58,26 @@ background-color: unset !important;
 /* Personal Toolbar (bookmarks bar) */
 
 #PersonalToolbar {
-margin-top: 2.5px !important;
-border-bottom: 1px solid #b2b2b2 !important;
-border-right: 2px solid #b2b2b2 !important;
-border-left: 2px solid #b2b2b2 !important;
+  margin-top: 2.5px !important;
+  border-bottom: 1px solid #b2b2b2 !important;
+  border-right: 2px solid #b2b2b2 !important;
+  border-left: 2px solid #b2b2b2 !important;
 }
 
 /* Remove the borders for Linux if native titlebars are enabled */
 @media (-moz-platform: linux) {
 :root:not([tabsintitlebar="true"]) #PersonalToolbar {
-border-right: none !important;
-border-left: none !important;
-border-radius: 0px !important;
+  border-right: none !important;
+  border-left: none !important;
+  border-radius: 0px !important;
+}
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+#PersonalToolbar {
+  border-right: none !important;
+  border-left: none !important;
+  border-radius: 0px !important;
+}  
 }
 }
 
@@ -333,11 +349,19 @@ z-index: 90 !important;
 #nav-bar[home="false"] #identity-box[class="verifiedDomain"]:after {
 margin-top: 2px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+#nav-bar[home="false"] #identity-box[class="verifiedDomain"]:after {
+margin-top: 0px !important;
+  margin-left: -1px !important;
+}  
+}
 
 :root:not([tabsintitlebar="true"]) #nav-bar[home="false"] #identity-box[class="verifiedDomain"]:after {
 margin-top: 0px !important;
 margin-left: -1px !important;
 }
+  
 }
 
 @media (-moz-platform: macos) {
@@ -364,7 +388,14 @@ z-index: 90 !important;
 #nav-bar[home="true"] #identity-box[class="verifiedDomain"]:after {
 margin-top: 2px !important; 
 }
-
+  
+ @supports (-moz-bool-pref("silverfox.beChromeOS")) {  
+#nav-bar[home="true"] #identity-box[class="verifiedDomain"]:after {
+margin-top: 0px !important; 
+  margin-left: -1px !important;
+}  
+}
+  
 :root:not([tabsintitlebar="true"])   #nav-bar[home="true"] #identity-box[class="verifiedDomain"]:after {
 margin-top: 0px !important; 
 margin-left: -1px !important;
@@ -396,10 +427,23 @@ z-index: 999 !important;
 margin-top: 3px !important;
 margin-left: 2px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+#nav-bar[home="false"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
+margin-left: 0px !important;
+}  
+}
 
-:root:not([tabsintitlebar="true"])   #nav-bar[home="false"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
+:root:not([tabsintitlebar="true"]) #nav-bar[home="false"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
 margin-left: 0px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+:root:not([sizemode="normal"]) #nav-bar[home="false"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
+  margin-left: 3px !important;
+}
+}
+  
 }
 
 @media (-moz-platform: macos) {
@@ -427,6 +471,18 @@ z-index: 999 !important;
 margin-top: 3px !important;
 margin-left: 3px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+#nav-bar[home="true"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
+margin-left: 1px !important;
+}
+  
+:root:not([sizemode="normal"]) #nav-bar[home="true"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
+margin-left: 3px !important;
+}
+  
+}
+  
 
 :root:not([tabsintitlebar="true"]) #nav-bar[home="true"] #identity-box[class="verifiedDomain certUserOverridden"]:after {
 margin-left: 0.5px !important;
@@ -590,6 +646,11 @@ background-position: 5px 10px !important;
 background-size: 18px !important;
 color: transparent;
 }
+
+.urlbarView-row[type=bookmark] .urlbarView-favicon {
+  visibility: hidden !important;
+}
+
 .urlbarView-row[type="bookmark"]:hover {
 background-position: 20px 4px !important;
 }

theme/chrome/assets/images/topbar/chromeos/close_hover.png

@@ -46,9 +46,6 @@
         background-image: linear-gradient(to bottom, #b4bec9 0%, #a0aebe 100%) !important;
         opacity: 0.95 !important;
 }
-
-        
-
 
 
 :root:not(:-moz-lwtheme) .tabbrowser-tab[visuallyselected="true"] .tab-background,
@@ -353,7 +350,7 @@
 
 /* Linux System Theme */
 /* Tabs */
-
+@supports not (-moz-bool-pref("silverfox.beChromeOS")) {
 :root:not(:-moz-lwtheme) .tab-text {
   color: -moz-DialogText !important;
 }
@@ -386,6 +383,7 @@
   background: color-mix(in srgb, white 14%, -moz-dialog) !important;
 }
 
+
 /* NavBar */
 :root:not(:-moz-lwtheme) #nav-bar {
   background-image: linear-gradient(to top,
@@ -400,7 +398,7 @@
                           -moz-dialog 0%,
                           color-mix(in srgb, black 4%, -moz-dialog) 100%) !important;
 }
-    
+}   
 
 /* Light theme */
 
@@ -416,6 +414,35 @@ menupopup {
     --panel-color: FieldText !important;
     --panel-border-color: ThreeDShadow !important;
 }
+    
+    
+/* Chrome OS mode */
+    
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+     
+:root:not(:-moz-lwtheme) #TabsToolbar {
+    background-image: linear-gradient(to top, #c4c4c4 0%, #c1c5c0 100%) !important;    
+}
+
+:root:not(:-moz-lwtheme) #navigator-toolbox,
+:root:not(:-moz-lwtheme) #navigator-toolbox-background {
+    background: #c1c5c0 !important;
+}
+
+:root[privatebrowsingmode="temporary"][native="true"] #TabsToolbar {
+    background-image: linear-gradient(to top, #526d92 0%, #526d92 10%, #617a9c 97%, #617a9c 100%) !important;    
+}
+
+:root[privatebrowsingmode="temporary"][native="true"] #navigator-toolbox,
+:root[privatebrowsingmode="temporary"][native="true"] #navigator-toolbox-background {
+    background: #617a9c !important;
+}   
+   
+:root:not(:-moz-lwtheme) #PersonalToolbar,   
+:root:not(:-moz-lwtheme) .tab-text {
+    color: black !important;
+}        
+}
 }
 
 /* MacOS */
@@ -461,6 +488,5 @@ menupopup {
 :root:not(:-moz-lwtheme) #PersonalToolbar,    
 :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #PersonalToolbar {
      background-image: linear-gradient(to top, #cecfce 0%, #cecfcf 100%) !important; 
-}    
-    
+}     
 }

theme/chrome/assets/images/topbar/chromeos/close_pressed.png

@@ -11,6 +11,12 @@
 :root:not([tabsintitlebar="true"]) #TabsToolbar {
   margin-top: -4px !important;
 }
+  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) { 
+  #TabsToolbar {
+  margin-top: 2px !important;
+}
+} 
 }
 
 
@@ -296,6 +302,24 @@ tab:where(:first-of-type[visuallyselected="true"]) {
 
 }
 
+@media (-moz-platform: linux) {
+
+@supports (-moz-bool-pref("silverfox.beChromeOS")) {   
+  
+  #tabs-newtab-button, #TabsToolbar #new-tab-button {
+        background-image: url(../../assets/images/topbar/newtab_original.png) !important;
+        background-repeat: no-repeat !important;
+        position: relative !important;
+        top: 5px !important;
+        right: 16px;
+        list-style-image: none !important;
+        visibility: visible;
+        transform: scale(0.78) !important;
+        filter: grayscale(30%) brightness(505%) !important;
+}
+}
+}
+
 #tabs-newtab-button:hover, #TabsToolbar #new-tab-button:hover {
         background-color: transparent !important;
         border: 0px solid transparent !important;

theme/chrome/assets/images/topbar/chromeos/maximize.png

@@ -680,4 +680,64 @@
       background: url(../../assets/images/topbar/linux/restore_pressed.png) !important;
     }
   }
-  }
+    
+/* Chrome OS */  
+@supports (-moz-bool-pref("silverfox.beChromeOS")) {
+  
+.titlebar-buttonbox {
+      margin-top: 20px !important;
+}
+  
+:root:not([sizemode="normal"]) .titlebar-buttonbox {
+    margin-top: -2px !important;
+}  
+  
+.titlebar-close,
+.titlebar-restore,
+.titlebar-min,
+.titlebar-max {
+      min-width: 35px !important;
+      max-width: 35px !important;
+      height: 36px !important;
+}
+  
+.titlebar-close {
+      background: url(../../assets/images/topbar/chromeos/close.png) !important;
+}
+.titlebar-min {
+      background: url(../../assets/images/topbar/chromeos/minimize.png) !important;
+}
+.titlebar-max {
+      background: url(../../assets/images/topbar/chromeos/maximize.png) !important;
+}
+.titlebar-restore {
+      background: url(../../assets/images/topbar/chromeos/maximize.png) !important;
+}
+  
+/* Hovers */
+.titlebar-close:hover {
+      background: url(../../assets/images/topbar/chromeos/close_hover.png) !important;
+}
+.titlebar-min:hover {
+      background: url(../../assets/images/topbar/chromeos/minimize_hover.png) !important;
+}
+.titlebar-max:hover {
+      background: url(../../assets/images/topbar/chromeos/maximize_hover.png) !important;
+}
+.titlebar-restore:hover {
+      background: url(../../assets/images/topbar/chromeos/restore_hover.png) !important;
+}
+  
+/* Pressed */
+.titlebar-close:hover:active {
+      background: url(../../assets/images/topbar/chromeos/close_pressed.png) !important;
+}
+.titlebar-min:hover:active {
+      background: url(../../assets/images/topbar/chromeos/minimize_pressed.png) !important;
+}
+.titlebar-restore:hover:active,
+.titlebar-max:hover:active {
+      background: url(../../assets/images/topbar/chromeos/maximize_pressed.png) !important;
+}  
+}
+}

theme/chrome/assets/images/topbar/chromeos/maximize_hover.png

@@ -10,9 +10,12 @@ body {
   box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.29) !important;
   font-size: 12px !important;
   min-width: 780px !important;
-  margin-top: -650px !important;
   height: 160px !important;
   color: black !important;
+  position: fixed !important;
+  top: 20% !important;
+  left: 50% !important;
+  transform: translate(-50%, -20%) !important;
 }
 
 

theme/chrome/assets/images/topbar/chromeos/maximize_pressed.png

@@ -10,8 +10,11 @@ body {
   box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.29) !important;
   font-size: 12px !important;
   min-width: 780px !important;
-  margin-top: -400px !important;
   color: black !important;
+  position: fixed !important;
+  top: 20% !important;
+  left: 50% !important;
+  transform: translate(-50%, -20%) !important;
 }
 
 

theme/chrome/assets/images/topbar/chromeos/minimize.png

@@ -10,8 +10,11 @@ body {
   box-shadow: 5px 5px 8px 2px rgba(0,0,0,0.29) !important;
   font-size: 12px !important;
   min-width: 780px !important;
-  margin-top: -400px !important;
   color: black !important;
+  position: fixed !important;
+  top: 20% !important;
+  left: 50% !important;
+  transform: translate(-50%, -20%) !important;
 }
 
 h1[data-l10n-id="dnsNotFound-title"] {