tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

no-browser-refs-in-toolkit.rst (2805B)

      1 ==========================
      2 no-browser-refs-in-toolkit
      3 ==========================
      4 
      5 This rule prevents toolkit code from importing browser-specific CSS or SVG files.
      6 It is applied to both ``@import`` statements and CSS property values using the ``url`` function.
      7 
      8 This ensures that toolkit code remains independent and can be used in other applications/contexts
      9 where browser code is not necessarily available. Browser code can depend on toolkit code, but toolkit
     10 code should never depend on browser code, since toolkit code can be used in
     11 other applications/contexts where browser code may not be available.
     12 
     13 See additional documentation for more information on `internal URLs </toolkit/internal-urls.html>`_.
     14 
     15 Rule Scope
     16 ----------
     17 
     18 This rule only applies to CSS files within the ``toolkit/`` directory. It is
     19 configured as an override in the stylelint configuration to target only
     20 ``toolkit/**/*.css`` files.
     21 
     22 Examples of incorrect usage for this rule:
     23 ------------------------------------------
     24 
     25 Incorrect usage of ``@import`` statements:
     26 
     27 .. code-block:: css
     28 
     29  @import "chrome://browser/skin/example-file.css";
     30 
     31 .. code-block:: css
     32 
     33  @import url("chrome://browser/skin/example-file.css");
     34 
     35 .. code-block:: css
     36 
     37  @import "resource:///modules/example-file.css";
     38 
     39 .. code-block:: css
     40 
     41  @import url("resource:///modules/example-file.css");
     42 
     43 .. code-block:: css
     44 
     45  @import "resource://app/modules/example-file.css";
     46 
     47 .. code-block:: css
     48 
     49  @import url("resource://app/modules/example-file.css");
     50 
     51 .. code-block:: css
     52 
     53  @import "moz-src:///browser/example-file.css";
     54 
     55 .. code-block:: css
     56 
     57  @import url("moz-src:///browser/example-file.css");
     58 
     59 Incorrect usage of property values:
     60 
     61 .. code-block:: css
     62 
     63  .background-image {
     64    background-image: url("chrome://browser/skin/example-file.svg");
     65  }
     66 
     67 .. code-block:: css
     68 
     69  .background-image {
     70    background: url("moz-src:///browser/example-file.svg");
     71  }
     72 
     73 .. code-block:: css
     74 
     75  .background-image {
     76    background: url("moz-src://foo/browser/example-file.svg");
     77  }
     78 
     79 Examples of correct usage for this rule:
     80 ----------------------------------------
     81 
     82 Correct usage of ``@import`` statements:
     83 
     84 .. code-block:: css
     85 
     86  @import "chrome://global/skin/example-file.css";
     87 
     88 .. code-block:: css
     89 
     90  @import url("chrome://global/skin/example-file.css");
     91 
     92 .. code-block:: css
     93 
     94  @import "example-file.css";
     95 
     96 .. code-block:: css
     97 
     98  @import url("example-file.css");
     99 
    100 .. code-block:: css
    101 
    102  @import "resource://content-accessible/example-file.css"
    103 
    104 .. code-block:: css
    105 
    106  @import url("resource://content-accessible/example-file.css");
    107 
    108 Correct usage of property values:
    109 
    110 .. code-block:: css
    111 
    112  .background-image {
    113    background: url("chrome://global/skin/example-file.svg");
    114  }
    115 
    116 .. code-block:: css
    117 
    118  .background-image {
    119    background: url("example-file.svg");
    120  }