DevTools/Features/Highlighter: Difference between revisions

DevTools/Features/Highlighter (view source)

Revision as of 18:51, 27 September 2011

289 bytes added , 27 September 2011

no edit summary

Kdangoor

canmove, Confirmed users, Bureaucrats and Sysops emeriti

1,093

edits

@@ Line 46: / Line 46: @@
 ==== Terminology ====
-The tool that lets you visually select an element on that page for use by "element-centric" tools (such as the Style Inspector) is called the Highlighter. It has a menu item on the Mac at Tools->Web Developer->Highlighter and on Windows at Firefox->Web Developer->Highlighter. You can also get to it via a "Highlight Element" context menu item.
+'''Note''': this terminology has changed from the original design of this feature. The tool that is used to dive into a page is called the "Page Inspector" or just the Inspector. If we refer to the "Highlighter" that is just the part of the Page Inspector that visually shows the selected page element.
-The Highlighter has two modes:
+The tool that lets you visually select an element on that page for use by "element-centric" tools (such as the Style Inspector) is called the Page Inspector or just Inspector. It has a menu item on the Mac at Tools->Web Developer->Inspect and on Windows at Firefox->Web Developer->Inspect. You can also get to it via a "Inspect Element" context menu item.
-* Highlight mode – as you move the mouse around, the highlight follows until you click a page element
+The Inspector has two modes:
+* Inspection mode – as you move the mouse around, the highlight follows until you click a page element
 * Selected mode – an element is selected and you can freely move the mouse around without changing the selection
-The Highlighter Toolbar has a button, labeled "Highlight" that switches between the Highlight and Selected modes.
+The Inspector Toolbar has a button, labeled "Inspect" that switches between the Inspection and Selected modes.
-==== Invoking the Highlighter ====
+==== Invoking the Page Inspector ====
-You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu (<span id="F1">F1</span>). This will bring the Highlighter into view with the element under the cursor already selected. The element is in the "locked" state.
+You can launch the Page Inspector by right-clicking on an element and selecting "Inspect Element" from the context menu (<span id="F1">F1</span>). This will bring the Inspector into view with the element under the cursor already selected. The element is in the "selected" state.
-You can also launch the Highlighter via the "Web Developer" menu ("Highlighter" menu option) (<span id="F2">F2</span>). The Highlighter will start out in the "highlight" mode.
+You can also launch the Inspector via the "Web Developer" menu ("Inspect" menu option) (<span id="F2">F2</span>). The Inspector will start out in the "inspection" mode.
-When the Developer Toolbar lands, there will also be a Highlighter button there.
+When the Developer Toolbar lands, there will also be a Inspect button there.
-Finally, you can use the command line to highlight an element (<span id="F3">F3</span>). Multiple selected elements are not supported right now.
+Finally, you can use the command line to select an element (<span id="F3">F3</span>). Multiple selected elements are not supported right now.
 ==== Modes ====
-The Highlighter has two modes: "highlight" and "selected". In "highlight" mode, moving the mouse around will highlight the element of the page that's under the cursor. If you click on the element, you switch to "selected" mode and you can then move your mouse around without changing which element is highlighted. You can click the "Highlight" button in the Highlighter Toolbar to switch back into highlight mode.
+The Inspector has two modes: "inspection" and "selected". In "inspection" mode, moving the mouse around will highlight the element of the page that's under the cursor. If you click on the element, you switch to "selected" mode and you can then move your mouse around without changing which element is highlighted. You can click the "Inspect" button in the Inspector Toolbar to switch back into inspection mode.
-==== Highlighted Element Display ====
+==== Selected Element Display ====
-When an element is highlighted, the rest of the page is dimmed. Near the element, there is an "Infobar" that provides a quick view of information that is useful to page designers (see below).
+When an element is selected, the rest of the page is dimmed. Near the element, there is an "Infobar" that provides a quick view of information that is useful to page designers (see below).
 Around the element, the margins and padding are displayed (<span id="F4">F4</span>).
@@ Line 80: / Line 82: @@
 [[File:HighlighterInfobar.png|Highlighter Infobar]]
-When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element.
+When you select a page element, the "infobar" appears to quickly give you the most useful information about that element.
 Features:
@@ Line 90: / Line 92: @@
 * edit the ID on an element (<span id="F7">F7</span>)
-==== Highlighter Toolbar ====
+==== Page Inspector Toolbar ====
 [[File:HighlighterToolbar.png|Highlighter Toolbar]]
-The Highlighter Toolbar appears above the Developer Toolbar at the bottom of the window and provides access to element-oriented tools and quick, precise access to other elements.
+The Inspector Toolbar appears above the Developer Toolbar at the bottom of the window and provides access to element-oriented tools and quick, precise access to other elements.
 Features:
-* "Highlight" button switches between highlight (choose an element) and selected modes (<span id="F8">F8</span>)
+* "Inspect" button switches between inspection (choose an element) and selected modes (<span id="F8">F8</span>)
 * Buttons toggle the tools sidebar on/off and which tool is in the sidebar. For example, clicking the Styles button will show the style inspector. The initial expected buttons cover the Layout and Styles. (<span id="F9">F9</span>)
 * Breadcrumb-style navigation from the selected element all the way up to the top of the document and down to the next child