Skip to main content

Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

ATF/Help/Tools/CSSView

< ATF‎ | Help

Cssinspector.gif CSS

The CSS view shows all style rules that are currently applied to a selected DOM node. Several tabs compose the CSS view that show different representations of a DOM element's style.

CSS view tabs:

  • Style Rules - Shows the rules and their defined properties currently applied to an element. The following toolbar buttons are availabe in the Style Rules tab:
    • Add correction.gif Add Property - Adds a new property to the selected style rule
    • Write obj.gif Edit Property - Edit the values of the selected style property
    • Goto input.gif Open CSS file - Opens a rule or property in an editor to the URL and line number
    • Highlight.gif Toggle Highlighting - Highlights all DOM elements currently using a selected style rule or property
    • Note: The previous toolbar buttons are also in a context menu accessible by right-clicking in the Style Rules tab
    • Green Properties - Style properties currently affecting the current DOM element selection
    • Red Properties - Style properties currently cascaded over by other style properties and not affecting the current selection's style.
  • Computed Styles - Shows every style rule either defined formally by rules or inline or computed by the browser.
    • Green Properties - Style properties currently defined by style rules or inline style declarations
    • Red Properties - Style properties currently defined by the browser
  • Box Model - Shows the dimensions, x-y coordinates, padding, border, and margin information.
    • Navigation Controls - Allows navigation to other nodes in the DOM from the currently selected node
      • Up Arrow - Navigates the selection to the current node's parent
      • Down Arrow - Navigates the selection to the current node's first child
      • Left Arrow - Navigates the selection to the current node's previous sibling
      • Right Arrow - Navigates the selection to the current node's next sibling
  • Diffs - Shows the changes made to CSS rules and properties either for a given selection or for all changes globally.

To open the view:

  • Go to Windows menu.
  • Select Show View and Other... to open the Show View dialog.
  • Under the Mozilla category, select CSS.

Back to the top