Bug 1349256 - Moved docs into folders so it's easier to browse; r=sole
MozReview-Commit-ID: HzL3w8vp8iS --HG-- rename : devtools/docs/backend.md => devtools/docs/backend/backend.md rename : devtools/docs/backward-compatibility.md => devtools/docs/backend/backward-compatibility.md rename : devtools/docs/debugger-api.md => devtools/docs/backend/debugger-api.md rename : devtools/docs/protocol.md => devtools/docs/backend/protocol.md rename : devtools/docs/frontend.md => devtools/docs/frontend/frontend.md rename : devtools/docs/react-guidelines.md => devtools/docs/frontend/react-guidelines.md rename : devtools/docs/react-tips.md => devtools/docs/frontend/react-tips.md rename : devtools/docs/react.md => devtools/docs/frontend/react.md rename : devtools/docs/redux-guidelines.md => devtools/docs/frontend/redux-guidelines.md rename : devtools/docs/redux-tips.md => devtools/docs/frontend/redux-tips.md rename : devtools/docs/redux.md => devtools/docs/frontend/redux.md rename : devtools/docs/svgs.md => devtools/docs/frontend/svgs.md rename : devtools/docs/img/box-model-highlighter-screenshot.png => devtools/docs/resources/box-model-highlighter-screenshot.png rename : devtools/docs/svgs/expand-strokes.gif => devtools/docs/resources/expand-strokes.gif rename : devtools/docs/svgs/pathfinder.gif => devtools/docs/resources/pathfinder.gif rename : devtools/docs/svgs/sketch-position.png => devtools/docs/resources/sketch-position.png rename : devtools/docs/debugger-panel.md => devtools/docs/tools/debugger-panel.md rename : devtools/docs/highlighters.md => devtools/docs/tools/highlighters.md rename : devtools/docs/http-inspector.md => devtools/docs/tools/http-inspector.md rename : devtools/docs/inspector-panel.md => devtools/docs/tools/inspector-panel.md rename : devtools/docs/inspector.md => devtools/docs/tools/inspector.md rename : devtools/docs/memory-panel.md => devtools/docs/tools/memory-panel.md rename : devtools/docs/responsive-design-mode.md => devtools/docs/tools/responsive-design-mode.md rename : devtools/docs/tools.md => devtools/docs/tools/tools.md extra : rebase_source : 96dfbd86b0294a041e0fc82158b1d91a8e9ba9e8
|
@ -1,22 +1,23 @@
|
|||
|
||||
# Summary
|
||||
|
||||
* [Tool Architectures](tools.md)
|
||||
* [Inspector](inspector.md)
|
||||
* [Panel Architecture](inspector-panel.md)
|
||||
* [Highlighters](highlighters.md)
|
||||
* [Memory](memory-panel.md)
|
||||
* [Debugger](debugger-panel.md)
|
||||
* [Responsive Design Mode](responsive-design-mode.md)
|
||||
* [Frontend](frontend.md)
|
||||
* [Panel SVGs](svgs.md)
|
||||
* [React](react.md)
|
||||
* [Guidelines](react-guidelines.md)
|
||||
* [Tips](react-tips.md)
|
||||
* [Redux](redux.md)
|
||||
* [Guidelines](redux-guidelines.md)
|
||||
* [Tips](redux-tips.md)
|
||||
* [Backend](backend.md)
|
||||
* [Protocol](protocol.md)
|
||||
* [Debugger API](debugger-api.md)
|
||||
* [Backward Compatibility](backward-compatibility.md)
|
||||
* [Tool Architectures](tools/tools.md)
|
||||
* [Inspector](tools/inspector.md)
|
||||
* [Panel Architecture](tools/inspector-panel.md)
|
||||
* [Highlighters](tools/highlighters.md)
|
||||
* [Memory](tools/memory-panel.md)
|
||||
* [Debugger](tools/debugger-panel.md)
|
||||
* [Responsive Design Mode](tools/responsive-design-mode.md)
|
||||
* [HTTP Inspector](tools/http-inspector.md)
|
||||
* [Frontend](frontend/frontend.md)
|
||||
* [Panel SVGs](frontend/svgs.md)
|
||||
* [React](frontend/react.md)
|
||||
* [Guidelines](frontend/react-guidelines.md)
|
||||
* [Tips](frontend/react-tips.md)
|
||||
* [Redux](frontend/redux.md)
|
||||
* [Guidelines](frontend/redux-guidelines.md)
|
||||
* [Tips](frontend/redux-tips.md)
|
||||
* [Backend](backend/backend.md)
|
||||
* [Protocol](backend/protocol.md)
|
||||
* [Debugger API](backend/debugger-api.md)
|
||||
* [Backward Compatibility](backend/backward-compatibility.md)
|
||||
|
|
|
@ -24,10 +24,10 @@ You can download a sample Illustrator file [here](https://www.dropbox.com/home/M
|
|||
When you're designing your icons in a graphics editor like Adobe Illustrator, there are a lot of things you can do that will bring down the size of the file and make your SVGs easier for the developers to work with. Here are some of them:
|
||||
|
||||
- **Expand paths**: Instead of having multiple shapes overlapping each other, expand shapes using the pathfinder.
|
||||
![Use pathfinder to expand shapes](./svgs/pathfinder.gif)
|
||||
![Use pathfinder to expand shapes](../resources/pathfinder.gif)
|
||||
- Simplify paths (```Object``` > ```Path``` > ```Simplify```)
|
||||
- Expand objects so that strokes become objects. This has the added benefit of keeping the stroke size intact as the SVG is resized.
|
||||
![Expand strokes to make them objects](./svgs/expand-strokes.gif)
|
||||
![Expand strokes to make them objects](../resources/expand-strokes.gif)
|
||||
|
||||
## Sketch
|
||||
Sketch vector work is a little different but the fundamentals (keeping your SVG small, expanding all paths) is the same. Here's what we've found helps to build clean icons:
|
||||
|
@ -35,7 +35,7 @@ Sketch vector work is a little different but the fundamentals (keeping your SVG
|
|||
- **Build your icon at 16x16 with the Pixel Grid turned on.** You can turn the pixel grid on at ```View > Canvas > Show Pixels```
|
||||
|
||||
- **Make sure that all x/y coordinates are full pixels for lines/rectangles.** Sub-pixels = not on pixel grid.
|
||||
![Position in the upper right hand corner of Sketch](./svgs/sketch-position.png)
|
||||
![Position in the upper right hand corner of Sketch](../resources/sketch-position.png)
|
||||
|
||||
- **Expand all your paths so strokes expand properly as the SVG gets resized.** You can do this at ```Layer > Paths > Vectorize Stroke```.
|
||||
|
До Ширина: | Высота: | Размер: 26 KiB После Ширина: | Высота: | Размер: 26 KiB |
До Ширина: | Высота: | Размер: 59 KiB После Ширина: | Высота: | Размер: 59 KiB |
До Ширина: | Высота: | Размер: 32 KiB После Ширина: | Высота: | Размер: 32 KiB |
До Ширина: | Высота: | Размер: 9.3 KiB После Ширина: | Высота: | Размер: 9.3 KiB |
|
@ -6,7 +6,7 @@ By highlighter, we mean anything that DevTools displays on top of the content pa
|
|||
|
||||
The most obvious form of highlighter is the box-model highlighter, whose job is to display the 4 box-model regions on top of a given element in the content page, as illustrated in the following screen capture:
|
||||
|
||||
![Box-model highlighter](./img/box-model-highlighter-screenshot.png)
|
||||
![Box-model highlighter](../resources/box-model-highlighter-screenshot.png)
|
||||
|
||||
But there can be a wide variety of highlighters. In particular, highlighters are a pretty good way to give detailed information about:
|
||||
|
|
@ -24,23 +24,23 @@ if CONFIG['MOZ_BUILD_APP'] in ('browser', 'b2g/dev'):
|
|||
DIST_SUBDIR = 'browser'
|
||||
export('DIST_SUBDIR')
|
||||
|
||||
with Files('**'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools')
|
||||
|
||||
with Files('docs/**'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools')
|
||||
|
||||
with Files('docs/memory-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Memory')
|
||||
|
||||
with Files('docs/debugger-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Debugger')
|
||||
|
||||
with Files('docs/debugger-api.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Debugger')
|
||||
|
||||
with Files('docs/http-inspector.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Console')
|
||||
|
||||
with Files('docs/inspector-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Inspector')
|
||||
with Files('**'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools')
|
||||
|
||||
with Files('docs/**'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools')
|
||||
|
||||
with Files('docs/tools/memory-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Memory')
|
||||
|
||||
with Files('docs/tools/debugger-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Debugger')
|
||||
|
||||
with Files('docs/backend/debugger-api.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Debugger')
|
||||
|
||||
with Files('docs/tools/http-inspector.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Console')
|
||||
|
||||
with Files('docs/tools/inspector-panel.md'):
|
||||
BUG_COMPONENT = ('Firefox', 'Developer Tools: Inspector')
|
||||
|
|