19 files changed, 240 insertions, 0 deletions
diff --git a/chromium/docs/website/site/user-experience/infobars/blue-gradient.png.sha1 b/chromium/docs/website/site/user-experience/infobars/blue-gradient.png.sha1
new file mode 100644
index 00000000000..bd06b07cfeb
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/blue-gradient.png.sha1
@@ -0,0 +1 @@
+d06d421e88424bdf11652e81970be933db6ef192
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/controls.png.sha1 b/chromium/docs/website/site/user-experience/infobars/controls.png.sha1
new file mode 100644
index 00000000000..9383094734c
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/controls.png.sha1
@@ -0,0 +1 @@
+1b3057a7093c2d82c89b3bb6a193c58092ec24ab
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/dialog.png.sha1 b/chromium/docs/website/site/user-experience/infobars/dialog.png.sha1
new file mode 100644
index 00000000000..0b51a3e98dc
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/dialog.png.sha1
@@ -0,0 +1 @@
+421a3d9ac65d6d3952016fb1f55f629aa52a6e9c
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/example-ext-crash.png.sha1 b/chromium/docs/website/site/user-experience/infobars/example-ext-crash.png.sha1
new file mode 100644
index 00000000000..eab4594a7d2
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/example-ext-crash.png.sha1
@@ -0,0 +1 @@
+8098adee891243698a7c3e9774b29f2c7f319003
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/example-theme.png.sha1 b/chromium/docs/website/site/user-experience/infobars/example-theme.png.sha1
new file mode 100644
index 00000000000..02f61074d87
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/example-theme.png.sha1
@@ -0,0 +1 @@
+15eccb49b390da5808473bf6ddec8589cd403eee
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/example-translate-confirm.png.sha1 b/chromium/docs/website/site/user-experience/infobars/example-translate-confirm.png.sha1
new file mode 100644
index 00000000000..13da9a851b0
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/example-translate-confirm.png.sha1
@@ -0,0 +1 @@
+0140bd3d2bf84cdfc45888e9a48f1424287c861d
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/example-translate.png.sha1 b/chromium/docs/website/site/user-experience/infobars/example-translate.png.sha1
new file mode 100644
index 00000000000..50d23486b18
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/example-translate.png.sha1
@@ -0,0 +1 @@
+c80db44ffa2ce54ea3ebca9b60a640e119b383c6
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/02_embedded_infobar.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/02_embedded_infobar.png.sha1
new file mode 100644
index 00000000000..b9654fc5bcc
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/02_embedded_infobar.png.sha1
@@ -0,0 +1 @@
+7965dc435ee90d3ef960c640b54f178375b3c938
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/03_contentsettings.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/03_contentsettings.png.sha1
new file mode 100644
index 00000000000..fb01666496d
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/03_contentsettings.png.sha1
@@ -0,0 +1 @@
+4c55e79b8632a8b2ff08399d08ce485b746fc95a
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/04_exceptions.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/04_exceptions.png.sha1
new file mode 100644
index 00000000000..7cdbb1c1caf
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/04_exceptions.png.sha1
@@ -0,0 +1 @@
+3097883c91662db0766e263d2404446e61e7fe0d
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/05_exceptionsproperties.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/05_exceptionsproperties.png.sha1
new file mode 100644
index 00000000000..eef1e08ed0e
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/05_exceptionsproperties.png.sha1
@@ -0,0 +1 @@
+d0e2436437f83b5700cf22085b1bde2cc0c3634b
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/06_tracking.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/06_tracking.png.sha1
new file mode 100644
index 00000000000..2b71c58a730
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/06_tracking.png.sha1
@@ -0,0 +1 @@
+3c8cca5c1eb2eee0b9ec9e4ba240b7342aa5904f
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/07_trackingbubble.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/07_trackingbubble.png.sha1
new file mode 100644
index 00000000000..afb3b525a00
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/07_trackingbubble.png.sha1
@@ -0,0 +1 @@
+6f8fb4cf3d5318b51f3c295f1c4b32a0200acb18
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/1.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/1.png.sha1
new file mode 100644
index 00000000000..063a5cb9219
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/1.png.sha1
@@ -0,0 +1 @@
+42ff3ee8f47a23f096b9ffd07ad21cfe037746f1
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/example-geolocation.png.sha1 b/chromium/docs/website/site/user-experience/infobars/geolocation/example-geolocation.png.sha1
new file mode 100644
index 00000000000..e92e82ae71d
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/example-geolocation.png.sha1
@@ -0,0 +1 @@
+da6b1e7a9ec43a37c6d26f0a26978db156361241
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/geolocation/index.md b/chromium/docs/website/site/user-experience/infobars/geolocation/index.md
new file mode 100644
index 00000000000..be1e36f32ac
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/geolocation/index.md
@@ -0,0 +1,30 @@
+---
+breadcrumbs:
+- - /user-experience
+  - User Experience
+- - /user-experience/infobars
+  - Infobars
+page_name: geolocation
+title: Geolocation
+---
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/1.png">](/user-experience/infobars/geolocation/1.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/02_embedded_infobar.png">](/user-experience/infobars/geolocation/02_embedded_infobar.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/03_contentsettings.png">](/user-experience/infobars/geolocation/03_contentsettings.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/04_exceptions.png">](/user-experience/infobars/geolocation/04_exceptions.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/05_exceptionsproperties.png">](/user-experience/infobars/geolocation/05_exceptionsproperties.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/06_tracking.png">](/user-experience/infobars/geolocation/06_tracking.png)
+
+[<img alt="image"
+src="/user-experience/infobars/geolocation/07_trackingbubble.png">](/user-experience/infobars/geolocation/07_trackingbubble.png)
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/grey-gradient.png.sha1 b/chromium/docs/website/site/user-experience/infobars/grey-gradient.png.sha1
new file mode 100644
index 00000000000..2a11646c2ff
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/grey-gradient.png.sha1
@@ -0,0 +1 @@
+cac8bd19a407539e7464b1fa88e99d2904e138ff
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/index.md b/chromium/docs/website/site/user-experience/infobars/index.md
new file mode 100644
index 00000000000..a7d92558035
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/index.md
@@ -0,0 +1,193 @@
+---
+breadcrumbs:
+- - /user-experience
+  - User Experience
+page_name: infobars
+title: Infobars
+---
+
+# **## **## **## **## Infobars are non-modal, informational messages that display as an extension of the chrome. They are displayed when something happens in the Tab that the user should be aware of, e.g. a plugin has crashed, or the user can save a password they just entered. An infobar will push the website down so as to not block any content.Variants********
+
+# **#### **#### **#### **## Usage********
+
+# **## **There are two main scenarios for dispalying an infobar:****
+# **## **1) Page-related actions - to message the user about an action they can take related to the page they are on****
+
+# **## ******## 2) Confirmations / warnings - to provide a notification or alert about a problem or a completed action********
+# **## ******## Infobars should never be purely informational; they should always have an action the user can take. Additionally, actions should be optional. If they are blocking the user from doing something else, a dialog should be used instead.********
+
+# **#### **## Types****
+
+# **## **## 1) Page-related actions****
+
+# **## **## Permissions - getting the user to agree to or permit an action (e.g. sharing their location so it can be used with the site they are on)****
+
+# **## **## **## **## Page action - asking the user if they want to perform an action on a page that the user is currently on (e.g. translating a page)********
+
+# **## **## **## **## **## **## Feature setup - promoting a feature that's related to content on the current page; additionally giving them a way to set it up (e.g. setting up Autofill feature by saving current page's form info)************
+
+# **## **## **## **## 2) Confirmations/Warnings********
+
+# **## **## Confirmation - a success confirmation of action/installation (e.g. confirmation of an extension or theme installation with ability to undo)****
+
+# **## **## Problem - informing the user of a problem that occurred with a way for them to fix/troubleshoot (e.g. notification of extension crashing with option to restore; notification of missing plug-in with a way to install)****
+
+# **## **## #### **## **## When & Where to display********
+
+# **## In most cases, infobars should not be displayed in direct response to a user action (i.e. they should be system-initiated). If a user performs an action that directly responds with a message of the types listed above, a lightweight dialog should be used instead. The exception to this is the confirmation infobar which is usually in direct response to the user choosing to install something.**
+# **## Infobars with page-related actions should only show on the pages to which they are relevant. Confirmation/warning infobars should only show on the page that they first appeared. The infobar can persist on that tab/page as long as it makes sense to stay open or until the user closes it out.**
+
+# ****#### ****Visual********
+
+# ****Colors****
+
+# **From Chrome/3rd party (PC)**
+
+# **[<img alt="image"
+src="/user-experience/infobars/blue-gradient.png">](/user-experience/infobars/blue-gradient.png)**
+
+# **From Chrome/3rd party (Mac)**
+
+# **[<img alt="image"
+src="/user-experience/infobars/grey-gradient.png">](/user-experience/infobars/grey-gradient.png)**
+
+# ****Confirmation/warning****
+
+# ****[<img alt="image"
+src="/user-experience/infobars/yellow-gradient.png">](/user-experience/infobars/yellow-gradient.png)****
+
+# ****Controls****
+
+# ****### [<img alt="image"
+src="/user-experience/infobars/controls.png">](/user-experience/infobars/controls.png)****
+
+# **Note: The Options menu on an infobar only shows the encasing button on hover
+and press, similar to the page and wrench menus in Chrome.**
+
+# ****Spacing****
+
+# **infobar height = 36 px**
+
+# **left and right padding = 6 px**
+
+# **spacing after icon = 6 px**
+
+# **spacing between buttons = 10 px**
+
+# **spacing after message (and before buttons) = 16 px**
+
+# **spacing to left of x button (between x and learn more or Options) = 12 px**
+
+# **### **### **Examples******
+
+# **### ****### ****### **e.g. Page action infobar from************
+
+# **### ****### ****### ****### ****### **Translate********************
+
+# **### ****### ****### ****### ****### ****### **[<img alt="image"
+src="/user-experience/infobars/example-translate.png">](/user-experience/infobars/example-translate.png)************************
+
+# **### **e.g. Confirmation./page action infobar with more options****
+
+# **### **<img alt="image"
+src="/user-experience/infobars/example-translate-confirm.png">****
+
+# **### ****### ****### **e.g. Problem infobar************
+
+# **### ****### ****### ****### **[<img alt="image"
+src="/user-experience/infobars/example-ext-crash.png">](/user-experience/infobars/example-ext-crash.png)****************
+
+# ****#### ****Content********
+
+# ****Font****
+
+# **\[system font\]**
+
+# **(Tahoma 13px shown in mocks)**
+
+# ****Message wording****
+
+# **Infobar messages should be clear and succinct. If possible, the message
+should be able to fit on one line of the infobar and still retain enough space
+for controls, options/learn more and a close button. There may be cases where
+multiple infobars get stacked so messages should always be clear about where
+(which feature/app) the message is coming from.**
+
+# ****Button wording****
+
+# **The button that performs the main action should convey in wording what
+action will take place. The button that declines the action should simply say no
+if the preceding text contains a question. If the infobar message does not
+contain a question, then the button should convey what they are refusing.**
+
+# ****Examples by type:****
+
+# **Permissions/Page Actions - explanation of who/what is asking and what they
+are asking permission for**
+
+> # **e.g. Flickr wishes to use your location. \[Share my location\] \[Don't
+> share\]**
+
+> # **e.g. This page is in French. Would you like to translate it? \[Translate\]
+> \[No thanks\]**
+
+# **Feature setup - explanation of what feature is and/or value + question
+asking if user wants to perform action**
+
+# **e.g. Chrome's Autofill feature can help you fill out web forms faster. Would you like to save this form info? \[Set up Autofill...\] \[Nope\]**
+
+# **Confirmation - confirmation of completed action**
+
+> # **e.g. The "Mappy" extension was successfully installed. \[Undo\]**
+
+> # **e.g. This page has been translated from \[French\] to \[English\]. *Note:
+> The controls are dropdowns in this example.***
+
+# **Problem - explanation of problem**
+
+# **e.g. The "Dictionary" extension crashed. \[Restore\]**
+
+# **### ****Options / Learn more / Help******
+# **### **If an infobar is substantial enough to have an options menu, put the
+Help or Learn more link within that menu. Otherwise, any infobar that can
+provide additional explanation of the feature or message should give more
+information in a "learn more" or "About \[feature name\]" link.****
+
+# **#### ****Persistence and Crossfading******
+
+# ******Persistence******
+
+# ****In general, to avoid the up and down bouncing of new infobar instances,
+infobars related to the same action instance should persist.****
+
+# ****For example, translating a page involves multiple infobars. The first
+allow the user to translate the page, and the second informs the user that the
+page has been translated AND offers the ability to do another translation. When
+the user clicks on the affirmative button in the first infobar, the infobar will
+not bounce up and return with the second infobar. Instead, the infobar will
+persist, and the content on the infobar will change.****
+
+# **In a case where there is a persistent infobar and the color of the infobar
+must change, the first color will crossfade into the second color over 500 ms.**
+
+# **For example, if a user tries to translate a page using the blue translation
+bar and an error occurs, the blue infobar will crossfade into a yellow infobar
+outlining the issue and an ability to try translating again.**
+
+# ****#### ****Dialogs********
+
+# ******A dialog should be used instead of an infobar if...******
+
+# ******1) it will block the user from doing something unless he/she takes
+action******
+
+# **2) it is a direct response to a user action**
+
+# **e.g.**
+
+# **[<img alt="image"
+src="/user-experience/infobars/dialog.png">](/user-experience/infobars/dialog.png)**
+
+# ****#### ****## **Variants**********
+
+# ****## ****## [Geolocation](/user-experience/infobars/geolocation)********
+\ No newline at end of file
diff --git a/chromium/docs/website/site/user-experience/infobars/yellow-gradient.png.sha1 b/chromium/docs/website/site/user-experience/infobars/yellow-gradient.png.sha1
new file mode 100644
index 00000000000..8a1cfb47397
--- /dev/null
+++ b/chromium/docs/website/site/user-experience/infobars/yellow-gradient.png.sha1
@@ -0,0 +1 @@
+eb01f74ccca3471c58cfca60d9e11e324dce4977
+\ No newline at end of file