Bug 1737573 - [devtools] Migrate MDN docs into Sphinx (connect docs to toc + css) r=nchevobbe,ahal

Differential Revision: https://phabricator.services.mozilla.com/D129798

devtools/docs/contributor/index.rst

@@ -1,3 +1,6 @@
+.. toctree::
+   :name: devtools-contributor-doc
+
 =================================
 Firefox DevTools Contributor Docs
 =================================

devtools/docs/user/index.rst

@@ -1,6 +1,9 @@
-=================================
-Firefox Developer Tools User Docs
-=================================
+.. toctree::
+   :name: devtools-user-doc
+
+==========================
+Firefox DevTools User Docs
+==========================
 
 Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
 
@@ -259,3 +262,6 @@ If you want to help improve the developer tools, these resources will get you st
 
    * - `bugs.firefox-dev.tools <https://bugs.firefox-dev.tools/>`_
      - A tool helping to find bugs to work on.
+
+   * - :ref:`Read source docs <devtools-contributor-doc>`
+     - Firefox DevTools source code documentation.

devtools/moz.build

@@ -50,3 +50,4 @@ with Files("docs/tools/inspector-panel.md"):
     BUG_COMPONENT = ("DevTools", "Inspector")
 
 SPHINX_TREES["/devtools"] = "docs/contributor"
+SPHINX_TREES["/devtools-user"] = "docs/user"

docs/_static/custom_theme.css

@@ -31,3 +31,41 @@ span.strikethrough {
 .matcher-cookbook td {
     white-space: break-spaces !important;
 }
+
+.wy-table-responsive table td, .wy-table-responsive table th {
+    white-space: normal;
+}
+
+img.center {
+    display: block;
+    margin: auto;
+}
+
+img.border {
+    border: 1px solid black;
+    display: block;
+    margin: auto;
+}
+
+.center {
+    text-align: center;
+}
+
+/* Keyboard shortcuts styling */
+kbd {
+    background: linear-gradient(180deg,#f4f4f4,#d5d5d5);
+    background-color: #f4f4f4;
+    border: 1px solid #d5d5d5;
+    border-radius: 6px;
+    font-family: consolas,"Liberation Mono",courier,monospace;
+    font-size: .9rem;
+    font-weight: 700;
+    line-height: 2.3;
+    margin: 3px;
+    padding: 4px 6px 1px 6px;
+    white-space: nowrap;
+}
+
+table.docutils {
+    width: 100%;
+}

docs/config.yml

@@ -8,6 +8,8 @@ categories:
     contributing_doc:
         - contributing
         - bug-mgmt
+    user_guide:
+        - devtools-user
     source_doc:
         - browser
         - dom

docs/contributing/directory_structure.rst

@@ -97,7 +97,7 @@ etc.
 devtools
 --------
 
-The `Firefox Developer Tools <https://developer.mozilla.org/docs/Tools>`__ server and client components.
+The Firefox Developer Tools server and client components. See :ref:`contributor <devtools-contributor-doc>` and :ref:`user <devtools-user-doc>` documentation.
 
 
 docs

docs/index.rst

@@ -14,6 +14,12 @@ Firefox Source Tree Documentation
 
    {contributing_doc}
 
+.. toctree::
+   :caption: Firefox User Guide
+   :maxdepth: 2
+
+   {user_guide}
+
 .. toctree::
    :caption: Source Code Documentation
    :maxdepth: 2