1 files changed, 107 insertions, 0 deletions
diff --git a/files/ru/mozilla/add-ons/webextensions/user_interface/index.html b/files/ru/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..c35b6146c6
--- /dev/null
+++ b/files/ru/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,107 @@
+---
+title: Пользовательский интерфейс
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - Пользовательский интерфейс
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>У расширений WebExtensions есть несколько органов взаимодействия с пользователем, с их помощью человек пользуется <em>расширенным</em> функционалом. Все они перечислены ниже, с инструкцией как использовать в своем расширении каждый из них<span id="result_box" lang="ru"><span>.</span></span></p>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><span>Советы как с помощью этих элементов пользовательского интерфейса (UI)</span></span><span lang="ru"><span> обеспечить отличное взаимодействие человека с программой вы найдёте в статье </span></span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Элемент UI</th>
+   <th scope="col">Назначение</th>
+   <th scope="col" style="width: 350px;">Как выглядит?</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Кнопка на панели инструментов</a></td>
+   <td>
+    <p>Кнопка на панели инструментов доступна изо всех вкладок.<br>
+     Реакцию на нажатие кнопки обеспечивает расширение.</p>
+   </td>
+   <td><img alt="Example of a WebExtension toolbar button" src="https://mdn.mozillademos.org/files/12966/browser-action.png" style="height: 99px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td>
+    <p><s>Browser toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></s></p>
+   </td>
+   <td>
+    <p><s>Кнопка со всплывающим окном на панели инструментов браузера, которая открывается при нажатии. Всплывающее окно определяется в документе HTML, который обрабатывает взаимодействие пользователя.</s></p>
+   </td>
+   <td>
+    <p><s><img alt="Example of a WebExtension toolbar button with a popup" src="https://mdn.mozillademos.org/files/14039/popup-shadow.png" style="height: 156px; width: 350px;"></s></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Кнопка в адресной строке</a></td>
+   <td>В отличие от панели инструментов, в адресной строке кнопка должна появляться только рядом с адресом предназначенной для нее страницы.</td>
+   <td><img alt="Example showing an address bar button (page action)" src="https://mdn.mozillademos.org/files/15047/address_bar_button.png" style="height: 127px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Всплывающие окна</a></td>
+   <td>При нажатии на кнопку всплывает (popup) web-страница с органами управления.</td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15053/page_action_popup.png" style="height: 250px; width: 330px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Контекстное меню</a></td>
+   <td>Органы управления могут быть упорядочены в ветвящейся структуре контекстных меню браузера.</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15051/context_menu_example.png" style="height: 359px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Боковая панель</a></td>
+   <td>
+    <p dir="ltr">В боковой панели рядом с интернет-сайтом открывается web-страница с интерфейсом пользователя. Человек может ее закрыть и открыть когда в ней появится потребность.</p>
+   </td>
+   <td><img alt="Example of a WebExtension's sidebar" src="https://mdn.mozillademos.org/files/14825/bookmarks-sidebar.png" style="height: 209px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Страница настройки дополнения</a></td>
+   <td>
+    <p><span id="result_box" lang="ru"><span>Страница пользовательских настроек доступна из меню управления дополнениями единообразно </span></span>для всех расширений.</p>
+   </td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15055/options_page.png" style="height: 259px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Bundled_web_pages">Дополнительные веб-страницы</a></td>
+   <td>
+    <p>Некоторые варианты содержимого (например, справку или форму обратной связи) удобнее расположить на дополнительной web-странице, которая открывается в собственной вкладке или окне.</p>
+   </td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15063/bundled_page_as_panel_small.png" style="height: 180px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Уведомления</a></td>
+   <td>
+    <p>Пользователю можно сообщить что-либо средствами уведомления, предусмотренными в ОС.<br>
+     Расширение отреагирует когда уведомление будет либо прочитано пользователем, либо скрыто (явным решением человека или логикой программы) так и оставшись непрочтённым.</p>
+   </td>
+   <td><img alt="Example notification from a WebExtension" src="https://mdn.mozillademos.org/files/14043/notify-shadowed.png" style="height: 95px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Угадывание адреса по мере ввода</a></td>
+   <td><span id="noHighlight_0.4753766294143369">Предлагать настраиваемые варианты адресной строки при вводе пользователем ключевого слова.</span></td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15059/omnibox_example_small.png" style="height: 242px; width: 350px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Панели инструмента разработчика</a></td>
+   <td><span id="result_box" lang="ru"><span>Вкладка со связанным HTML-документом, который отображается в инструментах разработчика браузера.</span></span></td>
+   <td><img alt="New panel tab in the Developer Tools tab bar" src="https://mdn.mozillademos.org/files/15049/developer_panel_tab.png" style="height: 180px; width: 350px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span id="noHighlight_0.852967693850544">В следующих руководствах приведены пошаговые инструкции по созданию некоторых из этих параметров пользовательского интерфейса:</span></p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+</ul>