devtools/docs/user/3d_view/index.rst

   1 =======
   2 3D view
   3 =======
   4
   5 .. warning::
   6
   7    From Firefox 47 onwards, 3D view is no longer available.
   8
   9 When you click on the 3D view button, the page goes into 3D view mode; in this mode, you can see your page presented in a 3D view in which nested blocks of HTML are increasingly "tall," projecting outward from the bottom of the page. This view makes it easy to visualize the nesting of your content.
  10
  11 .. image:: 3dview.png
  12   :class: center
  13
  14 By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the :doc:`HTML panel <page_inspector_ui_tour_html_pane>` or the :doc:`Style panel <page_inspector_ui_tour_rules_view>`. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.
  15
  16 If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the `blocklisted drivers page <https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers>`_ for more information.
  17
  18
  19 Controlling the 3D view
  20 ***********************
  21
  22 There are keyboard shortcuts and mouse controls available for the 3D view.
  23
  24 .. list-table::
  25   :widths: 20 20 60
  26   :header-rows: 1
  27
  28   * - Function
  29     - Keyboard
  30     - Mouse
  31
  32   * - Zoom in/out
  33     - :kbd:`+` / :kbd:`-`
  34     - Scroll wheel up/down
  35
  36   * - Rotate left/right
  37     - :kbd:`a` / :kbd:`d`
  38     - Mouse left/right
  39
  40   * - Rotate up/down
  41     - :kbd:`w` / :kbd:`s`
  42     - Mouse up/down
  43
  44   * - Pan left/right
  45     - :kbd:`←` / :kbd:`→`
  46     - Mouse left/right
  47
  48   * - Pan up/down
  49     - :kbd:`↑` / :kbd:`↓`
  50     - Mouse up/down
  51
  52   * - Reset zoom level
  53     - :kbd:`0`
  54     - Resets the zoom level to the default
  55
  56   * - Focus on selected node
  57     - :kbd:`f`
  58     - Makes sure the currently selected node is visible
  59
  60   * - Reset view
  61     - :kbd:`r`
  62     - Resets zoom, rotation, and panning to the default
  63
  64   * - Hide current node
  65     - :kbd:`x`
  66     - Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured
  67
  68
  69 Use cases for the 3D view
  70 *************************
  71
  72 There are a variety of ways the 3D view is useful:
  73
  74
  75 - If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.
  76 - If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.
  77 - You can get a look at how your page is structured to see if there may be ways to optimize your layout.
  78 - And, of course, it looks **awesome**.
  79
  80
  81 See also
  82 ********
  83
  84 - :doc:`Page Inspector <../page_inspector/index>`
  85 - :ref:`HTML panel <page_inspector_ui_tour_html_pane>`
  86 - :ref:`Style panel <page_inspector_ui_tour_rules_view>`
  87 - :doc:`Tools <../index>`
  88 - `New Developer Tools in Firefox 11 Aurora <https://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora>`_ (blog post)