whip the feedback page into shape

chrome/browser/resources/feedback.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // Constants.
 /** @const */ var FEEDBACK_LANDING_PAGE =
     'http://www.google.com/support/chrome/go/feedback_confirmation';
 
 var selectedThumbnailDivId = '';
 var selectedThumbnailId = '';
 var selectedImageUrl;
 
 var savedThumbnailIds = [];
 savedThumbnailIds['current-screenshots'] = '';
 savedThumbnailIds['saved-screenshots'] = '';
 
 var categoryTag = '';
 
-var localStrings = new LocalStrings();
-
 /**
  * Selects an image thumbnail in the specified div.
  * @param {string} divId The id of the div to search in.
  * @param {string} thumbnailId The id of the thumbnail to search for.
  */
 function selectImage(divId, thumbnailId) {
   var thumbnailDivs = $(divId).children;
   selectedThumbnailDivId = divId;
   if (thumbnailDivs.length == 0) {
     $(divId).hidden = true;
     return;
   }
+
   for (var i = 0; i < thumbnailDivs.length; i++) {
+    thumbnailDivs[i].className = 'image-thumbnail-container';

[Dan Beam, 2012/05/16 22:38:14]

you're setting [className] to intentionally nuke the previous (possibly
selected) class, right? does this have any artifacts when the same image is
selected if we use transitions?

[Evan Stade, 2012/05/16 23:56:24]

yes
i doubt it, but we don't use transitions.

+
     // If the the current div matches the thumbnail id provided,
     // or there is no thumbnail id given, and we're at the first thumbnail.
     if ((thumbnailDivs[i].id == thumbnailId) || (!thumbnailId && !i)) {

[Dan Beam, 2012/05/16 22:38:14]

remove first set of ()

[Evan Stade, 2012/05/16 23:56:24]

Done.

-      thumbnailDivs[i].className = 'image-thumbnail-container-selected';
+      thumbnailDivs[i].classList.add('image-thumbnail-container-selected');

[Dan Beam, 2012/05/16 22:38:14]

I assume you're against simply making this .selected so you could say:

  .image-thumbnail-container.selected:not(:only-of-type) {
    border-color: green;
  }

as the class is too generic (and could collide). Or simply changed to [selected]
like we do in shared lists (IIRC)?

[Evan Stade, 2012/05/16 23:56:24]

yes

[Dan Beam, 2012/05/17 05:09:05]

what about second option - [selected]? you're against both? (I understand it was
a poorly worded question)

[Evan Stade, 2012/05/17 16:38:57]

I don't see how selected as an attribute rather than class  gets around the
problem. I don't see much of a drawback to having this long classname except
that it causes an unfortunate line wrap which is really not the end of the
world.

[Dan Beam, 2012/05/17 17:14:37]

I think it's just less common for somebody to have a generic [selected]
selector, but is does have a similar issue (but again, I feel like we should
just be getting rid of this problem with namespacing, i.e. .module
node[selected] vs. something as silly as just [selected]).

If you're OK with the really long class name, that's fine.

       selectedThumbnailId = thumbnailId;
       savedThumbnailIds[divId] = thumbnailId;
-    } else {
-      thumbnailDivs[i].className = 'image-thumbnail-container';
     }
   }
 }
 
 /**
  * Adds an image thumbnail to the specified div.
  * @param {string} divId The id of the div to add a screenshot to.
  * @param {string} screenshot The URL of the screenshot being added.
  */
 function addScreenshot(divId, screenshot) {
   var thumbnailDiv = document.createElement('div');
   thumbnailDiv.className = 'image-thumbnail-container';
 
   thumbnailDiv.id = divId + '-thumbnailDiv-' + $(divId).children.length;
   thumbnailDiv.onclick = function() {
     selectImage(divId, thumbnailDiv.id);
   };
 
   var innerDiv = document.createElement('div');
-  if (divId == 'current-screenshots')

[Dan Beam, 2012/05/16 22:38:14]

so are you handling this somewhere else or was this functionality deleted?

[Evan Stade, 2012/05/16 23:56:24]

i don't think this really did anything useful and you can see that I deleted the
CSS which referenced image-thumbnail-current

[Dan Beam, 2012/05/17 17:14:37]

OK.

-    innerDiv.className = 'image-thumbnail-current';
-  else
-    innerDiv.className = 'image-thumbnail';
+  innerDiv.className = 'image-thumbnail';
 
   var thumbnail = document.createElement('img');
   thumbnail.id = thumbnailDiv.id + '-image';
   // We add the ?+timestamp to make sure the image URLs are unique
   // and Chrome does not load the image from cache.
   thumbnail.src = screenshot + '?' + Date.now();
   innerDiv.appendChild(thumbnail);
 
   thumbnailDiv.appendChild(innerDiv);
   $(divId).appendChild(thumbnailDiv);
@@ skipping 15 matching lines @@
 }
 
 /**
  * Sends the report; after the report is sent, we need to be redirected to
  * the landing page, but we shouldn't be able to navigate back, hence
  * we open the landing page in a new tab and sendReport closes this tab.
  * @return {boolean} True if the report was sent.
  */
 function sendReport() {
   if ($('description-text').value.length == 0) {
-    alert(localStrings.getString('no-description'));
+    alert(loadTimeData.getString('no-description'));
     return false;
   }
 
   var imagePath = '';
   if ($('screenshot-checkbox').checked && selectedThumbnailId)
     imagePath = $(selectedThumbnailId + '-image').src;
   var pageUrl = $('page-url-text').value;
   if (!$('page-url-checkbox').checked)
     pageUrl = '';
 
@@ skipping 39 matching lines @@
   if (selectedThumbnailDivId != 'current-screenshots')
     selectImage('current-screenshots',
                 savedThumbnailIds['current-screenshots']);
 }
 
 /**
  * Select the saved screenshots div, restoring the image that was
  * selected when we had this div open previously.
  */
 function savedSelected() {
-  $('current-screenshots').hidden = true;
-
   if ($('saved-screenshots').childElementCount == 0) {
     // setupSavedScreenshots will take care of changing visibility
     chrome.send('refreshSavedScreenshots');
   } else {
+    $('current-screenshots').hidden = true;
     $('saved-screenshots').hidden = false;
     if (selectedThumbnailDivId != 'saved-screenshots')
       selectImage('saved-screenshots', savedThumbnailIds['saved-screenshots']);
   }
 }
 
-
 /**
  * Change the type of screenshot we're showing to the user from
  * the current screenshot to saved screenshots
  */
 function changeToSaved() {
   $('screenshot-label-current').hidden = true;
   $('screenshot-label-saved').hidden = false;
 
   // Change the link to say "go to original"
   $('screenshot-link-tosaved').hidden = true;
@@ skipping 77 matching lines @@
   chrome.send('refreshCurrentScreenshot');
 }
 
 function setupCurrentScreenshot(screenshot) {
   addScreenshot('current-screenshots', screenshot);
 }
 
 function setupSavedScreenshots(screenshots) {
   if (screenshots.length == 0) {
     $('saved-screenshots').textContent =
-        localStrings.getString('no-saved-screenshots');
+        loadTimeData.getString('no-saved-screenshots');
 
     // Make sure we make the display the message.
+    $('current-screenshots').hidden = true;
     $('saved-screenshots').hidden = false;
 
     // In case the user tries to send now; fail safe, do not send a screenshot
     // at all versus sending the current screenshot.
     selectedThumbnailDivId = '';
     selectedThumbnailId = '';
   } else {
     for (i = 0; i < screenshots.length; ++i)
       addScreenshot('saved-screenshots', screenshots[i]);
 
@@ skipping 19 matching lines @@
         $('user-email-table').hidden = true;
 
         // this also means we are in privacy mode, so no saved screenshots.
         $('screenshot-link-tosaved').hidden = true;
       }
     }
   }
 }
 
 window.addEventListener('DOMContentLoaded', load);