inspector.xhtml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- This Source Code Form is subject to the terms of the Mozilla Public
  3. - License, v. 2.0. If a copy of the MPL was not distributed with this
  4. - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
  5. <!DOCTYPE html>
  6. <html xmlns="http://www.w3.org/1999/xhtml" dir="">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  9. <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
  10. <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
  11. <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
  12. <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
  13. <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
  14. <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
  15. <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
  16. <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
  17. <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>
  18. <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
  19. <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
  20. <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/>
  21. <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
  22. <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
  23. <script type="application/javascript;version=1.8"
  24. src="chrome://devtools/content/shared/theme-switching.js"></script>
  25. <script type="application/javascript;version=1.8" src="inspector.js" defer="true"></script>
  26. </head>
  27. <body class="theme-body" role="application">
  28. <div class="inspector-responsive-container theme-body inspector">
  29. <!-- Main Panel Content -->
  30. <div id="inspector-main-content" class="devtools-main-content">
  31. <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
  32. data-localization-bundle="devtools/client/locales/inspector.properties">
  33. <button id="inspector-element-add-button" class="devtools-button"
  34. data-localization="title=inspectorAddNode.label"></button>
  35. <div class="devtools-toolbar-spacer"></div>
  36. <span id="inspector-searchlabel"></span>
  37. <div id="inspector-search" class="devtools-searchbox has-clear-btn">
  38. <input id="inspector-searchbox" class="devtools-searchinput"
  39. type="search"
  40. data-localization="placeholder=inspectorSearchHTML.label3"/>
  41. <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
  42. </div>
  43. <button id="inspector-eyedropper-toggle"
  44. class="devtools-button command-button-invertable"></button>
  45. <div id="inspector-sidebar-toggle-box"></div>
  46. </div>
  47. <div id="markup-box"></div>
  48. <div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
  49. <div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
  50. role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
  51. </div>
  52. </div>
  53. <!-- Splitter -->
  54. <div
  55. xmlns="http://www.w3.org/1999/xhtml"
  56. id="inspector-splitter-box">
  57. </div>
  58. <!-- Sidebar Container -->
  59. <div id="inspector-sidebar-container">
  60. <div
  61. xmlns="http://www.w3.org/1999/xhtml"
  62. id="inspector-sidebar"
  63. hidden="true"></div>
  64. </div>
  65. <!-- Sidebar panel definitions -->
  66. <div id="tabpanels" style="visibility:collapse">
  67. <div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel"
  68. data-localization-bundle="devtools/client/locales/inspector.properties">
  69. <div id="ruleview-toolbar-container" class="devtools-toolbar">
  70. <div id="ruleview-toolbar">
  71. <div class="devtools-searchbox has-clear-btn">
  72. <input id="ruleview-searchbox"
  73. class="devtools-filterinput devtools-rule-searchbox"
  74. type="search"
  75. data-localization="placeholder=inspector.filterStyles.placeholder"/>
  76. <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
  77. </div>
  78. <div id="ruleview-command-toolbar">
  79. <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
  80. <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
  81. </div>
  82. </div>
  83. <div id="pseudo-class-panel" hidden="true">
  84. <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
  85. <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
  86. <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
  87. </div>
  88. </div>
  89. <div id="ruleview-container" class="ruleview">
  90. <div id="ruleview-container-focusable" tabindex="-1">
  91. </div>
  92. </div>
  93. </div>
  94. <div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel"
  95. data-localization-bundle="devtools/client/locales/inspector.properties">
  96. <div id="computedview-toolbar" class="devtools-toolbar">
  97. <div class="devtools-searchbox has-clear-btn">
  98. <input id="computedview-searchbox"
  99. class="devtools-filterinput devtools-rule-searchbox"
  100. type="search"
  101. data-localization="placeholder=inspector.filterStyles.placeholder"/>
  102. <button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
  103. </div>
  104. <input id="browser-style-checkbox"
  105. type="checkbox"
  106. class="includebrowserstyles"/>
  107. <label id="browser-style-checkbox-label" for="browser-style-checkbox"
  108. data-localization="content=inspector.browserStyles.label"></label>
  109. </div>
  110. <div id="computedview-container">
  111. <div id="computedview-container-focusable" tabindex="-1">
  112. <div id="boxmodel-wrapper" tabindex="0"
  113. data-localization-bundle="devtools/client/locales/boxmodel.properties">
  114. <div id="boxmodel-header">
  115. <div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></div>
  116. <span data-localization="content=boxmodel.title"></span>
  117. </div>
  118. <div id="boxmodel-container">
  119. <div id="boxmodel-main">
  120. <span class="boxmodel-legend" data-box="margin" data-localization="content=boxmodel.margin;title=boxmodel.margin"></span>
  121. <div id="boxmodel-margins" data-box="margin" data-localization="title=boxmodel.margin">
  122. <span class="boxmodel-legend" data-box="border" data-localization="content=boxmodel.border;title=boxmodel.border"></span>
  123. <div id="boxmodel-borders" data-box="border" data-localization="title=boxmodel.border">
  124. <span class="boxmodel-legend" data-box="padding" data-localization="content=boxmodel.padding;title=boxmodel.padding"></span>
  125. <div id="boxmodel-padding" data-box="padding" data-localization="title=boxmodel.padding">
  126. <div id="boxmodel-content" data-box="content" data-localization="title=boxmodel.content">
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <p class="boxmodel-margin boxmodel-top"><span data-box="margin" class="boxmodel-editable" title="margin-top"></span></p>
  132. <p class="boxmodel-margin boxmodel-right"><span data-box="margin" class="boxmodel-editable" title="margin-right"></span></p>
  133. <p class="boxmodel-margin boxmodel-bottom"><span data-box="margin" class="boxmodel-editable" title="margin-bottom"></span></p>
  134. <p class="boxmodel-margin boxmodel-left"><span data-box="margin" class="boxmodel-editable" title="margin-left"></span></p>
  135. <p class="boxmodel-border boxmodel-top"><span data-box="border" class="boxmodel-editable" title="border-top"></span></p>
  136. <p class="boxmodel-border boxmodel-right"><span data-box="border" class="boxmodel-editable" title="border-right"></span></p>
  137. <p class="boxmodel-border boxmodel-bottom"><span data-box="border" class="boxmodel-editable" title="border-bottom"></span></p>
  138. <p class="boxmodel-border boxmodel-left"><span data-box="border" class="boxmodel-editable" title="border-left"></span></p>
  139. <p class="boxmodel-padding boxmodel-top"><span data-box="padding" class="boxmodel-editable" title="padding-top"></span></p>
  140. <p class="boxmodel-padding boxmodel-right"><span data-box="padding" class="boxmodel-editable" title="padding-right"></span></p>
  141. <p class="boxmodel-padding boxmodel-bottom"><span data-box="padding" class="boxmodel-editable" title="padding-bottom"></span></p>
  142. <p class="boxmodel-padding boxmodel-left"><span data-box="padding" class="boxmodel-editable" title="padding-left"></span></p>
  143. <p class="boxmodel-size">
  144. <span data-box="content" data-localization="title=boxmodel.content"></span>
  145. </p>
  146. </div>
  147. <div id="boxmodel-info">
  148. <span id="boxmodel-element-size"></span>
  149. <section id="boxmodel-position-group">
  150. <button class="devtools-button" id="layout-geometry-editor"
  151. data-localization="title=boxmodel.geometryButton.tooltip"></button>
  152. <span id="boxmodel-element-position"></span>
  153. </section>
  154. </div>
  155. <div style="display: none">
  156. <p id="boxmodel-dummy"></p>
  157. </div>
  158. </div>
  159. </div>
  160. <div id="propertyContainer" class="theme-separator" tabindex="0">
  161. </div>
  162. <div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
  163. </div>
  164. </div>
  165. </div>
  166. <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
  167. data-localization-bundle="devtools/client/locales/font-inspector.properties">
  168. <div class="devtools-toolbar">
  169. <div class="devtools-searchbox">
  170. <input id="font-preview-text-input" class="devtools-textinput" type="search"
  171. data-localization="placeholder=fontinspector.previewText"/>
  172. </div>
  173. <label id="font-showall" class="theme-link"
  174. data-localization="content=fontinspector.seeAll;
  175. title=fontinspector.seeAll.tooltip"></label>
  176. </div>
  177. <div id="font-container">
  178. <ul id="all-fonts"></ul>
  179. </div>
  180. <div id="font-template">
  181. <section class="font">
  182. <div class="font-preview-container">
  183. <img class="font-preview"></img>
  184. </div>
  185. <div class="font-info">
  186. <h1 class="font-name"></h1>
  187. <span class="font-is-local" data-localization="content=fontinspector.system"></span>
  188. <span class="font-is-remote" data-localization="content=fontinspector.remote"></span>
  189. <p class="font-format-url">
  190. <input readonly="readonly" class="font-url"></input>
  191. <span class="font-format"></span>
  192. </p>
  193. <p class="font-css">
  194. <span data-localization="content=fontinspector.usedAs"></span> "<span class="font-css-name"></span>"
  195. </p>
  196. <pre class="font-css-code"></pre>
  197. </div>
  198. </section>
  199. </div>
  200. </div>
  201. <div id="sidebar-panel-animationinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
  202. <iframe class="devtools-inspector-tab-frame"></iframe>
  203. </div>
  204. </div>
  205. </div>
  206. </body>
  207. </html>