Skip to content

Commit e20d0b4

Browse files
committed
Added the ability to inspect an element's style
This pull request adds the ability to view the style of an element that is selected in the elements tree using the same UI as what is shown in the styles tab when inspecting an element of a webpage. Some gotchas: * The names of style properties shown are not copied verbatim from the names of fields in the `View` class, but are translated to a format that Chrome understands. For example, `View` has a field called `paddingLeft`, but in order for that to be rendered correctly in Chrome, it needs to be transmitted as `padding-left`. * Default values are not transmitted, unless they are of an enum type, in which case they are *always* transmitted. * Due to inconsistencies between annotations present on certain Android SDK versions, some fields that are enums are not translated into their string representation. This is unfortunate, but the only way to get around it is by special-casing those one or two cases, which is probably not viable long-term. Some things that would be nice to add in the future: * Inferring some way the element's style 'class', so that the styles aren't all aggregated into one blob. Same with style inheritance. * In Chrome you can edit these CSS properties, but here you can't. Maybe a future project? Would probably relatively simple to add. Style inspection of Stetho's 'Settings' button: <p align="center"> <img src="https://cloud.githubusercontent.com/assets/2636237/9415188/5872116c-47f2-11e5-8764-ebb2bd43bcbf.png"> <img src="https://cloud.githubusercontent.com/assets/2636237/9415244/ad7b3350-47f2-11e5-97de-7d84772b3021.png"> </p>
1 parent 3ffd980 commit e20d0b4

File tree

12 files changed

+748
-18
lines changed

12 files changed

+748
-18
lines changed

stetho/src/main/java/com/facebook/stetho/Stetho.java

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,14 +259,14 @@ public DefaultInspectorModulesBuilder remove(String moduleName) {
259259

260260
public Iterable<ChromeDevtoolsDomain> finish() {
261261
provideIfDesired(new Console());
262-
provideIfDesired(new CSS());
263262
provideIfDesired(new Debugger());
264263
if (Build.VERSION.SDK_INT >= AndroidDOMConstants.MIN_API_LEVEL) {
265264
Document document = new Document(
266265
new AndroidDocumentProviderFactory(
267266
(Application) mContext.getApplicationContext()));
268267

269268
provideIfDesired(new DOM(document));
269+
provideIfDesired(new CSS(document));
270270
}
271271
provideIfDesired(new DOMStorage(mContext));
272272
provideIfDesired(new HeapProfiler());

stetho/src/main/java/com/facebook/stetho/common/ListUtil.java

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ public static <T> List<T> copyToImmutableList(List<T> list) {
6565
}
6666
}
6767

68+
public static <T> List<T> newImmutableList(T item) {
69+
return new OneItemImmutableList<>(item);
70+
}
71+
6872
private static interface ImmutableList<E> extends List<E>, RandomAccess {
6973
}
7074

stetho/src/main/java/com/facebook/stetho/inspector/elements/AbstractChainedDescriptor.java

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,4 +144,14 @@ public final void setAttributesAsText(Object element, String text) {
144144
protected void onSetAttributesAsText(E element, String text) {
145145
mSuper.setAttributesAsText(element, text);
146146
}
147+
148+
@Override
149+
@SuppressWarnings("unchecked")
150+
public final void getStyles(Object element, StyleAccumulator accumulator) {
151+
mSuper.getStyles(element, accumulator);
152+
onGetStyles((E) element, accumulator);
153+
}
154+
155+
protected void onGetStyles(E element, StyleAccumulator accumulator) {
156+
}
147157
}

stetho/src/main/java/com/facebook/stetho/inspector/elements/Document.java

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,12 @@ public void setAttributesAsText(Object element, String text) {
140140
mDocumentProvider.setAttributesAsText(element, text);
141141
}
142142

143+
public void getElementStyles(Object element, StyleAccumulator styleAccumulator) {
144+
NodeDescriptor nodeDescriptor = getNodeDescriptor(element);
145+
146+
nodeDescriptor.getStyles(element, styleAccumulator);
147+
}
148+
143149
public DocumentView getDocumentView() {
144150
verifyThreadAccess();
145151
return mShadowDocument;

stetho/src/main/java/com/facebook/stetho/inspector/elements/NodeDescriptor.java

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,6 @@ public interface NodeDescriptor extends ThreadBound {
3333
void getAttributes(Object element, AttributeAccumulator attributes);
3434

3535
void setAttributesAsText(Object element, String text);
36+
37+
void getStyles(Object element, StyleAccumulator accumulator);
3638
}

stetho/src/main/java/com/facebook/stetho/inspector/elements/ObjectDescriptor.java

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,8 @@ public void getAttributes(Object element, AttributeAccumulator attributes) {
5151
@Override
5252
public void setAttributesAsText(Object element, String text) {
5353
}
54+
55+
@Override
56+
public void getStyles(Object element, StyleAccumulator accumulator) {
57+
}
5458
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* Copyright (c) 2014-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
package com.facebook.stetho.inspector.elements;
11+
12+
import com.facebook.stetho.json.annotation.JsonValue;
13+
14+
public enum Origin {
15+
INJECTED("injected"),
16+
USER_AGENT("user-agent"),
17+
INSPECTOR("inspector"),
18+
REGULAR("regular");
19+
20+
private final String mValue;
21+
22+
Origin(String value) {
23+
mValue = value;
24+
}
25+
26+
@JsonValue
27+
public String getProtocolValue() {
28+
return mValue;
29+
}
30+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright (c) 2014-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
package com.facebook.stetho.inspector.elements;
11+
12+
public interface StyleAccumulator {
13+
void store(String name, String value, boolean isDefault);
14+
}

stetho/src/main/java/com/facebook/stetho/inspector/elements/android/DialogFragmentDescriptor.java

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
import com.facebook.stetho.inspector.elements.Descriptor;
2424
import com.facebook.stetho.inspector.elements.DescriptorMap;
2525
import com.facebook.stetho.inspector.elements.NodeType;
26+
import com.facebook.stetho.inspector.elements.StyleAccumulator;
2627

2728
import javax.annotation.Nullable;
2829

@@ -125,4 +126,8 @@ public View getViewForHighlighting(Object element) {
125126

126127
return null;
127128
}
129+
130+
@Override
131+
public void getStyles(Object element, StyleAccumulator styles) {
132+
}
128133
}

0 commit comments

Comments
 (0)