Bug 1279843 - adjust the borders of the yellow range outline box on the findbar modal highlighting background to have gradient borders ending transparently, so that no characters will be obscured. ui-r=sevaan, r?jaws draft
authorMike de Boer <mdeboer@mozilla.com>
Wed, 05 Oct 2016 13:13:34 +0200
changeset 421134 9b02d665f7f017289b1cde34bd710f2dad07578f
parent 421133 3ae6ab04b6ce1882ee28f17fcace88d0a4e9a290
child 421135 ea4102c8ac01b85d7be15a6e396351fed8303ce5
push id31395
push usermdeboer@mozilla.com
push dateWed, 05 Oct 2016 11:16:49 +0000
reviewerssevaan, jaws
bugs1279843
milestone52.0a1
Bug 1279843 - adjust the borders of the yellow range outline box on the findbar modal highlighting background to have gradient borders ending transparently, so that no characters will be obscured. ui-r=sevaan, r?jaws MozReview-Commit-ID: JxNBMpIyjDa
toolkit/modules/FinderHighlighter.jsm
--- a/toolkit/modules/FinderHighlighter.jsm
+++ b/toolkit/modules/FinderHighlighter.jsm
@@ -32,31 +32,41 @@ const kFontPropsCamelCase = kFontPropsCS
   let parts = prop.split("-");
   return parts.shift() + parts.map(part => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 });
 const kRGBRE = /^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*/i;
 // This uuid is used to prefix HTML element IDs in order to make them unique and
 // hard to clash with IDs content authors come up with.
 const kModalIdPrefix = "cedee4d0-74c5-4f2d-ab43-4d37c0f9d463";
 const kModalOutlineId = kModalIdPrefix + "-findbar-modalHighlight-outline";
+const kOutlineBoxColor = "255,197,53";
 const kModalStyles = {
   outlineNode: [
-    ["position", "absolute"],
-    ["background", "#ffc535"],
+    ["-moz-border-top-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-right-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-bottom-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["-moz-border-left-colors", `rgba(${kOutlineBoxColor},.1) rgba(${kOutlineBoxColor},.4) rgba(${kOutlineBoxColor},.7)`],
+    ["background-color", `rgb(${kOutlineBoxColor})`],
+    ["background-clip", "padding-box"],
+    ["border", `2px solid rgba(${kOutlineBoxColor},.4)`],
     ["border-radius", "3px"],
     ["box-shadow", "0 2px 0 0 rgba(0,0,0,.1)"],
     ["color", "#000"],
     ["display", "-moz-box"],
     ["margin", "-2px 0 0 -2px !important"],
-    ["padding", "2px !important"],
+    ["overflow", "hidden"],
     ["pointer-events", "none"],
+    ["position", "absolute"],
     ["white-space", "nowrap"],
     ["will-change", "transform"],
     ["z-index", 2]
   ],
+  outlineNodeBrightText: [
+    ["border", `2px solid rgba(${kOutlineBoxColor},.6)`],
+  ],
   outlineNodeDebug: [ ["z-index", 2147483647] ],
   outlineText: [
     ["margin", "0 !important"],
     ["padding", "0 !important"],
     ["vertical-align", "top !important"]
   ],
   maskNode: [
     ["background", "rgba(0,0,0,.35)"],
@@ -940,17 +950,18 @@ FinderHighlighter.prototype = {
       // text is set to the current textContent for the matching rect.
       let text = (i == rectCount - 1) ? textContent.slice(i).join(" ") : textContent[i];
       ++i;
       let outlineStyle = this._getStyleString(kModalStyles.outlineNode, [
         ["top", rect.top + "px"],
         ["left", rect.left + "px"],
         ["height", rect.height + "px"],
         ["width", rect.width + "px"]
-      ], kDebug ? kModalStyles.outlineNodeDebug : []);
+      ], kDebug ? kModalStyles.outlineNodeDebug : [],
+         dict.brightText ? kModalStyles.outlineNodeBrightText : []);
       fontStyle.lineHeight = rect.height + "px";
       let textStyle = this._getStyleString(kModalStyles.outlineText) + "; " +
         this._getHTMLFontStyle(fontStyle);
 
       if (rebuildOutline) {
         let textBoxParent = (rectCount == 1) ? outlineBox :
           outlineBox.appendChild(document.createElementNS(kNSHTML, "div"));
         textBoxParent.setAttribute("style", outlineStyle);