Accidentally deleted ALL Chrome cookies while trying to view some

Question

I was trying to view the cookies in Chrome and perhaps delete them for a specific site. I tried to click the search box to enter some text to view just the cookies for the specific site, but accidentally ended up clicking the [Remove All] button because they are so close together:

Now I’ve lost all of my Chrome cookies which means having to re-login to every single site, as well as losing progress in online games, settings of web applications, and so on.

This is horrible! Why would the Chrome designers put the button to delete everything so close to a field that is expected to be clicked? Worse, why would they make it an instant-action button with no confirmation prompt‽

Is there anything I can do about this?

Solution

Unfortunately sometimes it seems like the Chrome developers don’t even have a design team (certainly nobody with actual UI/UX knowledge or experience). This is one such example, and a destructive and costly one at that.

A bug-report has already been filed about this, but it has been “untriaged” (read unimportant), and may very well end up fester, unaddressed indefinitely until it is automatically closed.

There’s no (practical?) way to recover the lost cookies short of restoring a backup, but fortunately, there is a step you can take to at mitigate the problem in the future. You can easily reduce (or if you choose, completely eliminate) the chances of accidentally deleting all of your cookies in Chrome, and make it fast and easy to search for cookies instead of moving really slowly and carefully to avoid clicking that button.

Because the cookie-management dialog is just a web page, and thankfully the button has a unique ID (though more for technical reasons than foresight or decency on the part of the devs), you can add modify the button via the user style sheet:

1. Open your User Data directory
2. Open the User StyleSheets folder
3. Open the file Custom.css in a text-editor

4. Add the following rule:

   /*Shrink and move the Remove All cookies button in the
    cookies dialog to avoid accidentally deleting all cookies*/
   
   button.remove-all-cookies-button {
     margin     : -10px 50px 25px 0px !important;
     padding    : 0.25em  !important;
     font-size  : 0.75em  !important;
     min-width  : inherit !important;
     min-height : inherit !important;
   }
   

   • (You can also disable or even hide it altogether—or whatever else you want—with the appropriate CSS.)
5. Save the file
6. Check the page chrome://settings/cookies

The [Remove All] button should now be smaller and away from other parts of the page that you will likely click:

Comments

[Synetech]

Hmm, a hit-and-run downvoter. Either they like accidentally losing all of their cookies, or they are a bitter Chrome dev who thinks that they did nothing wrong with this horrible design. ◔_◔

[Synetech]

This is exactly the reason that down-votes should not be anonymous, they allow for meaningless revenge-voting with no accountability.

[Synetech]

While you’re at it, you might also want to extend the download list in chrome://downloads so that the entries are not truncated for no reason: div#downloads-display, div.title-area span.name, div.download a.src-url   {max-width:inherit !important;}   ↵   div.download a.src-url   {width:100% !important;}

[Synetech]

I even use the style sheet to fix the log page of my router to make it more readable. ;-) 😉