Bug 1292904 Part 1 - Use element id to get caret child element. r=mtseng

The children of the caret element already have unique class name like
"image" or "bar", we could change the class name to be id, and use id to
locate them.

MozReview-Commit-ID: HLZecyAEYXv

--HG--
extra : rebase_source : 04b59a4d639ad45d2b564f48de15c2f23752fdaf

dom/base/AnonymousContent.h

@@ -26,6 +26,7 @@ public:
 
   explicit AnonymousContent(Element* aContentNode);
   Element* GetContentNode();
+  Element* GetElementById(const nsAString& aElementId);
   void SetContentNode(Element* aContentNode);
   bool WrapObject(JSContext* aCx, JS::Handle<JSObject*> aGivenProto, JS::MutableHandle<JSObject*> aReflector);
 
@@ -58,7 +59,6 @@ public:
 
 private:
   ~AnonymousContent();
-  Element* GetElementById(const nsAString& aElementId);
   nsCOMPtr<Element> mContentNode;
 };
 

layout/base/AccessibleCaret.cpp

@@ -33,6 +33,9 @@ float AccessibleCaret::sHeight = 0.0f;
 float AccessibleCaret::sMarginLeft = 0.0f;
 float AccessibleCaret::sBarWidth = 0.0f;
 
+NS_NAMED_LITERAL_STRING(AccessibleCaret::sCaretImageElementId, "image");
+NS_NAMED_LITERAL_STRING(AccessibleCaret::sSelectionBarElementId, "bar");
+
 #define AC_PROCESS_ENUM_TO_STREAM(e) case(e): aStream << #e; break;
 std::ostream&
 operator<<(std::ostream& aStream, const AccessibleCaret::Appearance& aAppearance)
@@ -220,8 +223,8 @@ AccessibleCaret::CreateCaretElement(nsIDocument* aDocument) const
 {
   // Content structure of AccessibleCaret
   // <div class="moz-accessiblecaret">  <- CaretElement()
-  //   <div class="image">              <- CaretImageElement()
-  //   <div class="bar">                <- SelectionBarElement()
+  //   <div id="image">                 <- CaretImageElement()
+  //   <div id="bar">                   <- SelectionBarElement()
 
   ErrorResult rv;
   nsCOMPtr<Element> parent = aDocument->CreateHTMLElement(nsGkAtoms::div);
@@ -229,13 +232,16 @@ AccessibleCaret::CreateCaretElement(nsIDocument* aDocument) const
   parent->ClassList()->Add(NS_LITERAL_STRING("none"), rv);
   parent->ClassList()->Add(NS_LITERAL_STRING("no-bar"), rv);
 
-  nsCOMPtr<Element> image = aDocument->CreateHTMLElement(nsGkAtoms::div);
-  image->ClassList()->Add(NS_LITERAL_STRING("image"), rv);
-  parent->AppendChildTo(image, false);
+  auto CreateAndAppendChildElement = [aDocument, &parent](
+    const nsLiteralString& aElementId)
+  {
+    nsCOMPtr<Element> child = aDocument->CreateHTMLElement(nsGkAtoms::div);
+    child->SetAttr(kNameSpaceID_None, nsGkAtoms::id, aElementId, true);
+    parent->AppendChildTo(child, false);
+  };
 
-  nsCOMPtr<Element> bar = aDocument->CreateHTMLElement(nsGkAtoms::div);
-  bar->ClassList()->Add(NS_LITERAL_STRING("bar"), rv);
-  parent->AppendChildTo(bar, false);
+  CreateAndAppendChildElement(sCaretImageElementId);
+  CreateAndAppendChildElement(sSelectionBarElementId);
 
   return parent.forget();
 }

layout/base/AccessibleCaret.h

@@ -14,6 +14,7 @@
 #include "nsIDOMEventListener.h"
 #include "nsISupportsBase.h"
 #include "nsISupportsImpl.h"
+#include "nsLiteralString.h"
 #include "nsRect.h"
 #include "mozilla/RefPtr.h"
 #include "nsString.h"
@@ -152,13 +153,13 @@ protected:
   // Element which contains the caret image for 'Contains' test.
   dom::Element* CaretImageElement() const
   {
-    return CaretElement()->GetFirstElementChild();
+    return mCaretElementHolder->GetElementById(sCaretImageElementId);
   }
 
   // Element which represents the text selection bar.
   dom::Element* SelectionBarElement() const
   {
-    return CaretElement()->GetLastElementChild();
+    return mCaretElementHolder->GetElementById(sSelectionBarElementId);
   }
 
   nsIFrame* RootFrame() const
@@ -227,6 +228,8 @@ protected:
   static float sHeight;
   static float sMarginLeft;
   static float sBarWidth;
+  static const nsLiteralString sCaretImageElementId;
+  static const nsLiteralString sSelectionBarElementId;
 
 }; // class AccessibleCaret
 

layout/style/res/ua.css

@@ -349,13 +349,13 @@ div:-moz-native-anonymous.moz-accessiblecaret {
 }
 
 div:-moz-native-anonymous.moz-accessiblecaret,
-div:-moz-native-anonymous.moz-accessiblecaret > div.image,
-div:-moz-native-anonymous.moz-accessiblecaret > div.bar {
+div:-moz-native-anonymous.moz-accessiblecaret > #image,
+div:-moz-native-anonymous.moz-accessiblecaret > #bar {
   position: absolute;
   z-index: 2147483647;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret > #image {
   background-position: center bottom;
   background-size: 100%;
   background-repeat: no-repeat;
@@ -369,25 +369,25 @@ div:-moz-native-anonymous.moz-accessiblecaret > div.image {
   pointer-events: auto;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret > div.bar {
+div:-moz-native-anonymous.moz-accessiblecaret > #bar {
   margin-left: 49%;
   background-color: #008aa0;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.no-bar > div.bar {
+div:-moz-native-anonymous.moz-accessiblecaret.no-bar > #bar {
   display: none;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
   background-image: url("resource://gre-resources/accessiblecaret-normal@1x.png");
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
   background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1x.png");
   margin-left: -39%;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
   background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1x.png");
   margin-left: 41%;
 }
@@ -397,43 +397,43 @@ div:-moz-native-anonymous.moz-accessiblecaret.none {
 }
 
 @media (min-resolution: 1.5dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("resource://gre-resources/accessiblecaret-normal@1.5x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1.5x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1.5x.png");
   }
 }
 
 @media (min-resolution: 2dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("resource://gre-resources/accessiblecaret-normal@2x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2x.png");
   }
 }
 
 @media (min-resolution: 2.25dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("resource://gre-resources/accessiblecaret-normal@2.25x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2.25x.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2.25x.png");
   }
 }

mobile/android/themes/core/content.css

@@ -336,7 +336,7 @@ input[type=number]::-moz-number-spin-box {
   display: none;
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret > #image {
   /* border: 0.1px solid red; */ /* Uncomment border to see the touch target. */
   padding-left: 59%;    /* ((48-22)/2)px / 22px ~= 59% */
   padding-bottom: 59%;
@@ -345,61 +345,61 @@ div:-moz-native-anonymous.moz-accessiblecaret > div.image {
 }
 
 /* Override accessiblecaret css in layout/style/ua.css */
-div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
   top: 11%; /* space between the blinking cursor and the caret */
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-hdpi.png");
   margin-left: -50%;
   top: 1%; /* space between the selection highlight and the caret */
 }
 
-div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
   background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-hdpi.png");
   margin-left: 47%;
   top: 1%; /* space between the selection highlight and the caret */
 }
 
 @media (min-resolution: 1.5dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-normal-hdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-hdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-hdpi.png");
   }
 }
 
 @media (min-resolution: 2dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-normal-xhdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-xhdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-xhdpi.png");
   }
 }
 
 @media (min-resolution: 2.25dppx) {
-  div:-moz-native-anonymous.moz-accessiblecaret.normal > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-normal-xxhdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.left > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-left-xxhdpi.png");
   }
 
-  div:-moz-native-anonymous.moz-accessiblecaret.right > div.image {
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
     background-image: url("chrome://browser/skin/images/accessiblecaret-tilt-right-xxhdpi.png");
   }
 }