Merge pull request #53 from mozilla/fix_customize_open/active_attributes

replaced invalid attributes with new data API (closes #21)
mozilla · Aug 28, 2015 · e82890f · e82890f
2 parents 2a14c46 + 731e75f
commit e82890f
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 71 deletions.
diff --git a/css/newTab.css b/css/newTab.css
@@ -118,7 +118,7 @@ input[type=button] {
   opacity: 0;
 }
 
-#newtab-grid[locked],
+#newtab-grid[data-locked=true],
 #newtab-grid[data-page-disabled] {
   pointer-events: none;
 }
@@ -150,7 +150,7 @@ input[type=button] {
   transition-property: top, left, opacity;
 }
 
-.newtab-site[frozen] {
+.newtab-site[data-frozen=true] {
   position: absolute;
   pointer-events: none;
 }
@@ -235,18 +235,18 @@ input[type=button] {
   top: -15px;
 }
 
-.newtab-site[suggested=true] > .newtab-sponsored {
+.newtab-site[data-suggested=true] > .newtab-sponsored {
   background-color: #E2E2E2;
   border: none;
 }
 
-.newtab-site > .newtab-sponsored:-moz-any(:hover, [active]) {
+.newtab-site > .newtab-sponsored:-moz-any(:hover, [data-active=true]) {
   background-color: #4A90E2;
   border: 0;
   color: white;
 }
 
-.newtab-site > .newtab-sponsored[active] {
+.newtab-site > .newtab-sponsored[data-active=true] {
   background-color: #000000;
 }
 
@@ -255,11 +255,11 @@ input[type=button] {
   left: auto;
 }
 
-.newtab-site:-moz-any([type=enhanced], [type=sponsored], [suggested]) .newtab-sponsored {
+.newtab-site:-moz-any([data-type=enhanced], [data-type=sponsored], [data-suggested=true]) .newtab-sponsored {
   display: block;
 }
 
-.newtab-site[suggested] .newtab-suggested {
+.newtab-site[data-suggested=true] .newtab-suggested {
   display: table;
 }
 
@@ -299,7 +299,7 @@ input[type=button] {
 }
 
 .newtab-control:-moz-focusring,
-.newtab-cell:not([ignorehover]) > .newtab-site:hover > .newtab-control,
+.newtab-cell:not([data-ignore-hover]) > .newtab-site:hover > .newtab-control,
 .newtab-intro-cell-hover .newtab-control {
   opacity: 1;
 }
@@ -501,7 +501,7 @@ input[type=button] {
   right: auto;
 }
 
-#newtab-customize-panel[open="true"] {
+#newtab-customize-panel[data-open=true] {
   transform: translate(-30px, -20px) scale(1) translate(30px, 20px);
 }
 
@@ -572,12 +572,12 @@ input[type=button] {
   background-color: #F9F9F9;
 }
 
-.newtab-customize-panel-item[selected]:-moz-locale-dir(rtl) {
+.newtab-customize-panel-item[data-selected=true]:-moz-locale-dir(rtl) {
   background-position: right 15px center;
 }
 
-.newtab-customize-complex-option:hover > .selectable:not([selected]):-moz-locale-dir(rtl),
-.selectable:not([selected]):hover:-moz-locale-dir(rtl) {
+.newtab-customize-complex-option:hover > .selectable:not([data-selected="true"]):-moz-locale-dir(rtl),
+.selectable:not([data-selected="true"]):hover:-moz-locale-dir(rtl) {
   background-position: right 15px center;
 }
 
@@ -586,29 +586,29 @@ input[type=button] {
   max-width: 100%;
 }
 
-.newtab-customize-panel-item:not([selected]),
-.newtab-customize-panel-subitem:not([selected]){
+.newtab-customize-panel-item:not([data-selected="true"]),
+.newtab-customize-panel-subitem:not([data-selected="true"]){
   color: #7A7A7A;
 }
 
-.newtab-customize-panel-item:not([selected]):hover {
+.newtab-customize-panel-item:not([data-selected="true"]):hover {
   color: #FFFFFF;
   background-color: #4A90E2
 }
 
-.newtab-customize-complex-option:hover > .selectable:not([selected]),
-.selectable:not([selected]):hover {
+.newtab-customize-complex-option:hover > .selectable:not([data-selected="true"]),
+.selectable:not([data-selected="true"]):hover {
   background: url("images/shared-menu-check.svg#hover-view") no-repeat #FFFFFF;
   background-size: 16px 16px;
   background-position: 15px 15px;
   color: #171F26;
 }
 
-.newtab-customize-complex-option:hover > .selectable:not([selected]) + .newtab-customize-panel-subitem {
+.newtab-customize-complex-option:hover > .selectable:not([data-selected="true"]) + .newtab-customize-panel-subitem {
   background-color: #FFFFFF;
 }
 
-.newtab-customize-panel-item[selected] {
+.newtab-customize-panel-item[data-selected=true] {
   background: url("images/shared-menu-check.svg#active-view") no-repeat transparent;
   background-size: 16px 16px;
   background-position: 15px 15px;
@@ -624,7 +624,7 @@ input[type=button] {
   border: solid 1px threedshadow;
 }
 
-.newtab-customize-panel-subitem[selected] > .checkbox {
+.newtab-customize-panel-subitem[data-selected=true] > .checkbox {
   background: url("images/shared-menu-check.svg#black-view") no-repeat #FFFFFF;
   background-size: 9px 9px;
   background-position: center;

diff --git a/css/newTab.inc.css b/css/newTab.inc.css
@@ -79,7 +79,7 @@
   width: 28px;
 }
 
-#newtab-customize-button:-moz-any(:hover, :active, [active]) {
+#newtab-customize-button:-moz-any(:hover, :active, [data-active=true]) {
   background-image: -moz-image-rect(url(images/controls.svg), 0, 64, 32, 32);
   background-color: #FFFFFF;
   border: solid 1px #CCCCCC;
@@ -105,9 +105,9 @@
   transition-property: top, left, opacity, box-shadow, background-color;
 }
 
-.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
-.newtab-cell:not([ignorehover]) .newtab-link:hover,
-.newtab-site[data-dragged=true] {
+.newtab-cell:not([data-ignore-hover=true]) .newtab-control:hover ~ .newtab-link,
+.newtab-cell:not([data-ignore-hover=true]) .newtab-link:hover,
+.newtab-site[dragged] {
   border: 2px solid white;
   box-shadow: 0 0 6px 1px #add6ff;
   margin: -2px;
@@ -135,14 +135,11 @@
   transition: opacity 100ms ease-out;
 }
 
-.newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
+.newtab-cell:not([data-ignore-hover=true]) .newtab-site:hover .newtab-thumbnail.enhanced-content {
   opacity: 0;
 }
 
-.newtab-site[type=affiliate] .newtab-thumbnail,
-.newtab-site[type=enhanced] .newtab-thumbnail,
-.newtab-site[type=organic] .newtab-thumbnail,
-.newtab-site[type=sponsored] .newtab-thumbnail {
+.newtab-site[data-type] .newtab-thumbnail {
   background-position: center center;
   background-size: auto;
 }
@@ -154,7 +151,7 @@
   color: #5c5c5c;
 }
 
-.newtab-suggested[active] {
+.newtab-suggested[data-active=true] {
   background-color: rgba(51, 51, 51, 0.95);
   border: 0;
   color: white;
@@ -167,11 +164,11 @@
   border-top: 1px solid white;
 }
 
-.newtab-site[pinned] .newtab-title {
+.newtab-site[data-pinned=true] .newtab-title {
   -moz-padding-start: 24px;
 }
 
-.newtab-site[pinned] .newtab-title::before {
+.newtab-site[data-pinned=true] .newtab-title::before {
   background-image: -moz-image-rect(url("images/controls.svg"), 7, 278, 28, 266);
   background-size: 10px;
   content: "";
@@ -183,7 +180,7 @@
   margin-top: 6px;
 }
 
-.newtab-site[pinned] .newtab-title:-moz-dir(rtl)::before {
+.newtab-site[data-pinned=true] .newtab-title:-moz-dir(rtl)::before {
   left: auto;
   right: 0;
 }
@@ -198,17 +195,17 @@
 }
 
 .newtab-control-pin,
-.newtab-site[pinned] .newtab-control-pin:hover:active {
+.newtab-site[data-pinned=true] .newtab-control-pin:hover:active {
   background-image: -moz-image-rect(url(images/controls.svg), 0, 96, 32, 64);
 }
 
 .newtab-control-pin:hover,
-.newtab-site[pinned] .newtab-control-pin:hover {
+.newtab-site[data-pinned] .newtab-control-pin:hover {
   background-image: -moz-image-rect(url(images/controls.svg), 0, 160, 32, 128);
 }
 
 .newtab-control-pin:hover:active,
-.newtab-site[pinned] .newtab-control-pin {
+.newtab-site[data-pinned=true] .newtab-control-pin {
   background-image: -moz-image-rect(url(images/controls.svg), 0, 128, 32, 96);
 }
 

diff --git a/js/customize.js b/js/customize.js
@@ -37,23 +37,23 @@
         gCustomize._nodes.overlay.style.display = "none";
       });
       this._nodes.overlay.style.opacity = 0;
-      this._nodes.button.removeAttribute("active");
-      this._nodes.panel.removeAttribute("open");
+      this._nodes.button.dataset.active = false;
+      this._nodes.panel.dataset.open = false;
       document.removeEventListener("click", this);
       document.removeEventListener("keydown", this);
     },
 
     showPanel(event) {
-      if (this._nodes.panel.getAttribute("open") === "true") {
+      if (this._nodes.panel.dataset.open === "true") {
         return;
       }
 
       let {
         panel, button, overlay
       } = this._nodes;
       overlay.style.display = "block";
-      panel.setAttribute("open", "true");
-      button.setAttribute("active", "true");
+      panel.dataset.open = true;
+      button.dataset.active = true;
       setTimeout(() => {
         // Wait for display update to take place, then animate.
         overlay.style.opacity = 0.8;
@@ -91,7 +91,7 @@
         });
         break;
       case "newtab-customize-classic":
-        if (this._nodes.enhanced.getAttribute("selected")) {
+        if (this._nodes.enhanced.dataset.selected === "true") {
           gNewTab.sendToBrowser("NewTab:Customize", {
             enabled: true,
             enhanced: true
@@ -139,15 +139,15 @@
       ["enhanced", "classic", "blank"].forEach(id => {
         let node = this._nodes[id];
         if (id === selected) {
-          node.setAttribute("selected", true);
+          node.dataset.selected = true;
         } else {
-          node.removeAttribute("selected");
+          node.dataset.selected = false;
         }
       });
       if (selected === "enhanced") {
         // If enhanced is selected, so is classic (since enhanced is a subitem
         // of classic)
-        this._nodes.classic.setAttribute("selected", true);
+        this._nodes.classic.dataset.selected = true;
       }
     },
   };

diff --git a/js/grid.js b/js/grid.js
@@ -109,14 +109,14 @@
      * Locks the grid to block all pointer events.
      */
     lock() {
-      this.node.setAttribute("locked", "true");
+      this.node.dataset.locked = true;
     },
 
     /**
      * Unlocks the grid to allow all pointer events.
      */
     unlock() {
-      this.node.removeAttribute("locked");
+      this.node.dataset.locked = false;
     },
 
     /**
@@ -191,7 +191,7 @@
     _createSiteFragment() {
       let site = document.createElement("div");
       site.classList.add("newtab-site");
-      site.setAttribute("draggable", "true");
+      site.dataset.draggable = true;
 
       // Create the site's inner HTML code.
       site.innerHTML = `

diff --git a/js/intro.js b/js/intro.js
@@ -40,8 +40,8 @@ const TILES_INTRO_LINK = "https://www.mozilla.org/firefox/tiles/";
       });
 
       // Set the button
-      document.getElementById("newtab-intro-button").
-      setAttribute("value", gNewTab.newTabString("intro.gotit"));
+      document.getElementById("newtab-intro-button")
+        .dataset.value = gNewTab.newTabString("intro.gotit");
     },
 
     _bold: function(str) {