diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 21:46:22 -0500 |
commit | a065e04d529da1d847b5062a12c46d916408bf32 (patch) | |
tree | fe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/fa/mozilla/add-ons | |
parent | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff) | |
download | translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2 translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip |
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/fa/mozilla/add-ons')
-rw-r--r-- | files/fa/mozilla/add-ons/add-on_guidelines/index.html | 116 | ||||
-rw-r--r-- | files/fa/mozilla/add-ons/sdk/index.html | 81 | ||||
-rw-r--r-- | files/fa/mozilla/add-ons/themes/background/index.html | 104 | ||||
-rw-r--r-- | files/fa/mozilla/add-ons/themes/index.html | 61 | ||||
-rw-r--r-- | files/fa/mozilla/add-ons/themes/theme_concepts/index.html | 232 |
5 files changed, 0 insertions, 594 deletions
diff --git a/files/fa/mozilla/add-ons/add-on_guidelines/index.html b/files/fa/mozilla/add-ons/add-on_guidelines/index.html deleted file mode 100644 index a2ceecab7b..0000000000 --- a/files/fa/mozilla/add-ons/add-on_guidelines/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Add-on guidelines -slug: Mozilla/Add-ons/Add-on_guidelines -translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' ---- -<p>These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> are subject to <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">additional policies</a>.</p> -<h2 id="Be_Transparent">Be Transparent</h2> -<ul> - <li>Add-ons must either be installed using the add-on web install system, or be approved by the user using the <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">install opt-in dialog</a>. - <ul> - <li>We want our users to know what they are installing so that they are not unpleasantly surprised by changes they did not expect. We also want them to know what to remove if they decide not to keep it.</li> - <li>Add-ons installed through application installers should <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">use the Windows Registry</a> or equivalent global install methods so that Firefox displays the opt-in screen. The opt-in screen must not be tampered with in any way, including overlaying additional information or images on top of it.</li> - </ul> - </li> - <li>Add-ons must always be possible to uninstall or disable from the Add-ons Manager. - <ul> - <li>Add-ons installed globally using the Windows registry or global extension directories cannot be uninstalled (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), but they can be disabled to the same effect.</li> - </ul> - </li> - <li>Add-ons must use a <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">single unique ID</a> during their entire lifetime. - <ul> - <li>Using the same ID for multiple products, or multiple IDs for a single product, can lead to problems with automatic updates as well as blocklisting conflicts. Add-ons may change their IDs due to ownership changes, as they commonly use an email address-like format ( - <i> - e.g.,</i> - personasplus@mozilla.com).</li> - </ul> - </li> - <li>Add-ons must not use brand names, trademarks, or other terms in ways that deceive users. Using Mozilla trademarks must follow <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">our trademark policy</a>.</li> - <li>Add-ons should clearly communicate their intended purpose and active features, including features introduced through updates. - <ul> - <li>While we understand and support add-on developers who choose to monetize their products, this should not come at the expense of users' browsing experience. If an add-on inserts advertisements, affiliate codes, sponsored search results, or the like, into web pages, the user should be made aware of this when the add-on is installed. Likewise, if some features require payment to use, or require payment to remain active after a trial period, users should be made aware of this.</li> - </ul> - </li> -</ul> -<h2 id="Be_Respectful_to_Users">Be Respectful to Users</h2> -<ul> - <li>Add-ons must remove all introduced code, executables, and application configuration changes when they are uninstalled. - <ul> - <li>Uninstalling an add-on using the regular uninstall process should generally suffice. This guideline primarily applies to changes made to preferences such as the homepage, default search URL, network settings, and so forth. These preferences should be restored to their previous values when the add-on is uninstalled. Most add-ons can easily accomplish this by making such changes via a <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">default preferences file</a>.</li> - </ul> - </li> - <li>Add-ons should respect the users' choices and not make unexpected changes, or limit users' ability to revert them. - <ul> - <li>For instance, users generally do not expect an add-on to change the Firefox homepage. Asking users to opt-in to such extra changes is recommended. Making them difficult or impossible to revert is strongly discouraged.</li> - </ul> - </li> - <li>Add-ons should make it clear how private user data is being used. - <ul> - <li>Add-ons which send user data over the Internet should generally provide a Privacy Policy, ideally concise and easily readable.</li> - </ul> - </li> - <li>Add-on developers should provide a mechanism for them to be contacted. - <ul> - <li>While developers are not required to provide a support channel for users, it is recommended. All add-on developers should have a contact form or public email address so that they can be contacted in case of emergencies, such as guideline violations that could lead to blocklisting.</li> - </ul> - </li> -</ul> -<h2 id="Be_Safe">Be Safe</h2> -<ul> - <li>Add-ons must not cause harm to users' data, system, or online identities.</li> - <li>Add-ons must not transmit users' private data unsafely, or expose it to third parties unnecessarily. - <ul> - <li>Private data should always be sent over a secure connection. This includes browsing data such as visited URLs and bookmarks.</li> - <li>Making the browser easier to fingerprint by adding text to the User-Agent string or adding custom headers is also a privacy concern, and should be avoided.</li> - </ul> - </li> - <li>Add-ons must not create or expose application or system vulnerabilities. - <ul> - <li>Security bugs happen, but once discovered they need to be addressed immediately. A popular add-on with a security vulnerability is a valuable attack vector for hackers, and in such cases we will move quickly to blocklist the add-on if there is no prompt response from the developer.</li> - </ul> - </li> - <li>Add-ons must not tamper with the application or blocklist update systems.</li> - <li>Add-ons should not store any browsing data while in Private Browsing Mode. - <ul> - <li>It's worth stressing that PBM is about avoiding storing - <i> - local</i> - data while browsing, not about sending data elsewhere. To learn more about PBM we recommend reading <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">Ehsan's blog posts</a> about it.</li> - </ul> - </li> -</ul> -<h2 id="Be_Stable">Be Stable</h2> -<ul> - <li>Add-ons must not cause hangs or crashes.</li> - <li>Add-ons should not break or disable core application features. - <ul> - <li>This includes features like tabbed browsing, Private Browsing Mode, and the location bar. Add-ons that are specifically meant to do this are exempt.</li> - </ul> - </li> - <li>Add-ons should not cause memory leaks, or unnecessarily consume large amounts of memory.</li> - <li>Add-ons should not slow down the application or system significantly.</li> - <li>Add-ons should not consume network resources to an extent that affects regular application usage. - <ul> - <li>Downloading large amounts of data without user awareness can significantly disrupt regular browsing, and may result in unexpected charges for users who have network usage limitations (notably on mobile).</li> - </ul> - </li> -</ul> -<h2 id="Exceptions">Exceptions</h2> -<ul> - <li>Add-ons can break some of these guidelines if that's their intended purpose and there isn't malicious intent ( - <i> - e.g.,</i> - a security exploit proof of concept).</li> - <li>Add-ons deployed by administrators within workplaces, schools, kiosks, and so forth, are exempt from most guidelines.</li> - <li>As add-ons can only run clean up code if they are uninstalled while Firefox is running and they are enabled, we do not require that they attempt to clean up after themselves when they are uninstalled under other circumstances. Application installers that configure Firefox without add-ons should revert any changes when uninstalled.</li> - <li>Add-ons may leave behind preferences changes in private preference branches which do not affect Firefox when the add-on is not active, so that any previous add-on configuration is not lost if the user decides to re-install the add-on in the future.</li> -</ul> -<p>Other exceptions may apply.</p> -<h2 id="Enforcement">Enforcement</h2> -<p>Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word - <i> - must</i> - are especially important, and violations thereof will most likely result in a blocklisting nomination.</p> -<p>The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p> -<p>Guideline violations should be <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&component=Add-ons" rel="nofollow">reported via Bugzilla</a>, under Tech Evangelism > Add-ons. Questions can be posted in the <a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">#addons IRC channel</a>.</p> -<p>These guidelines may change in the future. All updates will be announced in the <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Add-ons Blog</a>.</p> diff --git a/files/fa/mozilla/add-ons/sdk/index.html b/files/fa/mozilla/add-ons/sdk/index.html deleted file mode 100644 index 135dca5a25..0000000000 --- a/files/fa/mozilla/add-ons/sdk/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: کیت توسعه افزونه -slug: Mozilla/Add-ons/SDK -translation_of: Archive/Add-ons/Add-on_SDK ---- -<p dir="rtl">شما می توانید افزونه های فایرفاکس را با استفاده از تکنولوژی های وب و کیت توسعه فایرفاکس بسازید: جاوااسکریپت ، HTML، و CSS. کیت توسعه شامل API های جاوااسکریپت برای توسعه افزونه و ابزارهایی برای توسعه و آزمایش و انتشار افزونه است.</p> - -<hr> -<h3 dir="rtl" id="آموزش_ها">آموزش ها</h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">شروع</a></dt> - <dd dir="rtl">چگونه <a href="/en-US/Add-ons/SDK/Tutorials/Installation">کیت توسعه را نصب کنیم</a> و از <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">ابزار cfx</a> برای توسعه ، تست و انتشار افزونه استفاده کنیم.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">ارتباط با مرورگر</a></dt> - <dd dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">باز کردن صفحات</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">بارگزاری صفحات</a>, و<a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs"> لیست صفحات باز</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">تکنیک های توسعه</a></dt> - <dd dir="rtl">یاد گرفتن تکنیک های توسعه معمولی , مانند <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">یونیت تست</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logging</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">ایجاد ماژوله های قابل استفاده مجدد</a>, محلی کردن, and <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">توسعه برای موبایل</a>.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">ایجاد اجزای رابط کاربری</a></dt> - <dd dir="rtl">ساخت اجزای رابط کاربری مانند <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">دکمه های تولبار</a>, منوهای بازشونده, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">منوها</a>, و <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">دیالوگ ها</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">ویرایش صفحات</a></dt> - <dd dir="rtl">ویرایش صفحات <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">مطابق یک الگوی آدرس</a> یا به صورت پویا <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">یک تب را ویرایش کنیم</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">قرار دادن همه چیز کنار هم</a></dt> - <dd dir="rtl">مشاهده افزونه ها نمونه .</dd> -</dl> -</div> -</div> - -<hr> -<h3 dir="rtl" id="راهنما_ها">راهنما ها</h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">راهنمای نویسندگان</a></dt> - <dd dir="rtl">یاد گرفتن چگونگی <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">شرکت کردن در توسعه کیت توسعه</a>, و یاد گرفتن مهمترین اصطلاحات کیت توسعه , مانند <a href="/en-US/Add-ons/SDK/Guides/Modules">ماژول</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">کلاس ها و وراثت</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">تنظیمات خصوصی</a>, و <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">فرایند های محتوا</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">زیر ساخت های کیت توسعه</a></dt> - <dd dir="rtl">جنبه های تکنولوژی زیر بنایی کیت توسعه: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">ماژول ها </a>, <a href="/en-US/Add-ons/SDK/Guides/Program_ID">شماره برنامه </a>, و تعریف قوانین <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">سازگاری فایرفاکس</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">اسکریپت های محتوا</a></dt> - <dd dir="rtl">یک راهنمای دقیق برای کار با اسکریپت های محتوا.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">اصطلاحات کیت توسعه</a></dt> - <dd dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">چارچوب رویداد های</a> کیت توسعه ، <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">تمایز بین اسکریپت های محتوا و اسکریپت های افزونه ها</a>.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL مهاجرت</a></dt> - <dd dir="rtl">یک راهنما یرای <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">انتقال افزونه های XUL به کیت توسعه</a>. این راهنما شامل <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">مقایسه دو مجموعه ابزار</a> و<a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector"> نمونه های کاری</a> انتقال افزونه های XUL.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">فایرفاکس چند پروسه ای و کیت توسعه</a></dt> - <dd dir="rtl">چگونگی چک کردن سازگاری افزونه شما با فایرفاکس چند پروسه ای و درست کردن ان در صورت نبودن</dd> -</dl> -</div> -</div> - -<hr> -<h3 dir="rtl" id="ارجاع">ارجاع</h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/High-Level_APIs">رابط های برنامه کاربردی سطح بالا</a></dt> - <dd dir="rtl">مستندات مرجع برای رابط های برنامه کاربردی کیت توسعه سطح بالا.</dd> - <dt dir="rtl"><a href="/en-US/Add-ons/SDK/Tools">ابزراهای مرجع</a></dt> - <dd dir="rtl">مستندات ارجاع برای <a href="/en-US/Add-ons/SDK/Tools/cfx">ابزار cfx</a> برای توسعه , تست, و انتشار افزونه, استفاده های کلی از ابزار <a href="/en-US/Add-ons/SDK/Tools/console">کنسول </a>برای Logging, و فایل <a href="/en-US/Add-ons/SDK/Tools/package_json">pachage,json</a>.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">رابط های برنامه کاربردی سطح پایین</a></dt> - <dd>مستندات مرجع برای رابط های برنامه کاربری کیت توسعه سطح پایین.</dd> -</dl> -</div> -</div> diff --git a/files/fa/mozilla/add-ons/themes/background/index.html b/files/fa/mozilla/add-ons/themes/background/index.html deleted file mode 100644 index 3ad47ca2be..0000000000 --- a/files/fa/mozilla/add-ons/themes/background/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Background Themes -slug: Mozilla/Add-ons/Themes/Background -translation_of: Mozilla/Add-ons/Themes/Lightweight_themes ---- -<p>{{AddonSidebar}}</p> - -<h2 id="How_to_Create_Your_Own_Background_Theme">How to Create Your Own Background Theme</h2> - -<div class="primary auto" id="getting-started"> -<p>Themes are made up of a "header" graphic image file, which skins the default Firefox UI background.</p> - -<p>Finished Your Design? You can <a href="https://addons.mozilla.org/developers/theme/submit">submit it right now!</a></p> - -<h3 id="Creating_a_Theme_Header_Image">Creating a Theme Header Image</h3> - -<p>The header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. It will be <strong>anchored to the top-right corner</strong> of the browser window.</p> - -<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p> - -<ul> - <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">View a sample Theme Header here.</a></li> -</ul> - -<h4 id="Image_Requirements">Image Requirements</h4> - -<ul> - <li>Dimensions should be <strong>3000px wide × 200px high</strong></li> - <li>PNG or JPG file format</li> - <li>Image must be no larger than 300 KB in file size</li> -</ul> - -<h4 id="Tips">Tips</h4> - -<ul> - <li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li> - <li>Firefox may reveal more of the lower portion of the image if another toolbar or other UI element is added to the top of the window.</li> - <li>The upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.</li> -</ul> - -<h4 id="Online_Image_Editor_Resources">Online Image Editor Resources</h4> - -<ul> - <li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offers professional and easy-to-use tools for creating and editing images within a browser.</li> - <li><a href="http://www.photoshop.com">Photoshop</a> — Tweak, rotate and touch up photos with Photoshop® Express, a free online photo editor.</li> -</ul> - -<h3 id="Creating_a_Theme_Footer_Image">Creating a Theme Footer Image</h3> - -<p>In older versions of Firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. It will be anchored to the bottom-left corner of the browser window. Footer images are optional.</p> - -<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p> - -<ul> - <li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">View a sample Theme Footer here.</a></li> -</ul> - -<h4 id="Image_Requirements_2">Image Requirements</h4> - -<ul> - <li>Dimensions should be <strong>3000px wide × 100px high</strong></li> - <li>PNG or JPG file format</li> - <li>Image must be no larger than 300 KB in file size</li> -</ul> - -<h4 id="Tips_2">Tips</h4> - -<ul> - <li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li> - <li>Firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window.</li> - <li>The left-hand side of the image should have the most importan information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.</li> -</ul> - -<h3 id="Submitting_your_Theme_Images">Submitting your Theme Images</h3> - -<p>To get started submitting your images, go to the Theme Submission page:</p> - -<ol class="itemized"> - <li><strong>Name your theme</strong> — pick a unique name for your theme. Duplicate names are not allowed, so you may need to try a few times to find a unique name.</li> - <li><strong>Pick a category and tags</strong> — select a category and enter some tags that best describe your theme. Keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme.</li> - <li><strong>Describe your theme</strong> — write a short description of your theme. Keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme.</li> - <li><strong>Select a license for your theme</strong> — decide on a copyright license for your work. <a href="http://creativecommons.org/licenses/">Read more about the types of Creative Common licenses.</a> - <ul> - <li><strong>Important:</strong> Please be sure you have the rights to use the image in your theme!</li> - </ul> - </li> - <li><strong>Upload your images</strong> — make sure they are under 300 KB in size and JPG or PNG format!</li> - <li><strong>Select text and tab colors</strong> — you can choose the tab ("background") color and foreground text color that work best with your header image.</li> - <li><strong>Preview your theme</strong> — you're ready to preview your theme! Simply mouse over the image above the Submit Theme button, and see how it looks instantly.</li> - <li><strong>Submit your theme</strong> — if everything looks right, click the Submit Theme button and you're done! You can see all the themes you've authored on your profile page. - <ul> - <li><strong>Tip:</strong> to ensure that your theme is approved for the gallery, be sure it complies with the content guidelines and terms of service!</li> - </ul> - </li> -</ol> - -<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p> - -<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p> - -<h2 class="call-to-submit" id="More_Tutorials">More Tutorials</h2> - -<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes Focal Point on Sizing</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.</p> -</div> diff --git a/files/fa/mozilla/add-ons/themes/index.html b/files/fa/mozilla/add-ons/themes/index.html deleted file mode 100644 index 86dd860fa7..0000000000 --- a/files/fa/mozilla/add-ons/themes/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Themes -slug: Mozilla/Add-ons/Themes -tags: - - Add-ons - - Look & Feel - - NeedsTranslation - - Themes - - TopicStub -translation_of: Mozilla/Add-ons/Themes ---- -{{AddonSidebar}} - -<div class="warning"> -<p>The Theme documentation here is out of date.</p> -</div> - -<p>Themes are skins for different Mozilla applications. They allow you to change the look and feel of the user interface and personalize it to your tastes. A theme can simply change the colors of the UI or it can change every piece of its appearance.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> - -<dl> - <dt><a href="/en-US/docs/Building_a_Theme" title="Building a Theme">Building a Theme</a></dt> - <dd>A tutorial for building a simple theme in Firefox.</dd> - <dt><a href="/en-US/docs/Themes/Common_Firefox_Theme_Issues_and_Solutions" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">Common Theme Issues and Their Solutions</a></dt> - <dd>Common issues seen when AMO editors review themes and how to fix them.</dd> - <dt><a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt> - <dd>Building lightweight themes for Firefox</dd> - <dt><a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x" title="Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2</a></dt> - <dd>An introduction to creating new themes for SeaMonkey 2.</dd> - <dt><a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" title="Making_Sure_Your_Theme_Works_with_RTL_Locales">Making Sure Your Theme Works with RTL Locales</a></dt> - <dd>How to make sure your theme will look right with Hebrew, Arabic, Persian and Urdu locales.</dd> - <dt><a href="/en-US/docs/Theme_Packaging" title="Theme_Packaging">Theme Packaging</a></dt> - <dd>How to package themes for Firefox and Thunderbird.</dd> - <dt><a href="http://www.tudobom.de/articles/yatt/" title="http://www.tudobom.de/articles/yatt/">Yet Another Theme Tutorial</a></dt> - <dd>Another tutorial in Mozilla theme construction.</dd> - <dt><a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Obsolete docs</a></dt> - <dd>These docs are very old and will never be updated, but we've kept them in case the are useful source material for people updating the Theme documentation.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Getting_help">Getting help</h2> - -<ul> - <li><a href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> -</ul> - -<h2 class="Tools" id="Tools" name="Tools">Tools</h2> - -<ul> - <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/inspectorwidget/">InspectorWidget</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-us/firefox/addon/force-rtl/">Force RTL</a>: Test for RTL compatibility</li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/fa/mozilla/add-ons/themes/theme_concepts/index.html b/files/fa/mozilla/add-ons/themes/theme_concepts/index.html deleted file mode 100644 index dda28c91fe..0000000000 --- a/files/fa/mozilla/add-ons/themes/theme_concepts/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Theme concepts -slug: Mozilla/Add-ons/Themes/Theme_concepts -translation_of: Mozilla/Add-ons/Themes/Theme_concepts ---- -<div>{{AddonSidebar()}}</div> - -<p>Themes developed using the <a href="/en-US/Add-ons/WebExtensions">WebExtensions API</a> in Firefox enable you to change the look of the browser by adding images to the header area of the Firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.</p> - -<p>These theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a browser extension.</p> - -<div class="note"> -<p>If you have a lightweight theme it will be converted to this new theme format automatically before lightweight themes are deprecated. You do not need to port your th eme. However, please feel free to update your themes to use any of the new features described here.</p> -</div> - -<h2 id="Static_themes">Static themes</h2> - -<p>Static themes are specified using the same resources as a browser extension: a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder. These resources are then packed in a zip for publication on <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO) or for self-distribution. For more information on self-distribution, visit <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a>.</p> - -<p>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">theme generator</a> on AMO to create a static theme. Additionally, <a href="https://color.firefox.com">Firefox Color</a> can be used to preview customizations to the browser's theme with options to share and export a theme.</p> - -<div class="note"> -<p>A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See <a href="#Dynamic_themes">Dynamic themes</a>.</p> -</div> - -<h3 id="Defining_a_theme">Defining a theme</h3> - -<p>To create a theme (in this example a simple, single image theme):</p> - -<ul> - <li>Create a folder in a suitable location on your computer.</li> - <li>Add the theme image file to the folder: - <pre><mytheme> - <your_header_image>.<type></pre> - </li> - <li>Create a file called manifest.json in the folder and edit its content as follows: - <pre class="brush: json">{ - "manifest_version": 2, - "version": "1.0", - "name": "<your_theme_name>", - "theme": { - "images": { - "theme_frame": "<your_header_image>.<type>" - }, - "colors": { - "frame": "#FFFFFF", - "tab_background_text": "#000" - } - } -} -</pre> - Where: - - <ul> - <li><code>"frame":</code> is the heading area background color for your theme.</li> - <li><code>"</code><code>tab_background_text</code><code>":</code> the color of the text in the heading area.</li> - </ul> - </li> - <li>Package your theme and submit it to AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">following these instructions</a>. Themes can be submitted to AMO for hosting or for self-distribution.</li> -</ul> - -<h3 id="Static_theme_approaches">Static theme approaches</h3> - -<p>There are two approaches you can take to theming the header area of Firefox: using a single image or using multiple images. You could combine the two, but it’s easier to treat them separately.</p> - -<h4 id="Single_image_themes">Single image themes</h4> - -<p>This is the basic or minimal theming option, where you define:</p> - -<ul> - <li>a single image, which is anchored to the top right of the header area.</li> - <li>A color for the text in the header.</li> -</ul> - -<p>The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. For example, we could use this image<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br> - combined with a complementary background color, to create this effect in the header<br> - <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p> - -<p>See details about this theme in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p> - -<p>Obviously, you can still provide a single wide image if you prefer.</p> - -<h4 id="Multiple_image_themes">Multiple image themes</h4> - -<p>As an alternative to creating a single image theme, you have the option to use multiple images. These images can be individually anchored to locations within the header, with the option to apply tiling to each image.</p> - -<p>Depending on the effect you want to create you may need to suppress the mandatory <code>"</code><code>theme_frame</code><code>":</code> image with an empty or transparent image. You would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br> - to create this effect<br> - <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br> - Here you specify the weta image like this:</p> - -<pre class="brush: json" dir="ltr">"images": { - "theme_frame": "empty.png", - "additional_backgrounds": [ "weta_for_tiling.png"] -},</pre> - -<p dir="ltr">and the images tiling with:</p> - -<pre class="brush: json" dir="ltr">"properties": { - "additional_backgrounds_alignment": [ "top" ], - "additional_backgrounds_tiling": [ "repeat" ] -},</pre> - -<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. Full detais of the alignment and tiling options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> - -<p>Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header<br> - <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br> - to create this effect<br> - <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p> - -<p>Where the images are specified with:</p> - -<pre class="brush: json" dir="ltr">"images": { - "theme_frame": "empty.png", - "additional_backgrounds": [ "weta.png", "weta-left.png"] -},</pre> - -<p dir="ltr">and their alignment by:</p> - -<pre class="brush: json" dir="ltr">"properties": { - "additional_backgrounds_alignment": [ "right top" , "left top" ] -},</pre> - -<p>Full details of how to setup this theme can be found in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. Full details of the alignment options can be found in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p> - -<h3 id="Static_animated_themes">Static animated themes</h3> - -<p>It is possible to create an animated theme using an APNG format image, as in the <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">themes</a> example <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.</p> - -<p dir="ltr">You can also animate themes programmatically, which we discuss in <a href="#Dynamic_themes">Dynamic themes</a>.</p> - -<h3 dir="ltr" id="Updating_static_themes">Updating static themes</h3> - -<p dir="ltr">If your static theme is hosted on AMO, you can upload a new version using the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub </a>with the following steps:</p> - -<ol dir="ltr"> - <li>Visit the product page for your theme through the <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li> - <li>Select "Upload New Version" on the left</li> - <li>Upload your packaged file for validation or modify it using the theme generator</li> -</ol> - -<p>For self-hosted static themes, a new version can be updated through AMO by following the above steps or be handled by you through an updateURL or external application updates. A new version will need to be signed through the Developer Hub.</p> - -<div class="note"> -<p> If you are uploading a packaged file, the version number must be higher than the current version number</p> -</div> - -<h2 id="Dynamic_themes">Dynamic themes</h2> - -<p>As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:</p> - -<ul> - <li>To bundle a theme with a browser extension, as an added extra.</li> - <li>Create a dynamic theme that changes under programmatic control.</li> -</ul> - -<p>And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.</p> - -<p>Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme"<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> permission</a> in the extension's<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.</p> - -<p>For example, the following code, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> defines the content for the day and night elements of the dynamic theme:</p> - -<pre class="brush: js" dir="ltr">const themes = { - 'day': { - images: { - theme_frame: 'sun.jpg', - }, - colors: { - frame: '#CF723F', - tab_background_text: '#111', - } - }, - 'night': { - images: { - theme_frame: 'moon.jpg', - }, - colors: { - frame: '#000', - tab_background_text: '#fff', - } - } -};</pre> - -<p>The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:</p> - -<pre class="brush: js" dir="ltr">function setTheme(theme) { - if (currentTheme === theme) { - // No point in changing the theme if it has already been set. - return; - } - currentTheme = theme; - browser.theme.update(themes[theme]); -}</pre> - -<p dir="ltr">Learn more about dynamic themes and see an additional example in the following video:</p> - -<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p> - -<p dir="ltr"></p> - -<p dir="ltr">If you have not built a browser extension before, check out <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> for a step-by-step guide.</p> - -<h2 id="Cross-browser_compatibility">Cross-browser compatibility</h2> - -<p>There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.</p> - -<p>There is good compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. However, noting that<code> "frame":</code> and <code>"tab_background_text":</code> only support RGB color array definition on Chrome.</p> - -<p>So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:</p> - -<pre class="brush: json" dir="ltr">{ - "manifest_version": 2, - "version": "1.0", - "name": "<your_theme_name>", - "theme": { - "images": { - "theme_frame": "weta.png" - }, - "colors": { - "frame": [ 173 , 176 , 159 ], - "tab_background_text": [ 0 , 0 , 0 ] - } - } -}</pre> - -<p>Also, note that Chrome tiles the <code>“theme_frame”:</code> image from the left of the header area.</p> - -<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p> - -<p>For more information, see the notes on <a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p> |