From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../mozilla/add-ons/add-on_guidelines/index.html | 116 ++++++ files/ar/mozilla/add-ons/amo/index.html | 15 + files/ar/mozilla/add-ons/amo/policy/index.html | 21 + files/ar/mozilla/add-ons/index.html | 92 +++++ files/ar/mozilla/add-ons/themes/index.html | 51 +++ .../webextensions/api/browsingdata/index.html | 122 ++++++ .../webextensions/api/contentscripts/index.html | 38 ++ .../mozilla/add-ons/webextensions/api/index.html | 53 +++ files/ar/mozilla/add-ons/webextensions/index.html | 131 ++++++ .../manifest.json/content_scripts/index.html | 223 ++++++++++ .../add-ons/webextensions/manifest.json/index.html | 109 +++++ .../webextensions/match_patterns/index.html | 449 +++++++++++++++++++++ .../index.html" | 56 +++ files/ar/mozilla/connect/index.html | 96 +++++ .../adding_apis_to_the_navigator_object/index.html | 49 +++ files/ar/mozilla/developer_guide/index.html | 107 +++++ .../mozilla/developer_guide/source_code/index.html | 48 +++ files/ar/mozilla/firefox/index.html | 72 ++++ files/ar/mozilla/firefox/releases/index.html | 26 ++ files/ar/mozilla/firefox_for_android/index.html | 45 +++ files/ar/mozilla/gecko/index.html | 58 +++ files/ar/mozilla/index.html | 13 + files/ar/mozilla/localization/index.html | 29 ++ .../localization/localizing_xliff_files/index.html | 60 +++ .../index.html | 437 ++++++++++++++++++++ .../localization/web_localizability/index.html | 19 + .../index.html" | 135 +++++++ files/ar/mozilla/mobile/index.html | 32 ++ .../ar/mozilla/mobile/viewport_meta_tag/index.html | 91 +++++ files/ar/mozilla/preferences/index.html | 45 +++ files/ar/mozilla/projects/index.html | 15 + files/ar/mozilla/projects/spidermonkey/index.html | 115 ++++++ .../index.html | 373 +++++++++++++++++ files/ar/mozilla/tech/index.html | 14 + 34 files changed, 3355 insertions(+) create mode 100644 files/ar/mozilla/add-ons/add-on_guidelines/index.html create mode 100644 files/ar/mozilla/add-ons/amo/index.html create mode 100644 files/ar/mozilla/add-ons/amo/policy/index.html create mode 100644 files/ar/mozilla/add-ons/index.html create mode 100644 files/ar/mozilla/add-ons/themes/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/ar/mozilla/add-ons/webextensions/match_patterns/index.html create mode 100644 "files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" create mode 100644 files/ar/mozilla/connect/index.html create mode 100644 files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html create mode 100644 files/ar/mozilla/developer_guide/index.html create mode 100644 files/ar/mozilla/developer_guide/source_code/index.html create mode 100644 files/ar/mozilla/firefox/index.html create mode 100644 files/ar/mozilla/firefox/releases/index.html create mode 100644 files/ar/mozilla/firefox_for_android/index.html create mode 100644 files/ar/mozilla/gecko/index.html create mode 100644 files/ar/mozilla/index.html create mode 100644 files/ar/mozilla/localization/index.html create mode 100644 files/ar/mozilla/localization/localizing_xliff_files/index.html create mode 100644 files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html create mode 100644 files/ar/mozilla/localization/web_localizability/index.html create mode 100644 "files/ar/mozilla/localization/\330\247\331\204\330\252\330\261\330\254\331\205\330\251_\331\205\330\271_\330\250\331\210\331\206\330\252\331\210\331\210\331\206/index.html" create mode 100644 files/ar/mozilla/mobile/index.html create mode 100644 files/ar/mozilla/mobile/viewport_meta_tag/index.html create mode 100644 files/ar/mozilla/preferences/index.html create mode 100644 files/ar/mozilla/projects/index.html create mode 100644 files/ar/mozilla/projects/spidermonkey/index.html create mode 100644 files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html create mode 100644 files/ar/mozilla/tech/index.html (limited to 'files/ar/mozilla') diff --git a/files/ar/mozilla/add-ons/add-on_guidelines/index.html b/files/ar/mozilla/add-ons/add-on_guidelines/index.html new file mode 100644 index 0000000000..a2ceecab7b --- /dev/null +++ b/files/ar/mozilla/add-ons/add-on_guidelines/index.html @@ -0,0 +1,116 @@ +--- +title: Add-on guidelines +slug: Mozilla/Add-ons/Add-on_guidelines +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +

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 AMO are subject to additional policies.

+

Be Transparent

+ +

Be Respectful to Users

+ +

Be Safe

+ +

Be Stable

+ +

Exceptions

+ +

Other exceptions may apply.

+

Enforcement

+

Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word + + must + are especially important, and violations thereof will most likely result in a blocklisting nomination.

+

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.

+

Guideline violations should be reported via Bugzilla, under Tech Evangelism > Add-ons. Questions can be posted in the #addons IRC channel.

+

These guidelines may change in the future. All updates will be announced in the Add-ons Blog.

diff --git a/files/ar/mozilla/add-ons/amo/index.html b/files/ar/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..e1684b2100 --- /dev/null +++ b/files/ar/mozilla/add-ons/amo/index.html @@ -0,0 +1,15 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +

Pages documenting addons.mozilla.org:

+ +

{{Listsubpages("/en-US/Add-ons/AMO", 10)}}

+ +

 

+ +

 

diff --git a/files/ar/mozilla/add-ons/amo/policy/index.html b/files/ar/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..669d7f8f2d --- /dev/null +++ b/files/ar/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +

{{AddonSidebar}}

+ +

Mozilla is committed to ensuring an excellent experience for both our users and developers of add-ons. Please review the policies below before submitting your add-on.

+ +
+
Developer Agreement
+
Effective January 5, 2016
Review Process
+
Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.
Featured Add-ons
+
How up-and-coming add-ons become featured and what's involved in the process.
Contacting us + +

How to get in touch with us regarding these policies or your add-on.

+ +
diff --git a/files/ar/mozilla/add-ons/index.html b/files/ar/mozilla/add-ons/index.html new file mode 100644 index 0000000000..3e0a66abdb --- /dev/null +++ b/files/ar/mozilla/add-ons/index.html @@ -0,0 +1,92 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +tags: + - Add-ons + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons +--- +
تعديل وتوسيع تطبيقات موزيلا
+ +

تضيف الإضافات وظائف جديدة إلى تطبيقات Gecko- based مثل Firefox و SeaMonkey و Thunderbird. هناك نوعان رئيسيان من الوظائف الإضافية: الإضافات تضيف ميزات جديدة إلى التطبيق ، بينما تقوم السمات بتعديل واجهة المستخدم الخاصة بالتطبيق.

+ +

بالنسبة إلى كل من الإضافات والمظاهر ، تشغل Mozilla مستودعًا في addons.mozilla.org ، والمعروف أيضًا باسم AMO. عند إرسال إضافات إلى AMO يتم مراجعتها ، وبعد اجتياز المراجعة يتم إتاحتها للمستخدمين. لا يتعين عليك تقديم إضافات إلى AMO ، ولكن إذا قمت بذلك ، يمكن للمستخدمين الوثوق في حقيقة أنهم قد تمت مراجعتهم ، ويمكنك الاستفادة من رؤية AMO كمصدر للوظائف الإضافية المفيدة.

+ +

يمكن أن تؤثر الإضافات بشكل كبير على سلوك التطبيق الذي يستضيفها. لقد طورنا مجموعة من الإرشادات للمساعدة في ضمان تقديم تجربة جيدة للمستخدمين. تنطبق هذه الإرشادات على جميع أنواع الإضافات ، سواء تم استضافتها على addons.mozilla.org أم لا.

+ +
+

ملحقات

+ +

تضيف الإضافات وظائف جديدة إلى تطبيقات Mozilla مثل Firefox و Thunderbird. يمكنهم إضافة ميزات جديدة إلى المتصفح ، مثل طريقة مختلفة لإدارة علامات التبويب ، ويمكنهم تعديل محتوى الويب لتحسين إمكانية الاستخدام أو الأمان لمواقع ويب معينة.

+ +

هناك ثلاثة أساليب مختلفة يمكنك استخدامها لإنشاء إضافات: الإضافات المستندة إلى SDK الإضافي ، وإضافات غير قابلة لإعادة التشغيل يدويًا ، وإضافات التراكب.

+ + + +

إذا استطعت ، فمن المستحسن استخدام أداة إضافة SDK الإضافية ، التي تستخدم آلية الإضافة دون إعادة التشغيل ، ولكن تبسط بعض المهام وتنظفها بعد نفسها. إذا لم تكن حزمة إضافة SDK كافية لاحتياجاتك ، فقم بتطبيق ملحق إعادة التشغيل يدويًا بدلاً من ذلك.

+ +

لمزيد من المعلومات حول اختيار التقنية المستخدمة ، اقرأ هذه المقارنة .

+ +
+
+

الممارسات الجيدة

+ +

بغض النظر عن كيفية تطوير إضافة ، هناك بعض الإرشادات التي يمكنك اتباعها للمساعدة في التأكد من أن الإضافة توفر تجربة مستخدم جيدة قدر الإمكان.

+ +
+
Performance
+
Ensuring your extension is fast, responsive and memory-efficient.
+
Security
+
Ensuring your extension doesn't expose the user to malicious websites.
+
Etiquette
+
Ensuring your extension plays nicely with other extensions.
+
+
+ +
+

Application-specific

+ +

Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.

+ +
+
Thunderbird
+
Developing extensions for the Thunderbird mail client.
+
Firefox for Android
+
Developing extensions for Firefox for Android.
+
SeaMonkey
+
Developing extensions for the SeaMonkey software suite.
+
+
+
+ +
+

Themes

+ +

Themes are add-ons that customize the application's user interface. There are two sorts of themes: lightweight themes and complete themes.

+ +
+
+

Lightweight themes are much simpler to implement than complete themes, but provide very limited customization.

+
+ +
+

With complete themes you can make much deeper modifications to the application UI. The documentation for complete themes is out of date, but is linked to here as a possible basis for updated documentation.

+
+
+ +
+

Other types of add-ons

+ +

Search engine plugins are a simple and very specific type of add-on: they add new search engines to the browser's search bar.

+ +

Plugins help the application understand web content that it does not natively support. NPAPI plugins are a legacy technology and new sites should not use them. In general, plugins are not available on most modern mobile systems including, and websites should transition away from using plugins.

+ +

{{AddonSidebar}}

diff --git a/files/ar/mozilla/add-ons/themes/index.html b/files/ar/mozilla/add-ons/themes/index.html new file mode 100644 index 0000000000..37dd0c7514 --- /dev/null +++ b/files/ar/mozilla/add-ons/themes/index.html @@ -0,0 +1,51 @@ +--- +title: Themes +slug: Mozilla/Add-ons/Themes +tags: + - Add-ons + - Look & Feel + - NeedsTranslation + - Themes + - TopicStub +translation_of: Mozilla/Add-ons/Themes +--- +

{{AddonSidebar}}

+ +

Themes allow you to change the look and feel of the user interface and personalize it to your tastes. Learn how to create and share themes!

+ +
+
+

Browser Themes

+ +
+
Browser theme concepts
+
Get an introduction to creating themes for the latest versions of Firefox
+
+ +

Lightweight Themes

+ +
+
Lightweight themes
+
Building lightweight themes for Firefox
+
Lightweight themes FAQ
+
Get answers to commonly asked questions
+
+
+ +
+

Tools & Resources

+ + +
+
+ +

 

+ +

 

diff --git a/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html new file mode 100644 index 0000000000..2ef0a4433f --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/browsingdata/index.html @@ -0,0 +1,122 @@ +--- +title: browsingData +slug: Mozilla/Add-ons/WebExtensions/API/browsingData +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData +--- +

+ +

{{AddonSidebar}}

+ +

Enables extensions to clear the data that is accumulated while the user is browsing.

+ +

In the browsingData API, browsing data is divided into types:

+ + + +

You can use the {{WebExtAPIRef("browsingData.remove()")}} function to remove any combination of these types. There are also dedicated functions to remove each particular type of data, such as {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} and so on.

+ +

All the browsingData.remove[X]() functions take a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, which you can use to control two further aspects of data removal:

+ + + +

Finally, this API gives you a {{WebExtAPIRef("browsingData.settings()")}} function that gives you the current value of the settings for the browser's built-in "Clear History" feature.

+ +

To use this API you must have the "browsingData" API permission.

+ +

Types

+ +
+
{{WebExtAPIRef("browsingData.DataTypeSet")}}
+
Object used to specify the type of data to remove: for example, history, downloads, passwords, and so on.
+
{{WebExtAPIRef("browsingData.RemovalOptions")}}
+
Object used to specify how far back in time to remove data, and whether to remove data added through normal web browsing, by hosted apps, or by add-ons.
+
+ +

Methods

+ +
+
{{WebExtAPIRef("browsingData.remove()")}}
+
Removes browsing data for the data types specified.
+
{{WebExtAPIRef("browsingData.removeCache()")}}
+
Clears the browser's cache.
+
{{WebExtAPIRef("browsingData.removeCookies()")}}
+
Removes cookies.
+
{{WebExtAPIRef("browsingData.removeDownloads()")}}
+
Removes the list of downloaded files.
+
{{WebExtAPIRef("browsingData.removeFormData()")}}
+
Clears saved form data.
+
{{WebExtAPIRef("browsingData.removeHistory()")}}
+
Clears the browser's history.
+
{{WebExtAPIRef("browsingData.removeLocalStorage()")}}
+
Clears any local storage created by websites.
+
{{WebExtAPIRef("browsingData.removePasswords()")}}
+
Clears saved passwords.
+
{{WebExtAPIRef("browsingData.removePluginData()")}}
+
Clears data associated with plugins.
+
{{WebExtAPIRef("browsingData.settings()")}}
+
Gets the current value of settings in the browser's "Clear History" feature.
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.browsingData", 2)}}

+ + + +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.browsingData API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html new file mode 100644 index 0000000000..16f7fa2fdf --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -0,0 +1,38 @@ +--- +title: contentScripts +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts +--- +
{{AddonSidebar}}
+ +

Use this API to register content scripts. Registering a content script instructs the browser to insert the given content scripts into pages that match the given URL patterns.

+ +

This API is very similar to the "content_scripts" manifest.json key, except that with  "content_scripts" , the set of content scripts and associated patterns is fixed at install time. With the contentScripts API, an extension can register and unregister scripts at runtime.

+ +

To use the API, call {{WebExtAPIRef("contentScripts.register()")}} passing in an object defining the scripts to register, the URL patterns, and other options. This returns a Promise that is resolved with a {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} object.

+ +

The RegisteredContentScript object represents the scripts that were registered in the register() call. It defines an unregister() method that you can use to unregister the content scripts. Content scripts are also unregistered automatically when the page that created them is destroyed. For example, if they are registered from the background page they will be unregistered automatically when the background page is destroyed, and if they are registered from a sidebar or a popup, they will be unregistered automatically when the sidebar or popup is closed.

+ +

There is no contentScripts API permission, but an extension must have the appropriate host permissions for any patterns it passes to register().

+ +

Types

+ +
+
{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}
+
+

An object of this type is returned by the {{WebExtAPIRef("contentScripts.register()")}} function. It represents the content scripts that were registered by that call, and can be used to unregister the content script.

+
+
+ +

Functions

+ +
+
{{WebExtAPIRef("contentScripts.register()")}}
+
Registers the given content scripts.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.contentScripts", 10, 1)}}

+ +

 {{WebExtExamples("h2")}}

diff --git a/files/ar/mozilla/add-ons/webextensions/api/index.html b/files/ar/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..955086de10 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

JavaScript APIs for WebExtensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your extension's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

Many of the APIs are asynchronous, returning a Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox also implements these APIs under the chrome namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+
+ +
{{SubpagesWithSummaries}}
diff --git a/files/ar/mozilla/add-ons/webextensions/index.html b/files/ar/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..387f9bf8ac --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,131 @@ +--- +title: امتدادات المتصفح +slug: Mozilla/Add-ons/WebExtensions +tags: + - إضافات + - صفحة هبوط +translation_of: Mozilla/Add-ons/WebExtensions +--- +
+
{{AddonSidebar}}
+ +

تستطيع الامتدادات (extensions) أن تزيد وتُعدِل من إمكانيّة المُتصفِح. امتدادات فايرفوكس مبنيّة بواسطة الواجهة البرمجيّة المسماة WebExtensions، وهي نظام عابر للمتصفحات (cross-browser) لتطوير الإضافات. يتوافق النظام إلى حدٍ كبير مع واجهة الإضافات البرمجيّة المدعومة بواسطة متصفخ جوجل كروم وأوبرا، كما يتوافق مع مسودة W3C المجتمعيّة. الإضافات المكتوبة لتلك المتصفحات ستعمل على فايرفوكس ومايكروسوفت أيدج في معظم الحالات بتغييرات طفيفة. الواجهة البرمجيّة متوافقة أيضاً مع فايرفوكس متعدد العمليات (multiprocess firefox).

+ +

إذا كانت لديك أسئلة أو أفكار، أو تريد مساعدة في نقل إضافة قديمة وجعلها تستخدم الواجهة البرمجيّة الحديثة، يمكنك التواصل معنا عبر قائمة مطورين الإضافات البريديّة أو على قناة webextensions#.

+ +
+
+

دليل البداية

+ + + +

مفاهيم

+ + + +

واجهة المستخدم

+ + + +

مقالات "كيف تقوم بـ"

+ + + +
    +
+ +

الترحيل

+ + + +

سير العمل مع فيرفوكس

+ + +
+ +
+

مراجع

+ +

واجهات جافاسكربت البرمجيّة

+ + + +
{{ ListSubpages ("/ar/Add-ons/WebExtensions/API") }}
+ +

قيم ملف Manifest

+ + + +
{{ ListSubpages ("/ar/Add-ons/WebExtensions/manifest.json") }}
+
+
+
diff --git a/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html new file mode 100644 index 0000000000..ac1c401c35 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html @@ -0,0 +1,223 @@ +--- +title: content_scripts +slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeArray
MandatoryNo
Example + 
+"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]
+
+ +

Instructs the browser to load content scripts into web pages whose URL matches a given pattern.

+ +

This key is an array. Each item is an object which:

+ + + +

Details of all the keys you can include are given in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
all_framesBoolean +

true: inject the scripts specified in js and css into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements. The URL requirements are checked for each frame independently.

+ +

false: inject only into frames matching the URL requirements which are the topmost frame in a tab.

+ +

Defaults to false.

+
cssArray +

An array of paths, relative to manifest.json, referencing CSS files that will be injected into matching pages.

+ +

Files are injected in the order given, and before the DOM is loaded.

+
exclude_globsArrayAn array of strings containing wildcards. See Matching URL patterns below.
exclude_matchesArrayAn array of match patterns. See Matching URL patterns below.
include_globsArrayAn array of strings containing wildcards. See Matching URL patterns below.
jsArray +

An array of paths, relative to the manifest.json file, referencing JavaScript files that will be injected into matching pages.

+ +

Files are injected in the order given. This means that, for example, if you include jQuery here followed by another content script, like this:

+ + 
+"js": ["jquery.js", "my-content-script.js"]
+ +

then "my-content-script.js" can use jQuery.

+ +

Files are injected at the time specified by run_at.

+
match_about_blankBoolean +

Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc", if the URL of the page that opened or created this page matches the patterns specified in the rest of the content_scripts key.

+ +

This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the all_frames key.

+ +

For example, suppose you have a content_scripts key like this:

+ + 
+  "content_scripts": [
+    {
+      "js": ["my-script.js"],
+      "matches": ["https://example.org/"],
+      "match_about_blank": true,
+      "all_frames": true
+    }
+  ]
+ +

If the user loads https://example.org/, and this page embeds an empty iframe, then "my-script.js" will be loaded into the iframe.

+ +

match_about_blank is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at "document_start" even if you specify that value in run_at.

+
matchesArray +

An array of match patterns. See Matching URL patterns below.

+ +

This is the only mandatory key.

+
run_atString +

This option determines when the scripts specified in js are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:

+ +
    +
  • "document_start": corresponds to loading. The DOM is still loading.
    • +
  • "document_end": corresponds to interactive. The DOM has finished loading, but resources such as scripts and images may still be loading.
    • +
  • "document_idle": corresponds to complete. The document and all its resources have finished loading.
    • +
+ +

The default value is "document_idle".

+ +

In all cases, files in js are injected after files in css.

+
+ +

Matching URL patterns

+ +

The "content_scripts" key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside "content_scripts" that you can use for this specification:

+ + + +

To match one of these properties, a URL must match at least one of the items in its array. For example, given a property like:

+ +
"matches": ["*://*.example.org/*", "*://*.example.com/*"]
+ +

Both "http://example.org/" and "http://example.com/" will match.

+ +

Since matches is the only mandatory key, the other three keys are use to limit further the URLs that match. To match the key as a whole, a URL must:

+ +
    +
  1. match the matches property
    2. +
  2. AND match the include_globs property, if present
    3. +
  3. AND NOT match the exclude_matches property, if present
    4. +
  4. AND NOT match the exclude_globs property, if present
    5. +
+ +

globs

+ +

A glob is just a string that may contain wildcards. There are two types of wildcard, and you can combine them in the same glob:

+ + + +

For example: "*na?i" would match "illuminati" and "annunaki", but not "sagnarelli".

+ +

Example

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]
+ +

This injects a single content script "borderify.js" into all pages under "mozilla.org" or any of its subdomains, whether served over HTTP or HTTPS.

+ +
  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["jquery.js", "borderify.js"]
+    }
+  ]
+ +

This injects two content scripts into all pages under "mozilla.org" or any of its subdomains except "developer.mozilla.org", whether served over HTTP or HTTPS.

+ +

The content scripts see the same view of the DOM and are injected in the order they appear in the array, so "borderify.js" can see global variables added by "jquery.js".

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.manifest.content_scripts")}}

diff --git a/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..332566c368 --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,109 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +
{{AddonSidebar}}
+ +

The manifest.json file is a JSON-formatted file, and is the only file that every extension using WebExtension APIs must contain.

+ +

Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.

+ +

manifest.json keys are listed below:

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+ +
 
+ +

"manifest_version", "version", and "name" are the only mandatory keys. "default_locale" must be present if the "_locales" directory is present and must be absent otherwise. "applications" is not supported in Google Chrome, and is mandatory in Firefox before Firefox 48 and Firefox for Android.

+ +

You can access your extension's manifest from the extension's JavaScript using the {{WebExtAPIRef("runtime.getManifest()")}} function:

+ +
browser.runtime.getManifest().version;
+ +

Browser compatibility

+ +

{{Compat("webextensions.manifest")}}

+ +

Example

+ +

Quick syntax example for manifest.json:

+ +
{
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "web_accessible_resources": ["images/my-image.png"]
+}
+ +

 

diff --git a/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html b/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html new file mode 100644 index 0000000000..d5775418be --- /dev/null +++ b/files/ar/mozilla/add-ons/webextensions/match_patterns/index.html @@ -0,0 +1,449 @@ +--- +title: Match patterns +slug: Mozilla/Add-ons/WebExtensions/Match_patterns +translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns +--- +
{{AddonSidebar}}
+ +

Match patterns are a way to specify groups of URLs: a match pattern matches a specific set of URLs. They are for extensions using WebExtensions APIs in a few places, most notably to specify which documents to load content scripts into, and to specify which URLs to add webRequest listeners to.

+ +

APIs that use match patterns usually accept a list of match patterns, and will perform the appropriate action if the URL matches any of the patterns. See, for example, the content_scripts key in manifest.json.

+ +

Match pattern structure

+ +

All match patterns are specified as strings. Apart from the special "<all_urls>" pattern, match patterns consist of three parts: scheme, host, and path. The scheme and host are separated by "://".

+ +
<scheme>://<host><path>
+ +

scheme

+ +

The scheme component may take one of two forms:

+ + + + + + + + + + + + + + + + + + +
FormMatches
"*"Only "http" and "https".
One of "http", "https", "file", "ftp", "app".Only the given scheme.
+ +

host

+ +

The host component may take one of three forms:

+ + + + + + + + + + + + + + + + + + + + + + +
FormMatches
"*"Any host.
"*." followed by part of the hostname.The given host and any of its subdomains.
A complete hostname, without wildcards.Only the given host.
+ +

host is optional only if the scheme is "file".

+ +

Note that the wildcard may only appear at the start.

+ +

path

+ +

The path component must begin with a "/".

+ +

After that, it may subsequently contain any combination of the "*" wildcard and any of the characters that are allowed in URL paths. Unlike host, the path component may contain the "*" wildcard in the middle or at the end, and the "*" wildcard may appear more than once.

+ +

<all_urls>

+ +

The special value "<all_urls>" matches all URLs under any of the supported schemes: that is, "http", "https", "file", "ftp", "app".

+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PatternExample matchesExample non-matches
+

<all_urls>

+ +

Match all URLs.

+ 		+

http://example.org/

+ +

ftp://files.somewhere.org/

+ +

https://a.org/some/path/

+ 		+

resource://a/b/c/
+ (unsupported scheme)

+
+

*://*.mozilla.org/*

+ +

Match all HTTP and HTTPS URLs that are hosted at "mozilla.org" or one of its subdomains.

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ +

http://a.mozilla.org/

+ +

http://a.b.mozilla.org/

+ +

https://b.mozilla.org/path/

+ 		+

ftp://mozilla.org/
+ (unmatched scheme)

+ +

http://mozilla.com/
+ (unmatched host)

+ +

http://firefox.org/
+ (unmatched host)

+
+

*://mozilla.org/

+ +

Match all HTTP and HTTPS URLs that are hosted at exactly "mozilla.org/".

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ 		+

ftp://mozilla.org/
+ (unmatched scheme)

+ +

http://a.mozilla.org/
+ (unmatched host)

+ +

http://mozilla.org/a
+ (unmatched path)

+
+

ftp://mozilla.org/

+ +

Match only "ftp://mozilla.org/".

+ 		ftp://mozilla.org +

http://mozilla.org/
+ (unmatched scheme)

+ +

ftp://sub.mozilla.org/
+ (unmatched host)

+ +

ftp://mozilla.org/path
+ (unmatched path)

+
+

https://*/path

+ +

Match HTTPS URLs on any host, whose path is "path".

+ 		+

https://mozilla.org/path

+ +

https://a.mozilla.org/path

+ +

https://something.com/path

+ 		+

http://mozilla.org/path
+ (unmatched scheme)

+ +

https://mozilla.org/path/
+ (unmatched path)

+ +

https://mozilla.org/a
+ (unmatched path)

+ +

https://mozilla.org/
+ (unmatched path)

+
+

https://*/path/

+ +

Match HTTPS URLs on any host, whose path is "path/".

+ 		+

https://mozilla.org/path/

+ +

https://a.mozilla.org/path/

+ +

https://something.com/path/

+ 		+

http://mozilla.org/path/
+ (unmatched scheme)

+ +

https://mozilla.org/path
+ (unmatched path)

+ +

https://mozilla.org/a
+ (unmatched path)

+ +

https://mozilla.org/
+ (unmatched path)

+
+

https://mozilla.org/*

+ +

Match HTTPS URLs only at "mozilla.org", with any path.

+ 		+

https://mozilla.org/

+ +

https://mozilla.org/path

+ +

https://mozilla.org/another

+ +

https://mozilla.org/path/to/doc

+ 		+

http://mozilla.org/path
+ (unmatched scheme)

+ +

https://mozilla.com/path
+ (unmatched host)

+
+

https://mozilla.org/a/b/c/

+ +

Match only this URL.

+ 		https://mozilla.org/a/b/c/Anything else.
+

https://mozilla.org/*/b/*/

+ +

Match HTTPS URLs hosted on "mozilla.org", whose path contains a component "b" somewhere in the middle.

+ 		+

https://mozilla.org/a/b/c/

+ +

https://mozilla.org/d/b/f/

+ +

https://mozilla.org/a/b/c/d/

+ 		+

https://mozilla.org/b/*/
+ (unmatched path)

+ +

https://mozilla.org/a/b/
+ (unmatched path)

+
+

file:///blah/*

+ +

Match any FILE URL whose path begins with "blah".

+ 		+

file:///blah/

+ +

file:///blah/bleh

+ 		file:///bleh/
+ (unmatched path)
+ +

Invalid match patterns

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Invalid patternReason
resource://path/Unsupported scheme.
https://mozilla.orgNo path.
https://mozilla.*.org/"*" in host must be at the start.
https://*zilla.org/"*" in host must be the only character or be followed by ".".
http*://mozilla.org/"*" in scheme must be the only character.
file://*Empty path: this should be "file:///*".
+ +

Testing match patterns

+ +

When writing extensions, you don't generally work with match patterns directly: usually you pass a match pattern string into an API, and the API constructs a match pattern and uses it to test URLs. However, if you're trying to work out which match pattern to use, or debugging a problem with one, it can be useful to be able to create and test match patterns directly. This section explains how to do this.

+ +

Note that the code here will not work in an extension, and is only provided to help manually test match patterns using the console.

+ +

First, open the developer tool settings and check the setting marked "Enable browser chrome and add-on debugging toolboxes":

+ +

{{EmbedYouTube("JDEe2fyFpHE")}}

+ +

Next, open the "Browser Console":

+ +

{{EmbedYouTube("mfuBMje6dA4")}}

+ +

This gives you a command line that you can use to execute privileged JavaScript in Firefox.

+ +
+

Because code running in the Browser Console has system privileges, any time you use it to run code, you need to understand exactly what the code is doing. That includes the code samples in this article.

+
+ +

Now paste this code into the command line and press enter:

+ +
Cu.import("resource://gre/modules/MatchPattern.jsm");
+Cu.import("resource://gre/modules/BrowserUtils.jsm");
+ +

This does two things:

+ + + +

Now you can construct MatchPattern objects, construct URIs, and check whether the URIs match:

+ +
var match = new MatchPattern("*://mozilla.org/");
+
+var uri = BrowserUtils.makeURI("https://mozilla.org/");
+match.matches(uri); //        < true
+
+uri = BrowserUtils.makeURI("https://mozilla.org/path");
+match.matches(uri); //        < false
+ +

Converting Match Patterns to Regular Expressions

+ +

All match patterns can be represented by regular expressions. This code converts a match pattern to a regular expression:

+ +
/**
+ * Transforms a valid match pattern into a regular expression
+ * which matches all URLs included by that pattern.
+ *
+ * @param  {string}  pattern  The pattern to transform.
+ * @return {RegExp}           The pattern's equivalent as a RegExp.
+ * @throws {TypeError}        If the pattern is not a valid MatchPattern
+ */
+function matchPatternToRegExp(pattern) {
+    if (pattern === '') {
+        return (/^(?:http|https|file|ftp|app):\/\//);
+    }
+
+    const schemeSegment = '(\\*|http|https|file|ftp)';
+    const hostSegment = '(\\*|(?:\\*\\.)?(?:[^/*]+))?';
+    const pathSegment = '(.*)';
+    const matchPatternRegExp = new RegExp(
+        `^${schemeSegment}://${hostSegment}/${pathSegment}$`
+    );
+
+    let match = matchPatternRegExp.exec(pattern);
+    if (!match) {
+         throw new TypeError(`"${pattern}" is not a valid MatchPattern`);
+    }
+
+    let [, scheme, host, path] = match;
+    if (!host) {
+        throw new TypeError(`"${pattern}" does not have a valid host`);
+    }
+
+    let regex = '^';
+
+    if (scheme === '*') {
+        regex += '(http|https)';
+    } else {
+        regex += scheme;
+    }
+
+    regex += '://';
+
+    if (host && host === '*') {
+        regex += '[^/]+?';
+    } else if (host) {
+        if (host.match(/^\*\./)) {
+            regex += '[^/]*?';
+            host = host.substring(2);
+        }
+        regex += host.replace(/\./g, '\\.');
+    }
+
+    if (path) {
+        if (path === '*') {
+            regex += '(/.*)?';
+        } else if (path.charAt(0) !== '/') {
+            regex += '/';
+            regex += path.replace(/\./g, '\\.').replace(/\*/g, '.*?');
+            regex += '/?';
+        }
+    }
+
+    regex += '$';
+    return new RegExp(regex);
+}
+
diff --git "a/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" "b/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" new file mode 100644 index 0000000000..b407fc48a7 --- /dev/null +++ "b/files/ar/mozilla/add-ons/webextensions/\331\205\330\247_\331\207\331\212_\330\247\331\205\330\252\330\257\330\247\330\257\330\247\330\252_\330\247\331\204\331\210\331\212\330\250/index.html" @@ -0,0 +1,56 @@ +--- +title: ما هي الامتدادات؟ +slug: Mozilla/Add-ons/WebExtensions/ما_هي_امتدادات_الويب +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript. It can take advantage of the same web APIs as JavaScript on a web page, but an extension also has access to its own set of JavaScript APIs. This means that you can do a lot more in an extension than you can with code in a web page. Here are just a few examples of the things you can do:

+ +

Enhance or complement a website: Use an add-on to deliver additional in-browser features or information from your website. Allow users to collect details from pages they visit to enhance the service you offer.

+ +

+ +

Examples: Amazon Assistant for Firefox, OneNote Web Clipper, and Grammarly for Firefox

+ +

Let users show their personality: Browser extensions can manipulate the content of web pages; for example, letting users add their favorite logo or picture as a background to every page they visit. Extensions may also enable users to update the look of the Firefox UI, the same way standalone theme add-ons do.

+ +

+ +

Examples: MyWeb New Tab, Tabliss, and VivaldiFox

+ +

Add or remove content from web pages: You might want to help users block intrusive ads from web pages, provide access to a travel guide whenever a country or city is mentioned in a web page, or reformat page content to offer a consistent reading experience. With the ability to access and update both a page’s HTML and CSS, extensions can help users see the web the way they want to.

+ +

+ +

Examples: uBlock Origin, Reader, and Toolbox for Google Play Store™

+ +

Add tools and new browsing features: Add new features to a taskboard, or generate QR code images from URLs, hyperlinks, or page text. With flexible UI options and the power of the WebExtensions APIs you can easily add new features to a browser. And, you can enhance almost any website’s features or functionality, it doesn't have to be your website.

+ +

+ +

Examples: Swimlanes for Trello and Tomato Clock

+ +

Games: Offer traditional computer games with off-line play features, or explore new game possibilities; for example, by incorporating gameplay into everyday browsing.

+ +

 

+ +

Examples: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

+ +

Add development tools: You may provide web development tools as your business or have developed a useful technique or approach to web development that you want to share. Either way, you can enhance the built-in Firefox developer tools by adding a new tab to the developer toolbar.

+ +

+ +

Examples: Web Developer, Web React Developer Tools, and aXe Developer Tools

+ +

Extensions for Firefox are built using the WebExtensions APIs, a cross-browser system for developing extensions. To a large extent, the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.

+ +

If you have ideas or questions, or need help migrating a legacy add-on to WebExtensions APIs, you can reach us on the dev-addons mailing list or in #addons on IRC.

+ +

What's next?

+ + diff --git a/files/ar/mozilla/connect/index.html b/files/ar/mozilla/connect/index.html new file mode 100644 index 0000000000..d3b00b5d26 --- /dev/null +++ b/files/ar/mozilla/connect/index.html @@ -0,0 +1,96 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +
+

0Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.

+
+ + +
+
+
+
+

Hacks blog

+ +

A key resource for people developing for the Open Web, the Mozilla Hacks blog offers news and discussion of the latest in Web technologies and browser features.

+ +
Read it now
+
+
+ +
+
+

Help Q&A

+ +

Discuss the Web and Web apps on Stack Overflow, where you can exchange ideas with other Web developers.
+ {{anch("Developer discussions", "Search the Q&A below")}}

+ +
Mozilla Q&A on Stack Overflow
+
+
+ +
+
+

Join MDN

+ +

Sign up for MDN! You will able to edit the documentation here, create a profile to show off your work, and get access to features over time as we roll them out.

+ +
Join or log in
+
+
+
+ +
+

Connect with Mozilla

+ +

Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your own knowledge.

+ +

We are offering help through Q&A on Stack Overflow, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed on the latest happenings in the web scene around web apps and more. Subscribe to the Apps & Hacks newsletter.

+ +

We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, follow the tags on Stack Overflow, subscribe to the Hacks blog, subscribe to the newsletter, and sign up for an account!

+
+ +
+
+

Q&A on Stack Overflow See all Q&A...

+ +

We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL http://stackoverflow.com/r/mozilla.

+ + +
Stack form
+ +

Latest Q&A Topics

+
+ +
 
+
+ +

Developers at a Firefox OS workshop in Madrid.

+ +
+
+

Where is Mozilla? View attendees and details on our Events page...

+ +

Here is a listing of events where Mozilla representatives will be speaking. Make sure to talk to them!

+
+ +
+

Other resources

+ + +
+
+
+ +

 

diff --git a/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html b/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html new file mode 100644 index 0000000000..85ae437ce9 --- /dev/null +++ b/files/ar/mozilla/developer_guide/adding_apis_to_the_navigator_object/index.html @@ -0,0 +1,49 @@ +--- +title: Adding APIs to the navigator object +slug: Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object +translation_of: Mozilla/Developer_guide/Adding_APIs_to_the_navigator_object +--- +

{{gecko_minversion_header ("9.0")}}

+ +

بدءًا من الإصدار 9.0 من Gecko {{geckoRelease ("9.0")}} ، يمكنك بسهولة إضافة واجهات برمجة تطبيقات جديدة إلى كائن {{domxref ("window.navigator")}} باستخدام إدارة الفئات. ما عليك سوى إضافة إدخال إلى فئة "JavaScript-navigator-property".

+ +

يجب تطبيق الكائن كمكون XPCOM. تتطلب كل طريقة أدناه لإضافة كائنات جديدة إلى كائن المستكشف أن يكون الكائن الجديد مكون XPCOM مسجل. يمكنك أن تقرأ عن إنشاء وتسجيل مكونات XPCOM في JavaScript .

+ +

إضافة كائن برمجيًا إلى الملاح

+ +
var categoryManager = Components.classes ["@ mozilla.org/categorymanager؛1"]
+                      .getService (Components.interfaces.nsICategoryManager) ؛
+
+categoryManager.addCategoryEntry ("JavaScript-navigator-property"، "myApi"،
+                      MY_CONTRACT_ID, false, true);
+
+ +

This adds a new object, myApi, to the {{ domxref("window.navigator") }} object. The newly added object is a reference to the component specified by the contract ID MY_CONTRACT_ID. You can learn more about Contract IDs are unique text identifiers for XPCOM components.

+ +

Using a manifest to add an object to navigator

+ +

You can also add an object to the {{ domxref("window.navigator") }} object by using the chrome manifest of an add-on:

+ +
component {ffffffff-ffff-ffff-ffff-ffffffffffff} MyComponent.js
+contract @mozilla.org/mycomponent;1 {ffffffff-ffff-ffff-ffff-ffffffffffff}
+category JavaScript-navigator-property myComponent @mozilla.org/mycomponent;1
+
+ +

قم بإنشاء GUID واستبدال أقسام "ffff" في كل من سطور المكون والعقد بـ GUID الخاص بك.

+ +

هذا يضيف واجهة برمجة تطبيقات جديدة myComponent، إلى كائن الملاح ، والذي يمكنك الوصول إليه بعد ذلك باسم navigator.myComponent.

+ +

مثال من العالم الحقيقي

+ +

يمكنك مشاهدة مثال على كيفية استخدام ذلك في Firefox من خلال إلقاء نظرة على كيفية mozAppsتنفيذ واجهة برمجة التطبيقات:

+ + + +

أنظر أيضا

+ + diff --git a/files/ar/mozilla/developer_guide/index.html b/files/ar/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..a651609a43 --- /dev/null +++ b/files/ar/mozilla/developer_guide/index.html @@ -0,0 +1,107 @@ +--- +title: Developer guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - Landing + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +

There are lots of ways to contribute to the Mozilla project: coding, testing, improving the build process and tools, or contributing to the documentation. This guide provides information that will not only help you get started as a Mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.

+ +
+
+

Documentation topics

+ +
+
Getting Started
+
A step-by-step beginner's guide to getting involved with Mozilla.
+
For new Mozilla developers
+
A directory of articles which are particularly helpful for new Mozilla developers.
+
+ +
+
Working with Mozilla Source Code
+
A code overview, how to get the code, and the coding style guide.
+
Build Instructions
+
How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
Editor Configuration
+
Tips on setting up your favorite IDE or text editor to work with Mozilla projects.
+
Development process overview
+
An overview of the entire Mozilla development process.
+
Managing multiple profiles
+
When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
Automated Testing
+
How to run Mozilla's automated tests, and how to write new tests.
+
How to submit a patch
+
After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
Getting documentation updated
+
How to ensure that documentation is kept up to date as you develop.
+
Mozilla modules and module ownership
+
This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
Code snippets
+
Useful code samples for a wide variety of things you might need to figure out how to do.
+
Mozilla development strategies
+
Tips for how to make the most of your time working on the Mozilla project.
+
Debugging
+
Find helpful tips and guides for debugging Mozilla code.
+
Performance
+
Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
The Mozilla platform
+
Information about the workings of the Mozilla platform.
+
Mozilla
+
Much more additional information about Mozilla coding practices.
+
Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
Interface Compatibility
+
Guidelines for modifying scriptable and binary APIs in Mozilla.
+
Customizing Firefox
+
Information about creating customized versions of Firefox.
+
Task-Graph Generation
+
What controls the jobs that run on a push to version control?  How can you change that?
+
Virtual ARM Linux environment
+
How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
Obsolete Build Caveats and Tips
+
A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
Firefox Source Docs
+
Web-hosted documentation built from the mozilla-central source code.
+
+
+ +
+

Tools

+ +
+
Bugzilla
+
The Bugzilla database used to track issues for Mozilla projects.
+
DXR
+
Next generation of searching Mozilla's source code. In active development.
+
SearchFox
+
Another option for Mozilla code searching. Indexes JS as well as C++, includes blame capabilities. In active development.
+
Mercurial
+
The distributed version-control system used to manage Mozilla's source code.
+
Mozilla build VM
+
A VirtualBox compatible virtual machine configured with all the software needed to build and work on Firefox.
+
TaskCluster
+
TaskCluster is the task execution framework that supports Mozilla's continuous integration and release processes.
+
Treeherder
+
Treeherder shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
Perfherder
+
Perfherder is used to aggregate the results of automated performance tests against the tree.
+
Crash tracking
+
Information about the Socorro crash reporting system.
+
Callgraph
+
A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
Developer forums
+
A topic-specific list of discussion forums and mailing lists where you can talk about Mozilla development issues.
+
Mozilla Platform Development Cheat Sheet (archive.org)
+
Brian Bondy's list of frequently referenced information for platform developers. Brian Bondy took down codefirefox.com, but the archived cheatsheet might still be useful.
+
Firefox development video tutorials
+
Brian Bondy's video tutorials on Firefox development.
+
+
+
+ +

 

diff --git a/files/ar/mozilla/developer_guide/source_code/index.html b/files/ar/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..f8bddd50b3 --- /dev/null +++ b/files/ar/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,48 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +translation_of: Mozilla/Developer_guide/Source_Code +--- +

The articles below will help you get your hands on the Mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.

+ +
+
+
+
Getting the code from the Mercurial repository
+
If you plan to contribute to the Mozilla project, the best way to get the code is to check it out from the version control repository.  Learn how to do that here.
+
Getting a pre-configured Mozilla build system virtual machine
+
This is the easiest way to get started: use a VirtualBox virtual machine which is already configured with a complete build environment for you to use. Just boot the VM and build!
+
Downloading the source code
+
If you want to fetch the code for a specific release of a particular Mozilla product, you may prefer to download a source code archive.
+
Viewing and searching Mozilla source code online
+
Learn how to use MXR, Mozilla's online search and browsing tool for accessing the source code.  This isn't a good way to download the code, but is a great way to search it.
+
Navigating the Mozilla source code
+
Learn about the various folders in the Mozilla source tree, and how to find what you're looking for.
+
Bugs for newcomers
+
If you are new to the project and want something to work on, look here.
+
+
+ +
+
+
Mozilla Coding Style Guide
+
The code style guide provides information about how you should format your source code to ensure that you don't get mocked by the reviewers.
+
Interface development guide
+
Guidelines and documentation for how to create and update XPCOM interfaces.
+
The Firefox codebase: CSS Guidelines
+
This document contains guidelines defining how CSS inside the Firefox codebase should be written, it is notably relevant for Firefox front-end engineers.
+
SVG Cleanup Guide
+
Guidelines and best practices for shipping new SVGs.
+
Try Servers
+
Mozilla products build on at least three platforms. If you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass.
+
Creating a patch
+
Once you've made a change to the Mozilla code, the next step (after making sure it works) is to create a patch and submit it for review. This article needs to be updated fully for Mercurial.
+
Getting commit access to the source code
+
Feel ready to join the few, the proud, the committers?  Find out how to get check-in access to the Mozilla code.
+
Getting older Mozilla code from CVS
+
Older versions of the Mozilla source code, as well as the current versions of NSS and NSPR, are kept in a CVS repository.  Learn about that in this article.
+
+
+
+ +

 

diff --git a/files/ar/mozilla/firefox/index.html b/files/ar/mozilla/firefox/index.html new file mode 100644 index 0000000000..ab373eb27d --- /dev/null +++ b/files/ar/mozilla/firefox/index.html @@ -0,0 +1,72 @@ +--- +title: فايرفوكس +slug: Mozilla/Firefox +tags: + - فايرفوكس + - موزيلا +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +

يعد فايرفوكس متصفح موزيلا الأكثر شعبية، وهو متاح لمنصات متعددة على سطح المكتب، بما فيها ويندوز، وماك، ولينكس كما يتوفر على جميع هواتف الأندرويد والأيفون. بفضل التوافقية الممتازة، وأحدث تقنيات الويب، وتقنيات التطوير القوية، يعد فايرفوكس خياراً ممتازاً لكلٍ من مطوري الويب والمستخدمين العاديين.

+ +

يعد فايرفوكس مشروع مفتوح المصدر. فمعظم النص المصدري قد ساهم بكتابته مجتمع ضخم من المتطوعين. هنا يمكنك معرفة المزيد عن كيفية المساهمة في المشروع، وسوف تجد أيضاً روابط لمعلومات حول تعلم تطوير إضافات لمتصفح فايرفوكس، واستخدام أدوات المطورين في متصفح، وغيرها من الموضوعات.

+ +
+

تعرّف على كيفية إنشاء إضافات لمتصفح فايرفوكس، وكيفية تطويره وبناءه، وكيف تعمل الأجزاء الداخلية لفايرفوكس والمشاريع الفرعية الأخرى.

+
+ + + +

نسخ فايرفوكس

+ +

يمتلك فايرفوكس خمسة نسخ متاحة.

+ +

النسخة المتأخرة (الليلية)

+ +

كل ليلة نبني النص المصدري الأحدث الذي توصلنا إليه من فايرفوكس في مستودع موزيلا المركزي. هذه الإصدارات التي نبنيها موجهة لمطورين فايرفوكس أو للذين يرغبون بتجربة أحدث التقنيات المتطورة والتي مازالت قيد التطوير.

+ +

نزّل فايرفوكس النسخة الليلية

+ +

نسخة المطورين

+ +

هذه الإصدارة من فيرفوكس موجهة للمطورين. كل ستة أسابيع، نأخذ الميزات الناضجة بما فيه الكفاية، الموجودة في النسخة الليلية من فيرفوكس، ونبني نسخة جديدة من فايرفوكس إصدار المطورين. ونقوم أيضاً بإضافة بعض الميزات الإضافية للمطورين والتي تتوفر في هذه النسخة فقط.

+ +

تعرّف على المزيد حول نسخة فايرفوكس للمطورين.

+ +

نزّل نسخة فايرفوكس للمطورين

+ +

النسخة التجريبية

+ +

بعض قضاء ستة أسابيع في إصدارة موزيلا للمطورين، نأخذ الميزات التي نضجت بما فيه الكفاية من نسخة المطورين، ونقوم بإنشاء نسخة جديدة من فايرفوكس الإصدارة التجربيبة. تُبنى هذه الإصدارة من أجل عشاق فايرفوكس لاختبار الميزات الجديدة القادمة للإصدار المستقر.

+ +

نزّل النسخة التجريبية

+ +

نسخة فايرفوكس (المستقرة)

+ +

بعد الإستقرار لستة أسابيع أخرى في الإصدار التجريبية، نكون قد أصبحنا مستعدين لشحن الميزات الجديدة لمئات الملايين من المستخدمين في إصدار جديد من فايرفوكس.

+ +

نزّل فايرفوكس (النسخة المستقرة)

+ +

النسخة طويلة الدعم

+ +

تعد هذه النسخة إصدار طويل الأجل من فايرفوكس نسخة سطح المكتب موجهة للاستخدام من قبل المنظمات مثل المدارس، والجامعات، والشركات وغيرها من المنظمات التي تحتاج دعم موسع لعمليات النشر الجماعي.

+ +

تعرّف على المزيد حول نسخة فايرفوكس طويلة الدعم.

+ +

نزّل النسخة طويلة الدعم

+ +

ملفات فايرفوكس الشخصية

+ +

إذا كنت تستخدم عدة نسخ — أو حتى عدة إعدادات مختلفة — بشكل منتظم، فعليك قراءة كيف تستخدم عدة ملفات شخصية مع فايرفوكس لتستخدم مدير الملف الشخصي الخاص بفايرفوكس وأدوات إدارة الملفات الشخصية الأخرى لصالحك.

diff --git a/files/ar/mozilla/firefox/releases/index.html b/files/ar/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..63372869bd --- /dev/null +++ b/files/ar/mozilla/firefox/releases/index.html @@ -0,0 +1,26 @@ +--- +title: Firefox developer release notes +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - Release + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}
+ +

Below you'll find links to the developer release notes for every Firefox release. These lovingly-crafted notes provide details on what features and APIs were added and improved and what bugs were eliminated in each version of Firefox. All written to give developers like you the information they need most. You're welcome.

+ +
{{ListSubpages("",1,1,1)}}
+ +


+ Whew! That's a lot of Firefoxen!

+ +

See also

+ + diff --git a/files/ar/mozilla/firefox_for_android/index.html b/files/ar/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..4844391212 --- /dev/null +++ b/files/ar/mozilla/firefox_for_android/index.html @@ -0,0 +1,45 @@ +--- +title: Firefox for Android +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +

For more and more people mobile devices are the primary way, or even the only way, to access the Web. Firefox for Android (codenamed Fennec) is an open, hackable, standards-based browser, just like the desktop Firefox.

+

Firefox for Android constructs its user interface from native Android widgets instead of XUL: this greatly improves performance, especially startup time, and memory consumption.

+

Contribute to Firefox for Android

+

The main starting point for information about the Firefox for Android project itself is the project "Get Involved" page.

+

You can help us to create and improve Firefox for Android:

+ +

Develop for the mobile web

+

We've started putting together a guide to designing web sites for mobile devices.

+

With Firefox for Android, you've got access a number of APIs that expose the underlying capabilities of the device, closing the gap between the Web and native applications:

+ +

To test your web site on Firefox for Android, you can install it on an Android device or run it on your desktop using the Android Emulator.

+

Build mobile add-ons

+

Firefox for Android supports add-ons using the exact same extension system used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the same process that would be used for desktop Firefox. Add-ons that work with desktop Firefox do not automatically work in Firefox on Android. The user interfaces are just too different.

+
+ Firefox on Android has a unique application identifier which must be used in install.rdf. The identifier is {aa3c5121-dab2-40e2-81ca-7ea25febc110}
+

Both classic restart-required and newer restartless add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.

+

Quick Overview

+ +

Get help with Firefox for Android

+

Documentation and tutorials for using and troubleshooting Firefox for Android are available on the Mozilla Support website.

diff --git a/files/ar/mozilla/gecko/index.html b/files/ar/mozilla/gecko/index.html new file mode 100644 index 0000000000..ea2c73e891 --- /dev/null +++ b/files/ar/mozilla/gecko/index.html @@ -0,0 +1,58 @@ +--- +title: Gecko +slug: Mozilla/Gecko +translation_of: Mozilla/Gecko +--- +
+

أبو بريص هو اسم محرك تخطيط وضعتها مشروع موزيلا. كان اسمه في الأصل أنه NGLayout. وظيفة أبو بريص هو لقراءة المحتوى على شبكة الإنترنت، مثل HTML، CSS، كسول، جافا سكريبت، وجعله على شاشة المستخدم أو طباعته. في التطبيقات المستندة XUL-يستخدم أبو بريص لتقديم واجهة المستخدم للتطبيق أيضا.

+
+ +

يستخدم أبو بريص في العديد من التطبيقات، بما في ذلك عدد قليل من المتصفحات، مثل فايرفوكس، إضافات، وما إلى ذلك (للحصول على قائمة كاملة، يرجى الرجوع إلى ويكيبيديا المادة على أبو بريص) المنتجات التي تستخدم نفس الإصدار من أبو بريص على دعم مماثل للمعايير.

+ + + + + + + + +
+

توثيق

+ +
+
أبو بريص التعليمات
+
الأسئلة المتداولة حول أبو بريص.
+
إشارة زغة DOM
+
إشارة إلى DOM.
+
إشارة حدث أبو بريص
+
الرجوع إلى أحداث المستخدمة في التطبيقات أبو بريص وموزيلا. للأحداث DOM القياسية على شبكة الإنترنت، انظر المرجع الحدث DOM.
+
إصدارات أبو بريص والإصدارات تطبيق
+
إصدارات أبو بريص والتطبيقات انهم المستخدمة في.
+
مقدمة في التخطيط في موزيلا
+
التكنولوجيا الحديث في التخطيط.
+
تضمين موزيلا
+
عن طريق أبو بريص في التطبيق الخاص بك.
+
مجموعات الأحرف التي تدعمها أبو بريص
+
قائمة مجموعات الأحرف التي يدعمها أبو بريص.
+
HTML محلل خيوط
+
وصف خاصية تعدد في محلل HTML.
+
{{إنترويكي ('wikimo'، 'أبو بريص: Home_Page'، 'أبو بريص الصفحة الرئيسية على MozillaWiki')}}
+
الصفحة الرئيسية للمطورين النشط. خرائط الطريق وأكثر ما يصل إلى تاريخ الموارد.
+
+ +

مشاهدة الكل...

+ 		+

مجتمع

+ +
    +
  • عرض المنتديات موزيلا ... {{DiscussionList ("ديف التكنولوجيا تخطيط"، "mozilla.dev.tech.layout")}}
    • +
+ + + +
+
معايير الويب، كسول، تضمين موزيلا، تطوير موزيلا
+
+
+ +

 

diff --git a/files/ar/mozilla/index.html b/files/ar/mozilla/index.html new file mode 100644 index 0000000000..ecbabce71c --- /dev/null +++ b/files/ar/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +
+ {{draft}}
+

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

+
+ {{LandingPageListSubpages}}
diff --git a/files/ar/mozilla/localization/index.html b/files/ar/mozilla/localization/index.html new file mode 100644 index 0000000000..18af36251d --- /dev/null +++ b/files/ar/mozilla/localization/index.html @@ -0,0 +1,29 @@ +--- +title: Localization at Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localization + - Mozilla + - NeedsTranslation + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +

Localization (L10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. These resources are for anyone with an interest in the technical aspects involved in localization. They are for developers and all contributors.

+ +
+

The documentation here is no longer being maintained and is inaccurate. L10n documentation has moved to https://mozilla-l10n.github.io/localizer-documentation/ . To learn how to bootstrap a new locale for Mozilla projects, please see those documents

+
+ +

See also

+ +
+
Localizing MDN
+
This resource covers localization of the documentation here on MDN.
+
App localization
+
This set of documents applies more specifically to localizing apps, including Firefox OS apps.
+
L10n
+
Reference docs for the L10n API that Mozilla uses to localise Firefox OS.
+
diff --git a/files/ar/mozilla/localization/localizing_xliff_files/index.html b/files/ar/mozilla/localization/localizing_xliff_files/index.html new file mode 100644 index 0000000000..ec8609c60d --- /dev/null +++ b/files/ar/mozilla/localization/localizing_xliff_files/index.html @@ -0,0 +1,60 @@ +--- +title: Localizing XLIFF files for iOS +slug: Mozilla/Localization/Localizing_XLIFF_files +translation_of: Mozilla/Localization/Localizing_XLIFF_files +--- +

Firefox for iOS uses the XLIFF XML-based file format to hold and transfer localization data. XLIFF (eXtensible Localisation Interchange File Format) is a localization standard governed by the OASIS standards body. The goal of the standard is to have an XML-based format to use when exchanging localization data between tools without the potential of data loss or corruption. Most translation tools support the XLIFF standard, making localizing the XLIFF files for Firefox for iOS easy to do using translation tools. Editing the raw XLIFF file is also rather easy, especially if you're already familiar with XML. This tutorial will walk you through the steps you need to take to translation strings within an XLIFF file.

+ +

String repository for Firefox on iOS

+ +

The firefox-ios.xliff file is located in SVN.

+ +
    +
  1. Decide where on your local computer you will store your copy of the github repo and navigate there in your terminal.
    2. +
  2. Enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/
    3. +
  3. You should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it.
    4. +
+ +

Translating the XLIFF file

+ +
    +
  1. Open the firefox-ios.xliff file in your favorite text editor.
    2. +
  2. In the <file> tag, add the target-language attribute with your locale code as the value (e.g., target-language="xx-XX"). Be aware that there may be many <file> tags within one XLIFF document. Each <file> tag requires the target-language attribute with your locale code as the value (e.g., target-language="xx-XX").
    3. +
  3. Strings are located within <trans-unit> tags. Source English strings are contained in <source> child tags. Here is an example of such a <trans-unit> + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+</trans-unit>
+
    + Your translations must be contained inside <target> child tags. Go through the full xliff page adding <target></target> below each <source> tag set to help you to identify strings that need to be translated. Do not delete the <source> tag sets. + + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+    <target>YOUR_TRANSLATION_HERE</target>
+</trans-unit>
+
    +
    4. +
  4. Provide translations of the strings in the <source> tag sets by placing their translations in the <target> tag sets beneath them. Keep in mind the following sets of characters that need to remain untranslated: +
      +
    1. $(SOME_TEXT_HERE) is a variable format,
      2. +
    2. %1$@ is another variable format.
      3. +
    3. <note> tags contain localizer notes from developers and should not be translated.
      4. +
    + + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+    <target>Agregar a marcadores</target>
+    <note>No comment provided by engineer.</note>
+</trans-unit>
+
    +
    5. +
  5. Save your translations along the way.
    6. +
  6. Once you've completed translation, it's important to make sure the XML in your XLIFF file is valid (e.g., no broken tag sets). Open the file in Firefox to have it run a validity check and correct any errors it might yell about.
    7. +
+ +

Commiting your XLIFF file

+ +
    +
  1. Using this command, commit your translated XLIFF file into your locale's directory: git commit -m "Commit message here" .
    2. +
  2. Push your commit into the github repo: git push
    3. +
  3. Kick up your feet, pop open a cold beer (or soda), and pat yourself on the back for doing something new, different, and exciting!
    4. +
diff --git a/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html b/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html new file mode 100644 index 0000000000..1971da3911 --- /dev/null +++ b/files/ar/mozilla/localization/web_localizability/creating_localizable_web_applications/index.html @@ -0,0 +1,437 @@ +--- +title: Creating localizable web applications +slug: Mozilla/Localization/Web_Localizability/Creating_localizable_web_applications +translation_of: Mozilla/Localization/Web_Localizability/Creating_localizable_web_applications +--- +

An important step of developing a web application or creating web content is making sure that it can be localized. Listed below are good practices and recommendations that should be followed in order to make your content easily localizable.

+

Most of the code snippets used in the examples below come from an early version of the getpersonas.com website. In some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity.

+

Cheatsheet

+ +

App Logic

+

Detect the locale correctly

+

Be smart about detecting the user's locale correctly. You can use one or more of the following techniques:

+ +

See examples of the addons.mozillaorg code at /addons/trunk/site/app/config/language.php and /addons/trunk/site/app/config/language.inc.php. The LANGUAGE_CONFIG class expects arrays of valid languages & supported languages.

+

Always give the user a possibility to change the locale (e.g. by adding locale dropdown menu at bottom of page) and remember this choice for the future visits.

+

Use the locale code in the URLs

+

Depending on how you detect user's locale, you may want to provide a way of overriding the autodetection. You can achieve this by setting a cookie when the changes the locale with the language dropdown, or by looking for locale code in the URL. The latter involves rewriting the URLs to include the locale code and rewriting Apache's aliases to handle locale in URLs.

+

You can put the locale code as the top-most element of the URL's path (e.g. http://example.com/en-US/foo/bar) or on its end (e.g. http://example.com/foo/bar/en-US). Avoid using it in a subdomain, as it can cause problems with certificates (this is wrong: http://en-us.example.com/foo/bar).

+

Simplify localized versions if necessary

+

Oftentimes, it is better to slightly simplify the localized version of your web application than to serve a mix of localized and English content. For example, if not all the pages of your website are going to be localized, you may consider removing links to the English-only pages from the navigation (headers, footers, sidebars) in the localized versions.

+

Define the locale and the direction in the HTML

+

Generate the lang attribute dynamically, depending on the current locale. Use the dir attribute on the <html/> element and consider using a rtl class on <html/> or <body/> as well, in order to easily change CSS rules like in the example below.

+

Snippet 1. Bad:

+
<html lang="en">
+
+

Snippet 2. Good:

+

CSS:

+
html[dir='rtl'] foo {
+  /* RTL-specific rules for the FOO element */
+}
+
+body.rtl foo {
+  /* RTL-specific rules for the FOO element */
+}
+

HTML/PHP:

+
<?php
+    function isRTL($locale) {
+        $RTL_locales = array('ar', 'fa', 'he');
+        return in_array($locale, $RTL_locales);
+    }
+?>
+<html lang="<?= $locale?>" dir="<?= isRTL($locale) ? 'rtl' : 'ltr' ?>" >
+    <body class="<?= $locale?> <?= isRTL($locale) ? 'rtl' : 'ltr' ?>">
+    </body>
+</html>
+

Notice that <body/> is given a class equal to the current locale. This is useful to add minor corrective rules to the CSS that apply only for selected locales. For example, for locales that tend to have longer words than English, you may want to make an element slightly wider.

+

Snippet 3. Good:

+
body.de foo, body.fr foo, body.pl foo {
+  /* locale-specific rules for the FOO element */
+  width: 10em; /* originally 8em */
+}
+

Adapt the interaction to RTL locales

+

Right-to-left locales not only require good images handling (see Images), but also should be taken into account when designing the interaction on the website. Consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs. For right-to-left languages, the slideshow should go from right to left as well, making the last element in the HTML the first one to be displayed.

+

Separate URLs from navigation

+

Sometimes, when the URLs are well-designed, you may want to use the URL to do something in the code depending on when the user is. Take the URL structure of the getpersonas.com website for example. The URL http://getpersonas.com/nature/popular/2 points to the second page of the listing of the popular Personas in the "Nature" category. You could easily use list($category, $tab, $page) = explode('/', $path); to get this information directly from the URL. After that, it is tempting to use the $category or $tab variables in the interface. However, this is problematic for localization. You probably don't want to localize the URLs to keep them uniform across locales as well as to avoid issues with non-Latin and/or RTL characters.  So in order to display a localized label of a category or a tab, you should create a mapping between the non-localizable English names used in the URLs and the localizable English strings used in the interface. Consider the following example:

+

Snippet 1. Good:

+
$tab_labels = array( "popular" => _('Popular'),
+                     "recent" => _('Recent'),
+                     "all" => _('All'),
+                     "my" => _('My'),
+                     "favorites" => _('Favorites')
+                     );
+list($category, $tab, $page) = explode('/', $path);
+if ($tab == 'popular') {          // $tab is always English
+  // ....
+  echo $tab_labels($tab);         // this will display the translation
+}
+ +

Indicate the language of the pages you link to if it is different from the user's current language. For English, add hreflang="en" to links to resources that are not going to be localized or are external to your web application. Then, use CSS to give a cue to the user that if she follows the link, she will be served English content.

+

Snippet 1. Bad:

+
<a href="http://www.mozilla.com/en-US/privacy-policy.html"><?= _('Privacy policy'); ?></a>
+
+

Snippet 2. Good:

+

CSS:

+
a[hreflang="en"]::after {
+  content: " [en]"
+}
+
+

HTML/PHP:

+
<a href="http://www.mozilla.com/en-US/privacy-policy.html" hreflang="en"><?= _('Privacy policy'); ?></a>
+

 

+

Don't mingle app logic and localizable content when using pure HTML

+

If you decide not to use gettext on some pages (e.g. because they contain a lot of text and localizing source HTML is easier), make sure to keep the code responsible for application logic separate from the localizable content. The logic of the website should not be exposed directly in the localization files, to avoid any accidental changes by localizers.

+

Snippet 1. Bad:

+
require_once('lib/user.php');
+$user = new PersonaUser();
+

Snippet 2. Good:

+
require_once('templates/footer.php');
+

If it's not possible to remove the app logic code, you should consider using gettext. Gettext extracts localizable content form the source files, thus making it impossible for localizers to accidentally change them. You can learn more about the choice of the format for your project at File formats.

+

Text messages

+

Don't hardcode English content

+

Allow localizers to localize English content, such as:

+ +

Note that some strings might be hidden in libraries' code (e.g. error messages), or in JavaScript libraries and scripts.

+

If you are using pure HTML instead of gettext to localize your webapp, consider using an additional gettext-like format such as .lang to streamline localizers' work with repeating content. This is useful for strings occurring in the webapp multiple times, like "return to top", "comments", "click to see larger image" etc. Might be also helpful for headers and footers, if you're not using templates to display them.

+

In most of the cases though, you should use gettext whenever technically possible (i.e. the server's PHP has been built with gettext support).

+

Localize the date format

+

Localizing the date format is as easy as localizing any other string. Just let the localizers localize the format specification string.

+

Snippet 1. Bad:

+
$persona['date'] = date("n/j/Y", strtotime($persona['approve']));
+
+

Snippet 2. Good:

+
$persona['date'] = date(_("n/j/Y"), strtotime($persona['approve']));
+
+

Localize the number format

+

You can make the number format localizable using the information returned by localeconv() in PHP.

+

Snippet 1. Bad:

+
printf(_("%s MB>"), $size);
+
+

Snippet 2. Good:

+
function num_format($num, $decimals) {
+  $locale_info = localeconv();
+  return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']);
+}
+
+printf(_("%s MB"), num_format($size, 1));
+
+

Wrap as few HTML tags as possible

+

When wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call.

+

Snippet 1. Bad:

+
<?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>Get Personas for Firefox - Free</span>");?><span class="arrow"></span></a>
+
+

Snippet 2. Good:

+
<a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download">
+  <span><?= _("Get Personas for Firefox - Free");?></span><span class="arrow"></span>
+</a>
+

 

+

Snippet 3. Bad:

+
<p><?= _("<strong class=\"legal\">Design Acceptance:</strong> If a design is accepted, we will send the following message:");?></p>
+<p><?= _("<strong class=\"legal\">Design Rejection:</strong> If a design is rejected, we will send the following message:");?></p>
+
+

Snippet 4. Good:

+
<p><strong class="legal"><?= _("Design Acceptance:");?></strong> <?= _("If a design is accepted, we will send the following message:");?></p>
+<p><strong class="legal"><?= _("Design Rejection:");?></strong> <?= _("If a design is rejected, we will send the following message:");?></p>
+

 

+

Snippet 5. Bad:

+
<p id="breadcrumbs">
+  <?printf(_("<a href=\"%s\">Personas Home</a> : <a href=\"%s\">Sign In</a> : Forgot Your Password?"),
+             $locale_conf->url('/'),
+             $locale_conf->url('/signin'));?>
+</p>
+
+

Snippet 6. Good:

+
<p id="breadcrumbs">
+  <?printf("<a href=\"%s\">" . _("Personas Home") . "</a> : <a href=\"%s\">" . _("Sign In") . "</a> : " . _("Forgot Your Password?"),
+            $locale_conf->url('/'),
+            $locale_conf->url('/signin'));?>
+</p>
+

 

+

Snippet 7. Bad:

+
<p class="description"><?= _("<strong>Description:</strong>");?></p>
+

Snippet 8. Good:

+
<p class="description"><strong><?= _("Description:");?></strong></p>
+

 

+

Snippet 9. Good:

+
<h1>
+  <?printf("<a href=\"%s\"><img src=\"/static/img/logo.png\" alt=\"" . _("Mozilla Labs Personas") . "\" /></a>",
+           $locale_conf->url('/'));?>
+</h1>
+
+

Snippet 10. Better:

+
<h1>
+  <a href="<?= $locale_conf->url('/') ?>">
+    <img src="/static/img/logo.png" alt="<?= /* L10N: link title attribute */ _("Mozilla Labs Personas"); ?> " />
+  </a>
+</h1>
+

...but don't sacrifice flexibility

+

Don't sacrifice flexibility trying to satisfy the rule above. Make sure the content supports changing the order of the sentence, which may be required by some grammars.

+

Snippet 1. Bad:

+
<p class="added"><?= _("<strong>Added:</strong>") . $persona['date']; ?></p>
+

Snippet 2. Bad:

+
<p class="added"><strong><?= _("Added:") ?></strong><?= $persona['date']; ?></p>
+

Snippet 3. Good:

+
<p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p>
+

The first bad snippet puts the <strong/> HTML elements inside the gettext function call and concatenates the $persona['date'] variable to it. Following the rule about wrapping as few HTML elements with the gettext function call as possible, you could try to put the <strong/> HTML tag outside of the PHP code (cf. snippet 2). However, in this snippet, the concatenation of the $persona['date'] variable is still hardcoded and only allows one ordering of the sentence, while some grammars might require, for instance, to put the date in front of the "Added" descriptor. For this reason, it is better to leave the <strong/> HTML tags inside the gettext function call and take advantage of the printf() variable that will be substituted by the date upon interpretation of the code (snippet 3).

+

Snippet 4. Good:

+
<h3>
+  <?printf( /* L10N: %s is the author's username */ _("created by <a href=\"%s\">%s</a>"),
+           $locale_conf->url('/gallery/Designer/' . $persona['author']),
+           $persona['display_username']);?>
+</h3>
+

In this example the link is in the _() call so that localizers can adjust the position of the author's name, depending on the grammar of their language.

+

Use printf() for string substitution

+

Whenever there is content that will change, either upon interpretation of the code or as part of development, don't use concatenation. Instead, use printf() and string formatting. For instance, don't put URIs into msgid's. If you do, if the static URI changes, you'll have to regenerate the *.po files to include the new msgids.

+

Snippet 1. Bad:

+
<?= _("View a sample Persona Header <b><a href=\"/static/img/Persona_Header_LABS.jpg\">here</a></b>.");?>
+

Snippet 2. Good:

+
<?php printf(_("View a sample Persona Header <b><a href=\"%s\">here</a></b>."), '/static/img/Persona_Header_LABS.jpg'); ?>
+

 

+

Snippet 3. Bad:

+
<p><?=_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:personas@mozilla.com\">personas@mozilla.com</a>.")?></p>
+

Snippet 4. Good:

+
<p><?= printf(_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:%s\">%s</a>."),
+              'personas@mozilla.com',
+              'personas@mozilla.com')?>
+</p>
+

Snippet 5. Also good:

+
<p><?= printf(_("If you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:%1$s\">%1$s</a>."),
+              'personas@mozilla.com')?>
+</p>
+

The same goes for variables that are unknown until the code is interpreted. Localizers should have a possibility to adapt the order of the sentence (including the variable part) to the grammar and preferred style used in their language. Consider the following example.

+

Snippet 6. Bad:

+
<p class="added"><?= _("<strong>Added:</strong>") . $persona['date']; ?></p>
+

Snippet 7. Good:

+
<p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p>
+

In Snippet 6 the concatenation causes the ordering of the sentence to be fixed, while some grammars might require, for instance, to put the date in front of the "Added" descriptor. You should take advantage of the printf() variable that will be substituted by the date upon interpretation of the code (snippet 7).

+

Use gettext comments

+

Use comments in the code to help localizers understand what they are translating. You can explain where the string will appear in the application, or what the variables used in the string will be replaced with. Put comments in the same line as the gettext function call (inline comments, in PHP these are /* ... */), or one line directly above the gettext function call (block comments, in PHP they start with # ... or // ...). In either way, use a consistent prefix for localization-related comments, e.g. "L10n". When extracting strings with xgettext you will be able to include only comments starting with this prefix using the --add-comments=PREFIX option, for example xgettext --add-comments=L10n.

+

Snippet 1. Bad:

+
<h1>
+  <a href="<?= $locale_conf->url('/') ?>">
+    <img src="/static/img/logo.png" alt="<?= _("Mozilla Labs Personas"); ?>" />
+  </a>
+</h1>
+
+

Snippet 2. Good:

+
<h1>
+  <a href="<?= $locale_conf->url('/') ?>">
+    <img src="/static/img/logo.png" alt="<?= /* L10n: link title attribute */ _("Mozilla Labs Personas") ?> " />
+  </a>
+</h1>
+

 

+

Snippet 3. Bad:

+
<p class="added"><? printf(_("<strong>Added:</strong> %s"), $persona['date']);?></p>
+
+

Snippet 4. Good:

+
<p class="added"><? printf( /* L10N: %s is a date */ _("<strong>Added:</strong> %s"), $persona['date']);?></p>
+

 

+

Snippet 5. Bad:

+
printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']);
+
+

Snippet 6. Good:

+
// %1$s is persona name, %2$s is athor's username
+printf(_("%1$s by %2$s"), $persona['name'], $persona['display_username']);
+
+

Use printf variables swapping

+

Use printf() ordered variables (%1$s, %2$s, etc.) to allow changes to the order of the sentence. Some languages may require this. Remember to use single quotes around the strings containing the formatting symbols. Otherwise, PHP will treat $s as a regular variable, instead of parsing the whole %1$s formatting symbol.

+

Snippet 1. Bad:

+
$page_header = $persona['name'] . ' by ' . $persona['display_username'];
+

Snippet 2. Better:

+
printf(_("%s by %s"), $persona['name'], $persona['display_username']);
+

Snippet 3. Good:

+
// %1$s is the persona's name, %2$s is the athor's username
+printf(_('%1$s by %2$s'), $persona['name'], $persona['display_username']);
+

Note the single quotes around '%1$s by %2$s'.

+

Don't nest gettext calls

+

Snippet 1. Bad:

+
<?printf(_("<a href=\"%s\">" . _("Personas Home") . "</a> : How to Create Personas"), $locale_conf->url('/'));?>
+

Snippet 2. Good:

+
<?printf("<a href=\"%s\">" . _("Personas Home") . "</a> : " . _("How to Create Personas"), $locale_conf->url('/'));?>
+

Don't break long text content into multiple strings

+

Don't break long text messages into smaller pieces if the text is a coherent whole. Examples include long paragraphs or e-mail bodies. Gettext doesn't specify the order of the strings in the messages.po file, so a localizer may end up seeing the partial strings of your content scattered all over the file. If you really have to use multiple strings, then make sure you're using comments or event contexts to let localizers know which part they're translating (cf. snippet 2 below).

+

Snippet 1. Bad:

+
echo _("Long text\n");
+echo _("Second part\n");
+echo _("Third part\n");
+

Snippet 2. Still bad (but slightly better than snippet 1):

+
# L10n: Long text example, part 1.
+echo _("Long text\n");
+# L10n: Long text example, part 2.
+echo _("Second part\n");
+# L10n: Long text example, part 3.
+echo _("Third part\n");
+

Snippet 3. Good:

+
# L10n: No indentation is possible after the first line.
+echo _("Long text
+Second part
+Third part\n");
+

Snippet 4. Good (even better):

+
# L10n: You can indent lines to your liking.
+echo _("Long text\n"
+      . "Second part\n"
+      . "Third part\n");
+

The solution in snippet 3 doesn't allow to use code indentation for "Second part" and "Third part". If you indent "Second part", the resulting string (interpreted by PHP and Gettext) will end up indented as well. It is thus recommended to use the solution from snippet 4. Consider the following example:

+

Snippet 5. Bad indentation:

+

PHP code:

+
# L10n: This will be wrongly indented.
+echo _("Long text
+        Second part
+        Third part\n");
+

PHP output:

+
Long text
+        Second part
+        Third part
+
+

messages.po:

+
#. L10n: This will be wrongly indented.
+msgid ""
+"Long text\n"
+"        Second part\n"
+"        Third part\n"
+msgstr ""
+

In order to indent your code, you must use string concatenation. See snippet 4 above for an example of how to do this.

+

Use gettext contexts

+

Depending on context in which it is used, one English string might require two or more different translations. This is particularly true for short strings, like "File" or "Log in". For instance, "Log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "Logging in"). Gettext's context feature allows the developer to distinguish between two identical English strings and disambiguate the translation.

+

Use gettext plurals

+

Whenever you put numbers in your messages, make it possible to use different singular and plural forms.

+

Snippet 1. Bad:

+
print '<p class="numb-users">' . sprintf(_("%d active daily users"), number_format($persona['popularity'])) . '</p>';
+

Snippet 2. Good:

+
print '<p class="numb-users">' . sprintf(ngettext("%d active daily user", "%d active daily users"),
+                                         number_format($persona['popularity'])) . '</p>';
+

One might argue that adding plural support here is not necessary because, for instance, the number of daily users in the example above will always be greater than 1, i.e. will always require the use of the plural form. While this is true for English, it should be noted that some languages require different forms of strings for numbers greater than 1 as well. For example, all numbers ending in 2, 3 or 4 (be it 21 or 1021) might require a special plural form.

+

Read more about plurals in gettext and about plural rules for different languages.

+

Don't use text as decoration

+

 This needs more work.

+
<?printf("<a href=\"%s\">" . _("Step 3: Testing your Persona Images") . "</a> &raquo;", $locale_conf->url('/demo_create_3'));?>
+<?printf("<a href=\"%s\">" . _("Step 2: Creating a Persona Footer Image") . "</a> &raquo;", $locale_conf->url('/demo_create_2'));?>
+<?printf("<a href=\"%s\">" . _("Step 4: Submit your Persona!") . "</a> &raquo;", $locale_conf->url('/demo_create_4'));?>
+
+<div class="tut_left"><?printf("<b>&laquo; <a href=\"%s\">" . _("Back to Step 1") . "</a></b>", $locale_conf->url('/demo_create'));?></div>
+<div class="tut_right"><?printf("<b><a href=\"%s\">" . _("Continue to Step 3") . "</a> &raquo;</b>", $locale_conf->url('/demo_create_3'));?></div>
+

Using &laquo; and &raquo; should be OK here for RTL languages (they are flipped correctly if there are no Latin characters next to them, which there aren't any), so let's leave it as it is. In general though, we should consider implementing such decorations as CSS images (background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...". It a safer method.

+
<?php if($showWearThis) { ?>
+  $(".try-button").personasButton({
+    'hasPersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>',
+    'hasFirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>',
+    'noFirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>'
+  });
+<?php } ?>
+

Images

+

Don't put text or numbers in the images

+

Just don't do that. Applies also to numbers.

+

Image 1. Bad:

+

personas-btn-get.png

+

Image 2. Bad:

+

personas-faq-header.png

+

If you wish to use a non-standard font (as in the image above), take advantage of the CSS's on-line fonts feature available via @font-face.

+

Image 3. Bad:

+

personas-logo-beta.png

+

The trouble with the above image is the "for Firefox" part, which should be made localizable. Keep in mind that you should allow to localize the whole "for Firefox" part, not only the "for" preposition to which you'd concatenate the "Firefox" part. That's because some languages might require changing the word order, and others might require putting the word Firefox in the correct grammatical case.

+

Image 4. Bad:

+

feature-bg-performance.png

+

Image 5 & Snippet 1. Good:

+

Image file (/img/tignish/firefox/performance-chart.png):

+

performance-chart.png

+

HTML: (in this case, no gettext was used and the localizers worked on pure HTML files)

+
<div id="performance-chart">
+  <h4>Firefox Performance: Fast — Faster — <em>Fastest</em></h4>
+  <p>Results of a SunSpider test on a Windows XP machine</p>
+  <img src="/img/tignish/firefox/performance-chart.png" alt="Firefox 2, Firefox 3, Firefox 3.5 performance chart" />
+  <ul>
+    <li>18,148 ms</li>
+    <li>3,669 ms</li>
+    <li>1,524 ms!</li>
+   </ul>
+</div>
+

In the above example, not only does the text above the clock charts require translation, but so do the milliseconds captions below them. Many languages use different number formats than English, like 18 148 or 18.148. Also, the last caption includes an exclamation mark, and for some languages (e.g. French), the orthographic rules might require putting a space between the exclamation mark and the preceding word.

+

Make icons flippable for RTL

+

Image 1.

+

question-64.png

+

This icon should have its right-to-left equivalent, with the "؟" character which is used in some RTL languages, like Arabic and Persian (note that Hebrew uses "?"). You should then display the right icon depending on the locale. The following example shows how to achieve this with CSS.

+

Snippet 1. Bad:

+
<div class="tut_didyouknow">
+  <img src="/static/img/question-64.png" class="tut_icon">
+  <?printf (_("Did you know you can test a Persona before you submit it?  <b><a href=\"%s\">Find out how!</a>&raquo;</b>"),
+            $locale_conf->url('/demo_create_3#test'));?>
+</div>
+

Snippet 2. Good:

+

CSS:

+
div.tut_didyouknow {
+  background: url(/static/img/question-64.png) no-repeat 0 0;
+  padding-left: 64px;
+}
+
+html[dir='rtl'] div.tut_didyouknow {
+  background-image: url(/static/img/question-64.png);
+  background-position: 100% 0;
+  padding-left: 0;
+  padding-right: 64px;
+}
+
+

HTML/PHP:

+
<div class="tut_didyouknow">
+  <?printf (_("Did you know you can test a Persona before you submit it?  <b><a href=\"%s\">Find out how!</a>&raquo;</b>"),
+            $locale_conf->url('/demo_create_3#test'));?>
+</div>
+

Notice that the icon has been moved to CSS, so that it doesn't sit in a <img/> element. This is generally considered a good practice for decorative graphics.

+

Don't use images as buttons

+

Instead, use <button/> and style it with CSS.

+

Image 1. Bad:

+

tut_btn_getStarted.gif

+

Snippet 1. Good:

+

CSS:

+
.button {
+    font-weight: bold;
+    color: #0077a6;
+    font-family: Arial, sans-serif;
+    border: none;
+    background: none;
+    cursor: pointer;
+    overflow: visible;
+    width: auto;
+    height: 30px;
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.button span {
+    background: #fff url(../img/main-sprites.png) no-repeat scroll -384px 1px;
+    display:inline;
+    line-height: 25px;
+    padding: 6px 6px 6px 10px;
+}
+
+.button .arrow {
+    background: transparent url(../img/main-sprites.png) no-repeat scroll -651px 1px;
+    padding: 6px 15px;
+}
+
+html[dir='rtl'] .button .arrow {
+    /* Flip the arrow to point to the left*/
+    background: transparent url(../img/main-sprites.png) no-repeat scroll -601px 1px;
+}
+
+

HTML/PHP:

+
<button type="submit" class="button"><span><?= _('get started'); ?></span><span class="arrow"></span></button>
+
+

Don't put captions in the images

+

Image 1. Bad:

+

tut_headerImage.jpg

diff --git a/files/ar/mozilla/localization/web_localizability/index.html b/files/ar/mozilla/localization/web_localizability/index.html new file mode 100644 index 0000000000..d8a814e46b --- /dev/null +++ b/files/ar/mozilla/localization/web_localizability/index.html @@ -0,0 +1,19 @@ +--- +title: Web Localizability +slug: Mozilla/Localization/Web_Localizability +tags: + - Internationalization + - Localizability + - Localization + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Mozilla/Localization/Web_Localizability +--- +

Localizability (or l12y for short) is a characteristic found in an application or content that enables localization. The following list contains links to pages that highlight steps that can be taken to make web content localizable.  The documentation is divided into 4 parts:

+
  1. How to create localizable content.
  2. How to choose the right localization format.
  3. How to create localizable web applications.
  4. How to set up the infrastructure for localization.
    5. +
+

Why localizability is important

+

There are many reasons why you should start thinking about making your web app localizable as soon as possible.

+
  1. You will make localizer's life easier, for which they will be grateful.
  2. You will have quality content, localized and adapted to the needs of the local market.
  3. Extending you web app to support new languages will be easy.
  4. The content will be easier to maintain and update.
  5. You will end up writing more semanticly-correct code, which is good for your SEO.
  6. By reviewing your content and code for l12y, you will find and fix bugs in your original language too.
    7. +
diff --git "a/files/ar/mozilla/localization/\330\247\331\204\330\252\330\261\330\254\331\205\330\251_\331\205\330\271_\330\250\331\210\331\206\330\252\331\210\331\210\331\206/index.html" "b/files/ar/mozilla/localization/\330\247\331\204\330\252\330\261\330\254\331\205\330\251_\331\205\330\271_\330\250\331\210\331\206\330\252\331\210\331\210\331\206/index.html" new file mode 100644 index 0000000000..5feb5c26be --- /dev/null +++ "b/files/ar/mozilla/localization/\330\247\331\204\330\252\330\261\330\254\331\205\330\251_\331\205\330\271_\330\250\331\210\331\206\330\252\331\210\331\210\331\206/index.html" @@ -0,0 +1,135 @@ +--- +title: الترجمة باستخدام بونتوون +slug: Mozilla/Localization/الترجمة_مع_بونتوون +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +

يعد بونتوون اداة ترجمة (l10n) من نوع "ما تراه هو ما تحصل عليه" (WYSIWYG). نستخدم بونتوون في موزيلا لترجمة جميع المنتجات و المواقع، ابتداءً من فايرفوكس إلى موقع موزيلا. يعد بونتوون أداة بسيطة جداً وبديهية والتي تتطلب مهارات قليلة غير تقنية لاستخدامها في الترجمة. هنا، سوف نناقش كيف يمكنك استخدام بونتوون لترجمة المشاريع، ابتداءً من ولوجك للموقع إلى إنهاء مساهمتك. في أثناء الشرح سنشير إلى بعض المزايا المفيدة التي ستجعل مساهمتك أكثر فعالية و سهولة.

+ +
+

هل أنت مطور؟ أقرأ حول استخدام بونتوون في مشروعك أو تعلم كيفية المساهمة في المشروع على غيت هاب.

+
+ +

الخطوات الأولى

+ +

تعد الصفحة الرئيسية لموقع بونتوون سهلة الاستخدام. لبدئ ترجمة مشروع قم بالضغط على أيقونة الشخصية في الأعلى وسجل دخولك. بعد ذلك، قم ببساطة باختيار المشروع الذي تريد العمل عليه واللغة من القوائم المسندلة. سيقوم بونتوون تلقائياً بفتح مشروع الترجمة من أجل البدئ. لاحظ أنه في حالتنا سنقوم باستخدام موقع Firefox Affiliates كعينة لإظهار وظائف وطريقة عمل بونتوون. والصورة التالية توضح شكل الموقع وهو مفتوح بداخل بونتوون:

+ +

Browser app and workspace

+ +

شريط الأدوات الرئيسي

+ +

كما ترى، الموقع الذي يتم ترجمته يملأ معظم الواجهة. فقط شريط الأدوات يخص بونتوون، والذي يحتوي العناصر التالية (من اليسار إلى اليمين):

+ +

Main toolbar

+ +

قائمة بالنصوص

+ +

لفتح شريط جانبي بقائمة فيها جميع النصوص لترجمتها.

+ +

محدد المشروع (بحالتنا Affiliates)

+ +

للتبديل بين المشاريع لترجمتها.

+ +

محدد المورد (بحالتنا الصفحة الرئيسية)

+ +

للتبديل بين موارد المشروع لترجمتها، مثل الصفحات الفرعية أو ملفات الترجمة. ويكون هذا الخيار مخفي في حالة عدم وجود موارد متوفرة للمشروع.

+ +

محدد اللغة (بحالتنا السلوفينية)

+ +

للتبديل بين اللغات للترجمة.

+ +

+ +
+
+ +

انطلاق

+ +

لتطبيق الخيارات السابقة.

+ +

مؤشر التقدم

+ +

لعرض تقدمك في المورد الذي يجري ترجمته. يتم عرض المزيد من التفاصيل في النافذة المنبثقة (عند الضغط على المؤشر).

+ +
+
+ +

قائمة المستخدم

+ +

تسمح بالقيام بمهام مخصصة بالمستخدم، مثل الإيداع إلى مستودع، وتحميل الملفات، وتسجيل الخروج.

+ +

قائمة المعلومات

+ +

تقدم معلومات مهمة، مثل الجدول الزمني المتوقع للمشروع وقائمة باختصارات لوحة المفاتيح.

+ +

حسناً، والآن كيف يمكننا القيام ببعض الترجمة؟

+ +
+
+ +
+
+ +

ترجمة النصوص

+ +

عندما تستخدم بونتوون في الترجمة، لديك بضعة خيارات لتترجم نصوصك. حيث يمكنك الترجمة من محتوى الموقع مباشرة (بالمحتوى)، أو بشريط جانبي يظهر النصوص وترجمتها (خارج المحتوى) أو يمكنك استخدام كليهما. سنبدأ بنظرة على الترجمة بالمحتوى.

+ +

الترجمة بالمحتوى

+ +

وضع الترجمة بالمحتوى الخاص ببونتوون هو عبارة عن استبدال النصوص بترجمتها. فهو يقوم بفتح صفحة ويب (أو تطبيق ويب) ويسمح بتحرير مباشر على نصوص الصفحة. هذه الصورة تظهر كيفية ترجمة نصك الأول:

+ +

In-context localization

+ +
    +
  1. قم بتحويم (تمرير) الفأرة فوق النص الذي تريد ترجمته.
    2. +
  2. سوف يظهر زر تعديل فوق النص. قم بالضغط عليه لتفعيل وضع الترجمة.
    3. +
  3. استبدل النص الأصلي بنظيره المقابل باللغتك.
    4. +
  4. قم بالضغط على زر الحفظ لحفظ ترجمتك.
    5. +
+ +
+

الترجمة خارج المحتوى

+ +

بعض النصوص من المستحيل ترجمتها بوضع الترجمة بالمحتوى، مثل محتوى الوسم <title> في الموقع. عند الضغط على أيقونة الهمبورغر (الأيقونة التي تشبه شطيرة اللحم) في قائمة الأدوات، سيتم فتح شريط جانبي يحتوي على قائمة النصوص والترجمات المتوفرة. يمكنك استخدام هذا الشريط الجانبي للترجمة بوضع خارج المحتوى:

+ +

Out-of-context localization: list Out-of-context localization: translate

+ +
    +
  1. قم بالضغط على النص الذي تريد ترجمته.        
    2. +
  2. سيفتح شريط يحتوي على النص الأصلي وتفاصيله (مثل التعليقات).
    3. +
  3. قم بترجمة النص في منطقة الترجمة أدناه.
    4. +
  4. قم بالضغط على زر الحفظ لحفظ ترجمتك.
    5. +
+ +

بينما تقوم بالترجمة بوضع الترجمة خارج المحتوى، ستظهر هذه الترجمة أيضاً في الموقع (إن كانت قابلة للترجمة بوضع المحتوى).

+ +

مساعدات الترجمة

+ +

كما ترى، الإقتراحات من السجل، وذاكرة الترجمة، والترجمة الآلية وغيرها من الترجمات (باللغات مختلفة) متوفرة في شريط الترجمة خارج المحتوى. ندعو كل ما سبق بمساعدات الترجمة وهنا سنسرد كيف ستساعدك كلاً منهم أثناء ترجمتك للنصوص:

+
+ +

Translation helpers: History Translation helpers: Machinery Translation helpers: Other locales Translation helpers: Search

+ +

السجل

+ +

يعرض الترجمات المقترحة سابقاً، متضمناً الترجمات من مستخدمين أخرين.

+ +

الآليات (تقنيات آلية)

+ +

تعرض الترجمات المتطابقة من خدمات متنوعة: ذاكرة الترجمة الداخلية، و موزيلا ترانسفيسيون، و ذاكرة الترجمة المفتوحة المصدر، و مصطلح مايكروسوفت، و مترجم آلي.

+ +

ترجمات أخرى

+ +

تعرض ترجمات متطابقة من لغات أخرى.

+ +

البحث

+ +

تشبه تقريباً الآليات، ولكنها تأخد مدخلات كمعاملات بدلاً من النص الأصلي.

+ +

بالضغط على إقتراح، سيتم نسخ النص المترجم (الذي أدخلته) إلى منطقة الترجمة.

+ +
+
+ +

نشر ترجمتك

+ +

لنفترض أنك تريد الآن نشر ترجمتك بإيداعها إلى مستودع. يوفر لك بونتوون ميزة للقيام بذلك أيضاً! في الحقيقة، إنه يقوم بهذا تلقائياً بالمزامنة مع المستودع دورياً. يمكنك الأن أن تشعر بالرضى، تقوم برقصة صغيرة، تذهب إلى النوم أو أن تفعل شيئاً أخر للاحتفال بعملك!

diff --git a/files/ar/mozilla/mobile/index.html b/files/ar/mozilla/mobile/index.html new file mode 100644 index 0000000000..669a69a9ed --- /dev/null +++ b/files/ar/mozilla/mobile/index.html @@ -0,0 +1,32 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mobile +--- +

Firefox OS

+ +

Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.

+ +

Read about how to install Firefox OS and how to develop apps for it.

+ +

Firefox for Android

+ +

Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.

+ +

Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.

+ +

Firefox for iOS

+ +

Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.

+ +

Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.

+ +

Mobile web development

+ +

Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.

+ +

Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.

diff --git a/files/ar/mozilla/mobile/viewport_meta_tag/index.html b/files/ar/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..ed8d36f6c8 --- /dev/null +++ b/files/ar/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,91 @@ +--- +title: Using the viewport meta tag to control layout on mobile browsers +slug: Mozilla/Mobile/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +

The upcoming release of Mobile Firefox (Fennec) 1.1 features improved support for the <meta name="viewport"> tag. Previous versions of Fennec supported the width, height, and initial-scale viewport properties, but had problems with some sites designed for iPhone and Android browsers. We now support the same properties Mobile Safari does, and we also changed Fennec to render mobile sites more consistently on screens of different sizes and resolutions.

+ +

touch.facebook.com before:

+ +

05-11-fennec-meta-viewport-2.png

+ +

touch.facebook.com after:

+ +

05-11-fennec-meta-viewport-1.png

+ +

You can see these changes for yourself in the latest Fennec 1.1 and trunk nightly builds for Maemo, Windows, Mac, or Linux.

+ +

Background

+ +

Mobile browsers like Fennec render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.

+ +

Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

+ +

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

+ +

Viewport basics

+ +

A typical mobile-optimized site contains something like the following:

+ +
<meta name="viewport" content="width=device-width, initial-scale=1">
+ +

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

+ +

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

+ +

A pixel is not a pixel

+ +

The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi). Because of this, the last version of Fennec displayed many pages about one third smaller (in actual, physical size) than iPhone or Android. This caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

+ +

Fennec 1.1 for Maemo will use 1.5 hardware pixels for each CSS "pixel," following the lead of Android's WebKit-based browser. This means a page with initial-scale=1 will render at close to the same physical size in Fennec for Maemo, Mobile Safari for iPhone, and the Android Browser on both HDPI and MDPI phones. This is consistent with the CSS 2.1 specification, which says:

+ +
+

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

+
+ +

For web developers, this means that 320px be full width in portrait mode at scale=1, on all of the above-mentioned handheld devices, and they may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should also make sure that your pages work well in landscape mode, and on larger devices like the iPad and Android tablets.

+ +

On 240-dpi screens, pages with initial-scale=1 will effectively be zoomed to 150% by both Fennec and Android WebKit. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at 150% of their final size (or 200%, to support 320-dpi devices such as a retina display iPhone) and then scale them down using CSS or viewport properties.

+ +

The default ratio depends on the display density.  On a display with density less than 200dpi, the ratio is 1.0.  On displays with density between 200 and 300dpi, the ratio is 1.5.  For displays with density over 300dpi, the ratio is the integer floor(density/150dpi).  Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

+ +

Viewport width and screen width

+ +

Many sites set their viewport to "width=320, initial-scale=1" to fit precisely onto the iPhone display in portrait mode. As mentioned above, this caused problems when Fennec 1.0 rendered these sites, especially in landscape mode. To fix this, Fennec 1.1 will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

+ +

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

+ +
<meta name="viewport" content="width=500, initial-scale=1">
+ +

Fennec 1.1 also adds support for minimum-scale, maximum-scale, and user-scalable, with defaults and limits similar to Safari's. These properties affect the initial scale and width, as well as limiting changes in zoom level.

+ +

Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

+ +
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+ +

This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like device-width, based on its new window dimensions.

+ +

Common viewport sizes for mobile and tablet devices

+ +

If want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Non-normatively describes the Viewport META element
+ +

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.

diff --git a/files/ar/mozilla/preferences/index.html b/files/ar/mozilla/preferences/index.html new file mode 100644 index 0000000000..4628f957cb --- /dev/null +++ b/files/ar/mozilla/preferences/index.html @@ -0,0 +1,45 @@ +--- +title: Preferences +slug: Mozilla/Preferences +translation_of: Mozilla/Preferences +--- +

The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.

+ + + + + + + +
+

Documentation

+
+
Preferences system
+
An introduction to using the preference system in Mozilla.
+
XUL School: Handling preferences
+
The XUL School tutorial chapter on preferences.
+
Mozilla preference reference
+
A reference guide to all Mozilla preferences; currently a work in progress.
+
A brief guide to Mozilla preferences
+
An introductory guide to where preferences are stored and other useful information about the core preference system.
+
Using preferences from application code {{gecko_minversion_inline("6.0")}}
+
Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.
+
Mozilla networking preferences
+
A guide to key networking-related preferences.
+
Mozilla preferences for uber-geeks
+
A guide to preferences that only truly elite geeks should play with.
+
+

View all pages tagged with "Preferences"...

+ 		+

Examples

+
+
Code snippets
+
Preference-related code snippets.
+
Adding preferences to an extension
+
How to add preferences to an existing extension.
+
+ + +
diff --git a/files/ar/mozilla/projects/index.html b/files/ar/mozilla/projects/index.html new file mode 100644 index 0000000000..d7e62c6882 --- /dev/null +++ b/files/ar/mozilla/projects/index.html @@ -0,0 +1,15 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Landing + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

Here you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.

+ +

{{ LandingPageListSubpages() }}

diff --git a/files/ar/mozilla/projects/spidermonkey/index.html b/files/ar/mozilla/projects/spidermonkey/index.html new file mode 100644 index 0000000000..f39621af26 --- /dev/null +++ b/files/ar/mozilla/projects/spidermonkey/index.html @@ -0,0 +1,115 @@ +--- +title: 'SpiderMonkey: The Mozilla JavaScript runtime' +slug: Mozilla/Projects/SpiderMonkey +tags: + - NeedsTranslation + - SpiderMonkey + - TopicStub +translation_of: Mozilla/Projects/SpiderMonkey +--- +
{{SpiderMonkeySidebar}}
+ +
+

SpiderMonkey is Mozilla's JavaScript engine written in C and C++. It is used in various Mozilla products, including Firefox, and is available under the MPL2.

+
+ +

Standalone source code releases can be found on the Releases page.

+ +
+
+

Guides

+ +

Building

+ +
+
SpiderMonkey Build Documentation
+
How to get SpiderMonkey source code, build it, and run the test suite.
+
+ +

Using SpiderMonkey

+ +
+
Introduction to the JavaScript shell
+
Documentation of the command-line JavaScript shell, js.
+
JSAPI User Guide
+
This guide provides an overview of SpiderMonkey and describes how you can embed engine calls in your applications to make them JavaScript-aware.
+
JSAPI cookbook
+
Shows the JSAPI translation of some commonly used JavaScript expressions and statements.
+
GC Rooting Guide
+
Guide on how to write code compatible with the Generational GC in SpiderMonkey.
+
How to embed the JavaScript engine
+
An older tutorial about embedding SpiderMonkey.
+
+ +

Hacking on SpiderMonkey

+ +
+
New to SpiderMonkey
+
A guide to hacking on SpiderMonkey.
+
Setting up CDT to work on SpiderMonkey
+
How to configure Eclipse to work on the SpiderMonkey code.
+
+ +
+
Running Automated JavaScript Tests
+
How to run the JavaScript test suites.
+
Creating JavaScript tests
+
How to add tests to the JavaScript test suites.
+
+
+ +
+

Reference

+ +
+
JSAPI Reference
+
SpiderMonkey API reference.
+
JS Debugger API Reference
+
API reference for the Debugger object introduced in SpiderMonkey 1.8.6, which corresponds to Gecko 8.0 {{ geckoRelease("8.0") }}.
+
Bytecode descriptions
+
Listing of SpiderMonkey's bytecodes.
+
Parser API
+
Reflection of the SpiderMonkey parser, made available as a JavaScript API.
+
+ +

Tips, tricks and philosophy

+ +
+
Future Directions
+
Future directions for functionality, design, and coding practices.
+
SpiderMonkey Internals
+
A design overview and a file-by-file walkthrough of the implementation.
+
Bytecode Reference
+
SpiderMonkey bytecode reference.
+
SpiderMonkey Internals: GC
+
Separate internals article on the GC
+
SpiderMonkey Internals: Hacking Tips
+
Collection of helpful tips & tools for hacking on the engine
+
+ + + + + +

Releases

+ +
+
SpiderMonkey release notes
+
Current and past versions: 52, 45, 38, 31, 24, 17
+
+ +

Community

+ + + +
+
+
+
diff --git a/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html b/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html new file mode 100644 index 0000000000..80998587aa --- /dev/null +++ b/files/ar/mozilla/projects/spidermonkey/introduction_to_the_javascript_shell/index.html @@ -0,0 +1,373 @@ +--- +title: Introduction to the JavaScript shell +slug: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell +translation_of: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell +--- +
{{SpiderMonkeySidebar ("عام")}}
+ +
+

و جافا سكريبت قذيفة ( js) هو برنامج سطر الأوامر المدرجة في سبايدر مونكي توزيع المصدر. إنه مكافئ جافا سكريبت لموجه Python التفاعلي ، أو حلقة Lisp للقراءة والتقييم والطباعة ، أو Ruby's irb. تشرح هذه المقالة كيفية استخدام الصدفة لتجربة كود JavaScript وتشغيل برامج JavaScript.

+
+ +

للحصول على SpiderMonkey JavaScript shell ، راجع  SpiderMonkey Build Documentation  أو قم بتنزيل ملف ثنائي مترجم لمنصتك من Nightly Builds .

+ +

للحصول على قائمة بأغلفة JavaScript الأخرى ، راجع قذائف JavaScript .

+ +
+

ملاحظة: بدءًا من SpiderMonkey 44 {{geckoRelease (44)}} ، يتم استخدام إصدار JavaScript القياسي المتوافق مع الويب افتراضيًا (وليس JS1.7 + بعد الآن). و version()قذيفة المضمن لا يزال هناك لاختبار الميزات القديمة.

+
+ +

تشغيل قشرة JavaScript

+ +

تقدم القذيفة وضعين للتشغيل. يمكنك استخدامه كصدفة تفاعلية ، حيث تكتب رمز JavaScript في الحال وتحصل على إشباع فوري ، وهو مفيد لتجربة الميزات الجديدة أو اختبارها. يمكنك أيضًا تمرير ملف برنامج JavaScript في سطر الأوامر ليتم تشغيله ، وفي هذه الحالة يتم تشغيل البرنامج تلقائيًا.

+ +

بعد اتباع وثائق الإنشاء وتثبيت الغلاف المدمج باستخدام إجراء التثبيت ، يمكنك تشغيل الصدفة في الوضع التفاعلي باستخدام الأمر:

+ +
شبيبة
+
+ +

[إذا حصلت على "خطأ في البحث عن الرمز: ./js: رمز غير محدد: PR_SetCurrentThreadName" على سبيل المثال من وحدة تحكم Bash عند استخدام برنامج ثنائي تم تجميعه مسبقًا ، جرب <path to your Firefox's run-mozilla.sh> /run-mozilla.sh. / js - لقد نجحت معي]

+ +

إذا كنت ترغب في تشغيل كود JavaScript في الملف foo.js، يمكنك استخدام هذا الأمر:

+ +
js foo.js
+
+ +

للتشغيل foo.jsثم الإسقاط في الغلاف التفاعلي ، قم بما يلي:

+ +
js -f foo.js -i
+
+ +

مرجع

+ +
ملاحظة: نظرًا لاستخدام JavaScript shell كبيئة اختبار لمحرك JavaScript ، يمكن أن تتغير الخيارات المتاحة والوظائف المضمنة بمرور الوقت.
+ +

خيارات سطر الأوامر

+ +

هناك عدد من خيارات سطر الأوامر التي يمكنك تحديدها للتحكم في الغلاف. هذه ملخصة أدناه. تأكد من استخدام -h مع jsshell الخاص بك لمعرفة ما إذا كان هناك أي شيء غير موثق.

+ +
+
-c, --compileonly
+
يخبر الغلاف بتجميع البرنامج ولكن لا يقوم بتشغيله. هذه طريقة مناسبة للتحقق بسرعة من أخطاء بناء الجملة في برنامجك دون تشغيله فعليًا.
+
-e script
+
يقوم بتشغيل البرنامج النصي المحدد ، وهو سلسلة حرفية تحتوي على الكود المطلوب تنفيذه.
+
-f filename
+
يقوم بتشغيل برنامج JavaScript المحدد بواسطة اسم الملف .
+
-i
+
تمكن الوضع التفاعلي. (افتراضي إذا لم يتم توفير اسم ملف.)
+
--no-ion
+
تعطيل برنامج التحويل البرمجي الأمثل JIT.
+
--no-baseline
+
تعطيل مترجم JIT الأساسي.
+
-P
+
إذا كان السطر الأول من الملف هو "/ usr / bin / env js -P" ، فسيتم تفسير محتوى الملف بواسطة محرك JavaScript.
+
يمكّنك هذا من إنشاء ملف JavaScript قابل للتنفيذ على أجهزة unix و OS X.
+
-s
+
لتمكين وضع التحذير الصارم.
+
-w, --warnings
+
تمكن رسائل التحذير.
+
-W، - المعلومات
+
تعطيل رسائل التحذير.
+
+ +

خيارات البيئة

+ +

هناك بعض متغيرات البيئة التي يمكن ضبطها لتغيير سلوك js shell.

+ +
+
JS_STDOUT=file
+
إعادة توجيه stdout إلى ملف .
+
JS_STDERR=file
+
إعادة توجيه stderr إلى ملف .
+
+ +

وظائف مدمجة

+ +

لجعل JavaScript shell أكثر فائدة ، هناك عدد من الوظائف المضمنة بشرط أن يمكنك استخدامها إما من برامج JavaScript أو في الوضع التفاعلي.

+ +
+

ملاحظة : هذه القائمة غير مكتملة وتتداخل مع كائنات شل العامة . راجع {{Source ("js / src / shell / js.cpp")}} (حول shell_functions) للمزيد.

+
+ +

build()

+ +

لعرض التاريخ والوقت اللذين تم فيهما إنشاء غلاف JavaScript.

+ +
ملاحظة: clear() بدون أي معلمات يزيل كل شيء حقًا. وهذا يشمل كل هذه الوظائف المدمجة.
+ +

clone(function, [scope])

+ +

استنساخ كائن الوظيفة المحدد . إذا لم يتم تحديد النطاق ، فسيكون الكائن الرئيسي الجديد هو نفسه الكائن الأصلي. خلاف ذلك ، يتم وضع الكائن الجديد في نطاق الكائن المحدد بواسطة النطاق .

+ +

countHeap([start[, kind]])

+ +

{{jsapi_minversion_inline ("1.8")}} احسب عدد أشياء GC الحية في الكومة ، أو الأشياء التي يمكن الوصول إليها من البداية عندما يتم تقديمها وليست فارغة. النوع هو إما 'all'(افتراضي) لعد كل الأشياء أو واحد من 'object'، 'double'، 'string'، 'function'، 'qname'، 'namespace'، 'xml'لحساب الأشياء من هذا النوع فقط.

+ +

dumpHeap([fileName[, start[, toFind[, maxDepth[, toIgnore]]]]])

+ +

{{jsapi_minversion_inline ("1.8")}} تفريغ الرسم البياني لجميع الكائنات الموجودة (أو رسم فرعي محدد مثير للاهتمام) إلى ملف. لمزيد من المعلومات ، راجع إصدار C / C ++ من هذه الوظيفة ، JS_DumpHeap.

+ +

evalcx(string[, object])

+ +

يقيم كود JavaScript في السلسلة . إذا تم تحديد الكائن ، فسيتم تنفيذ الكود في هذا الكائن ، ومعاملته كصندوق حماية.

+ +

إذا كانت السلسلة فارغة ولم يتم تحديد الكائن ، يتم evalcx()إرجاع كائن جديد بفئات قياسية متلهفة.

+ +

إذا كانت السلسلة "lazy" ولم يتم تحديد الكائن ، يتم evalcx()إرجاع كائن جديد بفئات قياسية كسولة.

+ +
ملاحظة: evalcx() هذا مفيد فقط للأشخاص الذين يقومون بعمل داخلي عميق على محرك JavaScript ، evalInSandboxلبيئات تشبه الاختبار في الغلاف.
+ +

gc()

+ +

يدير جامع القمامة لتحرير الذاكرة.

+ +

gcparam(name[, value])

+ +

{{jsapi_minversion_inline ("1.8")}} قراءة أو تهيئة معلمات أداة تجميع البيانات المهملة.

+ +

و اسم يجب أن يكون واحدا من مفاتيح المعلمة (مثل 'maxBytes'، 'maxMallocBytes'أو ' gcNumber') حددها FOR_EACH_GC_PARAMفي https://searchfox.org/mozilla-central/source/js/src/builtin/TestingFunctions.cpp#464 .

+ +

إذا لم يتم تحديد القيمة ، يتم gcparam()إرجاع القيمة الحالية المرتبطة بمعلمة GC المسماة بالاسم .

+ +

إذا تم تحديد القيمة ، يجب أن تكون قابلة للتحويل إلى uint32 موجب ؛ gcparam()يحدد اسم معلمة GC إلى قيمة .

+ +

لمزيد من المعلومات ، راجع دالات C / C ++  JS_GetGCParameterو JS_SetGCParameter.

+ +

gczeal(level)

+ +

{{jsapi_minversion_inline ("1.8")}} DEBUGفقط. اضبط مستوى حماسة GC ، ميزة تصحيح الأخطاء. يمكن أن يكون هذا 0 لجمع القمامة الدورية العادية ، أو 1 لـ GC المتكرر للغاية ، أو 2 لـ GC المتكرر للغاية . أي شيء بخلاف 0 سيجعل JavaScript يعمل ببطء شديد ولكنه قد يساعد في الكشف عن الأخطاء المتعلقة بـ GC أو إعادة إنتاجها. لمزيد من المعلومات ، راجع إصدار C / C ++ من هذه الوظيفة ، JS_SetGCZeal.

+ +

getpda(object)

+ +

إرجاع واصفات الخصائص للكائن المحدد .

+ +

getslx(object)

+ +

Returns the script line extent, which is the number of lines of code comprising the specified object.

+ +

help([command ...])

+ +

Displays brief help information about the specified commands, or about all available functions if none are specified.

+ +

intern(string)

+ +

Internalizes the specified string into the atom table. Every string has a unique identifier, called an atom. This system makes it easier to do comparisons between strings.

+ +
Note: This function is intended only for use when testing the JavaScript engine.
+ +

line2pc([function, ] line)

+ +

Returns the program counter value corresponding to the specified line of code. If function is specified, line is an offset into the specified function.

+ +

load(filename1 [filename])

+ +

Loads the JavaScript files with the specified names.

+ +
Note: For loading non-JavaScript files, use read().
+ +

options([option ...])

+ +

Lets you set or get options. If you specified options on the command line, the results of calling options will indicate which options you requested. You can also pass in new options to set.

+ +

The available options are:

+ + + + + + + + + + + + + + + + + + + + +
Option NameDescription
strictStrict mode is enabled.
werrorWarnings should be treated as errors.
atlineWhen atline is enabled, comments of the form //@line num set the number of the following line to num.
+ +

pc2line(function, [pc])

+ +

Returns the line number of the JavaScript code that corresponds to the first line of the specified function. If you specify a program counter offset into the function, the line number of the line of code containing that offset is returned.

+ +

print([expression ...])

+ +

Evaluates the expression(s) and displays the result(s) on stdout, separated by spaces (" ") and terminated by a newline ("\n").

+ +

putstr(expression)

+ +

Evaluates the expression and displays the result on stdout.

+ +

quit([status])

+ +

Exits the shell. status defaults to 0 if omitted.

+ +

read(filename[, type])

+ +

Reads and returns the contents of file. If type is "binary" returns an Uint8Array, otherwise returns an UTF-8 decoded string.

+ +

readline()

+ +

Reads a single line of input from stdin, returning it to the caller. You can use this to create interactive shell programs in JavaScript.

+ +

Reflect.parse()

+ +

See Parser API.

+ +
Note: This function is intended only for use when testing the JavaScript engine.
+ +

seal(object[, deep])

+ +

Seals the specified object, or an object graph if deep is true. By sealing an object or object graph, you disable modification of those objects.

+ +

sleep(dt)

+ +

{{ jsapi_minversion_inline("1.8") }} Only in JS_THREADSAFE builds. Sleep for dt seconds. Fractions of a second are supported. Returns true on success, false if the sleep was interrupted.

+ +

stackQuota([number]) {{obsolete_inline}}

+ +

Get or set the script stack quota.

+ +

throwError()

+ +

Throws an error from the JS_ReportError() function.

+ +
Note: This function is intended only for use when testing the JavaScript engine.
+ +

trap([function, [pc,]] expression)

+ +

Sets a trap at the specific point in the JavaScript code. When the bytecode at the offset specified by pc in the function function is about to be executed, the expression is evaluated.

+ +

This is a powerful debugging mechanism when used in concert with line2pc(). For example, if you want to display a message when line 6 of a function, doSomething() is executed, you can enter the following:

+ +
trap(doSomething, line2pc(doSomething, 6), "print('line 6!\n')");
+
+ +
Note: When a trap is set, the corresponding bytecode in the program is replaced with a trap bytecode until you use untrap() to remove the trap.
+ +

untrap(function [, pc])

+ +

Removes a trap from the specified function at the offset pc. If pc isn't specified, the trap is removed from the function's entry point.

+ +

This function has no effect if there is no trap at the specified location.

+ +

version([number])

+ +

The version() function lets you get or set the JavaScript version number. This may be useful for gaining access to syntax only available in certain versions of JavaScript (for example, see Using JavaScript 1.7).

+ +

Debug functions

+ +

These built-in functions are only available in DEBUG builds.

+ +

dis([function])

+ +

Disassembles the JavaScript bytecode for the entire program, or for the specified function.

+ +

For example, if you enter the JavaScript function below:

+ +
function test() {
+  var i = 3;
+  print(i+2);
+}
+
+ +

Then run the command dis(test);, you get this output:

+ +
main:
+00000:  uint16 3
+00003:  setvar 0
+00006:  pop
+00007:  name "print"
+00010:  pushobj
+00011:  getvar 0
+00014:  uint16 2
+00017:  add
+00018:  call 1
+00021:  pop
+00022:  stop
+
+Source notes:
+  0:     0 [   0] newline
+  1:     3 [   3] decl     offset 0
+  2:     7 [   4] newline
+  3:    18 [  11] xdelta
+  4:    18 [   0] pcbase   offset 11
+
+ +

dissrc([function])

+ +

Disassembles the JavaScript bytecode for the entire program, or for the specified function, showing the source lines. This function only works with programs loaded from files, either using the -f flag on launching the shell, or by using the load() function.

+ +

If your program includes a function, doStuff(), like this:

+ +
function doStuff(input) {
+	print("Enter a number: ");
+	var n1 = readline();
+	print("Enter another one: ");
+	var n2 = readline();
+
+	print("You entered " + n1 + " and " + n2 + "\n");
+}
+
+ +

Calling dissrc(doStuff) function would give this output:

+ +
;-------------------------  10:         print("Enter a number: ");
+00000:  10  name "print"
+00003:  10  pushobj
+00004:  10  string "Enter a number: "
+00007:  10  call 1
+00010:  10  pop
+;-------------------------  11:         var n1 = readline();
+00011:  11  name "readline"
+00014:  11  pushobj
+00015:  11  call 0
+00018:  11  setvar 0
+00021:  11  pop
+;-------------------------  12:         print("Enter another one: ");
+00022:  12  name "print"
+00025:  12  pushobj
+00026:  12  string "Enter another one: "
+00029:  12  call 1
+00032:  12  pop
+;-------------------------  13:         var n2 = readline();
+00033:  13  name "readline"
+00036:  13  pushobj
+00037:  13  call 0
+00040:  13  setvar 1
+00043:  13  pop
+;-------------------------  14:
+;-------------------------  15:         print("You entered " + n1 + " and " + n2 + "\n");
+00044:  15  name "print"
+00047:  15  pushobj
+00048:  15  string "You entered "
+00051:  15  getvar 0
+00054:  15  add
+00055:  15  string " and "
+00058:  15  add
+00059:  15  getvar 1
+00062:  15  add
+00063:  15  string "\\n"
+00066:  15  add
+00067:  15  call 1
+00070:  15  pop
+00071:  15  stop
+
+ +

dumpheap(([fileName[, start[, toFind[, maxDepth[, toIgnore]]]]])

+ +

Dump GC information. This is a thin wrapper for JS_DumpHeap.

+ +

gczeal(zeal)

+ +

قم بتمكين GC المتكرر للمساعدة في العثور على مخاطر GC. الحماسة عدد صحيح. المعنى هو نفسه بالنسبة للمعلمة JS_SetGCZeal.

+ +

notes([function])

+ +

يظهر ملاحظات المصدر للوظيفة المحددة. تحتوي ملاحظات المصدر على معلومات تقوم بتعيين الرمز الثانوي إلى الكود المصدري ، والذي يتم استخدامه عند فك الشفرة ، مثل عند استخدام dissrc()الوظيفة.

diff --git a/files/ar/mozilla/tech/index.html b/files/ar/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/ar/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +

Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).

+

{{LandingPageListSubpages}}

-- cgit v1.2.3-54-g00ecf