Bug 1160733 - about:permissions: use the new in-content style-sheet. r=Gijs

browser/components/preferences/aboutPermissions.xul

@@ -38,7 +38,7 @@
                    onselect="AboutPermissions.onSitesListSelect(event);">
         <richlistitem id="all-sites-item"
                       class="site"
-                      value="&sites.allSites;"/>                
+                      value="&sites.allSites;"/>
       </richlistbox>
     </vbox>
 
@@ -63,217 +63,220 @@
         </hbox>
       </deck>
 
-      <!-- Passwords -->
-      <hbox id="password-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="password"/>
-        <vbox>
-          <label class="pref-title" value="&password.label;"/>
-          <hbox align="center">
-            <menulist id="password-menulist"
-                      class="pref-menulist"
-                      type="password"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="password-1" value="1" label="&permission.allow;"/>
-                <menuitem id="password-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-            <button id="passwords-manage-all-button"
-                    label="&password.manage;"
-                    oncommand="AboutPermissions.managePasswords();"/>
-          </hbox>
-          <hbox id="passwords-count" align="center">
-            <label id="passwords-label"/>
-            <button id="passwords-manage-button"
-                    label="&password.manage;"
-                    oncommand="AboutPermissions.managePasswords();"/>
-          </hbox>
-        </vbox>
-      </hbox>
+      <vbox id="permissions-list" flex="1">
 
-      <!-- Geolocation -->
-      <hbox id="geo-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="geo"/>
-        <vbox>
-          <label class="pref-title" value="&geo.label;"/>
-          <hbox>
-            <menulist id="geo-menulist"
-                      class="pref-menulist"
-                      type="geo"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="geo-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="geo-1" value="1" label="&permission.allow;"/>
-                <menuitem id="geo-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Passwords -->
+        <hbox id="password-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="password"/>
+          <vbox>
+            <label class="pref-title" value="&password.label;"/>
+            <hbox align="center">
+              <menulist id="password-menulist"
+                        class="pref-menulist"
+                        type="password"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="password-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="password-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+              <button id="passwords-manage-all-button"
+                      label="&password.manage;"
+                      oncommand="AboutPermissions.managePasswords();"/>
+            </hbox>
+            <hbox id="passwords-count" align="center">
+              <label id="passwords-label"/>
+              <button id="passwords-manage-button"
+                      label="&password.manage;"
+                      oncommand="AboutPermissions.managePasswords();"/>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Camera -->
-      <hbox id="camera-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="camera"/>
-        <vbox>
-          <label class="pref-title" value="&camera.label;"/>
-          <hbox align="center">
-            <menulist id="camera-menulist"
-                      class="pref-menulist"
-                      type="camera"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="camera-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="camera-1" value="1" label="&permission.allow;"/>
-                <menuitem id="camera-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Geolocation -->
+        <hbox id="geo-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="geo"/>
+          <vbox>
+            <label class="pref-title" value="&geo.label;"/>
+            <hbox>
+              <menulist id="geo-menulist"
+                        class="pref-menulist"
+                        type="geo"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="geo-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="geo-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="geo-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Microphone -->
-      <hbox id="microphone-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="microphone"/>
-        <vbox>
-          <label class="pref-title" value="&microphone.label;"/>
-          <hbox align="center">
-            <menulist id="microphone-menulist"
-                      class="pref-menulist"
-                      type="microphone"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="microphone-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="microphone-1" value="1" label="&permission.allow;"/>
-                <menuitem id="microphone-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Camera -->
+        <hbox id="camera-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="camera"/>
+          <vbox>
+            <label class="pref-title" value="&camera.label;"/>
+            <hbox align="center">
+              <menulist id="camera-menulist"
+                        class="pref-menulist"
+                        type="camera"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="camera-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="camera-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="camera-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Cookies -->
-      <hbox id="cookie-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="cookie"/>
-        <vbox>
-          <label class="pref-title" value="&cookie.label;"/>
-          <hbox align="center">
-            <menulist id="cookie-menulist"
-                      class="pref-menulist"
-                      type="cookie"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="cookie-1" value="1" label="&permission.allow;"/>
-                <menuitem id="cookie-8" value="8" label="&permission.allowForSession;"/>
-                <menuitem id="cookie-9" value="9" label="&permission.allowFirstPartyOnly;"/>
-                <menuitem id="cookie-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-            <button id="cookies-clear-all-button"
-                    label="&cookie.removeAll;"
-                    oncommand="Services.cookies.removeAll();"/>
-            <button id="cookies-manage-all-button"
-                    label="&cookie.manage;"
-                    oncommand="AboutPermissions.manageCookies();"/>
-          </hbox>
-          <hbox id="cookies-count" align="center">
-            <label id="cookies-label"/>
-            <button id="cookies-clear-button"
-                    label="&cookie.remove;"
-                    oncommand="AboutPermissions.clearCookies();"/>
-            <button id="cookies-manage-button"
-                    label="&cookie.manage;"
-                    oncommand="AboutPermissions.manageCookies();"/>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Microphone -->
+        <hbox id="microphone-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="microphone"/>
+          <vbox>
+            <label class="pref-title" value="&microphone.label;"/>
+            <hbox align="center">
+              <menulist id="microphone-menulist"
+                        class="pref-menulist"
+                        type="microphone"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="microphone-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="microphone-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="microphone-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Pop-up Blocking -->
-      <hbox id="popup-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="popup"/>
-        <vbox>
-          <label class="pref-title" value="&popup.label;"/>
-          <hbox>
-            <menulist id="popup-menulist"
-                      class="pref-menulist"
-                      type="popup"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="popup-1" value="1" label="&permission.allow;"/>
-                <menuitem id="popup-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Cookies -->
+        <hbox id="cookie-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="cookie"/>
+          <vbox>
+            <label class="pref-title" value="&cookie.label;"/>
+            <hbox align="center">
+              <menulist id="cookie-menulist"
+                        class="pref-menulist"
+                        type="cookie"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="cookie-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="cookie-8" value="8" label="&permission.allowForSession;"/>
+                  <menuitem id="cookie-9" value="9" label="&permission.allowFirstPartyOnly;"/>
+                  <menuitem id="cookie-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+              <button id="cookies-clear-all-button"
+                      label="&cookie.removeAll;"
+                      oncommand="Services.cookies.removeAll();"/>
+              <button id="cookies-manage-all-button"
+                      label="&cookie.manage;"
+                      oncommand="AboutPermissions.manageCookies();"/>
+            </hbox>
+            <hbox id="cookies-count" align="center">
+              <label id="cookies-label"/>
+              <button id="cookies-clear-button"
+                      label="&cookie.remove;"
+                      oncommand="AboutPermissions.clearCookies();"/>
+              <button id="cookies-manage-button"
+                      label="&cookie.manage;"
+                      oncommand="AboutPermissions.manageCookies();"/>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- IndexedDB Storage -->  
-      <hbox id="indexedDB-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="indexedDB"/>
-        <vbox>
-          <label class="pref-title" value="&indexedDB.label;"/>
-          <hbox>
-            <menulist id="indexedDB-menulist"
-                      class="pref-menulist"
-                      type="indexedDB"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="indexedDB-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="indexedDB-1" value="1" label="&permission.allow;"/>
-                <menuitem id="indexedDB-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Pop-up Blocking -->
+        <hbox id="popup-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="popup"/>
+          <vbox>
+            <label class="pref-title" value="&popup.label;"/>
+            <hbox>
+              <menulist id="popup-menulist"
+                        class="pref-menulist"
+                        type="popup"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="popup-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="popup-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Fullscreen -->
-      <hbox id="fullscreen-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="fullscreen"/>
-        <vbox>
-          <label class="pref-title" value="&fullscreen.label;"/>
-          <hbox align="center">
-            <menulist id="fullscreen-menulist"
-                      class="pref-menulist"
-                      type="fullscreen"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="fullscreen-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="fullscreen-1" value="1" label="&permission.allow;"/>
-                <menuitem id="fullscreen-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- IndexedDB Storage -->
+        <hbox id="indexedDB-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="indexedDB"/>
+          <vbox>
+            <label class="pref-title" value="&indexedDB.label;"/>
+            <hbox>
+              <menulist id="indexedDB-menulist"
+                        class="pref-menulist"
+                        type="indexedDB"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="indexedDB-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="indexedDB-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="indexedDB-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
 
-      <!-- Push Notifications -->
-      <hbox id="push-pref-item"
-            class="pref-item" align="top">
-        <image class="pref-icon" type="push"/>
-        <vbox>
-          <label class="pref-title" value="&push.label;"/>
-          <hbox align="center">
-            <menulist id="push-menulist"
-                      class="pref-menulist"
-                      type="push"
-                      oncommand="AboutPermissions.onPermissionCommand(event);">
-              <menupopup>
-                <menuitem id="push-0" value="0" label="&permission.alwaysAsk;"/>
-                <menuitem id="push-1" value="1" label="&permission.allow;"/>
-                <menuitem id="push-2" value="2" label="&permission.block;"/>
-              </menupopup>
-            </menulist>
-          </hbox>
-        </vbox>
-      </hbox>
+        <!-- Fullscreen -->
+        <hbox id="fullscreen-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="fullscreen"/>
+          <vbox>
+            <label class="pref-title" value="&fullscreen.label;"/>
+            <hbox align="center">
+              <menulist id="fullscreen-menulist"
+                        class="pref-menulist"
+                        type="fullscreen"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="fullscreen-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="fullscreen-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="fullscreen-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
+
+        <!-- Push Notifications -->
+        <hbox id="push-pref-item"
+              class="pref-item" align="top">
+          <image class="pref-icon" type="push"/>
+          <vbox>
+            <label class="pref-title" value="&push.label;"/>
+            <hbox align="center">
+              <menulist id="push-menulist"
+                        class="pref-menulist"
+                        type="push"
+                        oncommand="AboutPermissions.onPermissionCommand(event);">
+                <menupopup>
+                  <menuitem id="push-0" value="0" label="&permission.alwaysAsk;"/>
+                  <menuitem id="push-1" value="1" label="&permission.allow;"/>
+                  <menuitem id="push-2" value="2" label="&permission.block;"/>
+                </menupopup>
+              </menulist>
+            </hbox>
+          </vbox>
+        </hbox>
+      </vbox>
     </vbox>
   </hbox>
 

browser/themes/linux/preferences/aboutPermissions.css

@@ -2,13 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://global/skin/inContentUI.css");
+@import url("chrome://global/skin/in-content/common.css");
 
+#permissions-content {
+  padding-top: 48px;
+  -moz-padding-end: 0; /* no padding to move the scroll bar to the edge */
+}
 
 /* sites box */
 
 #sites-box {
-  padding: 10px;
   width: 25em;
 }
 
@@ -39,13 +42,17 @@
 /* permissions box */
 
 #permissions-box {
-  padding-top: 10px;
+  -moz-padding-start: 10px;
+}
+
+#permissions-list {
   overflow-y: auto;
+  padding-top: 5px;
+  -moz-padding-end: 44px;
 }
 
 #site-description {
   font-size: 125%;
-  -moz-margin-start: 6px; /* to match button margin */
 }
 
 #site-label {
@@ -57,7 +64,15 @@
 #defaults-description {
   font-size: 125%;
   font-weight: bold;
-  -moz-margin-start: 6px;
+}
+
+#header-deck {
+  -moz-margin-end: 44px;
+}
+
+#site-header,
+#defaults-header {
+  margin-bottom: 1px;
 }
 
 .pref-item {
@@ -109,11 +124,16 @@
 
 .pref-title {
   font-size: 125%;
+  -moz-margin-start: 4px;
   margin-bottom: 0;
   font-weight: bold;
 }
 
 .pref-menulist {
-  margin-left: 6px;
-  margin-right: 6px;
+  min-width: 10em;
+ }
+
+#cookies-label,
+#passwords-label {
+  -moz-margin-start: 4px; /* align with the menulists */
 }

browser/themes/osx/preferences/aboutPermissions.css

@@ -2,13 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://global/skin/inContentUI.css");
+@import url("chrome://global/skin/in-content/common.css");
 
+#permissions-content {
+  padding-top: 48px;
+  -moz-padding-end: 0; /* no padding to move the scroll bar to the edge */
+}
 
 /* sites box */
 
 #sites-box {
-  padding: 10px;
   width: 25em;
 }
 
@@ -17,10 +20,6 @@
 }
 
 #sites-list {
-  -moz-appearance: none;
-  border: 1px solid rgba(60,73,97,0.5);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.15), 0 1px rgba(255,255,255,0.25);
-  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.3));
   margin: 5px 0 0 0;
 }
 
@@ -49,13 +48,17 @@
 /* permissions box */
 
 #permissions-box {
-  padding: 10px;
+  -moz-padding-start: 10px;
+}
+
+#permissions-list {
   overflow-y: auto;
+  padding-top: 5px;
+  -moz-padding-end: 44px;
 }
 
 #site-description {
   font-size: 125%;
-  -moz-margin-start: 6px; /* to match button margin */
 }
 
 #site-label {
@@ -64,10 +67,22 @@
   margin-bottom: 0;
 }
 
+#site-visit-count {
+  margin-bottom: 4px;
+}
+
 #defaults-description {
   font-size: 125%;
   font-weight: bold;
-  -moz-margin-start: 6px;
+}
+
+#header-deck {
+  -moz-margin-end: 44px;
+}
+
+#site-header,
+#defaults-header {
+  margin-bottom: 1px;
 }
 
 .pref-item {
@@ -125,11 +140,16 @@
 
 .pref-title {
   font-size: 125%;
+  -moz-margin-start: 2px; /* align with the menulists */
   margin-bottom: 0;
   font-weight: bold;
 }
 
 .pref-menulist {
-  margin-left: 6px;
-  margin-right: 6px;
+  min-width: 10em;
+ }
+
+#cookies-label,
+#passwords-label {
+  -moz-margin-start: 2px; /* align with the menulists */
 }

browser/themes/windows/preferences/aboutPermissions.css

@@ -2,13 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://global/skin/inContentUI.css");
+@import url("chrome://global/skin/in-content/common.css");
 
+#permissions-content {
+  padding-top: 48px;
+  -moz-padding-end: 0; /* no padding to move the scroll bar to the edge */
+}
 
 /* sites box */
 
 #sites-box {
-  padding: 10px;
   width: 25em;
 }
 
@@ -17,9 +20,6 @@
 }
 
 #sites-list {
-  -moz-appearance: none;
-  border: 1px solid rgba(0, 0, 0, 0.32);
-  background-color: rgba(255, 255, 255, 0.4);
   margin: 5px 0 0 0;
 }
 
@@ -42,13 +42,17 @@
 /* permissions box */
 
 #permissions-box {
-  padding-top: 10px;
+  -moz-padding-start: 10px;
+}
+
+#permissions-list {
   overflow-y: auto;
+  padding-top: 5px;
+  -moz-padding-end: 44px;
 }
 
 #site-description {
   font-size: 125%;
-  -moz-margin-start: 6px; /* to match button margin */
 }
 
 #site-label {
@@ -57,10 +61,22 @@
   margin-bottom: 0;
 }
 
+#site-visit-count {
+  margin-bottom: 0;
+}
+
 #defaults-description {
   font-size: 125%;
   font-weight: bold;
-  -moz-margin-start: 6px;
+}
+
+#header-deck {
+  -moz-margin-end: 44px;
+}
+
+#site-header,
+#defaults-header {
+  margin-bottom: 1px;
 }
 
 .pref-item {
@@ -112,12 +128,16 @@
 
 .pref-title {
   font-size: 125%;
+  -moz-margin-start: 4px;
   margin-bottom: 0;
   font-weight: bold;
 }
 
 .pref-menulist {
-  margin-left: 6px;
-  margin-right: 6px;
-  min-width: 10em; /* native menulists ellipsize their longest entries by default on many themes */
+  min-width: 10em;
+ }
+
+#cookies-label,
+#passwords-label {
+  -moz-margin-start: 4px; /* align with the menulists */
 }