Bug 598786 - Visual design for tab-modal prompts. r=dao, a=me

2010-11-19 21:23:30 -08:00 · 2010-11-19 21:23:30 -08:00 · 4b54f7fafd
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@ -1731,3 +1731,7 @@ panel[dimmed="true"] {
  border-width: 0;
  -moz-appearance: none;
 }
+
+browser[tabmodalPromptShowing] {
+  filter: url("chrome://browser/skin/effects.svg#blurAndDesaturate");
+}
--- a/browser/themes/gnomestripe/browser/effects.svg
+++ b/browser/themes/gnomestripe/browser/effects.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is effects.svg.
+#
+# The Initial Developer of the Original Code is the Mozilla Foundation.
+# Portions created by the Initial Developer are Copyright (C) 2010
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Justin Dolske <dolske@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either the GNU General Public License Version 2 or later (the "GPL"), or
+# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
+    <filter id="blurAndDesaturate">
+        <feGaussianBlur stdDeviation="2"/>
+        <feColorMatrix type="saturate" values="0.7"/>
+    </filter>
+</svg>
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@ -12,6 +12,7 @@ browser.jar:
 #endif
  skin/classic/browser/actionicon-tab.png
 * skin/classic/browser/browser.css                    (browser.css)
+* skin/classic/browser/effects.svg                    (effects.svg)
 * skin/classic/browser/engineManager.css              (engineManager.css)
  skin/classic/browser/fullscreen-video.css
  skin/classic/browser/inspector.css
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@ -2231,3 +2231,7 @@ panel[dimmed="true"] {
  border-width: 0;
  -moz-appearance: none;
 }
+
+browser[tabmodalPromptShowing] {
+  filter: url("chrome://browser/skin/effects.svg#blurAndDesaturate");
+}
--- a/browser/themes/pinstripe/browser/effects.svg
+++ b/browser/themes/pinstripe/browser/effects.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is effects.svg.
+#
+# The Initial Developer of the Original Code is the Mozilla Foundation.
+# Portions created by the Initial Developer are Copyright (C) 2010
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Justin Dolske <dolske@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either the GNU General Public License Version 2 or later (the "GPL"), or
+# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
+    <filter id="blurAndDesaturate">
+        <feGaussianBlur stdDeviation="2"/>
+        <feColorMatrix type="saturate" values="0.7"/>
+    </filter>
+</svg>
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@ -11,6 +11,7 @@ browser.jar:
 #endif
  skin/classic/browser/actionicon-tab.png
 * skin/classic/browser/browser.css                          (browser.css)
+* skin/classic/browser/effects.svg                          (effects.svg)
 * skin/classic/browser/engineManager.css                    (engineManager.css)
  skin/classic/browser/fullscreen-video.css
  skin/classic/browser/Geolocation-16.png
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@ -2116,3 +2116,7 @@ panel[dimmed="true"] {
  border-width: 0;
  -moz-appearance: none;
 }
+
+browser[tabmodalPromptShowing] {
+  filter: url("chrome://browser/skin/effects.svg#blurAndDesaturate");
+}
--- a/browser/themes/winstripe/browser/effects.svg
+++ b/browser/themes/winstripe/browser/effects.svg
@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+# ***** BEGIN LICENSE BLOCK *****
+# Version: MPL 1.1/GPL 2.0/LGPL 2.1
+#
+# The contents of this file are subject to the Mozilla Public License Version
+# 1.1 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+# http://www.mozilla.org/MPL/
+#
+# Software distributed under the License is distributed on an "AS IS" basis,
+# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+# for the specific language governing rights and limitations under the
+# License.
+#
+# The Original Code is effects.svg.
+#
+# The Initial Developer of the Original Code is the Mozilla Foundation.
+# Portions created by the Initial Developer are Copyright (C) 2010
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Justin Dolske <dolske@mozilla.com>
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either the GNU General Public License Version 2 or later (the "GPL"), or
+# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+# in which case the provisions of the GPL or the LGPL are applicable instead
+# of those above. If you wish to allow use of your version of this file only
+# under the terms of either the GPL or the LGPL, and not to allow others to
+# use your version of this file under the terms of the MPL, indicate your
+# decision by deleting the provisions above and replace them with the notice
+# and other provisions required by the GPL or the LGPL. If you do not delete
+# the provisions above, a recipient may use your version of this file under
+# the terms of any one of the MPL, the GPL or the LGPL.
+#
+# ***** END LICENSE BLOCK *****
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
+    <filter id="blurAndDesaturate">
+        <feGaussianBlur stdDeviation="2"/>
+        <feColorMatrix type="saturate" values="0.7"/>
+    </filter>
+</svg>
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@ -16,6 +16,7 @@ browser.jar:
        skin/classic/browser/appmenu-icons.png
        skin/classic/browser/appmenu-dropmarker.png
 *       skin/classic/browser/browser.css                             (browser.css)
+*       skin/classic/browser/effects.svg                             (effects.svg)
 *       skin/classic/browser/engineManager.css                       (engineManager.css)
        skin/classic/browser/fullscreen-video.css
        skin/classic/browser/Geolocation-16.png
@ -128,6 +129,7 @@ browser.jar:
        skin/classic/aero/browser/appmenu-dropmarker.png
        skin/classic/aero/browser/appmenu-icons.png
 *       skin/classic/aero/browser/browser.css                        (browser-aero.css)
+*       skin/classic/aero/browser/effects.svg                        (effects.svg)
 *       skin/classic/aero/browser/engineManager.css                  (engineManager.css)
        skin/classic/aero/browser/fullscreen-video.css
        skin/classic/aero/browser/Geolocation-16.png
--- a/toolkit/components/prompts/content/tabprompts.css
+++ b/toolkit/components/prompts/content/tabprompts.css
@ -0,0 +1,30 @@
+/* Tab Modal Prompt boxes */
+tabmodalprompt {
+  width: 100%;
+  height: 100%;
+  -moz-box-pack: center;
+  -moz-box-orient: vertical;
+}
+
+.mainContainer {
+  min-width: 20em;
+}
+
+.info\.body {
+  max-width: 45em;
+}
+
+.infoContainer {
+  -moz-user-focus: normal;
+  -moz-user-select: text;
+  cursor: text !important;
+  white-space: pre-wrap;
+  max-height: 10em;
+  overflow-y: auto;
+}
+
+%ifdef XP_WIN
+.buttonContainer {
+  -moz-box-pack: center;
+}
+%endif
--- a/toolkit/components/prompts/content/tabprompts.xml
+++ b/toolkit/components/prompts/content/tabprompts.xml
@ -14,6 +14,7 @@
  <binding id="tabmodalprompt">

    <resources>
+        <stylesheet src="chrome://global/content/tabprompts.css"/>
        <stylesheet src="chrome://global/skin/tabprompts.css"/>
    </resources>

--- a/toolkit/components/prompts/jar.mn
+++ b/toolkit/components/prompts/jar.mn
@ -4,4 +4,5 @@ toolkit.jar:
   content/global/commonDialog.css            (content/commonDialog.css)
 +  content/global/selectDialog.js             (content/selectDialog.js)
 +  content/global/selectDialog.xul            (content/selectDialog.xul)
+*  content/global/tabprompts.css              (content/tabprompts.css)
 *+ content/global/tabprompts.xml              (content/tabprompts.xml)
--- a/toolkit/themes/pinstripe/global/icons/information-tabmodal-64.png
+++ b/toolkit/themes/pinstripe/global/icons/information-tabmodal-64.png
--- a/toolkit/themes/pinstripe/global/icons/question-tabmodal-64.png
+++ b/toolkit/themes/pinstripe/global/icons/question-tabmodal-64.png
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@ -101,6 +101,7 @@ toolkit.jar:
  skin/classic/global/icons/information-32.png                       (icons/information-32.png)
  skin/classic/global/icons/information-64.png                       (icons/information-64.png)
  skin/classic/global/icons/information-large.png                    (icons/information-large.png)
+  skin/classic/global/icons/information-tabmodal-64.png              (icons/information-tabmodal-64.png)
  skin/classic/global/icons/loading_16.png                           (icons/loading_16.png)
  skin/classic/global/icons/menulist-dropmarker.png                  (icons/menulist-dropmarker.png)
  skin/classic/global/icons/notloading_16.png                        (icons/notloading_16.png)
@ -128,6 +129,7 @@ toolkit.jar:
  skin/classic/global/icons/question-32.png                          (icons/question-32.png)
  skin/classic/global/icons/question-64.png                          (icons/question-64.png)
  skin/classic/global/icons/question-large.png                       (icons/question-large.png)
+  skin/classic/global/icons/question-tabmodal-64.png                 (icons/question-tabmodal-64.png)
  skin/classic/global/icons/sslWarning.png                           (icons/sslWarning.png)
  skin/classic/global/notification/critical-bar-background.png       (notification/critical-bar-background.png)
  skin/classic/global/notification/error-icon.png                    (notification/error-icon.png)
--- a/toolkit/themes/pinstripe/global/tabprompts.css
+++ b/toolkit/themes/pinstripe/global/tabprompts.css
@ -1,27 +1,33 @@
 /* Tab Modal Prompt boxes */
 tabmodalprompt {
-    width: 100%;
-    height: 100%;
-    color: white;
-    background-image: -moz-repeating-linear-gradient(-45deg,
-                                                     rgba(65, 65, 65, 0.8),
-                                                     rgba(65, 65, 65, 0.8) 20px,
-                                                     rgba(69, 69, 69, 0.8) 20px,
-                                                     rgba(69, 69, 69, 0.8) 40px);
-    -moz-box-pack: center;
-    -moz-box-orient: vertical;
+  background-color: hsla(0,0%,97%,.15);
+  background-image: -moz-radial-gradient(center 40%, circle closest-side, hsla(0,0%,90%,.5), hsla(0,0%,90%,0));
 }

 .mainContainer {
-    min-width: 20em;
-    padding: 10px;
-    background: rgb(80,80,80);
-    border: 1px solid rgb(20,20,20);
-    border-radius: 12px;
-    box-shadow: inset 0 1px 3.5px rgba(0,0,0,0.8),
-                      0 1px 0 rgba(255,255,255,0.2);
+  padding: 20px;
+  color: black;
+  background-image: -moz-linear-gradient(hsla(0,0%,97%,.9), hsla(0,0%,87%,.9));
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px hsla(0,0%,0%,.25) inset,
+              0 1px 1px hsla(0,0%,0%,.2) inset,
+              0 1px 2px hsla(0,0%,0%,.1) inset,
+              0 1px 0 hsla(0,0%,100%,.4);
 }

-.topContainer {
-    min-height: 64px;
+.buttonContainer {
+  margin-top: 10px;
+}
+
+.info\.icon {
+  width: 64px !important;
+  height: 64px !important;
+}
+
+.alert-icon {
+  list-style-image: url("chrome://global/skin/icons/information-tabmodal-64.png") !important;
+}
+
+.question-icon {
+  list-style-image: url("chrome://global/skin/icons/question-tabmodal-64.png") !important;
 }
--- a/toolkit/themes/winstripe/global/icons/information-tabmodal-64.png
+++ b/toolkit/themes/winstripe/global/icons/information-tabmodal-64.png
--- a/toolkit/themes/winstripe/global/icons/question-tabmodal-64.png
+++ b/toolkit/themes/winstripe/global/icons/question-tabmodal-64.png
--- a/toolkit/themes/winstripe/global/jar.mn
+++ b/toolkit/themes/winstripe/global/jar.mn
@ -116,6 +116,7 @@ toolkit.jar:
        skin/classic/global/icons/information-32.png             (icons/information-32.png)
        skin/classic/global/icons/information-48.png             (icons/information-48.png)
        skin/classic/global/icons/information-64.png             (icons/information-64.png)
+        skin/classic/global/icons/information-tabmodal-64.png    (icons/information-tabmodal-64.png)
        skin/classic/global/icons/loading_16.png                 (icons/loading_16.png)
        skin/classic/global/icons/notloading_16.png              (icons/notloading_16.png)
        skin/classic/global/icons/Minimize.gif                   (icons/Minimize.gif)
@ -128,6 +129,7 @@ toolkit.jar:
        skin/classic/global/icons/question-24.png                (icons/question-24.png)
        skin/classic/global/icons/question-48.png                (icons/question-48.png)
        skin/classic/global/icons/question-64.png                (icons/question-64.png)
+        skin/classic/global/icons/question-tabmodal-64.png       (icons/question-tabmodal-64.png)
        skin/classic/global/icons/resizer.png                    (icons/resizer.png)
        skin/classic/global/icons/resizer-rtl.png                (icons/resizer-rtl.png)
        skin/classic/global/icons/Restore.gif                    (icons/Restore.gif)
@ -289,6 +291,7 @@ toolkit.jar:
        skin/classic/aero/global/icons/information-32.png                (icons/information-32-aero.png)
        skin/classic/aero/global/icons/information-48.png                (icons/information-48-aero.png)
        skin/classic/aero/global/icons/information-64.png                (icons/information-64-aero.png)
+        skin/classic/aero/global/icons/information-tabmodal-64.png       (icons/information-tabmodal-64.png)
        skin/classic/aero/global/icons/loading_16.png                    (icons/loading_16-aero.png)
        skin/classic/aero/global/icons/notloading_16.png                 (icons/notloading_16-aero.png)
        skin/classic/aero/global/icons/Minimize.gif                      (icons/Minimize.gif)
@ -301,6 +304,7 @@ toolkit.jar:
        skin/classic/aero/global/icons/question-24.png                   (icons/question-24-aero.png)
        skin/classic/aero/global/icons/question-48.png                   (icons/question-48-aero.png)
        skin/classic/aero/global/icons/question-64.png                   (icons/question-64-aero.png)
+        skin/classic/aero/global/icons/question-tabmodal-64.png          (icons/question-tabmodal-64.png)
        skin/classic/aero/global/icons/resizer.png                       (icons/resizer.png)
        skin/classic/aero/global/icons/resizer-rtl.png                   (icons/resizer-rtl.png)
        skin/classic/aero/global/icons/Restore.gif                       (icons/Restore.gif)
--- a/toolkit/themes/winstripe/global/tabprompts.css
+++ b/toolkit/themes/winstripe/global/tabprompts.css
@ -1,31 +1,33 @@
 /* Tab Modal Prompt boxes */
 tabmodalprompt {
-    width: 100%;
-    height: 100%;
-    color: white;
-    background-image: -moz-repeating-linear-gradient(-45deg,
-                                                     rgba(65, 65, 65, 0.8),
-                                                     rgba(65, 65, 65, 0.8) 20px,
-                                                     rgba(69, 69, 69, 0.8) 20px,
-                                                     rgba(69, 69, 69, 0.8) 40px);
-    -moz-box-pack: center;
-    -moz-box-orient: vertical;
+  background-color: hsla(0,0%,97%,.15);
+  background-image: -moz-radial-gradient(center 40%, circle closest-side, hsla(0,0%,90%,.5), hsla(0,0%,90%,0));
 }

 .mainContainer {
-    min-width: 20em;
-    padding: 10px;
-    background: rgb(80,80,80);
-    border: 1px solid rgb(20,20,20);
-    border-radius: 12px;
-    box-shadow: inset 0 1px 3.5px rgba(0,0,0,0.8),
-                      0 1px 0 rgba(255,255,255,0.2);
-}
-
-.topContainer {
-    min-height: 64px;
+  padding: 20px;
+  color: black;
+  background-image: -moz-linear-gradient(hsla(0,0%,97%,.9), hsla(0,0%,87%,.9));
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px hsla(0,0%,0%,.25) inset,
+              0 1px 1px hsla(0,0%,0%,.2) inset,
+              0 1px 2px hsla(0,0%,0%,.1) inset,
+              0 1px 0 hsla(0,0%,100%,.4);
 }

 .buttonContainer {
-    -moz-box-pack: center;
+  margin-top: 10px;
+}
+
+.info\.icon {
+  width: 64px !important;
+  height: 64px !important;
+}
+
+.alert-icon {
+  list-style-image: url("chrome://global/skin/icons/information-tabmodal-64.png") !important;
+}
+
+.question-icon {
+  list-style-image: url("chrome://global/skin/icons/question-tabmodal-64.png") !important;
 }