Bug 1564968 - add isElementThemed method to InspectorUtils to infer n…

…ative theme styling such as focus. r=emilio Differential Revision: https://phabricator.services.mozilla.com/D43441
Brli · Aug 28, 2019 · 9b9bc4a · 9b9bc4a
1 parent 8433994
commit 9b9bc4a
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 0 deletions.
diff --git a/dom/chrome-webidl/InspectorUtils.webidl b/dom/chrome-webidl/InspectorUtils.webidl
@@ -74,6 +74,8 @@ namespace InspectorUtils {
   [Throws] void parseStyleSheet(CSSStyleSheet sheet, DOMString input);
   boolean isCustomElementName([TreatNullAs=EmptyString] DOMString name,
                               DOMString? namespaceURI);
+
+  boolean isElementThemed(Element element);
 };
 
 dictionary PropertyNamesOptions {

diff --git a/layout/inspector/InspectorUtils.cpp b/layout/inspector/InspectorUtils.cpp
@@ -26,6 +26,7 @@
 #include "nsComputedDOMStyle.h"
 #include "mozilla/EventStateManager.h"
 #include "nsAtom.h"
+#include "nsPresContext.h"
 #include "nsRange.h"
 #include "mozilla/PresShell.h"
 #include "mozilla/PresShellInlines.h"
@@ -44,6 +45,7 @@
 #include "mozilla/ServoBindings.h"
 #include "mozilla/ServoStyleRuleMap.h"
 #include "mozilla/ServoCSSParser.h"
+#include "mozilla/StaticPrefs_layout.h"
 #include "mozilla/dom/InspectorUtils.h"
 #include "mozilla/dom/InspectorFontFace.h"
 
@@ -699,5 +701,16 @@ bool InspectorUtils::IsCustomElementName(GlobalObject&, const nsAString& aName,
   return nsContentUtils::IsCustomElementName(nameElt, namespaceID);
 }
 
+/* static */
+bool InspectorUtils::IsElementThemed(GlobalObject&, Element& aElement) {
+  // IsThemed will check if the native theme supports the widget using
+  // ThemeSupportsWidget which in turn will check that the widget is not
+  // already styled by content through nsNativeTheme::IsWidgetStyled. We
+  // assume that if the native theme styles the widget and the author did not
+  // override the appropriate styles, the theme will provide focus styling.
+  nsIFrame* frame = aElement.GetPrimaryFrame(FlushType::Frames);
+  return frame && frame->IsThemed();
+}
+
 }  // namespace dom
 }  // namespace mozilla
diff --git a/layout/inspector/InspectorUtils.h b/layout/inspector/InspectorUtils.h
@@ -229,6 +229,8 @@ class InspectorUtils {
                                  const nsAString& aPseudoClass);
   static void ClearPseudoClassLocks(GlobalObject& aGlobal, Element& aElement);
 
+  static bool IsElementThemed(GlobalObject& aGlobal, Element& aElement);
+
   /**
    * Parse CSS and update the style sheet in place.
    *

diff --git a/layout/inspector/tests/mochitest.ini b/layout/inspector/tests/mochitest.ini
@@ -28,6 +28,8 @@ support-files =
 [test_getCSSPseudoElementNames.html]
 [test_getRelativeRuleLine.html]
 [test_get_all_style_sheets.html]
+[test_is_element_themed.html]
+skip-if = os == 'android'
 [test_is_valid_css_color.html]
 [test_isinheritableproperty.html]
 [test_parseStyleSheet.html]

diff --git a/layout/inspector/tests/test_is_element_themed.html b/layout/inspector/tests/test_is_element_themed.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test InspectorUtils::IsElementThemed</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <style>
+    .not-themed-border:focus {
+      border: none;
+    }
+
+    .not-themed-background:focus {
+      background-color: red;
+    }
+  </style>
+</head>
+<body>
+<h1>Test InspectorUtils::isValidCSSColor</h1>
+
+<button id="themed-button">Themed Button</button>
+<input id="themed-input-number" type="number"/>
+<input id="themed-input-text" type="text"/>
+<textarea id="themed-textarea"></textarea>
+
+<button id="not-themed-button-(border)" class="not-themed-border">Not Themed Button</button>
+<input id="not-themed-input-number-(border)" class="not-themed-border" type="number"/>
+<input id="not-themed-input-text-(border)" class="not-themed-border" type="text"/>
+<textarea id="not-themed-textarea-(border)" class="not-themed-border"></textarea>
+
+<button id="not-themed-button-(background)" class="not-themed-background">Not Themed Button</button>
+<input id="not-themed-input-number-(background)" class="not-themed-background" type="number"/>
+<input id="not-themed-input-text-(background)" class="not-themed-background" type="text"/>
+<textarea id="not-themed-textarea-(background)" class="not-themed-background"></textarea>
+
+<script type="application/javascript">
+  const InspectorUtils = SpecialPowers.InspectorUtils;
+  const tests = [{
+    id: "themed-button",
+    themed: true,
+  }, {
+    id: "themed-input-number",
+    themed: true,
+  }, {
+    id: "themed-input-text",
+    themed: true,
+  }, {
+    id: "themed-textarea",
+    themed: true,
+  }, {
+    id: "not-themed-button-(border)",
+    themed: false,
+  }, {
+    id: "not-themed-input-number-(border)",
+    themed: false,
+  }, {
+    id: "not-themed-input-text-(border)",
+    themed: false,
+  }, {
+    id: "not-themed-textarea-(border)",
+    themed: false,
+  }, {
+    id: "not-themed-button-(background)",
+    themed: false,
+  }, {
+    id: "not-themed-input-number-(background)",
+    themed: false,
+  }, {
+    id: "not-themed-input-text-(background)",
+    themed: false,
+  }, {
+    id: "not-themed-textarea-(background)",
+    themed: false,
+  }];
+
+  for (const { id, themed } of tests) {
+    ok(InspectorUtils.isElementThemed(document.getElementById(id)),
+       `#${id} is${themed ? " ": " not "}themed natively`);
+  }
+</script>
+</body>
+</html>